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;
}

.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-label {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.25rem;
}

.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);
}

.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;
}

.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,
#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;
}

/* "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") 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 {
  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 {
  background-color: #e64980;
  color: #fff;
  border-color: #e64980;
}

#teamFilterGroup .pill-toggle.team-pill-male label,
#addActionAssignGroup .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 {
  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;
}

/* 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: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 {
  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 {
  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;
}

/* 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: 320px;
  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-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;
}