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 #258cfb;
}

/* Shared "recently actioned" row highlight, used by TPS/TVQ, Companies, and Teams tables. */
tr.row-recently-actioned {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
  background-color: rgba(13, 110, 253, 0.1);
}

/* Same "recently actioned" cue for a selected pill-toggle (e.g. the Receiving company list). */
.pill-toggle.pill-recently-actioned {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 999px;
}

/* Home dashboard: collapsible per-company groups on the pending-actions board. Each item
   collapses/expands independently (not a strict single-open accordion). */
.home-company-accordion .accordion-item {
  border: 1px solid #e5edf5;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 88, 159, 0.08);
}

.home-company-accordion .home-group-header-row {
  background-color: #f8fafc;
}

.home-company-accordion .accordion-button {
  font-weight: 600;
  font-size: 1.05rem;
  color: #00589f;
  background-color: transparent;
  border-left: 4px solid #00589f;
  padding: 0.65rem 1rem;
}

.home-company-accordion .accordion-button:hover {
  background-color: #eef4fa;
}

.home-company-accordion .accordion-button:not(.collapsed) {
  color: #00589f;
  background-color: #eef4fa;
  box-shadow: none;
}

.home-company-accordion .accordion-button:focus {
  box-shadow: none;
  border-color: #00589f;
}

.home-company-accordion .home-group-actions {
  padding: 0 0.75rem;
  flex-shrink: 0;
}

/* Mobile / tablet: the header's action buttons ("Open", "Chat", "Mark all as read/done")
   don't fit alongside the company name — drop them onto their own full-width row and let
   them wrap. */
@media (max-width: 991.98px) {
  .home-company-accordion .home-group-header-row {
    flex-wrap: wrap;
  }

  .home-company-accordion .home-group-header-row > .accordion-header {
    flex: 1 1 100%;
  }

  .home-company-accordion .home-group-actions {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem 0.6rem;
    border-top: 1px solid #e5edf5;
  }

  .home-company-accordion .home-group-actions .btn {
    flex: 0 1 auto;
  }
}

.home-company-accordion .accordion-body {
  padding: 0;
}

/* "Team hours this week" — its own card on the Home board, IT / Administrator only
   (_HomeTeamHours.cshtml). Weekly logged "Working time" hours vs each member's scheduled week. */
.team-hours-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.9rem;
}

.team-hours-section-head h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bs-body-color, #212529);
}

.team-hours-section-head .team-hours-total {
  font-size: 0.8rem;
  color: #6c757d;
  font-variant-numeric: tabular-nums;
}

.team-hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.team-hours-card {
  border: 1px solid #e6e8ec;
  border-radius: 0.75rem;
  padding: 0.85rem 0.9rem;
  background-color: #fff;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.team-hours-card:hover {
  border-color: #d3d7de;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
}

.team-hours-card-top {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.team-hours-avatar {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background-color: #868e96;
  letter-spacing: 0.02em;
}

.team-hours-avatar.is-female { background-color: #e64980; }
.team-hours-avatar.is-male { background-color: #4c6ef5; }

.team-hours-name {
  flex-grow: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bs-body-color, #212529);
}

.team-hours-pct {
  flex-shrink: 0;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #00589f;
}

.team-hours-card.is-complete .team-hours-pct { color: #2f9e44; }
.team-hours-card.is-over .team-hours-pct { color: #e8590c; }

.team-hours-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background-color: #eef0f3;
  overflow: hidden;
}

.team-hours-fill {
  height: 100%;
  border-radius: 999px;
  background-color: #00589f;
  transition: width 0.4s ease;
}

.team-hours-card.is-complete .team-hours-fill { background-color: #2f9e44; }
.team-hours-card.is-over .team-hours-fill { background-color: #e8590c; }

.team-hours-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-size: 0.76rem;
  color: #6c757d;
  font-variant-numeric: tabular-nums;
}

.team-hours-meta .team-hours-remaining { font-weight: 600; }
.team-hours-card.is-over .team-hours-meta .team-hours-remaining { color: #e8590c; }

/* "Overall load" — the whole team's logged hours vs their combined scheduled week,
   shown as one wide bar above the per-member grid. */
.team-hours-overall {
  border: 1px solid #e6e8ec;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  background-color: #f8f9fb;
  margin-bottom: 1rem;
}

.team-hours-overall-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.team-hours-overall-label {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--bs-body-color, #212529);
}

.team-hours-overall-count {
  margin-left: 0.5rem;
  font-weight: 500;
  font-size: 0.8rem;
  color: #6c757d;
  font-variant-numeric: tabular-nums;
}

.team-hours-overall-pct {
  font-weight: 700;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: #00589f;
}

.team-hours-overall-track { height: 0.7rem; }

.team-hours-overall.is-complete .team-hours-overall-pct { color: #2f9e44; }
.team-hours-overall.is-over .team-hours-overall-pct { color: #e8590c; }
.team-hours-overall.is-complete .team-hours-fill { background-color: #2f9e44; }
.team-hours-overall.is-over .team-hours-fill { background-color: #e8590c; }
.team-hours-overall.is-over .team-hours-meta .team-hours-remaining { color: #e8590c; }

/* Tax cycle summary badge pills (_TaxCycleSummaryBadges.cshtml). Sizing (gap/padding/font-size)
   stays inline since it scales per-instance via the partial's Scale parameter; only the static
   shape/color properties, which used to be repeated inline on every badge variant, live here. */
.badge-pill {
  border-radius: 999px;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.badge-pill-white {
  background: #fff;
  border: 1px solid #dee2e6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.badge-pill-green {
  background: linear-gradient(135deg, #198754, #157347);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(25, 135, 84, 0.25);
}

.badge-pill-blue {
  background: linear-gradient(135deg, #00589f, #0d6efd);
  color: #fff;
  font-weight: 600;
}

.badge-pill-red {
  background: linear-gradient(135deg, #dc3545, #b02a37);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25);
}

.badge-ring {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}

.page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
}

.page-loader.show {
  opacity: 1;
  visibility: visible;
}

.page-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.page-loader-ring {
  position: relative;
  width: 96px;
  height: 96px;
}

.page-loader-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.page-loader-ring-track {
  fill: none;
  stroke: rgba(0, 88, 159, 0.15);
  stroke-width: 8;
}

.page-loader-ring-fill {
  fill: none;
  stroke: #00589f;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 263.89;
  stroke-dashoffset: 263.89;
  transition: stroke-dashoffset 0.2s ease-out;
}

.page-loader-ring-percent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00589f;
  font-weight: 700;
  font-size: 1.3rem;
}

.page-loader-text {
  color: #00589f;
  font-weight: 500;
  font-size: 0.9rem;
}

::selection {
  background-color: #00589f;
  color: #fff;
}

::-moz-selection {
  background-color: #00589f;
  color: #fff;
}

html {
  scrollbar-gutter: stable;
  scrollbar-color: #b0b0b0 #f1f1f1;
}

::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #b0b0b0;
  border-radius: 7px;
  border: 3px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8a8a8a;
}

.table > :not(caption) > tr.team-row-inactive > * {
  background-color: darkgrey;
  color: #fff;
}

/* References/Teams: a fixed neutral person icon before the name. Live presence
   (the team has an open, signed-in session) is shown by the "Online" pill in the
   same cell, toggled live over SignalR — not by recolouring the icon. */

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
  background-color: #00589f;
  border-color: #00589f;
  color: #fff;
}

.btn-primary {
  background-color: #00589f;
  border-color: #00589f;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: #00589f;
  border-color: #00589f;
}

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

body {
  overflow-x: hidden;
}

.app-shell {
  display: flex;
  min-height: 100vh;
}

.mobile-topbar {
  display: none;
}

.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.menu-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: #fff;
  border-radius: 1px;
}

.sidebar-backdrop {
  display: none;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  background-color: #00589F;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: width 0.25s ease;
}

.sidebar-collapse-toggle {
  display: none;
  position: fixed;
  top: 50%;
  left: 280px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  background-color: #fff;
  color: #00589f;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  transition: left 0.25s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  z-index: 1030;
}

.sidebar-collapse-toggle:hover {
  background-color: #f1f3f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.sidebar-collapse-toggle svg {
  width: 13px;
  height: 13px;
  transition: transform 0.25s ease;
}

.app-shell.sidebar-collapsed .sidebar-collapse-toggle {
  left: 14px;
}

.app-shell.sidebar-collapsed .sidebar-collapse-toggle svg {
  transform: rotate(180deg);
}

.app-shell.sidebar-collapsed .sidebar {
  width: 0;
  overflow: hidden;
}

.sidebar-brand {
  padding: 1rem 1.25rem;
}

.sidebar-brand a {
  display: block;
  color: #fff;
  text-decoration: none;
}

.sidebar-brand img {
  max-width: 100%;
  height: auto;
  display: block;
}

.sidebar-user {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.sidebar-user-info {
  overflow: hidden;
  min-width: 0;
}

.sidebar-user-name {
  display: block;
  color: #fff;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user-role {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-unread-badge {
  margin-top: 0.4rem;
  text-decoration: none;
  font-size: 0.85rem;
  max-width: 100%;
}

.sidebar-unread-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.sidebar-unread-badge:hover {
  opacity: 0.85;
}

.sidebar-nav {
  padding: 0.5rem 0;
  flex: 1;
}

.sidebar-footer {
  padding: 0.85rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 0.6875rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
}

/* Credit text is "line one<br>line two" — keep it to exactly two lines */
.sidebar-credit {
  font-size: 0.625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.sidebar-footer a {
  color: rgba(255, 255, 255, 0.9);
  display: inline-block;
  margin-top: 0.35rem;
}

.sidebar-footer a:hover {
  color: #fff;
}

.sidebar-version {
  margin-top: 0.4rem;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.45);
}

/* Globe shown after the build stamp only when this instance is wired to the online (remote) DB */
.sidebar-version-online {
  margin-left: 0.3rem;
  vertical-align: -1px;
  color: rgba(255, 255, 255, 0.6);
}

/* Today's work-schedule progress bar (sidebar, under the user block) */
.sched-bar {
  padding: 0.65rem 1.25rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.sched-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.sched-bar-title {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
}

.sched-bar-status {
  font-size: 0.72rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.sched-bar-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.2);
}

.sched-bar-lunch {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.28);
}

.sched-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.92);
  transition: width 0.3s ease, background-color 0.3s ease;
}

/* On break — tint the fill amber until the person is back from break. */
.sched-bar-fill.is-lunch {
  background-color: #ffd43b;
}

.sched-bar-now {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 12px;
  border-radius: 1px;
  background-color: #ffd43b;
  transform: translateX(-1px);
}

.sched-bar-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.55);
}

.sidebar-lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.sidebar-lang-link {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  margin-top: 0;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
}

.sidebar-lang-link:hover {
  color: #fff;
}

.sidebar-lang-link.active {
  color: #fff;
  font-weight: 700;
  background-color: rgba(255, 255, 255, 0.18);
}

.sidebar-lang-sep {
  color: rgba(255, 255, 255, 0.35);
}

.sidebar-sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.1rem 0.3rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border-radius: 0.25rem;
  cursor: pointer;
  line-height: 0;
}

.sidebar-sound-toggle:hover {
  color: #fff;
}

.sidebar-sound-toggle.is-muted {
  color: rgba(255, 255, 255, 0.35);
}

.sidebar-sound-off {
  display: none;
}

.sidebar-sound-toggle.is-muted .sidebar-sound-on {
  display: none;
}

.sidebar-sound-toggle.is-muted .sidebar-sound-off {
  display: inline;
}

.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: rgba(255, 255, 255, 0.9);
  padding: 0.65rem 1.25rem;
  border-left: 3px solid transparent;
}

.sidebar-nav .nav-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.sidebar-nav .nav-icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-nav .nav-link-toggle {
  justify-content: space-between;
  cursor: pointer;
}

.sidebar-nav .nav-caret {
  display: inline-flex;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.sidebar-nav .nav-caret svg {
  width: 100%;
  height: 100%;
}

.sidebar-nav .nav-link-toggle[aria-expanded="true"] .nav-caret {
  transform: rotate(-180deg);
}

.sidebar-subnav .nav-link {
  padding-left: 3.15rem;
}

/* Unread-message count appended to the "Inbox/Sent" nav label, e.g. "Inbox/Sent (1)".
   Toggled live by refreshSidebarEmailBadge(). Orange to match the notification colour. */
.sidebar-nav .nav-msg-count {
  font-weight: 700;
  color: #fd7e14;
}

/* Orange pill for unread-message counts on the Inbox/Sent page (inbox tab). */
.msg-count-badge {
  background-color: #fd7e14;
  color: #fff;
}

/* Transient "N new message(s)" toast shown when a message arrives over SignalR. */
.app-msg-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1090;
  transform: translateY(140%);
  transition: transform 0.28s ease;
}

.app-msg-toast.show { transform: translateY(0); }

.app-msg-toast a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: 0.5rem;
  background-color: #fd7e14;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.25);
  max-width: min(28rem, calc(100vw - 2rem));
}

.app-msg-toast a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-msg-toast a:hover { background-color: #e8720f; color: #fff; }

.sidebar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.sidebar-nav .nav-link.active {
  background-color: rgba(255, 255, 255, 0.18);
  border-left-color: #fff;
  color: #fff;
}

.main-content {
  flex-grow: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.main-content main {
  flex: 1;
  padding-top: 1.5rem;
}

@media (min-width: 992px) {
  .sidebar-collapse-toggle {
    display: inline-flex;
  }

  /* The page (body) is the scroll container, and the sidebar is just a tall
     flex column inside it — so without this the right-hand scrollbar drags the
     Side Panel Menu out of view along with the content. Pin it to the viewport
     and let its own list scroll internally when the menu is long. */
  .sidebar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
  }
}

@media (max-width: 991.98px) {
  .app-shell {
    flex-direction: column;
  }

  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #00589F;
    color: #fff;
    padding: 0.75rem 1rem;
    position: sticky;
    top: 0;
    z-index: 1050;
  }

  .mobile-topbar-brand {
    display: block;
    color: #fff;
    text-decoration: none;
  }

  .mobile-topbar-brand img {
    height: 28px;
    width: auto;
    display: block;
  }

  .mobile-topbar-brand-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }

  .mobile-topbar-user {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    margin-right: 0.85rem;
    padding-left: 0.5rem;
    min-width: 0;
    color: #fff;
    font-size: 1rem;
    flex-shrink: 1;
  }

  .mobile-topbar-user-icon {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
  }

  .mobile-topbar-user-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .mobile-topbar-brand {
    flex-shrink: 0;
  }

  .mobile-topbar-notification-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: #fd7e14;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;
    flex-shrink: 1;
  }

  .mobile-topbar-notification-badge svg {
    flex-shrink: 0;
  }

  .mobile-topbar-notification-badge span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .mobile-topbar-notification-badge:hover {
    opacity: 0.85;
    color: #fff;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1055;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0.5rem 0 1rem rgba(0, 0, 0, 0.25);
  }

  .sidebar.show {
    transform: translateX(0);
  }

  .sidebar-brand {
    display: none;
  }

  .sidebar-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
  }

  .main-content {
    width: 100%;
  }
}

.pill-color-0 { --pill-bg: #e7f1ff; --pill-fg: #0d6efd; }
.pill-color-1 { --pill-bg: #e6f9f0; --pill-fg: #198754; }
.pill-color-2 { --pill-bg: #f3e8fd; --pill-fg: #6f42c1; }
.pill-color-3 { --pill-bg: #fff3e0; --pill-fg: #fd7e14; }
.pill-color-4 { --pill-bg: #fde8ec; --pill-fg: #d63384; }
.pill-color-5 { --pill-bg: #e0f7fa; --pill-fg: #0aa2b8; }
.pill-color-6 { --pill-bg: #eef0ff; --pill-fg: #4c5fd5; }
.pill-color-7 { --pill-bg: #fdf3d8; --pill-fg: #b8860b; }
.pill-document { --pill-bg: #00589f; --pill-fg: #fff; }
.pill-submission { --pill-bg: #fd7e14; --pill-fg: #fff; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  margin: 0.15rem 0.35rem 0.15rem 0;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  background-color: var(--pill-bg, #e9ecef);
  color: var(--pill-fg, #495057);
}

/* A .pill rendered as a <button> (clickable action pill). */
button.pill,
.pill-btn {
  border: none;
  cursor: pointer;
}

button.pill:hover,
.pill-btn:hover {
  filter: brightness(0.93);
}

/* Date-group header rows inside the TPS/TVQ "Log" (history) modal */
#logHistoryTable .log-date-group > td {
  background: #eef2f7;
  border-top: 2px solid #d5deea;
  padding: 0.4rem 0.75rem;
}

#logHistoryTable .log-date-group:first-child > td {
  border-top: 0;
}

.log-date-group-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #495057;
}

.log-date-group-count {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #d5deea;
  color: #495057;
  font-size: 0.7rem;
  font-weight: 600;
}

.pill-toggle {
  position: relative;
  display: inline-flex;
}

.pill-toggle input[type="checkbox"],
.pill-toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.pill-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  border: 1.5px solid #dee2e6;
  background-color: #fff;
  color: #6c757d;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.pill-toggle input[type="checkbox"]:checked + label,
.pill-toggle input[type="radio"]:checked + label {
  background-color: var(--pill-bg);
  color: var(--pill-fg);
  border-color: var(--pill-bg);
}

.pill-toggle input[type="checkbox"]:focus-visible + label,
.pill-toggle input[type="radio"]:focus-visible + label {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

.pill-toggle.pill-document label:hover,
.pill-toggle.pill-submission label:hover {
  background-color: var(--pill-bg);
  color: var(--pill-fg);
  border-color: var(--pill-bg);
}

.pill-toggle-sm label {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
}

/* Receiving: green dot on Bank Statement month pills when the company has
   online-banking access (statements can be pulled from the bank portal). */
.online-banking-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 0.35rem;
  border-radius: 50%;
  background-color: #28a745;
  box-shadow: 0 0 0 1.5px #fff;
  vertical-align: middle;
}

/* Receiving: the header bar (document name + "All" toggle) above each row of month pills. */
.receive-doc-header {
  background-color: #00589f;
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.receive-doc-name {
  font-size: 1.2rem;
}

/* Receiving: orange ring highlighting a pill — the month pill(s) belonging to the
   company's active filing period, and a fully-received company's pill on the company list. */
.pill-toggle.pill-document-current label {
  border-color: #f0ad4e;
  box-shadow: 0 0 0 1.5px #f0ad4e;
}

.pill-toggle.pill-document-current input[type="checkbox"]:checked + label {
  box-shadow: 0 0 0 1.5px #f0ad4e inset;
}

/* Receiving: a document/period pill matching a document the company has uploaded through the
   Portal — solid orange background instead of the pill's usual color, whether checked or not. */
.pill-toggle.pill-document-portal label {
  background-color: #fd7e14;
  color: #fff;
  border-color: #fd7e14;
}

.pill-toggle.pill-document-portal label:hover {
  filter: brightness(0.93);
}

/* Small clickable icon inside a portal-matched pill — jumps to Receiving/Portal instead of
   toggling the pill's received checkbox. */
.portal-upload-icon {
  display: inline-flex;
  cursor: pointer;
  opacity: 0.85;
}

.portal-upload-icon:hover {
  opacity: 1;
}

.form-section {
  margin-bottom: 1.1rem;
  background-color: #f8f9fb;
  border: 1px solid #e9ecef;
  border-radius: 0.65rem;
  padding: 1rem 1.15rem 0.25rem;
}

.form-section-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #00589f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #dee2e6;
}

.compact-form .form-label {
  margin-bottom: 0.25rem;
}

.toggle-brand.form-check-input:checked {
  background-color: #00589f;
  border-color: #00589f;
}

.toggle-brand.form-check-input:focus {
  border-color: #00589f;
  box-shadow: 0 0 0 0.25rem rgba(0, 88, 159, 0.25);
}

#companyPillGroup .pill-toggle label:hover,
#companyPillGroup .pill-toggle input:checked + label,
#exceptionalPillGroup .pill-toggle label:hover,
#exceptionalPillGroup .pill-toggle input:checked + label,
#teamFilterGroup .pill-toggle label:hover,
#teamFilterGroup .pill-toggle input:checked + label,
#statusFilterGroup .pill-toggle label:hover,
#statusFilterGroup .pill-toggle input:checked + label {
  background-color: #00589f;
  color: #fff;
  border-color: #00589f;
}

/* Generate Exceptionally: companies already in the month can't be picked — keep them muted. */
#exceptionalPillGroup .pill-toggle input:disabled + label,
#exceptionalPillGroup .pill-toggle input:disabled + label:hover {
  background-color: #f1f3f5;
  color: #6c757d;
  border-color: #dee2e6;
  opacity: 0.65;
  cursor: not-allowed;
}

/* "Pending" summary pill on the Status Filter: pale gold at rest, deep amber + white
   text when selected — kept clearly distinct from the lighter "Payment" status colour. */
#statusFilterGroup #statusFilter-pending + label {
  background-color: #fff8e1;
  color: #8a6d1f;
  border-color: #f0d488;
}

#statusFilterGroup #statusFilter-pending + label:hover,
#statusFilterGroup #statusFilter-pending:checked + label {
  background-color: #8a5a00;
  color: #fff;
  border-color: #8a5a00;
}

#statusFilterGroup .pill-toggle label.pill-blocked:hover,
#statusFilterGroup .pill-toggle input:checked + label.pill-blocked,
#addActionOptionsGroup .pill-toggle label.pill-blocked:hover,
#addActionOptionsGroup .pill-toggle input:checked + label.pill-blocked {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

/* Team pills (TPS/TVQ Team Filter + Take Action "Assign To", and any other .team-pill-group —
   e.g. the Reminders "Assigned" picker) are tinted by the team member's Sex — pink for Female,
   blue for Male. */
#teamFilterGroup .pill-toggle.team-pill-female label,
#addActionAssignGroup .pill-toggle.team-pill-female label,
.team-pill-group .pill-toggle.team-pill-female label {
  background-color: #fde8ef;
  color: #c2255c;
  border-color: #f4c6da;
}

#teamFilterGroup .pill-toggle.team-pill-female label:hover,
#teamFilterGroup .pill-toggle.team-pill-female input:checked + label,
#addActionAssignGroup .pill-toggle.team-pill-female label:hover,
#addActionAssignGroup .pill-toggle.team-pill-female input:checked + label,
.team-pill-group .pill-toggle.team-pill-female label:hover,
.team-pill-group .pill-toggle.team-pill-female input:checked + label {
  background-color: #e64980;
  color: #fff;
  border-color: #e64980;
}

#teamFilterGroup .pill-toggle.team-pill-male label,
#addActionAssignGroup .pill-toggle.team-pill-male label,
.team-pill-group .pill-toggle.team-pill-male label {
  background-color: #e2edf7;
  color: #00589f;
  border-color: #c3d7e9;
}

#teamFilterGroup .pill-toggle.team-pill-male label:hover,
#teamFilterGroup .pill-toggle.team-pill-male input:checked + label,
#addActionAssignGroup .pill-toggle.team-pill-male label:hover,
#addActionAssignGroup .pill-toggle.team-pill-male input:checked + label,
.team-pill-group .pill-toggle.team-pill-male label:hover,
.team-pill-group .pill-toggle.team-pill-male input:checked + label {
  background-color: #00589f;
  color: #fff;
  border-color: #00589f;
}

/* Static pill for TPS/TVQ table cells — "Responsible" / "Assigned to" (team, sex-tinted
   like the Team Filter pills) and "Last action" (icon + action name). Not interactive. */
.team-tag,
.action-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
}

.team-tag > span,
.action-tag > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Team tag: neutral by default, pink / blue tint by the member's Sex. */
.team-tag {
  background-color: #f1f3f5;
  color: #495057;
  border-color: #dee2e6;
}

.team-tag.team-tag-female {
  background-color: #fde8ef;
  color: #c2255c;
  border-color: #f4c6da;
}

.team-tag.team-tag-male {
  background-color: #e2edf7;
  color: #00589f;
  border-color: #c3d7e9;
}

/* Last-action tag: solid fill like a selected Status Filter pill / the row's Status
   badge. --at-bg / --at-fg are the matching status colours for the phase actions;
   every other action falls back to solid brand blue with white text. */
.action-tag {
  background-color: var(--at-bg, #00589f);
  color: var(--at-fg, #fff);
  border-color: var(--at-bg, #00589f);
}

.action-tag > svg {
  color: var(--at-fg, #fff);
  flex-shrink: 0;
}

#statusFilterGroup .pill-toggle label.pill-done:hover,
#statusFilterGroup .pill-toggle input:checked + label.pill-done,
#addActionOptionsGroup .pill-toggle label.pill-done:hover,
#addActionOptionsGroup .pill-toggle input:checked + label.pill-done {
  background-color: #198754;
  color: #fff;
  border-color: #198754;
}

#statusFilterGroup .pill-toggle label.pill-progress:hover,
#statusFilterGroup .pill-toggle input:checked + label.pill-progress,
#addActionOptionsGroup .pill-toggle label.pill-progress:hover,
#addActionOptionsGroup .pill-toggle input:checked + label.pill-progress {
  background-color: #ffc107;
  color: #212529;
  border-color: #ffc107;
}

/* Status Filter pills mirror the row status badge colors (Statuses.Color, passed as --sf-bg/--sf-fg):
   a light tint of the status colour at rest, the full status colour on hover / when selected. */
#statusFilterGroup .pill-toggle.pill-status label {
  background-color: #f1f3f5;
  background-color: color-mix(in srgb, var(--sf-bg, #e9ecef) 14%, #fff);
  color: #343a40;
  color: color-mix(in srgb, var(--sf-bg, #495057) 62%, #1b1f24);
  border-color: #dee2e6;
  border-color: color-mix(in srgb, var(--sf-bg, #e9ecef) 30%, #fff);
}

#statusFilterGroup .pill-toggle.pill-status label:hover,
#statusFilterGroup .pill-toggle.pill-status input:checked + label {
  background-color: var(--sf-bg, #e9ecef);
  color: var(--sf-fg, #fff);
  border-color: var(--sf-bg, #e9ecef);
}

#statusFilterGroup .pill-toggle.pill-status input:checked + label {
  font-weight: 600;
  /* Some status colours (e.g. "New" #E9ECEF) are so light that the selected fill is
     almost the same as the unselected tint. A darkened ring + border derived from the
     status colour makes "selected" unmistakable on light pills and stays subtle on
     the already-obvious dark ones. */
  border-color: color-mix(in srgb, var(--sf-bg, #495057) 58%, #1b1f24);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sf-bg, #495057) 34%, #1b1f24);
}

/* Take Action "Assign To" — real team pills (not the Sex-tinted or the static Unassigned/Myself):
   a light tint of the pill's own colour at rest, the full colour + white text on hover / selected. */
#addActionAssignGroup .pill-toggle label {
  background-color: var(--pill-bg, #f1f3f5);
  color: var(--pill-fg, #495057);
  border-color: #dee2e6;
  border-color: color-mix(in srgb, var(--pill-fg, #ced4da) 22%, #fff);
}

#addActionAssignGroup .pill-toggle label:hover,
#addActionAssignGroup .pill-toggle input:checked + label {
  background-color: var(--pill-fg, #6c757d);
  color: #fff;
  border-color: var(--pill-fg, #6c757d);
}

#addActionAssignGroup .pill-toggle input:checked + label {
  font-weight: 600;
}

/* Missing Documents — the in-table "Assign" (Responsible) pill and its team picker.
   The picker reuses the Take Action "Assign To" pill look; the in-cell control is a
   dashed call-to-action until a team is chosen, then a solid team tag. */
.assign-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1.5px dashed #adb5bd;
  background: #fff;
  color: #6c757d;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.assign-pill:hover {
  border-color: #00589f;
  color: #00589f;
}

button.team-tag {
  cursor: pointer;
}

button.team-tag:hover {
  filter: brightness(0.96);
}

.mdocs-calls-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1.5px solid #dee2e6;
  background: #fff;
  color: #6c757d;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}

.mdocs-calls-pill:hover {
  border-color: #00589f;
  color: #00589f;
}

.mdocs-last-call-note {
  max-width: 180px;
  overflow: hidden;
  white-space: nowrap;
}

/* Call-outcome segmented toggle in the "Log a call" form — answered (green phone) vs
   no answer (red phone-x). Replaces a plain checkbox. */
.call-outcome-toggle {
  display: inline-flex;
  border: 1.5px solid #dee2e6;
  border-radius: 999px;
  overflow: hidden;
}

.call-outcome-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.call-outcome-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0.3rem 0.85rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #6c757d;
  background: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.call-outcome-toggle label:last-child {
  border-left: 1.5px solid #dee2e6;
}

.call-outcome-toggle label:hover {
  background: #f1f3f5;
}

.call-outcome-toggle input:checked + label.call-outcome-yes {
  background: #198754;
  color: #fff;
}

.call-outcome-toggle input:checked + label.call-outcome-no {
  background: #dc3545;
  color: #fff;
}

.call-outcome-toggle input:checked + label.call-outcome-neutral {
  background: #00589f;
  color: #fff;
}

.call-outcome-toggle input:focus-visible + label {
  outline: 2px solid #0d6efd;
  outline-offset: -2px;
}

.call-outcome-toggle--full {
  display: flex;
  width: 100%;
}

.call-outcome-toggle--full label {
  flex: 1 1 0;
  justify-content: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

/* "Log a call" form — a soft card with a titled header strip. */
.call-log-form {
  border: 1px solid #e3e8ef;
  border-radius: 0.75rem;
  background: #fff;
  overflow: hidden;
}

.call-log-form__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(180deg, #f7f9fc, #eef2f7);
  border-bottom: 1px solid #e3e8ef;
  font-weight: 600;
  font-size: 0.85rem;
  color: #00589f;
}

.call-log-form__body {
  padding: 1rem;
}

.call-log-form__label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #6c757d;
}

/* Chase-call history entries — slightly softer than a plain bordered box. */
#callsHistory > .call-entry {
  border: 1px solid #e9edf3;
  border-radius: 0.6rem;
  padding: 0.6rem 0.75rem;
  background: #fbfcfe;
}

#assignResponsibleGroup .pill-toggle label {
  background-color: var(--pill-bg, #f1f3f5);
  color: var(--pill-fg, #495057);
  border-color: color-mix(in srgb, var(--pill-fg, #ced4da) 22%, #fff);
}

#assignResponsibleGroup .pill-toggle label:hover,
#assignResponsibleGroup .pill-toggle input:checked + label {
  background-color: var(--pill-fg, #6c757d);
  color: #fff;
  border-color: var(--pill-fg, #6c757d);
}

#assignResponsibleGroup .pill-toggle input:checked + label {
  font-weight: 600;
}

#assignResponsibleGroup .pill-toggle.team-pill-female label {
  background-color: #fde8ef;
  color: #c2255c;
  border-color: #f4c6da;
}

#assignResponsibleGroup .pill-toggle.team-pill-female label:hover,
#assignResponsibleGroup .pill-toggle.team-pill-female input:checked + label {
  background-color: #e64980;
  color: #fff;
  border-color: #e64980;
}

#assignResponsibleGroup .pill-toggle.team-pill-male label {
  background-color: #e2edf7;
  color: #00589f;
  border-color: #c3d7e9;
}

#assignResponsibleGroup .pill-toggle.team-pill-male label:hover,
#assignResponsibleGroup .pill-toggle.team-pill-male input:checked + label {
  background-color: #00589f;
  color: #fff;
  border-color: #00589f;
}

#assignResponsibleGroup .pill-toggle.pill-static-blue label {
  background-color: #fff;
  color: #6c757d;
  border-color: #dee2e6;
}

#assignResponsibleGroup .pill-toggle.pill-static-blue label:hover,
#assignResponsibleGroup .pill-toggle.pill-static-blue input:checked + label {
  background-color: #00589f;
  color: #fff;
  border-color: #00589f;
}

/* Take Action form — plain pills that stay neutral at rest and take a solid fill (white text)
   on hover / when selected:
   - every Action pill (#addActionOptionsGroup) — Competa-blue, except Block which is red
   - the Assign To "Unassigned" / "Myself" pills — Competa-blue */
#addActionOptionsGroup .pill-toggle.pill-static-blue label,
#addActionOptionsGroup .pill-toggle.pill-static-red label,
#addActionAssignGroup .pill-toggle.pill-static-blue label,
.team-pill-group .pill-toggle.pill-static-blue label {
  background-color: #fff;
  color: #6c757d;
  border-color: #dee2e6;
}

#addActionOptionsGroup .pill-toggle.pill-static-blue label:hover,
#addActionOptionsGroup .pill-toggle.pill-static-blue input:checked + label,
#addActionAssignGroup .pill-toggle.pill-static-blue label:hover,
#addActionAssignGroup .pill-toggle.pill-static-blue input:checked + label,
.team-pill-group .pill-toggle.pill-static-blue label:hover,
.team-pill-group .pill-toggle.pill-static-blue input:checked + label {
  background-color: #00589f;
  color: #fff;
  border-color: #00589f;
}

#addActionOptionsGroup .pill-toggle.pill-static-red label:hover,
#addActionOptionsGroup .pill-toggle.pill-static-red input:checked + label {
  background-color: #dc3545;
  color: #fff;
  border-color: #dc3545;
}

.table-header-highlight thead th {
  background-color: #00589f;
  color: #fff;
  border-color: #00589f;
}

/* Audit log group headers — day (outer) → team member (inner) */
.audit-group-header td {
  padding: 0;
  background-color: #eef3f9;
  border-top: 2px solid #d3e0ef;
}

.audit-group-header.lvl-team td {
  background-color: #f6f9fc;
  border-top: 1px solid #e2e9f1;
}

.audit-date-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: #00427a;
  text-align: left;
  cursor: pointer;
}

.audit-group-header.lvl-team .audit-date-toggle {
  padding-left: 2.25rem;
  font-weight: 500;
  font-size: 0.9rem;
}

.audit-date-toggle:hover {
  background-color: #e3edf7;
}

.audit-group-header.lvl-team .audit-date-toggle:hover {
  background-color: #eef3f9;
}

.audit-chevron {
  flex: none;
  transition: transform 0.15s ease;
}

.audit-date-toggle[aria-expanded="false"] .audit-chevron {
  transform: rotate(-90deg);
}

.audit-date-label {
  flex: 1 1 auto;
}

.audit-date-count {
  flex: none;
  min-width: 1.5rem;
  padding: 0.05rem 0.5rem;
  border-radius: 999px;
  background-color: rgba(0, 66, 122, 0.12);
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
}

.home-unread-row {
  background-color: rgba(0, 88, 159, 0.07);
  font-weight: 600;
}

.home-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #dc3545;
  margin-right: 6px;
  flex-shrink: 0;
}

.home-message-row {
  cursor: pointer;
}

.home-message-row:hover {
  background-color: rgba(0, 88, 159, 0.12);
}

/* Communication board: a heavier rule between each Month/Year group. */
.home-comm-group-start > td {
  border-top: 2px solid #b6c7da;
}

/* Desktop: period / company are printed only on the first row of each group — later
   rows keep the cell (for column width) but hide the repeated text. */
.home-comm-table .home-comm-cell-repeat {
  visibility: hidden;
}

/* Communication left open more than 2 days: flag the whole row red. */
.home-comm-table tbody tr.home-comm-overdue > td {
  background-color: #f8d0d3;
}

.home-comm-table tbody tr.home-comm-overdue.home-message-row:hover > td {
  background-color: #f4bcc0;
}

/* Mobile / tablet: the 5-column Home/Message pending table doesn't fit — stack each row
   into a card (header row above already wraps its own action buttons). */
@media (max-width: 991.98px) {
  .home-message-table thead {
    display: none;
  }

  .home-message-table,
  .home-message-table tbody,
  .home-message-table tr,
  .home-message-table td {
    display: block;
    width: 100%;
  }

  .home-message-table tr {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #e5edf5;
  }

  .home-message-table td {
    max-width: none !important;
    padding: 0.1rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* "When" + "Action name" columns collapse into one small grey meta line. */
  .home-message-table td:nth-child(2),
  .home-message-table td:nth-child(3) {
    display: inline-block;
    width: auto;
    font-size: 0.8rem;
    color: #6c757d;
  }

  .home-message-table td:nth-child(3) {
    margin-left: 0.6rem;
  }

  .home-message-table td:nth-child(4) {
    margin-top: 0.2rem;
  }

  /* Action buttons: a wrapping full-width row under the message. */
  .home-message-table td:nth-child(5) > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
  }

  .home-message-table td:nth-child(5) .btn {
    flex: 1 1 auto;
  }

  /* Communication board: same treatment — the 6-column table won't fit, so stack
     each open call into a self-contained card. */
  .home-comm-table thead {
    display: none;
  }

  .home-comm-table,
  .home-comm-table tbody,
  .home-comm-table tr,
  .home-comm-table td {
    display: block;
    width: 100%;
  }

  .home-comm-table tr {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #e5edf5;
  }

  .home-comm-table td {
    max-width: none !important;
    padding: 0.1rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  /* Every card stands alone, so show the period / company on each row again. */
  .home-comm-table .home-comm-cell-repeat {
    visibility: visible;
  }

  .home-comm-table .home-comm-period-cell {
    font-size: 0.8rem;
    color: #6c757d;
  }

  .home-comm-table .home-comm-company-cell {
    font-size: 1.05rem;
    margin-bottom: 0.15rem;
  }

  /* "Assigned to" and "When" become small grey meta lines around the message. */
  .home-comm-table td:nth-child(3),
  .home-comm-table td:nth-child(5) {
    font-size: 0.8rem;
    color: #6c757d;
  }

  .home-comm-table td:nth-child(3)::before {
    content: "→ ";
  }

  .home-comm-table td:nth-child(4) {
    margin-top: 0.2rem;
  }

  .home-comm-table td:nth-child(6) {
    margin-top: 0.5rem;
  }

  .home-comm-table td:nth-child(6) .btn,
  .home-comm-table td:nth-child(6) form {
    width: 100%;
  }
}

/* Mobile / tablet: the 11-column TPS/TVQ table can't fit a narrow screen —
   stack every row into a self-contained card. */
@media (max-width: 991.98px) {
  /* hide the column-label header row; keep the column-filter row as a stacked
     panel above the cards (same treatment as the Audit Log table). */
  #tpsTvqTable thead tr:first-child {
    display: none;
  }

  #tpsTvqTable thead tr.tpstvq-filter-row,
  #tpsTvqTable thead tr.tpstvq-filter-row th {
    display: block;
    width: 100%;
  }

  #tpsTvqTable thead tr.tpstvq-filter-row {
    margin-bottom: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #dbe5f1;
    border-radius: 0.65rem;
    background-color: #f8fafc;
  }

  #tpsTvqTable thead tr.tpstvq-filter-row th {
    padding: 0.25rem 0 !important;
    border: 0 !important;
    overflow: visible;
  }

  /* drop the empty filter cells (led / status / when / …) so the panel only
     shows the fields that actually filter something; also drop the payment
     filter when its column is collapsed (no row has reached Payment) */
  #tpsTvqTable thead tr.tpstvq-filter-row th:not([data-filter-label]),
  #tpsTvqTable.hide-payment-col thead tr.tpstvq-filter-row th.tpstvq-payment-col {
    display: none;
  }

  #tpsTvqTable thead tr.tpstvq-filter-row th[data-filter-label]::before {
    content: attr(data-filter-label);
    display: block;
    font-weight: 700;
    color: #8a96a3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
  }

  /* First column on the card layout: the "phases cleared" ticks (and the belated
     delay-clock) become their own little row right above the Status pill — DOM order
     already puts this cell between the company title (order:-1) and the status.
     Empty ones are dropped (they carry .tpstvq-cell-empty). */
  #tpsTvqTable td.tpstvq-led-col {
    display: flex !important;
    position: static;
    align-items: center;
    gap: 4px;
    width: auto !important;
    max-width: none !important;
    padding: 0.1rem 0 0.05rem !important;
    margin: 0;
    text-align: left !important;
  }
  #tpsTvqTable td.tpstvq-led-col .tpstvq-phase-ticks {
    width: auto;
    flex-wrap: nowrap;
    gap: 0 2px;
  }
  #tpsTvqTable td.tpstvq-led-col .tpstvq-phase-tick {
    font-size: 1.15rem;
  }
  #tpsTvqTable td.tpstvq-led-col.tpstvq-cell-empty {
    display: none !important;
  }

  #tpsTvqTable,
  #tpsTvqTable tbody,
  #tpsTvqTable tr,
  #tpsTvqTable td {
    display: block;
    width: 100%;
  }

  /* Flex column so the company name can stay the card title even though
     "Responsible" is now the first table column on desktop. Positioned so the
     phase-LED / belated-clock indicator can anchor to the top-right corner. */
  #tpsTvqTable tbody tr.tpstvq-status-row {
    display: flex;
    flex-direction: column;
    position: relative;
  }
  #tpsTvqTable td.tpstvq-company-cell {
    order: -1;
  }

  #tpsTvqTable tr {
    margin-bottom: 0.85rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #dbe5f1;
    border-radius: 0.65rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  /* kill the striped-row shadow so the card background shows through */
  #tpsTvqTable > tbody > tr > td {
    box-shadow: none !important;
    background-color: transparent !important;
  }

  /* status colour becomes the card's left accent bar */
  #tpsTvqTable > tbody > tr.tpstvq-status-row {
    border-left: 4px solid var(--status-bar, #dbe5f1);
  }

  /* stale ("Belated Job") card: red wash + red accent, mirroring the desktop row */
  #tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-stale {
    background-color: #f8d0d3;
    border-left-color: #dc3545;
  }

  #tpsTvqTable td {
    width: 100% !important;
    max-width: none !important;
    padding: 0.18rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* labelled meta rows: small grey caps prefix */
  #tpsTvqTable td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: #8a96a3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.35rem;
  }

  /* Company name is the card title — no label, larger, own divider. Extra right
     padding keeps a long name clear of the corner-pinned phase-LED indicator. */
  #tpsTvqTable td.tpstvq-company-cell {
    font-size: 1.02rem;
    padding-bottom: 0.35rem !important;
    padding-right: 1.5rem !important;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #eef2f7 !important;
  }

  /* the Status pill speaks for itself */
  #tpsTvqTable td[data-label="Status"]::before {
    content: none;
  }

  /* hide any empty meta cell */
  #tpsTvqTable td.tpstvq-cell-empty {
    display: none !important;
  }

  /* Documents pills wrap onto multiple lines */
  #tpsTvqTable td.tpstvq-documents-cell .d-inline-flex {
    flex-wrap: wrap !important;
  }

  /* Action buttons: full-width wrapping row at the foot of the card */
  #tpsTvqTable td.tpstvq-action-cell {
    margin-top: 0.55rem;
    padding-top: 0.55rem !important;
    border-top: 1px solid #eef2f7 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  #tpsTvqTable td.tpstvq-action-cell form {
    display: flex !important;
    flex: 1 1 auto;
  }

  #tpsTvqTable td.tpstvq-action-cell .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  #tpsTvqTable .tpstvq-action-btn {
    min-width: 0;
  }
}

/* Audit log: collapse the table into stacked cards on narrow screens. */
@media (max-width: 991.98px) {
  /* hide the column-label header row; keep the filter row as a stacked panel */
  #auditLogTable thead tr:first-child {
    display: none;
  }

  #auditLogTable,
  #auditLogTable tbody,
  #auditLogTable tbody tr,
  #auditLogTable tbody td {
    display: block;
    width: 100%;
  }

  #auditLogTable thead tr.audit-filter-row,
  #auditLogTable thead tr.audit-filter-row th {
    display: block;
    width: 100%;
  }

  #auditLogTable thead tr.audit-filter-row {
    margin-bottom: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #dbe5f1;
    border-radius: 0.65rem;
    background-color: #f8fafc;
  }

  #auditLogTable thead tr.audit-filter-row th {
    padding: 0.25rem 0 !important;
    border: 0 !important;
  }

  #auditLogTable thead tr.audit-filter-row th[data-filter-label]::before {
    content: attr(data-filter-label);
    display: block;
    font-weight: 700;
    color: #8a96a3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
  }

  #auditLogTable tbody tr {
    margin-bottom: 0.85rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #dbe5f1;
    border-radius: 0.65rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  #auditLogTable tbody tr > td {
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0.18rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #auditLogTable tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: #8a96a3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.35rem;
  }

  /* "When" is the card title — bigger, its own divider, no label prefix */
  #auditLogTable tbody td[data-label]:first-child {
    font-size: 0.95rem;
    font-weight: 600;
    padding-bottom: 0.35rem !important;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #eef2f7 !important;
  }

  #auditLogTable tbody td[data-label]:first-child::before {
    content: none;
  }
}

/* Reference / listing tables that collapse into stacked cards on narrow screens
   (References ▸ Teams, Receiving ▸ Missing Documents). Same treatment as the
   Audit Log and TPS/TVQ tables: hide the column-label header row, turn the
   column-filter row into a stacked panel, and render each row as a card whose
   first cell is the title and whose meta cells carry a small grey label. */
@media (max-width: 991.98px) {
  .ref-card-table thead tr:first-child {
    display: none;
  }

  .ref-card-table,
  .ref-card-table tbody,
  .ref-card-table tbody tr,
  .ref-card-table tbody td {
    display: block;
    width: 100%;
  }

  /* column-filter row → its own stacked panel above the cards */
  .ref-card-table thead tr.ref-card-filter-row,
  .ref-card-table thead tr.ref-card-filter-row th {
    display: block;
    width: 100%;
  }

  .ref-card-table thead tr.ref-card-filter-row {
    margin-bottom: 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #dbe5f1;
    border-radius: 0.65rem;
    background-color: #f8fafc;
  }

  .ref-card-table thead tr.ref-card-filter-row th {
    padding: 0.25rem 0 !important;
    border: 0 !important;
  }

  .ref-card-table thead tr.ref-card-filter-row th:empty {
    display: none;
  }

  .ref-card-table thead tr.ref-card-filter-row th[data-filter-label]::before {
    content: attr(data-filter-label);
    display: block;
    font-weight: 700;
    color: #8a96a3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.2rem;
  }

  .ref-card-table tbody tr {
    margin-bottom: 0.85rem;
    padding: 0.8rem 0.95rem;
    border: 1px solid #dbe5f1;
    border-radius: 0.65rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  .ref-card-table tbody tr > td {
    box-shadow: none !important;
    background-color: transparent !important;
    max-width: none !important;
    padding: 0.18rem 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .ref-card-table tbody td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 700;
    color: #8a96a3;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.35rem;
  }

  /* first cell = card title — bigger, its own divider, no label prefix */
  .ref-card-table tbody td:first-child {
    font-size: 0.95rem;
    font-weight: 600;
    padding-bottom: 0.35rem !important;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid #eef2f7 !important;
  }

  .ref-card-table tbody td:first-child::before {
    content: none;
  }

  /* action buttons: full-width wrapping row at the foot of the card */
  .ref-card-table tbody td.ref-card-actions {
    margin-top: 0.55rem;
    padding-top: 0.55rem !important;
    border-top: 1px solid #eef2f7 !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .ref-card-table tbody td.ref-card-actions > form {
    display: contents;
  }

  .ref-card-table tbody td.ref-card-actions .btn {
    flex: 1 1 auto;
  }

  /* drop meta / action cells that have no value on this row (declared last so it
     wins over the .ref-card-actions display rule for an empty action cell) */
  .ref-card-table tbody td.ref-card-cell-empty {
    display: none !important;
  }
}

/* Bootstrap nav-tabs (Company Details "Details" / "Email Log"): the selected tab reads
   in brand blue, the rest stay grey until hovered. */
.nav-tabs .nav-link {
  color: #6c757d;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  color: #00589f;
}

.nav-tabs .nav-link.active {
  color: #00589f;
  font-weight: 600;
}

/* TPS/TVQ board: tint each row with its current status pill colour. */
#tpsTvqTable > tbody > tr.tpstvq-status-row > td {
  --bs-table-bg-type: transparent;
  background-color: var(--status-tint, transparent);
}

/* status accent bar on the row's left edge — the 1st cell is the tiny phase-LED column,
   so paint it there but keep the LED dot itself centred (see .tpstvq-led-col). */
#tpsTvqTable > tbody > tr.tpstvq-status-row > td:first-child {
  box-shadow: inset 3px 0 0 var(--status-bar, transparent);
}

/* Last action more than 3 days old (4+ days untouched): flag the whole row red,
   same treatment as an overdue Communication row on Home. Overrides the status tint. */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-stale > td {
  background-color: #f8d0d3;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-stale:hover > td {
  background-color: #f4bcc0;
}

/* Portal Downloads: tint each row by its company (pill-color-N, same palette as the Team
   Filter pills) so a company's uploads stand out at a glance even when the list isn't
   sorted or filtered by company. */
#portalDownloadsTable > tbody > tr.portal-company-row > td {
  --bs-table-bg-type: transparent;
  background-color: var(--pill-bg, transparent);
}

/* Home message modals (Index.cshtml #homeMessageModal read-only + #homeSendMessageModal compose) */
.home-msg-modal .modal-content {
  border: none;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 1.5rem 3rem rgba(0, 40, 80, 0.25);
}

/* The compose modal wraps header/body/footer in a <form>; without this the form breaks the
   flex column so modal-dialog-scrollable can't shrink the body on short screens. */
.home-msg-modal .modal-content > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.home-msg-modal .modal-header {
  background: linear-gradient(135deg, #00589f, #0077cc);
  color: #fff;
  border: none;
  padding: 0.9rem 1.15rem;
  align-items: center;
  gap: 0.65rem;
}

.home-msg-modal .modal-title {
  font-weight: 600;
  font-size: 1.05rem;
  min-width: 0;
}

.home-msg-modal .home-msg-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-msg-modal .home-msg-action-chip svg {
  width: 13px;
  height: 13px;
}

.home-msg-modal .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.9;
  flex-shrink: 0;
}

.home-msg-modal .modal-body {
  padding: 1.15rem 1.15rem 0.5rem;
}

.home-msg-modal .home-msg-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-bottom: 1.05rem;
}

.home-msg-modal .home-msg-meta {
  background-color: #f5f9fc;
  border: 1px solid #e5edf5;
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  min-width: 0;
}

.home-msg-modal .home-msg-meta-label {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a97a5;
  margin-bottom: 0.12rem;
}

.home-msg-modal .home-msg-meta-value {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2d3d;
}

.home-msg-modal .home-msg-meta-value > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.home-msg-modal .home-msg-team-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: #00589f;
}

.home-msg-modal .home-msg-bubble {
  background-color: #eef4fa;
  border-left: 3px solid #00589f;
  border-radius: 0.3rem 0.7rem 0.7rem 0.3rem;
  padding: 0.8rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #1f2d3d;
  line-height: 1.5;
}

.home-msg-modal .modal-footer {
  border: none;
  padding: 0.5rem 1.15rem 1.15rem;
}

.home-msg-modal .home-msg-compose-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4a5563;
  margin-bottom: 0.35rem;
}

.home-msg-modal .home-msg-compose-label span {
  color: #00589f;
}

@media (max-width: 420px) {
  .home-msg-modal .home-msg-meta-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .sidebar {
    width: 85vw;
    max-width: 300px;
  }

  /* Tight phones: drop the "Welcome," word, keep the icon + team name. */
  .mobile-topbar-user-greeting {
    display: none;
  }

  .mobile-topbar-user {
    font-size: 0.9rem;
  }

  .mobile-topbar-user-name {
    max-width: 9rem;
  }
}

.home-page-main {
  display: flex;
  flex-direction: column;
}

.home-page-main > .home-shell {
  flex: 1;
  min-height: 0;
}

@media (min-width: 992px) {
  /* .main-content main { flex: 1 1 0%; } (site-wide rule) has the same
     specificity as a bare .home-page-main rule but comes first in the
     cascade, so it silently wins and the height below is never applied
     unless we match its specificity with the "main" element qualifier. */
  .main-content main.home-page-main {
    flex: none;
    height: 100vh;
    overflow: hidden;
  }
}

.home-shell {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  position: relative;
}

.home-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}

.chat-sidepanel {
  width: 300px;
  flex-shrink: 0;
  overflow: hidden;
  transition: width 0.25s ease, opacity 0.2s ease;
}

.chat-sidepanel .chat-panel {
  height: 100%;
}

.chat-sidepanel-toggle {
  display: none;
  position: absolute;
  top: 50%;
  right: 300px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #dee2e6;
  border-radius: 50%;
  background-color: #fff;
  color: #00589f;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transform: translate(50%, -50%);
  transition: right 0.25s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  z-index: 5;
}

.chat-sidepanel-toggle:hover {
  background-color: #f1f3f5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.chat-unread-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background-color: #fd7e14;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.chat-sidepanel-toggle svg {
  width: 15px;
  height: 15px;
}

.home-shell.chat-collapsed .chat-sidepanel-toggle {
  right: 14px;
}

.home-shell.chat-collapsed .chat-sidepanel {
  width: 0;
  opacity: 0;
}

@media (min-width: 992px) {
  .chat-sidepanel-toggle {
    display: inline-flex;
  }
}

@media (max-width: 991.98px) {
  .home-shell {
    flex-direction: column;
  }

  /* Phones / tablets: no fixed-viewport split-pane. The whole page (body) scrolls
     and the panes just stack — the Home card, then the Public Workspace chat below
     it. Without undoing the desktop "each pane scrolls inside its own box" rules the
     chat panel ends up trapped below a nested scroll region and reads as missing. */
  .home-page-main > .home-shell {
    flex: none;
    min-height: 0;
  }

  .home-main {
    flex: none;
    min-height: 0;
    overflow-y: visible;
  }

  .chat-sidepanel {
    width: 100% !important;
    opacity: 1 !important;
    height: auto !important;
    margin-top: 1rem;
  }

  .chat-sidepanel .chat-panel {
    height: auto;
  }

  .chat-message-list {
    min-height: 340px;
    max-height: 72vh;
  }

  /* "Load earlier messages" is the only way to reach history past the 3-day
     window on a phone — make it an obvious full-width tap target, not a faint link. */
  .chat-load-more:not(.d-none) {
    display: block;
    width: 100%;
    padding: 0.6rem;
    border-bottom: 1px solid #dee2e6;
    background-color: #f1f5f9;
    font-size: 0.85rem;
    font-weight: 600;
  }
}

.chat-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-panel .card-header {
  background-color: #00589f;
  color: #fff;
  font-weight: 600;
}

.chat-load-more {
  color: #00589f;
  font-size: 0.8rem;
  text-decoration: none;
}

.chat-message-list {
  flex: 1;
  /* min-height: 0 (not a fixed floor like 320px) lets this shrink to fit whatever room the
     column actually has on a short viewport — .chat-panel is height-constrained + overflow:hidden
     on desktop, so a hard min-height here can push the compose form past the clipped edge,
     making it unreachable rather than just scrolled out of view. Its own overflow-y:auto still
     handles a long message history fine at any height. */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.chat-message-own {
  align-self: flex-end;
  align-items: flex-end;
}

.chat-message-other {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-message-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.chat-team-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c757d;
}

.chat-bubble {
  padding: 0.5rem 0.75rem;
  border-radius: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
  font-size: 1.1rem;
}

.chat-message-own .chat-bubble {
  background-color: #00589f;
  color: #fff;
  border-bottom-right-radius: 0.2rem;
}

.chat-message-other .chat-bubble {
  background-color: #e9ecef;
  color: #212529;
  border-bottom-left-radius: 0.2rem;
}

.chat-message-system {
  align-self: flex-start;
  align-items: flex-start;
}

.chat-message-system .chat-bubble {
  background-color: #f8d7da;
  color: #842029;
  border-bottom-left-radius: 0.2rem;
}

.chat-message-system .chat-team-name {
  color: #dc3545;
  font-weight: 700;
}

.chat-message-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: #8696a0;
}

.chat-tick {
  display: inline-flex;
  align-items: center;
}

.chat-compose {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.6rem;
  border-top: 1px solid #dee2e6;
}

.chat-compose textarea {
  resize: none;
  line-height: 1.4;
  min-height: 2.75rem;   /* ~2 lines */
  max-height: 7rem;      /* grows to ~4 lines, then scrolls */
  overflow-y: auto;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ===== Help / Documentation page ===== */
.help-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.help-nav {
  position: sticky;
  top: 1rem;
}

.help-nav .nav-link {
  color: #212529;
  border-radius: 0.375rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
}

.help-nav .nav-link:hover {
  background-color: rgba(0, 88, 159, 0.08);
}

.help-nav .nav-link.active {
  background-color: #00589f;
  color: #fff;
  font-weight: 600;
}

.help-content .card-body {
  padding: 1.5rem 1.75rem;
}

.help-content h1,
.help-content h2,
.help-content h3,
.help-content h4 {
  color: #00589f;
  margin-top: 1.6rem;
  margin-bottom: 0.6rem;
  line-height: 1.25;
}

.help-content h1 { font-size: 1.7rem; margin-top: 0; }
.help-content h2 { font-size: 1.35rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.3rem; }
.help-content h3 { font-size: 1.1rem; }
.help-content h4 { font-size: 1rem; }

.help-content p { margin-bottom: 0.9rem; line-height: 1.6; }
.help-content ul,
.help-content ol { margin-bottom: 0.9rem; padding-left: 1.4rem; line-height: 1.6; }
.help-content li { margin-bottom: 0.3rem; }
.help-content li > ul,
.help-content li > ol { margin-top: 0.3rem; margin-bottom: 0.3rem; }

.help-content hr { margin: 1.5rem 0; border-top: 1px solid #e5e7eb; }

.help-content blockquote {
  margin: 0 0 0.9rem;
  padding: 0.5rem 1rem;
  border-left: 4px solid #00589f;
  background-color: rgba(0, 88, 159, 0.05);
  color: #495057;
}

.help-content code {
  background-color: #f1f3f5;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
  color: #c92a2a;
}

.help-content pre.help-code {
  background-color: #f8f9fa;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  margin-bottom: 0.9rem;
}

.help-content pre.help-code code {
  background: none;
  padding: 0;
  color: #212529;
  font-size: 0.85rem;
}

.help-content a { color: #00589f; }

.help-table-wrap { overflow-x: auto; margin-bottom: 1rem; }

.help-content table.help-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.92rem;
}

.help-content table.help-table th {
  background-color: #00589f;
  color: #fff;
  text-align: left;
  padding: 0.5rem 0.7rem;
  white-space: nowrap;
}

.help-content table.help-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
}

.help-content table.help-table tr:nth-child(even) td {
  background-color: #f8f9fa;
}

/* Inline SVG diagrams embedded in a manual page via a ```html block. */
.help-content .help-diagram { margin: 0 0 1.25rem; }

.help-content .help-diagram figure {
  margin: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 1rem 1rem 0.75rem;
  background: #fff;
}

.help-content .help-diagram .fig-scroll { overflow-x: auto; }

.help-content .help-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 460px;
}

.help-content .help-diagram figcaption {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e5e7eb;
  font-size: 0.85rem;
  color: #5b6675;
}

.help-content .help-diagram text { font-family: inherit; }
.help-content .help-diagram .d-label { font-size: 13px; font-weight: 600; fill: #1b2430; }
.help-content .help-diagram .d-meta { font-size: 10px; fill: #5b6675; }
.help-content .help-diagram .d-edge { font-size: 11px; fill: #5b6675; }
.help-content .help-diagram .d-edge-strong { font-size: 11px; font-weight: 700; fill: #00589f; }

@media (max-width: 767.98px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-nav { position: static; }
  .help-nav .nav.flex-column { flex-direction: row !important; flex-wrap: wrap; gap: 0.25rem; }
}

/* ============================================================================
   Rich-text editor (contenteditable + hidden <textarea>) — team signatures,
   email templates. Behaviour in wwwroot/js/rich-editor.js.
   ============================================================================ */
.rte {
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  overflow: hidden;
}

.rte:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e3e6ea;
}

.rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #343a40;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.rte-btn:hover { background-color: #e9ecef; }
.rte-btn.is-active { background-color: #dfe7f3; border-color: #b6cdec; color: #0a58ca; }

.rte-color { position: relative; overflow: hidden; }
.rte-color input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.rte-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background-color: #d7dbe0;
}

.rte-surface {
  min-height: 8rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  background-color: #fff;
  outline: none;
}

.rte-surface:empty::before {
  content: attr(data-placeholder);
  color: #adb5bd;
  white-space: pre-line;
}

.rte-surface img { max-width: 100%; height: auto; }
.rte-surface table { border-collapse: collapse; }
/* Match Word: paragraphs are single-spaced unless they carry their own margin. */
.rte-surface p, .rte-surface div { margin: 0; }

/* Toolbar <select> (font size, …). */
.rte-select {
  width: auto;
  min-width: 0;
  padding: 0 1.4rem 0 6px;
  background-color: #fff;
  border-color: #e1dfdd;
  color: #343a40;
  font-size: 0.82rem;
}

/* Missing Documents — "received vs total" pies at the top of the page. */
.doc-progress-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.doc-progress-card {
  flex: 1 1 22rem;
  min-width: 0;
}

.doc-progress-pie {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
  display: grid;
  place-items: center;
}

.doc-progress-pie__hole {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
}

.doc-progress-pie__pct {
  font-size: 1.25rem;
  font-weight: 700;
  color: #343a40;
}

.doc-progress-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}

/* Team Details ▸ Usage tab — Day/Week/Month activity squares (real interaction time). */
.team-usage-heat {
  border-collapse: separate;
  border-spacing: 1px;
  font-size: 0.7rem;
}

.team-usage-heat th {
  font-weight: 600;
  color: #6c757d;
  text-align: center;
  padding: 0 2px;
  white-space: nowrap;
}

.team-usage-heat tbody th {
  text-align: right;
  padding-right: 6px;
  cursor: pointer;
}

.team-usage-heat td {
  width: 13px;
  height: 20px;
  min-width: 13px;
  outline: 1px solid #eef2f7;
}

/* thin gap marking each hour boundary (start of the first half-hour cell) */
.team-usage-heat td.team-usage-heat-h0 {
  border-left: 2px solid #fff;
}

.usage-view-btn.active {
  background-color: #00589f;
  border-color: #00589f;
  color: #fff;
}

.usage-square {
  cursor: pointer;
  outline: 1px solid #eef2f7;
}

.usage-square:hover {
  outline-color: #adb5bd;
}

.usage-square-selected {
  outline: 2px solid #00589f;
  outline-offset: -1px;
}

/* A selected whole day row (clicking the day label) — top/bottom band across the row's
   cells, plus a solid outline on the label itself. */
.usage-row-selected th.usage-square-daylabel {
  outline: 2px solid #00589f;
  outline-offset: -1px;
  color: #00589f;
}

.usage-row-selected td {
  box-shadow: inset 0 2px 0 #00589f, inset 0 -2px 0 #00589f;
}

/* Persistent marker for "today", independent of the current click selection — applied to
   a real box (a <div> or the row's <th> label, never the <tr> itself: box-shadow doesn't
   reliably paint on table-row boxes). */
.usage-today-cell {
  box-shadow: inset 0 0 0 2px #6c757d;
}

.usage-month-grid {
  max-width: 22rem;
}

.usage-month-header,
.usage-month-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.usage-month-header {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6c757d;
  text-align: center;
  margin-bottom: 3px;
}

.usage-square-month {
  aspect-ratio: 1;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #495057;
}

/* Home page reminder calendar (below Internal Messages) — month grid + a day's reminder list. */
.reminder-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 4px;
}

.reminder-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.reminder-cal-day {
  aspect-ratio: 1;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  cursor: pointer;
}

.reminder-cal-day:hover { background-color: #f1f3f5; }

/* Days with at least one reminder get their own tint, so they stand out from empty days at a
   glance instead of relying on the small dot alone. Declared before -today/-selected below so
   those still win where they overlap (a selected or today cell that also has items). */
.reminder-cal-day-has-items {
  background-color: #fff4e6;
  border-color: #ffd8a8;
}

.reminder-cal-day-has-items:hover { background-color: #ffe8cc; }

.reminder-cal-day-empty {
  border: none;
  background: none;
  cursor: default;
  pointer-events: none;
}

.reminder-cal-day-num { font-size: 0.78rem; }

.reminder-cal-day-today {
  border-color: #00589f;
  font-weight: 700;
}

.reminder-cal-day-today .reminder-cal-day-num { color: #00589f; }

.reminder-cal-day-selected {
  background-color: #00589f;
  border-color: #00589f;
}

/* Without this, the plain :hover rule above (same specificity, but declared earlier) would win
   on the selected day and swap its blue fill for light gray — leaving the white day number
   almost invisible against it. */
.reminder-cal-day-selected:hover { background-color: #004a87; }

.reminder-cal-day-selected .reminder-cal-day-num { color: #fff; }

.reminder-cal-day-dots {
  display: flex;
  gap: 2px;
}

.reminder-cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fd7e14;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.reminder-cal-day-selected .reminder-cal-dot { background-color: #fff; }

.reminder-day-item {
  padding: 0.5rem 0;
  border-bottom: 1px solid #f1f3f5;
}

.reminder-day-item:last-child { border-bottom: none; }

/* "All reminders" panel, right of the calendar — a tall scrolling list rather than growing the
   page indefinitely. */
.reminder-all-list {
  max-height: 560px;
  overflow-y: auto;
}

/* Searchable company combobox in the "+ New Reminder" modal — a plain text input with a
   filtered dropdown of matches instead of a long native <select>. */
.reminder-company-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1075;
  margin-top: 2px;
  max-height: 220px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.reminder-company-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.75rem;
  border: none;
  background: none;
  font-size: 0.9rem;
}

.reminder-company-option:hover,
.reminder-company-option:focus,
.reminder-company-option.active {
  background-color: #f1f3f5;
}

/* Three-star priority control (Pages/Shared/_PriorityStars.cshtml): 3 stars = Top, 2 = Mid, 1 = Low.
   Hovering star N previews levels up to N. */
.prio-stars {
    display: inline-flex;
    gap: 1px;
    flex-shrink: 0;
    line-height: 0;
}
.prio-star {
    display: inline-flex;
    border: 0;
    background: transparent;
    padding: 0;
    line-height: 0;
    color: #c2c9d2;
}
button.prio-star { cursor: pointer; }
.prio-star.on { color: #f59f00; }
.prio-stars.is-editable:hover .prio-star { color: #f59f00; }
.prio-stars.is-editable .prio-star:hover ~ .prio-star { color: #c2c9d2; }

/* TPS/TVQ: company name links to the Companies list (row highlighted via ?savedId=). */
.tpstvq-company-link:hover { color: #00589f; }
/* While a row is active (or another team is working on it) the company link is disabled. */
#tpsTvqTable tr.tpstvq-row-active .tpstvq-company-link,
#tpsTvqTable tr.tpstvq-row-watch .tpstvq-company-link { pointer-events: none; cursor: default; }

/* Public Workspace unread warning — pinned above everything, site-wide. */
.chat-warning-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 1rem;
  background-color: #ffc107;
  color: #212529;
  border-bottom: 2px solid #e0a800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  font-size: 0.95rem;
}

.chat-warning-banner[hidden] {
  display: none;
}

.chat-warning-banner:hover {
  background-color: #ffca2c;
  color: #212529;
}

.chat-warning-banner strong {
  flex-shrink: 0;
}

.chat-warning-banner .chat-warning-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* TPS/TVQ: an accountant has this row selected right now (live, shown to IT/Admin/Auditor). */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td,
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active:hover > td {
  background-color: #cfe2ff;
}

.tpstvq-active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.tpstvq-active-badge::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #fff;
  animation: tpstvq-active-pulse 1.4s ease-in-out infinite;
}

@keyframes tpstvq-active-pulse {
  50% { opacity: 0.3; }
}

/* Stronger "accountant active" cue: bold green frame around the whole row + glowing LED. */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td {
  box-shadow: inset 0 3px 0 #0d6efd, inset 0 -3px 0 #0d6efd;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td:first-child {
  box-shadow: inset 6px 0 0 #0d6efd, inset 0 3px 0 #0d6efd, inset 0 -3px 0 #0d6efd;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td:last-child {
  box-shadow: inset -3px 0 0 #0d6efd, inset 0 3px 0 #0d6efd, inset 0 -3px 0 #0d6efd;
}

.tpstvq-active-led {
  display: inline-block;
  flex: 0 0 auto;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b6d4fe, #3d8bfd 55%, #0a58ca);
  box-shadow: 0 0 0 2px #fff, 0 0 8px 3px rgba(61, 139, 253, 0.85);
  animation: tpstvq-led-glow 1.2s ease-in-out infinite;
}

@keyframes tpstvq-led-glow {
  50% { box-shadow: 0 0 0 2px #fff, 0 0 3px 1px rgba(61, 139, 253, 0.4); }
}

/* On the mobile card layout empty cells are hidden; keep the LED cell visible. (Desktop must
   stay a real table cell — forcing flex there breaks the table layout.) */
@media (max-width: 991.98px) {
  #tpsTvqTable tr.tpstvq-row-active td.tpstvq-led-col.tpstvq-cell-empty {
    display: flex !important;
  }
}

/* Desktop: the LED sits centred in the narrow first column, clear of the green frame. */
@media (min-width: 992px) {
  #tpsTvqTable td.tpstvq-led-col .tpstvq-active-led {
    display: block;
    margin: 0 auto 0 11px;
  }
}

/* TPS/TVQ: the row this user clicked (local to their browser) — blue frame. Sits above the
   green "accountant active" frame when both apply. */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-selected {
  outline: 3px solid #052c65;
  outline-offset: -3px;
}

/* Active row flashes gently so it stands out in a long list. */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td {
  animation: tpstvq-row-flash 1.6s ease-in-out infinite;
}

@keyframes tpstvq-row-flash {
  0%, 100% { background-color: #cfe2ff; }
  50% { background-color: #9ec5fe; }
}

@media (prefers-reduced-motion: reduce) {
  #tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td {
    animation: none;
  }
}

/* "Active" word next to the company name on the user's own active row. */
.tpstvq-active-word {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  animation: tpstvq-active-word-flash 1.6s ease-in-out infinite;
}

@keyframes tpstvq-active-word-flash {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .tpstvq-active-word { animation: none; }
}

/* Focus mode: while the user has their own active row, it is pinned at the top and every
   other row fades behind it (still readable, and brightens on hover). */
#tpsTvqTable.tpstvq-focus-mode > tbody > tr.tpstvq-status-row:not(.tpstvq-row-active) > td {
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

#tpsTvqTable.tpstvq-focus-mode > tbody > tr.tpstvq-status-row:not(.tpstvq-row-active):hover > td {
  opacity: 0.85;
}

/* ACTIVE strip on top of the user's pinned row. */
#tpsTvqTable > tbody.tpstvq-pinned > tr.tpstvq-active-ribbon > td {
  padding: 0.25rem 0.9rem;
  background: #0d6efd;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  animation: tpstvq-ribbon-flash 1.6s ease-in-out infinite;
}

@keyframes tpstvq-ribbon-flash {
  50% { background: #084298; }
}

/* Everything behind the active row is hatched as well as faded. */
#tpsTvqTable.tpstvq-focus-mode > tbody > tr.tpstvq-status-row:not(.tpstvq-row-active) > td {
  background-image: repeating-linear-gradient(135deg, rgba(33, 37, 41, 0.12) 0, rgba(33, 37, 41, 0.12) 2px, transparent 2px, transparent 8px);
}

@media (prefers-reduced-motion: reduce) {
  #tpsTvqTable > tbody.tpstvq-pinned > tr.tpstvq-active-ribbon > td { animation: none; }
}

/* "ACTIVE" stamp across the whole active row: sits above every cell, the row behind it is
   hashed and faded. pointer-events:none keeps the row's buttons/links clickable through it. */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active {
  position: relative;
}

.tpstvq-active-overlay {
  position: absolute;
  inset: 3px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  pointer-events: none;
  background: repeating-linear-gradient(-45deg,
    rgba(13, 110, 253, 0.20) 0 7px,
    rgba(255, 255, 255, 0.60) 7px 14px);
}

.tpstvq-active-overlay b {
  padding: 0.05rem 1rem;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  box-shadow: 0 0 0 3px #fff;
  animation: tpstvq-active-word-flash 1.6s ease-in-out infinite;
}

.tpstvq-active-overlay small {
  padding: 0 0.5rem;
  border-radius: 999px;
  background: #fff;
  color: #084298;
  font-size: 0.75rem;
  font-weight: 600;
}

.tpstvq-active-led {
  position: relative;
  z-index: 4;
}

.tpstvq-active-overlay i {
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: #fff;
  color: #052c65;
  font-size: 0.9rem;
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 0 0 2px #0d6efd;
}

/* Elapsed "active for" timer, pinned to the right end of the overlay. */
.tpstvq-active-overlay .tpstvq-active-time {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 0.55rem;
  border-radius: 999px;
  background: #052c65;
  color: #fff;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Overlay layout: company on the left, ACTIVE centred, timer on the right (before Action). */
.tpstvq-active-overlay {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  padding: 0 0.6rem;
}

.tpstvq-active-overlay .tpstvq-active-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  justify-self: start;
  max-width: 100%;
}

.tpstvq-active-overlay .tpstvq-active-left i {
  max-width: 100%;
}

.tpstvq-active-overlay > b {
  grid-column: 2;
}

.tpstvq-active-overlay .tpstvq-active-time {
  position: static;
  transform: none;
  grid-column: 3;
  justify-self: end;
}

/* Timer sits right after the (centred) ACTIVE pill, a tab's width away. */
.tpstvq-active-overlay .tpstvq-active-time {
  justify-self: start;
  margin-left: 2rem;
}

/* Bigger timer, and a stronger fade over the row content behind the overlay. */
.tpstvq-active-overlay {
  background: repeating-linear-gradient(-45deg,
    rgba(13, 110, 253, 0.22) 0 7px,
    rgba(255, 255, 255, 0.85) 7px 14px);
}

.tpstvq-active-overlay .tpstvq-active-time {
  padding: 0.05rem 0.9rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Timer styled like the ACTIVE pill (same blue pill, white ring, weight and size). */
.tpstvq-active-overlay .tpstvq-active-time {
  padding: 0.05rem 1rem;
  border-radius: 999px;
  background: #0d6efd;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: 0 0 0 3px #fff;
}

/* Timer = exactly the ACTIVE pill's style, including its flash. */
.tpstvq-active-overlay .tpstvq-active-time {
  padding: 0.05rem 1rem;
  background: #0d6efd;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  box-shadow: 0 0 0 3px #fff;
  animation: tpstvq-active-word-flash 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tpstvq-active-overlay .tpstvq-active-time { animation: none; }
}

/* Timer merged into the ACTIVE pill: "ACTIVE | 04:12" in one flashing pill. */
.tpstvq-active-overlay > b .tpstvq-active-time {
  position: static;
  transform: none;
  grid-column: auto;
  justify-self: auto;
  margin: 0 0 0 0.9rem;
  padding: 0 0 0 0.9rem;
  border-radius: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.65);
  display: inline-block;
  background: none;
  box-shadow: none;
  animation: none;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

/* Company name sits right after the blue LED (not on top of it). */
.tpstvq-active-overlay {
  padding-left: 2.1rem;
}

/* Watcher style (IT / Administrator / Auditor looking at a row ANOTHER team is working on):
   green flashing row + green LED. The worker themself gets the blue overlay instead. */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td {
  background-color: #c9efd3;
  box-shadow: inset 0 3px 0 #198754, inset 0 -3px 0 #198754;
  animation: tpstvq-watch-flash 1.6s ease-in-out infinite;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td:first-child {
  box-shadow: inset 6px 0 0 #198754, inset 0 3px 0 #198754, inset 0 -3px 0 #198754;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td:last-child {
  box-shadow: inset -3px 0 0 #198754, inset 0 3px 0 #198754, inset 0 -3px 0 #198754;
}

@keyframes tpstvq-watch-flash {
  0%, 100% { background-color: #c9efd3; }
  50% { background-color: #8fe0a8; }
}

.tpstvq-watch-led {
  display: inline-block;
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  width: 0.75rem;
  height: 0.75rem;
  margin: 0 0.35rem 0 0.7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #b7ffd0, #1ed760 55%, #0f8f3f);
  box-shadow: 0 0 0 2px #fff, 0 0 8px 3px rgba(30, 215, 96, 0.85);
  animation: tpstvq-watch-glow 1.2s ease-in-out infinite;
}

@media (min-width: 992px) {
  #tpsTvqTable td.tpstvq-led-col .tpstvq-watch-led {
    display: block;
    margin: 0 auto 0 11px;
  }
}

/* On the mobile card layout the (normally hidden) empty LED cell must show the LED. */
@media (max-width: 991.98px) {
  #tpsTvqTable tr.tpstvq-row-watch td.tpstvq-led-col.tpstvq-cell-empty {
    display: flex !important;
  }
}

@keyframes tpstvq-watch-glow {
  50% { box-shadow: 0 0 0 2px #fff, 0 0 3px 1px rgba(30, 215, 96, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
  #tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td,
  .tpstvq-watch-led { animation: none; }
}

/* Animated frame stroke: the border pulses thicker/brighter in step with the row flash.
   Registered properties let the inset box-shadow thickness and colour interpolate. */
@property --frame-w {
  syntax: "<length>";
  inherits: false;
  initial-value: 3px;
}

@property --frame-c {
  syntax: "<color>";
  inherits: false;
  initial-value: #0d6efd;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td,
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td {
  box-shadow: inset 0 var(--frame-w) 0 var(--frame-c), inset 0 calc(var(--frame-w) * -1) 0 var(--frame-c);
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td:first-child,
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td:first-child {
  box-shadow: inset calc(var(--frame-w) * 2) 0 0 var(--frame-c), inset 0 var(--frame-w) 0 var(--frame-c), inset 0 calc(var(--frame-w) * -1) 0 var(--frame-c);
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td:last-child,
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td:last-child {
  box-shadow: inset calc(var(--frame-w) * -1) 0 0 var(--frame-c), inset 0 var(--frame-w) 0 var(--frame-c), inset 0 calc(var(--frame-w) * -1) 0 var(--frame-c);
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td {
  --frame-c: #0d6efd;
  animation: tpstvq-row-flash 1.6s ease-in-out infinite, tpstvq-frame-blue 1.6s ease-in-out infinite;
}

#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td {
  --frame-c: #198754;
  animation: tpstvq-watch-flash 1.6s ease-in-out infinite, tpstvq-frame-green 1.6s ease-in-out infinite;
}

@keyframes tpstvq-frame-blue {
  0%, 100% { --frame-w: 3px; --frame-c: #0d6efd; }
  50% { --frame-w: 5px; --frame-c: #6ea8fe; }
}

@keyframes tpstvq-frame-green {
  0%, 100% { --frame-w: 3px; --frame-c: #198754; }
  50% { --frame-w: 5px; --frame-c: #5fd38d; }
}

/* keep the ACTIVE overlay clear of the thickest frame */
.tpstvq-active-overlay {
  inset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  #tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-active > td,
  #tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch > td { animation: none; }
}

/* Watcher view: how long the other team has been working on this file, next to the company. */
.tpstvq-watch-time {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  background: #198754;
  color: #fff;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px #fff;
  vertical-align: middle;
}

/* Watcher timer: floats on the row just left of the Action column (never clipped by a cell). */
#tpsTvqTable > tbody > tr.tpstvq-status-row.tpstvq-row-watch {
  position: relative;
}

#tpsTvqTable .tpstvq-watch-time {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 3;
  margin: 0;
  padding: 0.1rem 0.9rem;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* Watcher timer, compact: small pill tucked against the Action column so it covers as little
   of the row as possible (no oversized white-ringed badge). */
#tpsTvqTable .tpstvq-watch-time {
  padding: 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.35;
  box-shadow: none;
  opacity: 0.95;
}

/* ---- CNESST tab (company details / edit): card layout ---- */
.cn-section-head { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.cn-section-head h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.cn-count { background: #eef1f6; color: #5b6472; border-radius: 999px; padding: .05rem .55rem; font-size: .78rem; font-weight: 600; }
.cn-add-btn { margin-left: auto; border-radius: 999px; display: inline-flex; align-items: center; gap: .35rem; }
.cn-empty { border: 1.5px dashed #d5dae3; border-radius: .9rem; padding: 1.6rem 1rem; text-align: center; color: #7a8290; background: #fafbfd; }
.cn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.cn-card { background: #fff; border: 1px solid #e3e7ee; border-radius: .9rem; padding: 1rem 1.1rem; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); display: flex; flex-direction: column; gap: .8rem; transition: box-shadow .15s, border-color .15s; }
.cn-card:hover { box-shadow: 0 4px 14px rgba(16, 24, 40, .08); border-color: #d3d9e4; }
.cn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.cn-title { font-weight: 600; line-height: 1.3; margin-bottom: .35rem; }
.cn-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.cn-pill { display: inline-flex; align-items: center; gap: .3rem; background: #e8f0fb; color: #0a58a8; border-radius: 999px; padding: .12rem .65rem; font-size: .78rem; font-weight: 600; }
.cn-pill.ok { background: #e3f4ea; color: #1c7c45; }
.cn-actions { display: flex; gap: .15rem; flex-shrink: 0; }
.cn-icon-btn { width: 2rem; height: 2rem; border: 0; background: transparent; border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; color: #6b7280; cursor: pointer; text-decoration: none; }
.cn-icon-btn:hover { background: #eef1f6; color: #1f2937; }
.cn-icon-btn.danger:hover { background: #fdecee; color: #dc3545; }
.cn-icon-btn svg { width: 1rem; height: 1rem; }
.cn-fields { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: 0; font-size: .9rem; align-items: center; }
.cn-fields dt { color: #7a8290; font-weight: 500; }
.cn-fields dd { margin: 0; display: flex; align-items: center; gap: .1rem; min-height: 2rem; word-break: break-all; }
.cn-secret { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.cn-rate-list { display: flex; flex-direction: column; gap: .5rem; max-width: 46rem; }
.cn-rate { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.5rem; background: #fff; border: 1px solid #e3e7ee; border-radius: .75rem; padding: .45rem .55rem .45rem 1rem; }
.cn-rate-year { font-weight: 600; min-width: 3.5rem; }
.cn-rate-val { color: #374151; flex: 0 1 auto; }
.cn-rate .cn-actions { margin-left: auto; }

/* ---- CNESST modals: softer, modern look ---- */
.cn-modal .modal-content { border: 0; border-radius: 1.1rem; box-shadow: 0 24px 60px rgba(16, 24, 40, .25); overflow: hidden; }
.cn-modal .modal-header { border-bottom: 0; padding: 1.3rem 1.6rem .3rem; }
.cn-modal .modal-title { font-size: 1.15rem; font-weight: 600; }
.cn-modal .modal-body { padding: .8rem 1.6rem 1rem; }
.cn-modal .modal-footer { border-top: 0; padding: .4rem 1.6rem 1.4rem; gap: .5rem; }
.cn-modal .form-label { font-size: .8rem; font-weight: 600; color: #5b6472; margin-bottom: .3rem; }
.cn-modal .form-control, .cn-modal .form-select { border-radius: .7rem; padding: .6rem .85rem; background-color: #f6f7fa; border: 1px solid #e3e7ee; }
.cn-modal .form-control:focus, .cn-modal .form-select:focus { background-color: #fff; border-color: #0a58a8; box-shadow: 0 0 0 .2rem rgba(10, 88, 168, .15); }
.cn-modal .btn { border-radius: 999px; padding: .5rem 1.3rem; font-weight: 500; }
.cn-modal .btn-secondary { background: transparent; color: #4b5563; border: 1px solid #d5dae3; }
.cn-modal .btn-secondary:hover { background: #eef1f6; color: #1f2937; border-color: #d5dae3; }
.cn-modal input[type=number]::-webkit-inner-spin-button, .cn-modal input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cn-modal input[type=number] { -moz-appearance: textfield; }
.cn-rate small { color: #7a8290; font-weight: 500; display: block; margin: 0 0 .1rem; }
.cn-rate-val { font-weight: 600; }
.cn-rate-val small { font-weight: 500; }
.cn-modal .input-group-text { background: #eef1f6; border: 1px solid #e3e7ee; border-radius: 0 .7rem .7rem 0; color: #5b6472; font-weight: 600; }
.cn-modal .input-group > .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
/* modal header with icon + subtitle, and a gentler close button */
.cn-modal .cn-modal-header { align-items: center; gap: .85rem; }
.cn-modal-icon { width: 2.6rem; height: 2.6rem; border-radius: .8rem; background: linear-gradient(135deg, #e8f0fb, #d6e6fa); color: #0a58a8; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cn-modal-icon svg { width: 1.2rem; height: 1.2rem; }
.cn-modal-sub { font-size: .82rem; color: #7a8290; margin-top: .1rem; }
.cn-modal .btn-close { opacity: .45; align-self: flex-start; }
.cn-modal .btn-close:hover { opacity: .9; }
.cn-modal .btn-primary { box-shadow: 0 4px 12px rgba(10, 88, 168, .28); }