/**
 * Task management UI tokens (ProjectPlan/improved-ui-ux-design-task-management-1404b2.md)
 */
:root {
  --tm-status-completed: #198754;
  --tm-status-in-progress: #0dcaf0;
  --tm-status-pending: #6c757d;
  --tm-status-under-review: #fd7e14;
  --tm-status-rejected: #dc3545;
  --tm-status-approved: #0b5ed7;
  --tm-priority-high: #dc3545;
  --tm-priority-medium: #ffc107;
  --tm-priority-low: #198754;
}

.task-status-badge {
  font-weight: 600;
  font-size: 0.75rem;
}

.task-status-badge--completed {
  background-color: var(--tm-status-completed) !important;
  color: #fff !important;
}

.task-status-badge--in_progress {
  background-color: var(--tm-status-in-progress) !important;
  color: #212529 !important;
}

.task-status-badge--draft,
.task-status-badge--assigned {
  background-color: var(--tm-status-pending) !important;
  color: #fff !important;
}

.task-status-badge--under_review {
  background-color: var(--tm-status-under-review) !important;
  color: #fff !important;
}

.task-status-badge--pending_super_admin_approval {
  background-color: #7c3aed !important;
  color: #fff !important;
}

.task-status-badge--rejected {
  background-color: var(--tm-status-rejected) !important;
  color: #fff !important;
}

.task-status-badge--approved {
  background-color: var(--tm-status-approved) !important;
  color: #fff !important;
}

.task-priority-badge--urgent,
.task-priority-badge--high {
  background-color: var(--tm-priority-high) !important;
  color: #fff !important;
}

.task-priority-badge--medium {
  background-color: var(--tm-priority-medium) !important;
  color: #212529 !important;
}

.task-priority-badge--low {
  background-color: var(--tm-priority-low) !important;
  color: #fff !important;
}

.tm-kanban-column {
  min-height: 280px;
  background: #f8f9fa;
  border-radius: 0.5rem;
}

.tm-kanban-card {
  border-left: 3px solid var(--tm-status-pending);
}

.tm-kanban-card.tm-kanban-card--in_progress {
  border-left-color: var(--tm-status-in-progress);
}

.tm-kanban-card.tm-kanban-card--under_review {
  border-left-color: var(--tm-status-under-review);
}

.tm-kanban-card.tm-kanban-card--completed,
.tm-kanban-card.tm-kanban-card--approved {
  border-left-color: var(--tm-status-completed);
}

.tm-kanban-card.tm-kanban-card--rejected {
  border-left-color: var(--tm-status-rejected);
}

.tm-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1030;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

.tm-page-header h1,
.tm-page-header h4 {
  letter-spacing: -0.02em;
}

.tm-mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.125rem;
  padding: 0.35rem 0.25rem calc(0.35rem + env(safe-area-inset-bottom, 0));
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.06);
  z-index: 1040;
}

.tm-mobile-nav__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.25rem 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #67748e;
  text-decoration: none;
  border-radius: 0.35rem;
  transition: color 0.15s ease, background 0.15s ease;
}

.tm-mobile-nav__item i {
  font-size: 1.1rem;
  line-height: 1;
}

.tm-mobile-nav__item:hover,
.tm-mobile-nav__item:focus-visible {
  color: #344767;
  background: rgba(0, 0, 0, 0.04);
}

.tm-mobile-nav__item.is-active {
  color: #cb0c9f;
  background: rgba(203, 12, 159, 0.08);
}

button.tm-mobile-nav__item {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}

button.tm-mobile-nav__item:focus-visible {
  outline: 2px solid rgba(203, 12, 159, 0.35);
  outline-offset: 2px;
}

.tm-main-pad-bottom {
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0)) !important;
}

@media (min-width: 768px) {
  .tm-main-pad-bottom {
    padding-bottom: 1.5rem !important;
  }
}

@media (max-width: 767.98px) {
  .tm-fab {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0));
  }
}

.tm-activity-timeline .tm-activity-entry:not(:last-child) {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tm-empty-state {
  padding: 1.5rem 1rem;
  text-align: center;
  color: #67748e;
}

.tm-empty-state i {
  opacity: 0.45;
}

.tm-empty-state__title {
  color: #344767;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.tm-empty-state__hint {
  font-size: 0.8rem;
  margin-bottom: 0;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

/* Icon-only action buttons: keep button size, increase icon presence */
.tm-action-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  width: 2.15rem;
  height: 2rem;
  padding: 0.25rem !important;
  line-height: 1 !important;
  vertical-align: middle;
  overflow: hidden;
  box-sizing: border-box;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  transform: none !important;
}

.tm-action-icon-btn i {
  font-size: 0.8rem !important;
  line-height: 1 !important;
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 0.8rem;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transition: none !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none;
}

.tm-action-icon-btn:hover,
.tm-action-icon-btn:focus,
.tm-action-icon-btn:active,
.tm-action-icon-btn:focus-visible,
.tm-action-icon-btn.active,
.tm-action-icon-btn:not(:disabled):not(.disabled):active {
  min-width: 2.15rem;
  width: 2.15rem;
  height: 2rem;
  padding: 0.25rem !important;
  top: 0 !important;
  left: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.tm-action-icon-btn:hover i,
.tm-action-icon-btn:focus i,
.tm-action-icon-btn:active i,
.tm-action-icon-btn:focus-visible i,
.tm-action-icon-btn.active i,
.tm-action-icon-btn:not(:disabled):not(.disabled):active i {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 0.8rem;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Keep admin buttons size-stable across click/focus states */
.main-content .btn,
.main-content .btn:hover,
.main-content .btn:focus,
.main-content .btn:active,
.main-content .btn:focus-visible,
.main-content .btn.active,
.main-content .btn:not(:disabled):not(.disabled):active {
  transform: none !important;
  transition: none !important;
}

/* Reusable fixed-size filter toggle without text shift/clipping */
.tm-filter-toggle,
.tm-filter-toggle:hover,
.tm-filter-toggle:focus,
.tm-filter-toggle:active,
.tm-filter-toggle:focus-visible,
.tm-filter-toggle.active,
.tm-filter-toggle.collapsed,
.tm-filter-toggle:not(:disabled):not(.disabled):active,
.tm-filter-toggle[aria-expanded='true'],
.tm-filter-toggle[aria-expanded='false'] {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  border-width: 1px !important;
  border-style: solid !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  vertical-align: middle !important;
  user-select: none !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

.main-content .tm-filter-toggle:focus:not(:focus-visible),
.main-content .tm-filter-toggle:active {
  border-width: 1px !important;
  box-shadow: none !important;
}

.main-content .btn.tm-filter-toggle:focus-visible {
  border-width: 1px !important;
  box-shadow: none !important;
  outline: 2px solid rgba(13, 110, 253, 0.35) !important;
  outline-offset: 1px !important;
}

.tm-filter-toggle::before {
  content: "";
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  /* Inline SVG funnel icon avoids icon-font metric jitter */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8v5l-4 2v-7L3 5z'/%3E%3C/svg%3E") !important;
}

.tm-filter-toggle__label,
.tm-filter-toggle:hover .tm-filter-toggle__label,
.tm-filter-toggle:focus .tm-filter-toggle__label,
.tm-filter-toggle:active .tm-filter-toggle__label,
.tm-filter-toggle:focus-visible .tm-filter-toggle__label,
.tm-filter-toggle.active .tm-filter-toggle__label,
.tm-filter-toggle.collapsed .tm-filter-toggle__label,
.tm-filter-toggle:not(:disabled):not(.disabled):active .tm-filter-toggle__label,
.tm-filter-toggle[aria-expanded='true'] .tm-filter-toggle__label,
.tm-filter-toggle[aria-expanded='false'] .tm-filter-toggle__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
}

.tm-notification-center .tm-notification-row.border-start {
  background-color: rgba(13, 110, 253, 0.04);
}

.tm-kanban-column .tm-kanban-empty {
  font-size: 0.75rem;
  font-style: italic;
  color: #adb5bd;
  padding: 0.25rem 0.35rem;
}

/* Touch-friendly horizontal scan of Kanban columns on smaller viewports */
@media (max-width: 1199.98px) {
  .tm-kanban-board {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 0.35rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  
  .tm-kanban-column {
    flex: 0 0 320px;
    scroll-snap-align: start;
    margin: 0 0.25rem;
  }
}

/* Mobile filter toggle adjustments */
@media (max-width: 767.98px) {
  .tm-filter-toggle,
  .tm-filter-toggle:hover,
  .tm-filter-toggle:focus,
  .tm-filter-toggle:active,
  .tm-filter-toggle:focus-visible,
  .tm-filter-toggle.active,
  .tm-filter-toggle.collapsed,
  .tm-filter-toggle:not(:disabled):not(.disabled):active,
  .tm-filter-toggle[aria-expanded='true'],
  .tm-filter-toggle[aria-expanded='false'] {
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    column-gap: 5px !important;
  }
  
  .tm-filter-toggle::before {
    width: 13px !important;
    height: 13px !important;
    flex: 0 0 13px !important;
    background-size: 13px 13px !important;
  }
  
  .tm-filter-toggle__label,
  .tm-filter-toggle:hover .tm-filter-toggle__label,
  .tm-filter-toggle:focus .tm-filter-toggle__label,
  .tm-filter-toggle:active .tm-filter-toggle__label,
  .tm-filter-toggle:focus-visible .tm-filter-toggle__label,
  .tm-filter-toggle.active .tm-filter-toggle__label,
  .tm-filter-toggle.collapsed .tm-filter-toggle__label,
  .tm-filter-toggle:not(:disabled):not(.disabled):active .tm-filter-toggle__label,
  .tm-filter-toggle[aria-expanded='true'] .tm-filter-toggle__label,
  .tm-filter-toggle[aria-expanded='false'] .tm-filter-toggle__label {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }
}

/* Loading states for buttons */
.btn.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn.loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Badge stability */
.badge,
.badge:hover,
.badge:focus,
.badge:active {
  font-size: 0.75em !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 0.25em 0.4em !important;
  transform: none !important;
  transition: none !important;
}

/* Form control stability */
.form-control,
.form-control:hover,
.form-control:focus,
.form-control:active {
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-width: 1px !important;
  transform: none !important;
  transition: none !important;
  box-sizing: border-box !important;
}

.form-select,
.form-select:hover,
.form-select:focus,
.form-select:active {
  padding: 0.375rem 2.25rem 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-width: 1px !important;
  transform: none !important;
  transition: none !important;
  box-sizing: border-box !important;
}

/* Sidebar: centered, larger app logo */
.sidenav .tm-sidenav-header {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.sidenav .tm-sidenav-brand {
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.sidenav .tm-sidenav-logo {
  max-width: min(100%, 11rem);
  max-height: 4.25rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Sidebar nav — active item (soft blue pill + icon tile) */
#sidenav-main .navbar-nav > .nav-item > .nav-link,
#sidenav-main .navbar-nav .collapse .nav .nav-link {
  margin-left: 0.65rem;
  margin-right: 0.65rem;
  border-radius: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link {
  display: flex;
  align-items: center;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link:not(.active):hover,
#sidenav-main .navbar-nav .collapse .nav .nav-link:not(.active):hover {
  background: rgba(241, 245, 249, 0.95);
}

#sidenav-main .navbar-nav > .nav-item > .nav-link:not(.active) .nav-link-text {
  color: #67748e;
  font-weight: 500;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link:not(.active) > .icon {
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07) !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active {
  background: #eef4ff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #1e293b !important;
  font-weight: 600;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active .nav-link-text {
  color: #1e293b !important;
  font-weight: 600;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active > .icon {
  background: #dbeafe !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.14) !important;
}

#sidenav-main .navbar-nav > .nav-item > .nav-link.active > .icon i,
#sidenav-main .navbar-nav > .nav-item > .nav-link.active > .icon i.text-dark {
  color: #1e3a5f !important;
  opacity: 1 !important;
}

#sidenav-main .navbar-nav .collapse .nav .nav-link {
  padding-left: 0.85rem;
  padding-right: 0.65rem;
}

#sidenav-main .navbar-nav .collapse .nav .nav-link:not(.active) .nav-link-text {
  color: #8392ab;
  font-weight: 500;
}

#sidenav-main .navbar-nav .collapse .nav .nav-link.active {
  background: #eef4ff !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #1e293b !important;
  font-weight: 600;
}

#sidenav-main .navbar-nav .collapse .nav .nav-link.active .nav-link-text {
  color: #1e293b !important;
  font-weight: 600;
}

#sidenav-main .navbar-nav .collapse .nav .nav-link.active > i,
#sidenav-main .navbar-nav .collapse .nav .nav-link.active > i.text-dark {
  color: #1e3a5f !important;
  opacity: 1 !important;
}

/* Login page: logo above Sign in */
.tm-login-logo {
  display: inline-block;
  max-width: min(100%, 12rem);
  max-height: 4rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

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

/* Admin dashboard: uniform cards + compact task status (label | bar | count) */
.tm-dashboard .tm-dashboard-card {
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.375rem -0.0625rem rgba(20, 20, 20, 0.12),
    0 0.125rem 0.25rem -0.0625rem rgba(20, 20, 20, 0.07);
  background-color: #fff;
}

.tm-dashboard .tm-dashboard-card-body {
  padding: 0.5rem 0.75rem;
}

.tm-dashboard .tm-dashboard-widget-inner {
  width: 100%;
  min-width: 0;
}

.tm-dashboard .tm-dashboard-widget-inner .numbers {
  min-width: 0;
}

.tm-dashboard .tm-dashboard-widget-icon {
  margin-left: auto;
  margin-right: 0.5rem;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}

.tm-dashboard .tm-dashboard-widget-icon i {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.tm-dashboard .tm-dashboard-status-progress {
  height: 6px;
  border-radius: 0.25rem;
  min-width: 3rem;
  background-color: #e9ecef;
}

.tm-dashboard .tm-dashboard-status-progress .progress-bar {
  border-radius: 0.25rem;
}

.tm-dashboard .tm-dashboard-status-label {
  flex: 0 0 auto;
  width: 6.5rem;
  max-width: 42%;
}

.tm-dashboard .tm-dashboard-status-count {
  flex: 0 0 auto;
  min-width: 2.5rem;
  text-align: right;
}

@media (max-width: 575.98px) {
  .tm-dashboard .tm-dashboard-status-label {
    width: auto;
    max-width: 38%;
  }
}

/* Dashboard: task status in narrow right column (~25%) */
.tm-dashboard-sidebar .tm-dashboard-status-label {
  width: 4.75rem;
  max-width: 40%;
  font-size: 0.65rem;
}

.tm-dashboard-sidebar .tm-dashboard-status-count {
  min-width: 2rem;
  font-size: 0.65rem;
}

.tm-dashboard-sidebar .tm-dashboard-task-status-card .card-header h6 {
  font-size: 0.8rem;
}

@media (max-width: 991.98px) {
  .tm-topnav-mobile-row {
    min-height: 2.35rem;
  }

  .tm-dashboard .tm-dashboard-card-body {
    padding: 0.45rem 0.65rem;
  }

  .tm-dashboard .icon.icon-shape {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .tm-dashboard .tm-dashboard-widget-icon {
    margin-right: 0.5rem;
  }

  .tm-dashboard .icon.icon-shape i {
    font-size: 0.95rem !important;
    display: block;
    line-height: 1;
    margin: 0;
  }

  .tm-dashboard .tm-dashboard-status-progress {
    height: 5px;
  }

  .tm-dashboard .tm-dashboard-review-btn {
    width: 100%;
    text-align: center;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
  }
}

@media (max-width: 575.98px) {
  .tm-dashboard {
    gap: 0.65rem !important;
  }

  .tm-dashboard .row.g-3 {
    --bs-gutter-y: 0.65rem;
  }

  .tm-dashboard .tm-dashboard-status-row {
    flex-wrap: wrap;
    row-gap: 0.25rem;
  }

  .tm-dashboard .tm-dashboard-status-label,
  .tm-dashboard .tm-dashboard-status-count {
    width: auto;
    max-width: none;
    font-size: 0.68rem;
  }

  .tm-dashboard .tm-dashboard-status-count {
    margin-left: auto;
    min-width: 1.75rem;
  }

  .tm-dashboard .tm-dashboard-status-progress {
    flex: 1 0 100%;
    width: 100%;
  }

  .tm-dashboard .tm-dashboard-widget-icon {
    margin-right: 0.65rem;
  }
}

/* Inline notices (replaces Bootstrap .alert for contextual copy) */
.tm-inline-notice {
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.tm-inline-notice--warning {
  background: #fff8e6;
  border-color: #ffe08a;
  color: #664d03;
}

.tm-inline-notice--info {
  background: #e7f3ff;
  border-color: #b6daff;
  color: #084298;
}

.tm-inline-notice--muted {
  background: #f8f9fa;
  border-color: #dee2e6;
  color: #495057;
}

/* Dashboard v2 — card layout matching reference mockup */
.tm-dashboard-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: stretch;
}

.tm-dashboard-kpi-row__cell {
  display: flex;
  min-width: 0;
}

.tm-dashboard-kpi-row__cell > .tm-dashboard-card,
.tm-dashboard-kpi-row__cell > a.tm-dashboard-card {
  flex: 1 1 auto;
  width: 100%;
}

.tm-dashboard--v2 .tm-dashboard-kpi-row .tm-dashboard-status-label {
  width: 4.25rem;
  max-width: 38%;
  font-size: 0.62rem;
}

.tm-dashboard--v2 .tm-dashboard-kpi-row .tm-dashboard-status-count {
  min-width: 1.5rem;
  font-size: 0.62rem;
}

.tm-dashboard--v2 .tm-dashboard-kpi-row .tm-dashboard-status-progress {
  height: 5px;
  min-width: 1.5rem;
}

.tm-dashboard--v2 .tm-dashboard-kpi-row .tm-dashboard-panel__header h6 {
  font-size: 0.8rem;
}

.tm-dashboard--v2 .tm-dashboard-kpi-row .tm-dashboard-card-body {
  padding: 0.85rem 0.9rem;
}

@media (max-width: 1199.98px) {
  .tm-dashboard-kpi-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .tm-dashboard-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .tm-dashboard-kpi-row {
    grid-template-columns: 1fr;
  }
}

.tm-dashboard-split-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  align-items: start;
}

.tm-dashboard-split-row--stretch {
  align-items: stretch;
}

.tm-dashboard-split-row__cell {
  display: flex;
  min-width: 0;
}

.tm-dashboard-split-row__cell > .tm-dashboard-card {
  flex: 1 1 auto;
  width: 100%;
}

.tm-dashboard-split-row--stretch .tm-dashboard-split-row__cell > .tm-dashboard-card {
  height: 100%;
}

@media (max-width: 991.98px) {
  .tm-dashboard-split-row {
    grid-template-columns: 1fr;
  }
}

.tm-dashboard--v2 .tm-dashboard-card {
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.tm-dashboard--v2 .tm-dashboard-card-body {
  padding: 1rem 1.1rem;
}

.tm-dashboard--v2 .tm-dashboard-panel__header {
  padding: 1rem 1.1rem 0;
}

.tm-dashboard--v2 .tm-dashboard-panel__header h6 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #344767;
}

.tm-dashboard--v2 .tm-dashboard-panel__footer-link {
  color: #5e72e4;
  font-weight: 600;
  text-decoration: none;
}

.tm-dashboard--v2 .tm-dashboard-panel__footer-link:hover {
  color: #324cdd;
  text-decoration: underline;
}

.tm-dashboard-kpi__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-dashboard-kpi__icon i {
  font-size: 1rem;
  line-height: 1;
}

.tm-dashboard-kpi__icon--blue { background: #e7f1ff; color: #3b82f6; }
.tm-dashboard-kpi__icon--indigo { background: #eceafe; color: #6366f1; }
.tm-dashboard-kpi__icon--cyan { background: #e0f7fa; color: #06b6d4; }
.tm-dashboard-kpi__icon--purple { background: #f3e8ff; color: #a855f7; }
.tm-dashboard-kpi__icon--amber { background: #fff4e5; color: #fb923c; }
.tm-dashboard-kpi__icon--green { background: #e8f8ef; color: #22c55e; }
.tm-dashboard-kpi__icon--primary { background: #e7f1ff; color: #5e72e4; }
.tm-dashboard-kpi__icon--warning { background: #fff4e5; color: #fb923c; }

.tm-dashboard-kpi__value {
  font-size: 1.35rem;
  color: #344767;
}

.tm-dashboard-kpi__link {
  color: #5e72e4;
  font-weight: 600;
}

.tm-dashboard--v2 .tm-dashboard-status-label {
  width: 5.5rem;
  max-width: 36%;
}

.tm-dashboard-review-cta {
  background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
  border-color: #dbe4ff;
}

.tm-dashboard-review-cta__art {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.75rem;
  background: #5e72e4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.tm-dashboard-project-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tm-dashboard-project-row {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tm-dashboard-project-row:hover {
  background: #f8f9fa;
  border-color: #e9ecef;
}

.tm-dashboard-project-row__main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.tm-dashboard-project-row__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.35rem;
  background: #f0f2f5;
  color: #67748e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-dashboard-project-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-dashboard-project-row__status {
  flex-shrink: 0;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

.tm-dashboard-project-row__team {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 5.5rem;
}

.tm-dashboard-project-row__tasks {
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
}

.tm-dashboard-chart-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  min-height: 10.5rem;
}

.tm-dashboard-chart-layout__donut {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tm-dashboard-chart-layout__legend {
  flex: 1 1 0;
  min-width: 0;
}

.tm-dashboard-donut-wrap {
  width: 160px;
  height: 160px;
}

.tm-dashboard-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tm-dashboard-chart-legend__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.tm-dashboard-chart-legend__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-dashboard-activity-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 10.5rem;
}

.tm-dashboard-activity-list--fill .tm-dashboard-activity-item {
  flex: 1;
  align-items: center;
  min-height: 3.25rem;
}

.tm-dashboard-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid #f0f2f5;
}

.tm-dashboard-activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tm-dashboard-activity-item:first-child {
  padding-top: 0;
}

.tm-dashboard-activity-item__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.8rem;
}

.tm-dashboard-activity-item__icon--success { background: #e8f8ef; color: #22c55e; }
.tm-dashboard-activity-item__icon--primary { background: #e7f1ff; color: #3b82f6; }
.tm-dashboard-activity-item__icon--indigo { background: #eceafe; color: #6366f1; }
.tm-dashboard-activity-item__icon--purple { background: #f3e8ff; color: #a855f7; }
.tm-dashboard-activity-item__icon--danger { background: #fde8e8; color: #ef4444; }
.tm-dashboard-activity-item__icon--info { background: #e0f7fa; color: #06b6d4; }
.tm-dashboard-activity-item__icon--secondary { background: #f0f2f5; color: #67748e; }

.tm-dashboard-activity-item__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #344767;
  line-height: 1.3;
}

.tm-dashboard-activity-item__desc {
  font-size: 0.75rem;
  color: #8392ab;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.tm-dashboard-activity-item__time {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #8392ab;
  white-space: nowrap;
  padding-top: 0.1rem;
  margin-left: 0.5rem;
}

.tm-dashboard-panel--compact {
  align-self: flex-start;
  width: 100%;
  height: auto;
}

.tm-dashboard-panel--stretch {
  align-self: stretch;
  height: 100%;
}

.tm-dashboard-panel--compact .tm-dashboard-panel__header {
  padding: 0.75rem 0.85rem 0;
}

.tm-dashboard-panel--compact .tm-dashboard-card-body {
  padding: 0.5rem 0.65rem 0.65rem;
}

.tm-dashboard-panel--compact.tm-dashboard-panel--stretch .tm-dashboard-card-body {
  flex: 1 1 auto;
}

.tm-dashboard-quick-actions-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.tm-dashboard-quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.2rem;
  padding: 0.55rem 0.35rem 0.5rem;
  border-radius: 0.5rem;
  border: none;
  min-height: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  color: #344767;
}

.tm-dashboard-quick-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.07);
  color: #344767;
}

.tm-dashboard-quick-action--blue { background: #f0f6ff; }
.tm-dashboard-quick-action--green { background: #edfbf3; }
.tm-dashboard-quick-action--purple { background: #f7f0ff; }
.tm-dashboard-quick-action--amber { background: #fff9ed; }

.tm-dashboard-quick-action__icon {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.75rem;
  margin-bottom: 0.1rem;
}

.tm-dashboard-quick-action--blue .tm-dashboard-quick-action__icon { color: #3b82f6; }
.tm-dashboard-quick-action--green .tm-dashboard-quick-action__icon { color: #22c55e; }
.tm-dashboard-quick-action--purple .tm-dashboard-quick-action__icon { color: #a855f7; }
.tm-dashboard-quick-action--amber .tm-dashboard-quick-action__icon { color: #f59e0b; }

.tm-dashboard-quick-action__title {
  font-size: 0.72rem;
  font-weight: 700;
  color: #344767;
  line-height: 1.2;
}

.tm-dashboard-quick-action__desc {
  font-size: 0.625rem;
  color: #8392ab;
  line-height: 1.2;
  max-width: 100%;
}

@media (max-width: 991.98px) {
  .tm-dashboard-quick-actions-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .tm-dashboard-project-row {
    flex-wrap: wrap;
  }

  .tm-dashboard-project-row__tasks {
    margin-left: 0;
    width: 100%;
    text-align: right;
  }

  .tm-dashboard-chart-layout {
    flex-direction: column;
    min-height: 0;
  }

  .tm-dashboard-quick-actions-row {
    grid-template-columns: 1fr 1fr;
  }

  .tm-dashboard-activity-item__time {
    display: block;
    width: 100%;
    margin-left: 3.1rem;
    margin-top: 0.15rem;
  }
}

/* —— Top navigation (bell + profile pills) —— */
.tm-topnav .navbar-nav,
.tm-topnav .nav-link {
  padding: 0;
}

.tm-topnav-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.tm-topnav-pill {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.04);
}

.tm-topnav-pill--bell {
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.tm-topnav-bell-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #525f7f;
  text-decoration: none;
  line-height: 1;
}

.tm-topnav-bell-trigger:hover {
  color: #344767;
}

.tm-topnav-bell-trigger i {
  font-size: 1rem;
}

.tm-topnav-bell-dot {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #3b82f6;
  border-radius: 50%;
  border: 2px solid #fff;
  pointer-events: none;
}

.tm-topnav-pill--profile {
  min-height: 2.75rem;
  padding: 0.3rem 0.7rem 0.3rem 0.35rem;
}

.tm-topnav-profile-trigger {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.tm-topnav-profile-trigger:hover {
  color: inherit;
}

.tm-topnav-profile-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e9ecef;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.tm-topnav-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-topnav-profile-avatar--fallback {
  color: #475569;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

.tm-topnav-profile-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #344767;
  line-height: 1.25;
}

.tm-topnav-profile-role {
  font-size: 0.68rem;
  color: #8392ab;
  line-height: 1.25;
}

.tm-topnav-profile-chevron {
  font-size: 0.62rem;
  color: #8392ab;
  margin-left: 0.1rem;
}

.tm-topnav-profile-menu {
  min-width: 11rem;
  border-radius: 0.75rem;
  border: 1px solid #e9ecef;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.tm-topnav-profile-menu .dropdown-item {
  font-size: 0.8rem;
  padding: 0.45rem 0.85rem;
}

.tm-notification-dropdown {
  width: 22rem;
  min-width: 22rem;
  max-width: calc(100vw - 1rem);
  border-radius: 0.75rem;
  border: 1px solid #e9ecef;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.tm-notification-view-all {
  color: #8392ab;
  text-decoration: none;
}

.tm-notification-view-all:hover {
  color: #344767;
}

.tm-notification-dropdown-list {
  display: block !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  padding-right: 0.22rem !important;
  padding-bottom: 0.55rem !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
  box-sizing: border-box;
  scroll-padding-bottom: 0.55rem;
}

.tm-notification-dropdown-list::-webkit-scrollbar {
  width: 6px;
}

.tm-notification-dropdown-list::-webkit-scrollbar-thumb {
  background: #c9ced8;
  border-radius: 3px;
}

.tm-notification-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

.tm-notification-dropdown .tm-notification-entry {
  margin-bottom: 0.18rem !important;
}

.tm-notification-dropdown .tm-notification-entry:last-child {
  margin-bottom: 0.55rem !important;
}

.tm-notification-dropdown .tm-notification-item {
  padding: 0.22rem 0.35rem !important;
}

.tm-notification-item--unread {
  background: rgba(59, 130, 246, 0.08);
}

.tm-notification-dropdown .tm-notification-item__title {
  font-size: 0.74rem;
  font-weight: 400 !important;
  line-height: 1.16;
  color: #344767 !important;
  margin: 0;
  word-break: break-word;
}

.tm-notification-dropdown .tm-notification-item__message {
  font-size: 0.67rem;
  color: #67748e;
  line-height: 1.15;
  margin-top: 0.02rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font-weight: 400;
}

.tm-notification-dropdown .tm-notification-item__meta {
  font-size: 0.58rem;
  color: #8392ab;
  margin-top: 0.05rem;
  text-transform: none;
  font-weight: 400;
}

.tm-notification-icon {
  width: 1.7rem !important;
  height: 1.7rem !important;
  min-width: 1.7rem !important;
  min-height: 1.7rem !important;
  margin-top: 0.02rem;
}

.tm-notification-dropdown .tm-notification-icon i,
.tm-notification-dropdown .tm-notification-icon i.fa,
.tm-notification-dropdown .tm-notification-icon i.fas {
  font-size: 0.58rem !important;
  line-height: 1 !important;
  color: #2b3448 !important;
  opacity: 0.95;
  text-shadow: none !important;
}

.tm-notification-icon--success {
  background: linear-gradient(310deg, #17ad37, #98ec2d) !important;
}

.tm-notification-icon--warning {
  background: linear-gradient(310deg, #f53939, #fbcf33) !important;
}

.tm-notification-icon--primary {
  background: linear-gradient(310deg, #2152ff, #21d4fd) !important;
}

.tm-notification-icon--danger {
  background: linear-gradient(310deg, #ea0606, #ff667c) !important;
}

.tm-notification-icon--neutral {
  background: linear-gradient(310deg, #627594, #a8b8d8) !important;
}

.tm-notification-empty {
  padding: 0.75rem 0.5rem;
  color: #8392ab;
  font-size: 0.78rem;
  text-align: left;
}

/* —— Projects index —— */
.tm-projects-page {
  --tm-projects-accent: #f97316;
  --tm-projects-progress: #8b5cf6;
}

.tm-projects-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tm-projects-header__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-projects-header__team-tag {
  font-size: 0.85rem;
  font-weight: 500;
  color: #8392ab;
  margin-left: 0.35rem;
}

.tm-projects-header__subtitle {
  font-size: 0.875rem;
  color: #8392ab;
  max-width: 36rem;
}

.tm-projects-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-projects-filter-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  padding: 0.45rem 0.85rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.tm-projects-filter-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.tm-projects-create-btn {
  background: var(--tm-projects-accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.45rem 0.9rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
  white-space: nowrap;
}

.tm-projects-create-btn:hover,
.tm-projects-create-btn:focus {
  background: #ea580c !important;
  color: #fff !important;
}

.tm-projects-filters-card {
  border-radius: 0.75rem;
}

.tm-projects-stage-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  border-bottom: 1px solid #e9ecef;
  margin-bottom: 1rem;
}

.tm-projects-stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.15rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: #8392ab;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tm-projects-stage-tab:hover {
  color: #475569;
}

.tm-projects-stage-tab.is-active {
  color: var(--tm-projects-accent);
  border-bottom-color: var(--tm-projects-accent);
}

.tm-projects-stage-tab.is-active i {
  color: var(--tm-projects-accent);
}

.tm-projects-stage-tab--success:not(.is-active) i {
  color: #22c55e;
}

.tm-projects-table-card {
  border-radius: 0.85rem;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.tm-projects-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #f0f2f5;
  padding: 0.85rem 1rem;
  background: #fff;
}

.tm-projects-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}

.tm-projects-table tbody tr:last-child td {
  border-bottom: none;
}

.tm-projects-project-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 12rem;
}

.tm-projects-project-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.95rem;
}

.tm-projects-project-icon--initials {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-projects-project-icon--purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.tm-projects-project-icon--mint {
  background: #d1fae5;
  color: #059669;
}

.tm-projects-project-icon--amber {
  background: #ffedd5;
  color: #ea580c;
}

.tm-projects-project-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.tm-projects-project-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.3;
}

.tm-projects-project-name:hover {
  color: #334155;
}

.tm-projects-project-desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.tm-projects-team-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.tm-projects-team-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.65rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-projects-team-name {
  font-size: 0.8rem;
  color: #475569;
  font-weight: 500;
}

.tm-projects-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #e8f1ff;
  color: #3b5998;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.tm-projects-status-badge--success {
  background: #dcfce7;
  color: #15803d;
}

.tm-projects-status-badge--muted {
  background: #f1f5f9;
  color: #64748b;
}

.tm-projects-table tbody tr {
  transition: background-color 0.12s ease;
}

.tm-projects-table tbody tr:hover {
  background: #fafbfc;
}

.tm-admin-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  background: #f3e8ff;
  color: #6d28d9;
  font-size: 0.68rem;
  font-weight: 600;
}

.tm-projects-team-avatar--photo {
  overflow: hidden;
}

.tm-projects-team-avatar--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-projects-team-avatar--purple {
  background: #ede9fe;
  color: #6d28d9;
}

.tm-projects-team-avatar--blue {
  background: #dbeafe;
  color: #2563eb;
}

.tm-projects-team-avatar--mint {
  background: #d1fae5;
  color: #059669;
}

.tm-projects-team-avatar--amber {
  background: #ffedd5;
  color: #ea580c;
}

.tm-projects-progress {
  min-width: 6.5rem;
}

.tm-projects-progress__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.3rem;
}

.tm-projects-progress__track {
  height: 0.35rem;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}

.tm-projects-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tm-projects-progress);
}

.tm-projects-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.tm-projects-action-btn {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
  font-size: 0.75rem;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tm-projects-action-btn:hover,
.tm-projects-action-btn:focus {
  background: #f8fafc;
  color: #334155;
  border-color: #cbd5e1;
}

.tm-projects-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #f0f2f5;
}

.tm-projects-footer__summary {
  font-size: 0.78rem;
  color: #94a3b8;
}

.tm-projects-footer__pagination .pagination {
  margin-bottom: 0;
  gap: 0.25rem;
}

.tm-projects-footer__pagination .page-link {
  border-radius: 0.4rem;
  border: none;
  color: #64748b;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
  box-shadow: none;
}

.tm-projects-footer__pagination .page-item.active .page-link {
  background: var(--tm-projects-progress);
  color: #fff;
}

.tm-projects-footer__pagination .page-item.disabled .page-link {
  color: #cbd5e1;
  background: transparent;
}

.tm-projects-page .tm-project-members-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 28px;
}

.tm-projects-page .tm-project-members-stack {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.tm-projects-page .tm-member-avatar-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef2ff;
  color: #344767;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
}

.tm-projects-page .tm-more-members-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: #fff3cd;
  color: #856404;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* —— Team members index —— */
.tm-team-members-page {
  --tm-team-accent: #f97316;
}

.tm-team-members-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tm-team-members-header__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-team-members-header__tag {
  font-size: 0.85rem;
  font-weight: 500;
  color: #8392ab;
  margin-left: 0.35rem;
}

.tm-team-members-header__subtitle {
  font-size: 0.875rem;
  color: #8392ab;
  max-width: 36rem;
}

.tm-team-members-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-team-members-filter-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  padding: 0.45rem 0.85rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tm-team-members-filter-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.tm-team-members-filter-btn__chevron {
  font-size: 0.6rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.tm-team-members-filter-btn[aria-expanded='true'] .tm-team-members-filter-btn__chevron {
  transform: rotate(180deg);
}

.tm-team-members-create-btn {
  background: var(--tm-team-accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.45rem 0.9rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
  white-space: nowrap;
}

.tm-team-members-create-btn:hover,
.tm-team-members-create-btn:focus {
  background: #ea580c !important;
  color: #fff !important;
}

.tm-team-members-filters-card {
  border-radius: 0.75rem;
}

.tm-team-card {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.85rem;
  padding: 1.1rem 1.15rem 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tm-team-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.tm-team-card--unassigned {
  border-style: dashed;
  border-color: #d4d4d8;
}

.tm-team-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.tm-team-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.tm-team-card__icon--initials {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-team-card--purple .tm-team-card__icon {
  background: #f3e8ff;
  color: #7c3aed;
}

.tm-team-card--teal .tm-team-card__icon {
  background: #ccfbf1;
  color: #0d9488;
}

.tm-team-card--amber .tm-team-card__icon {
  background: #ffedd5;
  color: #ea580c;
}

.tm-team-card--purple {
  --tm-team-card-accent: #7c3aed;
  --tm-team-card-soft: #f5f0ff;
}

.tm-team-card--teal {
  --tm-team-card-accent: #0d9488;
  --tm-team-card-soft: #ecfdf8;
}

.tm-team-card--amber {
  --tm-team-card-accent: #ea580c;
  --tm-team-card-soft: #fff7ed;
}

.tm-team-card__menu-btn {
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.4rem;
  padding: 0;
}

.tm-team-card__menu-btn:hover {
  background: #f1f5f9;
  color: #64748b;
}

.tm-team-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 0.35rem;
}

.tm-team-card__desc {
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
  margin-bottom: 1rem;
  min-height: 2.25rem;
}

.tm-team-card__section {
  margin-bottom: 0.85rem;
}

.tm-team-card__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}

.tm-team-card__person {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tm-team-card__person-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.tm-team-card__members {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tm-team-card__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--tm-team-card-soft, #f1f5f9);
  color: var(--tm-team-card-accent, #475569);
  overflow: hidden;
  flex-shrink: 0;
}

.tm-team-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-team-card__avatar--supervisor {
  background: var(--tm-team-card-soft, #f1f5f9);
  color: var(--tm-team-card-accent, #475569);
}

.tm-team-card__avatar--more {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.tm-team-card__avatar--add {
  border: 1px dashed #cbd5e1;
  background: #fff;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.75rem;
}

.tm-team-card__avatar--add:hover {
  border-color: var(--tm-team-card-accent, #64748b);
  color: var(--tm-team-card-accent, #64748b);
  background: var(--tm-team-card-soft, #f8fafc);
}

.tm-team-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  padding-top: 0.85rem;
  margin-top: auto;
  border-top: 1px solid #f0f2f5;
}

.tm-team-card__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
}

.tm-team-card__stat i {
  font-size: 0.8rem;
  color: #94a3b8;
  margin-bottom: 0.15rem;
}

.tm-team-card__stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.tm-team-card__stat-label {
  font-size: 0.72rem;
  color: #94a3b8;
}

.tm-team-card__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.85rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.5rem;
  background: var(--tm-team-card-soft, #f1f5f9);
  color: var(--tm-team-card-accent, #475569);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.tm-team-card__cta:hover {
  background: color-mix(in srgb, var(--tm-team-card-soft, #f1f5f9) 70%, #fff);
  color: var(--tm-team-card-accent, #475569);
}

.tm-team-members-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
}

.tm-team-members-footer__summary {
  font-size: 0.78rem;
  color: #94a3b8;
}

.tm-team-members-footer__pagination .pagination {
  margin-bottom: 0;
  gap: 0.25rem;
}

.tm-team-members-footer__pagination .page-link {
  border-radius: 0.4rem;
  border: none;
  color: #64748b;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
}

.tm-team-members-footer__pagination .page-item.active .page-link {
  background: var(--tm-team-accent);
  color: #fff;
}

.tm-team-members-table-card {
  border-radius: 0.85rem;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.tm-team-members-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #f0f2f5;
  padding: 0.85rem 1rem;
  background: #fff;
}

.tm-team-members-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid #f0f2f5;
  font-size: 0.8rem;
  vertical-align: middle;
}

.tm-team-members-table tbody tr:last-child td {
  border-bottom: none;
}

.tm-team-members-table__row:hover {
  background: #fafbfc;
}

.tm-team-members-member-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 10rem;
}

.tm-team-members-member-cell__avatar {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  overflow: hidden;
}

.tm-team-members-member-cell__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-team-members-member-cell__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.tm-team-members-email {
  font-size: 0.8rem;
  color: #64748b;
}

.tm-team-members-projects {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: 22rem;
}

.tm-team-members-projects__names {
  font-size: 0.8rem;
  font-weight: 500;
  color: #334155;
  line-height: 1.4;
}

.tm-team-members-projects-empty {
  color: #94a3b8;
}

.tm-team-members-more-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: #fff7ed;
  color: #ea580c;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tm-team-members-status-badge {
  display: inline-flex;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.tm-team-members-status-badge.is-active {
  background: #dcfce7;
  color: #15803d;
}

.tm-team-members-status-badge.is-inactive {
  background: #f1f5f9;
  color: #64748b;
}

.tm-team-members-page .tm-projects-actions {
  justify-content: flex-end;
}

.tm-team-members-page .tm-projects-action-btn {
  flex-shrink: 0;
}

.tm-team-members-action-btn--danger:hover,
.tm-team-members-action-btn--danger:focus {
  color: #dc2626 !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}

@media (max-width: 991.98px) {
  .tm-team-members-table thead {
    display: none;
  }

  .tm-team-members-table tbody tr {
    display: block;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f2f5;
  }

  .tm-team-members-table tbody td {
    display: block;
    border: none;
    padding: 0.35rem 0;
  }

  .tm-team-members-table tbody td.text-end {
    text-align: left !important;
    padding-top: 0.65rem;
  }

  .tm-team-members-page .tm-projects-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 991.98px) {
  .tm-projects-stage-tabs {
    gap: 0.15rem 0.85rem;
  }

  .tm-projects-table thead {
    display: none;
  }

  .tm-projects-table tbody tr {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f2f5;
  }

  .tm-projects-table tbody td {
    display: block;
    border: none;
    padding: 0.35rem 1rem;
  }

  .tm-projects-table tbody td.text-end {
    text-align: left !important;
  }
}

@media (max-width: 575.98px) {
  .tm-notification-dropdown {
    width: min(22rem, calc(100vw - 0.8rem));
    min-width: min(22rem, calc(100vw - 0.8rem));
    margin-right: -0.15rem;
  }

  .tm-notification-item {
    padding: 0.26rem 0.34rem;
  }

  .tm-topnav-pill--profile {
    padding: 0.3rem;
  }

  .tm-tasks-table thead {
    display: none;
  }

  .tm-tasks-project-card__header {
    flex-wrap: wrap;
  }
}

/* —— Tasks index (project accordion + table) —— */
.tm-tasks-page {
  --tm-tasks-accent: #8b5cf6;
}

.tm-tasks-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tm-tasks-header__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-tasks-header__subtitle {
  font-size: 0.875rem;
  color: #8392ab;
  max-width: 38rem;
}

.tm-tasks-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-tasks-filter-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  padding: 0.45rem 0.85rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.tm-tasks-create-btn {
  background: var(--tm-tasks-accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.45rem 0.9rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.28) !important;
  white-space: nowrap;
}

.tm-tasks-create-btn:hover,
.tm-tasks-create-btn:focus {
  background: #7c3aed !important;
  color: #fff !important;
}

.tm-tasks-filters-card {
  border-radius: 0.75rem;
}

.tm-tasks-projects {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tm-tasks-project-card {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.85rem;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.tm-tasks-project-card__header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border: none;
  background: #fff;
  text-align: left;
}

.tm-tasks-project-card__header:not(.collapsed) {
  border-bottom: 1px solid #f0f2f5;
}

.tm-tasks-project-card__header.collapsed .tm-tasks-project-card__chevron {
  transform: rotate(0deg);
}

.tm-tasks-project-card__header:not(.collapsed) .tm-tasks-project-card__chevron {
  transform: rotate(180deg);
}

.tm-tasks-project-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.tm-tasks-project-card__icon--initials {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-tasks-project-card--teal .tm-tasks-project-card__icon {
  background: #ccfbf1;
  color: #0d9488;
}

.tm-tasks-project-card--mint .tm-tasks-project-card__icon {
  background: #d1fae5;
  color: #059669;
}

.tm-tasks-project-card--purple .tm-tasks-project-card__icon {
  background: #f3e8ff;
  color: #7c3aed;
}

.tm-tasks-project-card--amber .tm-tasks-project-card__icon {
  background: #ffedd5;
  color: #ea580c;
}

.tm-tasks-project-card--blue .tm-tasks-project-card__icon {
  background: #dbeafe;
  color: #2563eb;
}

.tm-tasks-project-card__name {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
}

.tm-tasks-project-card__desc {
  display: block;
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 0.1rem;
}

.tm-tasks-project-card__count {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
  margin-left: auto;
}

.tm-tasks-project-card--teal .tm-tasks-project-card__count-dot {
  background: #14b8a6;
}

.tm-tasks-project-card--mint .tm-tasks-project-card__count-dot {
  background: #10b981;
}

.tm-tasks-project-card--purple .tm-tasks-project-card__count-dot {
  background: #8b5cf6;
}

.tm-tasks-project-card--amber .tm-tasks-project-card__count-dot {
  background: #f59e0b;
}

.tm-tasks-project-card--blue .tm-tasks-project-card__count-dot {
  background: #3b82f6;
}

.tm-tasks-project-card__count-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-tasks-project-card__chevron {
  color: #94a3b8;
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tm-tasks-project-card__body {
  padding: 0 0 0.85rem;
}

.tm-tasks-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #f0f2f5;
  padding: 0.7rem 1rem;
  background: #fafbfc;
}

.tm-tasks-table__sortable {
  white-space: nowrap;
}

.tm-tasks-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #f0f2f5;
  font-size: 0.8rem;
  vertical-align: middle;
}

.tm-tasks-table__row:hover {
  background: #fafbfc;
}

.tm-tasks-task-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 12rem;
}

.tm-tasks-task-cell__check {
  width: 1.1rem;
  height: 1.1rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.tm-tasks-task-cell__title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.3;
}

.tm-tasks-task-cell__title:hover {
  color: #5b21b6;
}

.tm-tasks-task-cell__desc {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.35;
  margin-top: 0.12rem;
}

.tm-tasks-person {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.tm-tasks-person__avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.62rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-tasks-person__avatar--supervisor {
  background: #e0f2fe;
  color: #0369a1;
}

.tm-tasks-person__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.tm-tasks-assign-btn,
.tm-tasks-assign-btn:hover,
.tm-tasks-assign-btn:focus,
.tm-tasks-assign-btn:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  min-height: 28px !important;
  max-height: 28px !important;
  height: 28px !important;
  padding: 0 0.55rem !important;
  border-radius: 0.45rem !important;
  box-sizing: border-box !important;
  background: #f5f3ff !important;
  border: 1px solid #ddd6fe !important;
  color: #6d28d9 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.tm-tasks-assign-btn:hover,
.tm-tasks-assign-btn:focus {
  background: #ede9fe !important;
  color: #5b21b6 !important;
}

.tm-tasks-sa-delegated-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.42rem;
  border-radius: 0.3rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
  background: #ede9fe;
  color: #6d28d9;
  border: 1px solid #ddd6fe;
}

.tm-deadline-badge-wrap--compact {
  flex-direction: column;
  align-items: flex-start !important;
  gap: 0.25rem !important;
}

.tm-deadline-badge-wrap__date {
  white-space: nowrap;
}

.tm-deadline-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.tm-deadline-badge--on_track {
  background: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}

.tm-deadline-badge--attention {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
}

.tm-deadline-badge--approaching {
  background: #ffe5d0;
  color: #984c0c;
  border: 1px solid #fecba1;
}

.tm-deadline-badge--urgent {
  background: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

.tm-deadline-badge--overdue {
  background: #495057;
  color: #f8f9fa;
  border: 1px solid #343a40;
}

.tm-tasks-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.tm-tasks-status-pill__dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.tm-tasks-status-pill--in_progress {
  background: #fef9c3;
  color: #a16207;
}

.tm-tasks-status-pill--in_progress .tm-tasks-status-pill__dot {
  background: #eab308;
}

.tm-tasks-status-pill--completed {
  background: #dcfce7;
  color: #15803d;
}

.tm-tasks-status-pill--completed .tm-tasks-status-pill__dot {
  background: #22c55e;
}

.tm-tasks-status-pill--under_review {
  background: #ffedd5;
  color: #c2410c;
}

.tm-tasks-status-pill--under_review .tm-tasks-status-pill__dot {
  background: #f97316;
}

.tm-tasks-status-pill--pending_super_admin_approval {
  background: #ede9fe;
  color: #6d28d9;
}

.tm-tasks-status-pill--pending_super_admin_approval .tm-tasks-status-pill__dot {
  background: #8b5cf6;
}

.tm-tasks-status-pill--assigned,
.tm-tasks-status-pill--draft {
  background: #f1f5f9;
  color: #64748b;
}

.tm-tasks-status-pill--assigned .tm-tasks-status-pill__dot,
.tm-tasks-status-pill--draft .tm-tasks-status-pill__dot {
  background: #94a3b8;
}

.tm-tasks-status-pill--approved {
  background: #dbeafe;
  color: #1d4ed8;
}

.tm-tasks-status-pill--approved .tm-tasks-status-pill__dot {
  background: #3b82f6;
}

.tm-tasks-status-pill--rejected {
  background: #fee2e2;
  color: #b91c1c;
}

.tm-tasks-status-pill--rejected .tm-tasks-status-pill__dot {
  background: #ef4444;
}

.tm-tasks-priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
}

.tm-tasks-priority-pill--low {
  background: #f8fafc;
  color: #64748b;
}

.tm-tasks-priority-pill--medium {
  background: #fff7ed;
  color: #c2410c;
}

.tm-tasks-priority-pill--high,
.tm-tasks-priority-pill--urgent {
  background: #fef2f2;
  color: #dc2626;
}

.tm-tasks-due {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: #64748b;
  white-space: nowrap;
}

.tm-tasks-progress {
  min-width: 5.5rem;
}

.tm-tasks-progress__label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.25rem;
}

.tm-tasks-progress__track {
  height: 0.35rem;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}

.tm-tasks-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tm-tasks-accent);
}

.tm-tasks-row-menu {
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.4rem;
  padding: 0;
}

.tm-tasks-row-menu:hover {
  background: #f1f5f9;
  color: #64748b;
}

.tm-tasks-project-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.75rem 1rem 0;
  border-top: 1px solid #f0f2f5;
  margin-top: 0.25rem;
}

.tm-tasks-add-btn {
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: var(--tm-tasks-accent) !important;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem !important;
  border-radius: 0.45rem !important;
}

.tm-tasks-add-btn:hover {
  background: #f5f3ff !important;
  border-color: #c4b5fd !important;
}

.tm-tasks-view-all {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tm-tasks-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tm-tasks-view-all:hover {
  color: #6d28d9;
}

.tm-tasks-hint {
  margin-top: 1.25rem;
  padding: 1.5rem 1rem;
  text-align: center;
  background: #fafbfc;
  border: 1px dashed #e2e8f0;
  border-radius: 0.85rem;
}

.tm-tasks-hint__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 0.75rem;
  border-radius: 0.75rem;
  background: #f3e8ff;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.tm-tasks-hint__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-tasks-hint__text {
  font-size: 0.8rem;
  color: #94a3b8;
}

.tm-tasks-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
}

.tm-tasks-footer__summary {
  font-size: 0.78rem;
  color: #94a3b8;
}

.tm-tasks-footer__pagination .pagination {
  margin-bottom: 0;
  gap: 0.25rem;
}

.tm-tasks-footer__pagination .page-item.active .page-link {
  background: var(--tm-tasks-accent);
  color: #fff;
  border: none;
}

.tm-tasks-footer__pagination .page-link {
  border: none;
  color: #64748b;
  font-size: 0.8rem;
  border-radius: 0.4rem;
}

.tm-tasks-empty-card__icon {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: 0.75rem;
  background: #f3e8ff;
  color: #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.tm-calendar-task-chip {
  border-radius: 0.35rem;
  padding: 0.16rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1.2;
  font-weight: 600;
  border: 1px solid transparent;
  text-decoration: none !important;
}

.tm-calendar-task-chip--default {
  background: #eef2ff;
  border-color: #d6ddff;
  color: #344767 !important;
}

.tm-calendar-task-chip--progress {
  background: #e8f2ff;
  border-color: #cde1ff;
  color: #0b5ed7 !important;
}

.tm-calendar-task-chip--review {
  background: #fff4e8;
  border-color: #ffd9b5;
  color: #b45309 !important;
}

.tm-calendar-task-chip--completed {
  background: #e7f8ee;
  border-color: #c6ecd7;
  color: #15803d !important;
}

.tm-calendar-task-chip--rejected {
  background: #ffecec;
  border-color: #ffcfcf;
  color: #b91c1c !important;
}

/* —— Member: My Projects —— */
.tm-member-projects-page .tm-projects-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tm-member-projects-filter-btn__chevron {
  font-size: 0.6rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.tm-member-projects-page .tm-projects-filter-btn[aria-expanded='true'] .tm-member-projects-filter-btn__chevron {
  transform: rotate(180deg);
}

.tm-member-projects-table thead th.text-center,
.tm-member-projects-table tbody td.text-center {
  text-align: center;
}

.tm-member-projects-count {
  display: inline-block;
  min-width: 1.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: #334155;
  line-height: 1.2;
}

.tm-member-projects-count--mine {
  color: #7c3aed;
}

.tm-member-projects-supervisor {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.tm-member-projects-supervisor__avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  background: #fff7ed;
  color: #ea580c;
}

.tm-member-projects-supervisor__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.tm-member-projects-date {
  font-size: 0.8rem;
  color: #64748b;
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .tm-member-projects-table thead {
    display: none;
  }

  .tm-member-projects-table tbody tr {
    display: block;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f2f5;
  }

  .tm-member-projects-table tbody td {
    display: block;
    border: none;
    padding: 0.35rem 0;
    text-align: left !important;
  }

  .tm-member-projects-table tbody td.text-end {
    padding-top: 0.65rem;
  }
}

/* —— Pending reviews (tasks index) —— */
.tm-pending-reviews-page {
  --tm-pending-reviews-accent: #f97316;
  --tm-pending-reviews-count: #8b5cf6;
}

.tm-pending-reviews-header__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-pending-reviews-header__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--tm-pending-reviews-count);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.tm-pending-reviews-filter-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  padding: 0.45rem 0.85rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.tm-pending-reviews-filter-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.tm-pending-reviews-create-btn {
  background: var(--tm-pending-reviews-accent) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.45rem 0.9rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25) !important;
  white-space: nowrap;
}

.tm-pending-reviews-create-btn:hover,
.tm-pending-reviews-create-btn:focus {
  background: #ea580c !important;
  color: #fff !important;
}

.tm-pending-reviews-table-card {
  border-radius: 0.85rem;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.tm-pending-reviews-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #f0f2f5;
  padding: 0.85rem 1rem;
  background: #fff;
}

.tm-pending-reviews-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}

.tm-pending-reviews-table tbody tr:last-child td {
  border-bottom: none;
}

.tm-pending-reviews-table__row:hover {
  background: #fafbfc;
}

.tm-pending-reviews-task-cell {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 14rem;
}

.tm-pending-reviews-task-icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.tm-pending-reviews-task-icon--initials {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-pending-reviews-task-icon--purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.tm-pending-reviews-task-icon--mint {
  background: #d1fae5;
  color: #059669;
}

.tm-pending-reviews-task-icon--amber {
  background: #ffedd5;
  color: #ea580c;
}

.tm-pending-reviews-task-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.tm-pending-reviews-task-icon--rose {
  background: #ffe4e6;
  color: #e11d48;
}

.tm-pending-reviews-task-cell__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.3;
}

.tm-pending-reviews-task-cell__title:hover {
  color: #334155;
}

.tm-pending-reviews-task-cell__desc {
  font-size: 0.75rem;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 0.2rem;
}

.tm-pending-reviews-project-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.tm-pending-reviews-project-icon {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.7rem;
}

.tm-pending-reviews-project-icon--initials {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-pending-reviews-project-icon--purple {
  background: #f3e8ff;
  color: #7c3aed;
}

.tm-pending-reviews-project-icon--mint {
  background: #d1fae5;
  color: #059669;
}

.tm-pending-reviews-project-icon--amber {
  background: #ffedd5;
  color: #ea580c;
}

.tm-pending-reviews-project-icon--blue {
  background: #dbeafe;
  color: #2563eb;
}

.tm-pending-reviews-project-cell__name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #334155;
}

.tm-pending-reviews-person {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 9rem;
}

.tm-pending-reviews-person__avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-pending-reviews-person__name {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
}

.tm-pending-reviews-person__role {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.25;
}

.tm-pending-reviews-priority {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.tm-pending-reviews-priority--low {
  background: #ecfdf5;
  color: #0d9488;
}

.tm-pending-reviews-priority--medium {
  background: #fff7ed;
  color: #c2410c;
}

.tm-pending-reviews-priority--high,
.tm-pending-reviews-priority--urgent {
  background: #fef2f2;
  color: #dc2626;
}

.tm-pending-reviews-submitted__date {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  line-height: 1.3;
}

.tm-pending-reviews-submitted__time {
  display: block;
  font-size: 0.72rem;
  color: #94a3b8;
  padding-left: 1.15rem;
  line-height: 1.3;
}

.tm-pending-reviews-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
}

.tm-pending-reviews-review-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: 0.45rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  width: 4.65rem;
  max-width: 4.65rem;
  min-width: 4.65rem;
  height: 1.9rem;
  max-height: 1.9rem;
  min-height: 1.9rem;
  line-height: 1 !important;
  box-sizing: border-box;
  box-shadow: none !important;
  outline: none !important;
}

.tm-pending-reviews-review-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
  border-color: #cbd5e1 !important;
}

.tm-pending-reviews-review-btn:focus,
.tm-pending-reviews-review-btn:focus-visible,
.tm-pending-reviews-review-btn:active,
.tm-pending-reviews-review-btn.active,
.tm-pending-reviews-review-btn:not(:disabled):not(.disabled):active {
  padding: 0.35rem 0.7rem !important;
  width: 4.65rem;
  max-width: 4.65rem;
  min-width: 4.65rem;
  height: 1.9rem;
  max-height: 1.9rem;
  min-height: 1.9rem;
  border-width: 1px !important;
  line-height: 1 !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.tm-pending-reviews-row-menu {
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.4rem;
  padding: 0;
}

.tm-pending-reviews-row-menu:hover {
  background: #f1f5f9;
  color: #64748b;
}

.tm-pending-reviews-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #f0f2f5;
}

.tm-pending-reviews-footer__summary {
  font-size: 0.78rem;
  color: #94a3b8;
}

@media (max-width: 1199.98px) {
  .tm-pending-reviews-table thead {
    display: none;
  }

  .tm-pending-reviews-table tbody tr {
    display: block;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f0f2f5;
  }

  .tm-pending-reviews-table tbody td {
    display: block;
    border: none;
    padding: 0.35rem 0;
  }

  .tm-pending-reviews-table tbody td.text-end {
    text-align: left !important;
    padding-top: 0.65rem;
  }
}

/* —— Communications module —— */
.tm-comms-page {
  --tm-comms-accent: #6366f1;
}

.tm-comms-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tm-comms-header__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-comms-header__subtitle {
  font-size: 0.875rem;
  color: #8392ab;
  max-width: 36rem;
}

.tm-comms-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Fixed-size compose CTA (no Bootstrap .btn — avoids click jitter) */
.tm-comms-compose-btn,
.tm-comms-compose-btn:hover,
.tm-comms-compose-btn:focus,
.tm-comms-compose-btn:active,
.tm-comms-compose-btn:focus-visible,
.tm-comms-compose-btn:visited {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: var(--tm-comms-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
  cursor: pointer;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 0 0 180px !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
  vertical-align: middle !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

.tm-comms-compose-btn:hover,
.tm-comms-compose-btn:focus,
.tm-comms-compose-btn:active,
.tm-comms-compose-btn:focus-visible {
  background: #4f46e5 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.28) !important;
}

.tm-comms-compose-btn::before {
  content: "";
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}

.tm-comms-compose-btn__label,
.tm-comms-compose-btn:hover .tm-comms-compose-btn__label,
.tm-comms-compose-btn:focus .tm-comms-compose-btn__label,
.tm-comms-compose-btn:active .tm-comms-compose-btn__label,
.tm-comms-compose-btn:focus-visible .tm-comms-compose-btn__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 126px !important;
  width: 126px !important;
  min-width: 126px !important;
  max-width: 126px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  color: inherit !important;
}

.tm-comms-compose-btn--short,
.tm-comms-compose-btn--short:hover,
.tm-comms-compose-btn--short:focus,
.tm-comms-compose-btn--short:active,
.tm-comms-compose-btn--short:focus-visible,
.tm-comms-compose-btn--short:visited {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  flex: 0 0 112px !important;
}

.tm-comms-compose-btn--short .tm-comms-compose-btn__label,
.tm-comms-compose-btn--short:hover .tm-comms-compose-btn__label,
.tm-comms-compose-btn--short:focus .tm-comms-compose-btn__label,
.tm-comms-compose-btn--short:active .tm-comms-compose-btn__label,
.tm-comms-compose-btn--short:focus-visible .tm-comms-compose-btn__label {
  flex: 0 0 58px !important;
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
}

.tm-comms-filter-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  padding: 0.45rem 0.85rem !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tm-comms-filter-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.tm-comms-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 0.65rem;
}

.tm-comms-subnav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-radius: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.tm-comms-subnav__link:hover {
  color: #334155;
  background: #fff;
}

.tm-comms-subnav__link.is-active {
  background: #fff;
  color: var(--tm-comms-accent);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.tm-comms-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
}

.tm-comms-filter-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.72rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
}

.tm-comms-filter-tab:hover {
  color: #334155;
  background: #f1f5f9;
}

.tm-comms-filter-tab.is-active {
  background: #fff;
  color: var(--tm-comms-accent);
  border-color: #e0e7ff;
  box-shadow: 0 1px 2px rgba(99, 102, 241, 0.08);
}

.tm-comms-list-card {
  border-radius: 0.85rem;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.tm-comms-list {
  display: flex;
  flex-direction: column;
}

.tm-comms-list__empty {
  padding: 2.5rem 1rem;
}

.tm-comms-item {
  display: flex;
  align-items: stretch;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #f0f2f5;
  transition: background-color 0.12s ease;
}

.tm-comms-item:last-child {
  border-bottom: none;
}

.tm-comms-item:hover {
  background: #fafbfc;
}

.tm-comms-item--unread {
  background: #f8faff;
  border-left: 3px solid var(--tm-comms-accent);
  padding-left: calc(1.1rem - 3px);
}

.tm-comms-item--reminder-pending {
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  padding-left: calc(1.1rem - 3px);
}

.tm-comms-item__link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.tm-comms-item--sent {
  color: inherit;
}

.tm-comms-item__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.tm-comms-item__icon--direct {
  background: #dbeafe;
  color: #2563eb;
}

.tm-comms-item__icon--reminder {
  background: #ffedd5;
  color: #ea580c;
}

.tm-comms-item__icon--announcement {
  background: #f3e8ff;
  color: #7c3aed;
}

.tm-comms-item__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tm-comms-item__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.tm-comms-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tm-comms-type-pill--direct {
  background: #eff6ff;
  color: #2563eb;
}

.tm-comms-type-pill--reminder {
  background: #fff7ed;
  color: #c2410c;
}

.tm-comms-type-pill--announcement {
  background: #f5f3ff;
  color: #6d28d9;
}

.tm-comms-priority-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.tm-comms-priority-pill--low {
  background: #ecfdf5;
  color: #0d9488;
}

.tm-comms-priority-pill--medium {
  background: #fff7ed;
  color: #c2410c;
}

.tm-comms-priority-pill--high {
  background: #fef2f2;
  color: #dc2626;
}

.tm-comms-status-pill {
  display: inline-flex;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
}

.tm-comms-status-pill--pending {
  background: #fef3c7;
  color: #b45309;
}

.tm-comms-status-pill--done,
.tm-comms-status-pill--completed {
  background: #dcfce7;
  color: #15803d;
}

.tm-comms-status-pill--unread {
  background: #e0e7ff;
  color: #4338ca;
}

.tm-comms-item__title {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.3;
}

.tm-comms-item__preview {
  display: block;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.4;
}

.tm-comms-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin-top: 0.15rem;
}

.tm-comms-item__sender,
.tm-comms-item__recipients {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.tm-comms-item__avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tm-comms-item__time {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  color: #64748b;
  font-weight: 600;
}

.tm-comms-item__time-sub {
  color: #94a3b8;
  font-weight: 500;
}

.tm-comms-item__attach {
  font-size: 0.72rem;
  color: #94a3b8;
}

.tm-comms-item__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tm-comms-item__status {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.tm-comms-done-btn {
  border: 1px solid #86efac !important;
  background: #fff !important;
  color: #15803d !important;
  font-weight: 600;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.7rem !important;
  border-radius: 0.45rem !important;
  white-space: nowrap;
}

.tm-comms-done-btn:hover {
  background: #f0fdf4 !important;
}

.tm-comms-read-pill {
  display: inline-flex;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
}

.tm-comms-read-pill--read {
  background: #f1f5f9;
  color: #64748b;
}

.tm-comms-read-pill--unread {
  background: #e0e7ff;
  color: #4338ca;
}

.tm-comms-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #f0f2f5;
}

.tm-comms-footer__summary {
  font-size: 0.78rem;
  color: #94a3b8;
}

.tm-comms-footer__pagination .pagination {
  margin-bottom: 0;
  gap: 0.25rem;
}

.tm-comms-footer__pagination .page-link {
  border-radius: 0.4rem;
  border: none;
  color: #64748b;
  font-size: 0.8rem;
  padding: 0.35rem 0.65rem;
}

.tm-comms-footer__pagination .page-item.active .page-link {
  background: var(--tm-comms-accent);
  color: #fff;
}

.tm-comms-form .select2-container--bootstrap-5 {
  width: 100% !important;
}

.tm-comms-form .select2-container--bootstrap-5 .select2-selection--multiple {
  min-height: 2.5rem;
  border-color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.2rem 0.35rem;
}

.tm-comms-form .select2-container--bootstrap-5.select2-container--focus .select2-selection--multiple,
.tm-comms-form .select2-container--bootstrap-5.select2-container--open .select2-selection--multiple {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 0.15rem rgba(99, 102, 241, 0.15);
}

.tm-comms-form .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
  background: var(--tm-comms-accent) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0.35rem !important;
  padding: 0.15rem 0.45rem !important;
}

.tm-comms-form .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, 0.85) !important;
  margin-right: 0.25rem;
}

.tm-comms-form .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff !important;
}

.tm-comms-form .select2-container--bootstrap-5 .select2-search__field {
  font-size: 0.875rem;
}

.tm-comms-form .is-invalid + .select2-container--bootstrap-5 .select2-selection--multiple {
  border-color: #dc3545;
}

.tm-comms-compose-card,
.tm-comms-detail-card {
  border-radius: 0.85rem;
}

.tm-comms-detail__top {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.tm-comms-detail__icon {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1rem;
}

.tm-comms-detail__subject {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-comms-detail__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.35rem;
}

.tm-comms-detail__person {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #334155;
}

.tm-comms-detail__value {
  font-size: 0.85rem;
  color: #334155;
  line-height: 1.45;
}

.tm-comms-detail__body {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 0.65rem;
  padding: 1rem 1.1rem;
  font-size: 0.875rem;
  color: #334155;
  line-height: 1.55;
  white-space: pre-wrap;
}

.tm-comms-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid #e2e8f0;
  background: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
}

.tm-comms-attachment-chip:hover {
  background: #f8fafc;
  color: var(--tm-comms-accent);
  border-color: #c7d2fe;
}

@media (max-width: 767.98px) {
  .tm-comms-item {
    flex-direction: column;
  }

  .tm-comms-item__status {
    margin-left: 0;
    align-self: flex-start;
  }

  .tm-comms-item__actions {
    align-self: stretch;
  }

  .tm-comms-done-btn {
    width: 100%;
  }
}

/* —— Reports module —— */
.tm-reports-page {
  --tm-reports-accent: #0ea5e9;
}

.tm-reports-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.tm-reports-header__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-reports-header__subtitle {
  font-size: 0.875rem;
  color: #8392ab;
  max-width: 40rem;
}

.tm-reports-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-reports-header__actions .btn {
  margin: 0 !important;
}

/* Keep Filters + New report on the same baseline (36px) */
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle,
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle:hover,
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle:focus,
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle:active,
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle:focus-visible,
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle[aria-expanded='true'],
.tm-reports-header__actions .tm-reports-filter-btn.tm-filter-toggle[aria-expanded='false'] {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 0.5rem !important;
  border-width: 1px !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  align-self: center !important;
  vertical-align: middle !important;
}

.tm-reports-header__actions .tm-reports-secondary-btn,
.tm-reports-header__actions .tm-reports-secondary-btn:hover,
.tm-reports-header__actions .tm-reports-secondary-btn:focus,
.tm-reports-header__actions .tm-reports-secondary-btn:active {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.85rem !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  border-radius: 0.5rem !important;
}

.tm-reports-header__actions .tm-reports-create-btn {
  align-self: center !important;
}

.tm-reports-header__actions .tm-reports-back-btn {
  align-self: center !important;
}

/* Fixed-size back link on report viewer (no Bootstrap .btn — avoids click jitter) */
.tm-reports-back-btn,
.tm-reports-back-btn:hover,
.tm-reports-back-btn:focus,
.tm-reports-back-btn:active,
.tm-reports-back-btn:focus-visible,
.tm-reports-back-btn:visited {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  box-sizing: border-box !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  background: #fff !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  cursor: pointer;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 0 0 88px !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
  vertical-align: middle !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

.tm-reports-back-btn:hover,
.tm-reports-back-btn:focus,
.tm-reports-back-btn:active,
.tm-reports-back-btn:focus-visible {
  background: #f8fafc !important;
  color: #334155 !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.tm-reports-back-btn__icon,
.tm-reports-back-btn:hover .tm-reports-back-btn__icon,
.tm-reports-back-btn:focus .tm-reports-back-btn__icon,
.tm-reports-back-btn:active .tm-reports-back-btn__icon,
.tm-reports-back-btn:focus-visible .tm-reports-back-btn__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  flex: 0 0 14px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.tm-reports-back-btn__label,
.tm-reports-back-btn:hover .tm-reports-back-btn__label,
.tm-reports-back-btn:focus .tm-reports-back-btn__label,
.tm-reports-back-btn:active .tm-reports-back-btn__label,
.tm-reports-back-btn:focus-visible .tm-reports-back-btn__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 36px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
  white-space: nowrap !important;
  color: inherit !important;
}

/* Fixed-size primary CTA (no Bootstrap .btn — avoids click jitter) */
.tm-reports-create-btn,
.tm-reports-create-btn:hover,
.tm-reports-create-btn:focus,
.tm-reports-create-btn:active,
.tm-reports-create-btn:focus-visible,
.tm-reports-create-btn:visited {
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: var(--tm-reports-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
  cursor: pointer;
  opacity: 1 !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  flex: 0 0 132px !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
  overflow: visible !important;
  vertical-align: middle !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

.tm-reports-create-btn:hover,
.tm-reports-create-btn:focus,
.tm-reports-create-btn:active,
.tm-reports-create-btn:focus-visible {
  background: #0284c7 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
}

.tm-reports-create-btn:focus-visible {
  box-shadow:
    0 4px 12px rgba(14, 165, 233, 0.25),
    0 0 0 3px rgba(14, 165, 233, 0.35) !important;
}

.tm-reports-create-btn::before {
  content: "";
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") !important;
}

.tm-reports-create-btn__label,
.tm-reports-create-btn:hover .tm-reports-create-btn__label,
.tm-reports-create-btn:focus .tm-reports-create-btn__label,
.tm-reports-create-btn:active .tm-reports-create-btn__label,
.tm-reports-create-btn:focus-visible .tm-reports-create-btn__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 78px !important;
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  text-align: center !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  color: inherit !important;
}

.tm-reports-create-btn--wide,
.tm-reports-create-btn--wide:hover,
.tm-reports-create-btn--wide:focus,
.tm-reports-create-btn--wide:active,
.tm-reports-create-btn--wide:focus-visible,
.tm-reports-create-btn--wide:visited {
  width: 148px !important;
  min-width: 148px !important;
  max-width: 148px !important;
  flex: 0 0 148px !important;
}

.tm-reports-create-btn--wide .tm-reports-create-btn__label,
.tm-reports-create-btn--wide:hover .tm-reports-create-btn__label,
.tm-reports-create-btn--wide:focus .tm-reports-create-btn__label,
.tm-reports-create-btn--wide:active .tm-reports-create-btn__label,
.tm-reports-create-btn--wide:focus-visible .tm-reports-create-btn__label {
  flex: 0 0 94px !important;
  width: 94px !important;
  min-width: 94px !important;
  max-width: 94px !important;
}

@media (max-width: 767.98px) {
  .tm-reports-create-btn,
  .tm-reports-create-btn:hover,
  .tm-reports-create-btn:focus,
  .tm-reports-create-btn:active,
  .tm-reports-create-btn:focus-visible,
  .tm-reports-create-btn:visited {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex: 0 0 128px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
  }

  .tm-reports-create-btn__label,
  .tm-reports-create-btn:hover .tm-reports-create-btn__label,
  .tm-reports-create-btn:focus .tm-reports-create-btn__label,
  .tm-reports-create-btn:active .tm-reports-create-btn__label,
  .tm-reports-create-btn:focus-visible .tm-reports-create-btn__label {
    flex: 0 0 74px !important;
    width: 74px !important;
    min-width: 74px !important;
    max-width: 74px !important;
  }
}

.tm-reports-filter-btn,
.tm-reports-secondary-btn {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  font-weight: 600;
  padding: 0.45rem 0.85rem !important;
  border-radius: 0.5rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tm-reports-filter-btn:hover,
.tm-reports-secondary-btn:hover {
  background: #f8fafc !important;
  color: #334155 !important;
}

.tm-reports-filters-card,
.tm-reports-table-card,
.tm-reports-compose-card {
  border-radius: 0.85rem;
}

.tm-reports-table-card {
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.tm-reports-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
  border-bottom: 1px solid #f0f2f5;
  padding: 0.85rem 1rem;
  background: #fff;
}

.tm-reports-table tbody td {
  padding: 1rem;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: middle;
}

.tm-reports-table tbody tr:last-child td {
  border-bottom: none;
}

.tm-reports-table tbody tr:hover {
  background: #fafbfc;
}

.tm-reports-report-cell {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 12rem;
}

.tm-reports-report-cell__icon {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 0.5rem;
  background: #e0f2fe;
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.tm-reports-report-cell__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
}

.tm-reports-report-cell__title:hover {
  color: #0284c7;
}

.tm-reports-period {
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 600;
}

.tm-reports-action-btn--danger:hover,
.tm-reports-action-btn--danger:focus {
  color: #dc2626 !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}

.tm-reports-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-top: 1px solid #f0f2f5;
}

.tm-reports-footer__summary {
  font-size: 0.78rem;
  color: #94a3b8;
}

.tm-reports-footer__pagination .pagination {
  margin-bottom: 0;
}

.tm-reports-footer__pagination .page-item.active .page-link {
  background: var(--tm-reports-accent);
  color: #fff;
}

.tm-report-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.28rem 0.55rem;
  font-size: 0.62rem;
  line-height: 1.1;
  font-weight: 700;
  border-radius: 999px;
  text-align: center;
  border: 1px solid transparent;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.tm-report-badge--default { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.tm-report-badge--draft { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.tm-report-badge--submitted { background: #f3e8ff; color: #6d28d9; border-color: #e9d5ff; }
.tm-report-badge--under-review { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.tm-report-badge--forwarded { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.tm-report-badge--approved { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.tm-report-badge--published { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.tm-report-badge--viewed { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

.tm-reports-accordion__item {
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
  overflow: hidden;
  margin-bottom: 0.65rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.tm-reports-accordion__item--nested {
  border-color: #f1f5f9;
  border-radius: 0.6rem;
}

/* Soft UI sets .accordion .accordion-button { font-size: inherit } from h2 — override explicitly */
.tm-reports-accordion .accordion-header {
  font-size: 0.8125rem;
  line-height: 1.25;
  margin-bottom: 0;
}

.tm-reports-accordion .accordion-button.tm-reports-accordion__trigger,
.tm-reports-accordion .accordion-button.tm-reports-accordion__trigger:not(.collapsed),
.tm-reports-accordion .accordion-button.tm-reports-accordion__trigger.collapsed {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #334155 !important;
  background: #fff !important;
  box-shadow: none !important;
  padding: 0.6rem 0.85rem !important;
}

.tm-reports-accordion .accordion-button.tm-reports-accordion__trigger:not(.collapsed) {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.tm-reports-accordion .accordion-button.tm-reports-accordion__trigger i {
  font-size: 0.75rem !important;
}

.tm-reports-accordion--nested .accordion-header {
  font-size: 0.8rem;
}

.tm-reports-accordion--nested .accordion-button.tm-reports-accordion__trigger--team,
.tm-reports-accordion--nested .accordion-button.tm-reports-accordion__trigger--team:not(.collapsed),
.tm-reports-accordion--nested .accordion-button.tm-reports-accordion__trigger--team.collapsed {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #475569 !important;
  padding: 0.5rem 0.75rem !important;
}

.tm-reports-accordion--nested .accordion-button.tm-reports-accordion__trigger--team i {
  font-size: 0.7rem !important;
}

.tm-reports-accordion__count {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  background: #f1f5f9;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
}

.tm-reports-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.5rem;
}

.tm-reports-supervisor-monthly {
  border-top: 1px dashed #e2e8f0;
  padding-top: 0.85rem;
}

.tm-report-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.tm-report-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid #f0f2f5;
  background: #fff;
  transition: background-color 0.12s ease;
}

.tm-report-row:hover {
  background: #fafbfc;
}

.tm-report-row__title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.tm-report-row__name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-report-row__period {
  font-size: 0.72rem;
  color: #94a3b8;
}

.tm-report-row__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.tm-reports-legacy-header {
  padding: 1rem 1.1rem;
  background: #fafbfc;
}

.tm-report-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
}

.tm-report-meta-pill__label {
  color: #94a3b8;
  font-weight: 600;
}

.tm-report-meta-pill__value {
  color: #334155;
  font-weight: 700;
}

.tm-reports-viewer-actions-card {
  border-radius: 0.85rem;
}

.tm-reports-viewer-divider {
  width: 1px;
  height: 1.75rem;
  background: #e2e8f0;
  margin: 0 0.15rem;
}

.tm-reports-workflow-btn {
  font-weight: 600;
  font-size: 0.75rem !important;
  padding: 0.4rem 0.75rem !important;
  border-radius: 0.45rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: #475569 !important;
}

.tm-reports-workflow-btn--info {
  border-color: #bae6fd !important;
  color: #0369a1 !important;
  background: #f0f9ff !important;
}

.tm-reports-workflow-btn--success {
  border-color: #bbf7d0 !important;
  color: #15803d !important;
  background: #f0fdf4 !important;
}

.tm-reports-workflow-btn--danger {
  border-color: #fecaca !important;
  color: #dc2626 !important;
  background: #fef2f2 !important;
}

.tm-reports-viewer-document-wrap {
  margin-bottom: 1rem;
}

.tm-reports-viewer-document {
  max-height: min(68vh, 760px);
  overflow: auto;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.05);
}

.tm-reports-viewer-document__content {
  padding: 1.15rem 1.25rem;
  color: #334155;
  line-height: 1.62;
  min-height: 3rem;
}

.tm-reports-viewer-document__content :last-child {
  margin-bottom: 0;
}

.tm-report-create-editor-wrap {
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
  padding: 0.9rem;
  background: #fff;
}

.tm-report-create-editor-wrap .tox-tinymce {
  min-height: 560px !important;
  border-radius: 0.5rem !important;
}

.tm-report-create-editor-actions {
  margin-top: 0.85rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tm-report-create-save-disabled {
  opacity: 0.9;
  pointer-events: none;
  background-color: #f8fafc;
}

.tm-report-preview-frame {
  width: 100%;
  min-height: min(70vh, 520px);
  border: 0;
  border-radius: 0.5rem;
  background: #fff;
}

@media (max-width: 767.98px) {
  .tm-report-row {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }

  .tm-report-row__actions {
    justify-content: flex-start;
  }
}

/* —— Reports hub (monthly hierarchy) —— */
.tm-reports-hub .tm-reports-header--hub {
  margin-bottom: 0.75rem;
}

.tm-reports-hub-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04);
}

.tm-reports-hub-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.tm-reports-hub-toolbar__field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
}

.tm-reports-hub-toolbar__field--compact,
.tm-reports-hub-toolbar__field--compact:hover,
.tm-reports-hub-toolbar__field--compact:focus-within {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.5rem 0 0.45rem !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 0.5rem !important;
  background: #fff !important;
  box-sizing: border-box !important;
  transform: none !important;
  transition: none !important;
  flex: 0 0 auto;
}

.tm-reports-hub-toolbar__field-icon {
  color: #94a3b8;
  font-size: 0.8rem;
  flex: 0 0 auto;
  width: 0.8rem;
  line-height: 1;
}


.tm-reports-hub-toolbar__select,
.tm-reports-hub-toolbar__select:hover,
.tm-reports-hub-toolbar__select:focus,
.tm-reports-hub-toolbar__select:active,
.tm-reports-hub-toolbar__select:focus-visible {
  height: 34px !important;
  min-height: 34px !important;
  line-height: 1 !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.25rem !important;
  padding-right: 1.5rem !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  background-color: transparent !important;
  transform: none !important;
  transition: none !important;
  margin: 0 !important;
}

.tm-reports-hub-toolbar__select--year {
  min-width: 4.25rem;
  max-width: 4.25rem;
}

.tm-reports-hub-toolbar__field--compact .tm-reports-hub-toolbar__select:not(.tm-reports-hub-toolbar__select--year) {
  min-width: 5.5rem;
}

.tm-reports-hub-toolbar__select--status {
  min-width: 6.75rem;
}

.tm-reports-hub-toolbar__field--compact .tm-reports-hub-toolbar__select--supervisor {
  min-width: 5.5rem;
}

.tm-reports-hub-toolbar__field--compact .tm-reports-hub-toolbar__select--team {
  min-width: 5.5rem;
}

.tm-reports-hub-toolbar__field--compact .tm-reports-hub-toolbar__select--member {
  min-width: 8.5rem;
}

.tm-reports-hub-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.tm-reports-hub-toolbar__btn,
.tm-reports-hub-toolbar__btn:hover,
.tm-reports-hub-toolbar__btn:focus,
.tm-reports-hub-toolbar__btn:active,
.tm-reports-hub-toolbar__btn:focus-visible,
.tm-reports-hub-toolbar__btn:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  min-width: 4.75rem !important;
  padding: 0 0.85rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: #475569 !important;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer;
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  outline: none !important;
  flex: 0 0 auto !important;
  vertical-align: middle !important;
  -webkit-tap-highlight-color: transparent;
}

button.tm-reports-hub-toolbar__btn {
  appearance: none;
  font-family: inherit;
}

.tm-reports-hub-toolbar__btn--apply,
.tm-reports-hub-toolbar__btn--apply:hover,
.tm-reports-hub-toolbar__btn--apply:focus,
.tm-reports-hub-toolbar__btn--apply:active,
.tm-reports-hub-toolbar__btn--apply:focus-visible {
  background: var(--tm-reports-accent) !important;
  border: 1px solid var(--tm-reports-accent) !important;
  color: #fff !important;
}

.tm-reports-hub-toolbar__btn--reset,
.tm-reports-hub-toolbar__btn--reset:hover,
.tm-reports-hub-toolbar__btn--reset:focus,
.tm-reports-hub-toolbar__btn--reset:active,
.tm-reports-hub-toolbar__btn--reset:focus-visible {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
}

.tm-reports-hub-team {
  border: 1px solid #eef2f6 !important;
  border-radius: 0.85rem !important;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04) !important;
  background: #fff;
}

.tm-reports-hub-team__header {
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
}

.tm-reports-hub-team__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border: 0;
  background: #fff;
  text-align: left;
}

.tm-reports-hub-team__toggle:not(.collapsed) .tm-reports-hub-team__chevron {
  transform: rotate(180deg);
}

.tm-reports-hub-team__icon {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.65rem;
  font-size: 1.05rem;
}

.tm-reports-hub-team__icon--initials {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-reports-hub-team__icon--blue { background: #eff6ff; color: #3b82f6; }
.tm-reports-hub-team__icon--purple { background: #f5f3ff; color: #8b5cf6; }
.tm-reports-hub-team__icon--teal { background: #f0fdfa; color: #14b8a6; }
.tm-reports-hub-team__icon--amber { background: #fffbeb; color: #f59e0b; }

.tm-reports-hub-team__intro {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.tm-reports-hub-team__name {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.tm-reports-hub-team__meta {
  font-size: 0.75rem;
  color: #94a3b8;
}

.tm-reports-hub-team__meta-dot {
  margin: 0 0.25rem;
}

.tm-reports-hub-team__stats {
  display: none;
  align-items: stretch;
  gap: 0.4rem;
  margin-left: auto;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (min-width: 992px) {
  .tm-reports-hub-team__stats {
    display: flex;
    flex-wrap: nowrap;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .tm-reports-hub-team__stats {
    display: flex;
    width: 100%;
    margin-left: 0;
    margin-top: 0.35rem;
  }
}

.tm-reports-hub-team__toggle--static {
  cursor: default;
  pointer-events: none;
}

.tm-reports-hub-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  min-width: 4.75rem;
  border: 1px solid #eef2f6;
  border-radius: 0.5rem;
  background: #fff;
  box-sizing: border-box;
}

.tm-reports-hub-stat__icon {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.35rem;
  font-size: 0.65rem;
  color: #64748b;
  background: #f8fafc;
}

.tm-reports-hub-stat__content {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  line-height: 1.1;
}

.tm-reports-hub-stat__label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
}

.tm-reports-hub-stat__value {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-reports-hub-stat--approved .tm-reports-hub-stat__icon { color: #15803d; background: #f0fdf4; }
.tm-reports-hub-stat--review .tm-reports-hub-stat__icon { color: #c2410c; background: #fff7ed; }
.tm-reports-hub-stat--submitted .tm-reports-hub-stat__icon { color: #7c3aed; background: #faf5ff; }
.tm-reports-hub-stat--forwarded .tm-reports-hub-stat__icon { color: #be123c; background: #fff1f2; }

.tm-reports-hub-team__chevron {
  color: #94a3b8;
  font-size: 0.8rem;
  transition: transform 0.15s ease;
  flex: 0 0 auto;
  margin-left: 0.15rem;
}

.tm-reports-hub-team__body {
  padding: 1rem 1rem 1.15rem;
  background: #fff;
}

.tm-reports-hub-team__panels {
  display: grid;
  grid-template-columns: minmax(13.5rem, 18rem) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: stretch;
}

.tm-reports-hub-team__panel {
  min-width: 0;
}

.tm-reports-hub-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--tm-reports-accent);
  margin-bottom: 0.65rem;
}

.tm-reports-hub-members--row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.65rem;
  align-items: stretch;
}

@media (min-width: 1200px) {
  .tm-reports-hub-members--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tm-reports-hub-person {
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  border: 1px solid #e8edf3;
  background: #fff;
  overflow: hidden;
  min-height: 13.5rem;
  box-sizing: border-box;
}

.tm-reports-hub-person--supervisor-card {
  background: #f8fbff;
  border-color: #dbeafe;
  min-height: 15.5rem;
}

.tm-reports-hub-person__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.75rem 0.65rem;
  gap: 0.35rem;
}

.tm-reports-hub-person__avatar-wrap {
  margin-bottom: 0.15rem;
}

.tm-reports-hub-person__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  overflow: hidden;
}

.tm-reports-hub-person__avatar--lg {
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.1rem;
}

.tm-reports-hub-person__avatar--supervisor {
  background: #e0f2fe;
  color: #0284c7;
  border: 2px solid #bae6fd;
}

.tm-reports-hub-person__avatar--supervisor i {
  font-size: 1.15rem;
}

.tm-reports-hub-person__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-reports-hub-person__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.25;
  max-width: 100%;
}

.tm-reports-hub-person__subtitle {
  font-size: 0.7rem;
  font-weight: 600;
  color: #64748b;
  margin: 0;
  line-height: 1.2;
}

.tm-reports-hub-person__period {
  font-size: 0.7rem;
  color: #94a3b8;
  margin: 0;
  line-height: 1.2;
}

.tm-reports-hub-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 0.15rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.tm-reports-hub-status-pill--viewed { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.tm-reports-hub-status-pill--approved { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.tm-reports-hub-status-pill--under_review { background: #ffedd5; color: #c2410c; border-color: #fed7aa; }
.tm-reports-hub-status-pill--submitted { background: #f3e8ff; color: #7c3aed; border-color: #e9d5ff; }
.tm-reports-hub-status-pill--forwarded { background: #ffe4e6; color: #be123c; border-color: #fecdd3; }
.tm-reports-hub-status-pill--published { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.tm-reports-hub-status-pill--draft { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

.tm-reports-hub-person__action,
.tm-reports-hub-person__action:hover,
.tm-reports-hub-person__action:focus,
.tm-reports-hub-person__action:active {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.35rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-top: 1px solid #eef2f6;
  border-radius: 0;
  background: #fff;
  color: #475569;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  box-sizing: border-box;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.tm-reports-hub-person__action span {
  flex: 0 1 auto;
}

.tm-reports-hub-person__action-chevron {
  font-size: 0.65rem;
  margin-left: 0.15rem;
}

.tm-reports-hub-person--approved .tm-reports-hub-person__action,
.tm-reports-hub-person--approved .tm-reports-hub-person__action:hover {
  color: #15803d;
  border-top-color: #bbf7d0;
  background: #fafffb;
}

.tm-reports-hub-person--under_review .tm-reports-hub-person__action,
.tm-reports-hub-person--under_review .tm-reports-hub-person__action:hover {
  color: #c2410c;
  border-top-color: #fed7aa;
  background: #fffbf7;
}

.tm-reports-hub-person--submitted .tm-reports-hub-person__action,
.tm-reports-hub-person--submitted .tm-reports-hub-person__action:hover {
  color: #7c3aed;
  border-top-color: #e9d5ff;
  background: #fdfaff;
}

.tm-reports-hub-person--forwarded .tm-reports-hub-person__action,
.tm-reports-hub-person--forwarded .tm-reports-hub-person__action:hover {
  color: #be123c;
  border-top-color: #fecdd3;
  background: #fffafb;
}

.tm-reports-hub-person--viewed .tm-reports-hub-person__action,
.tm-reports-hub-person--viewed .tm-reports-hub-person__action:hover,
.tm-reports-hub-person--published .tm-reports-hub-person__action,
.tm-reports-hub-person--published .tm-reports-hub-person__action:hover {
  color: #0369a1;
  border-top-color: #bae6fd;
  background: #f8fcff;
}

.tm-reports-hub-person--supervisor-card .tm-reports-hub-person__action,
.tm-reports-hub-person--supervisor-card .tm-reports-hub-person__action:hover {
  color: #0369a1;
  border-top-color: #dbeafe;
  background: #f8fbff;
}

.tm-reports-hub-person--empty {
  min-height: 10rem;
  justify-content: center;
  padding: 1rem;
  background: #f8fafc;
}

.tm-reports-hub-person__empty {
  text-align: center;
  color: #94a3b8;
  font-size: 0.8rem;
}

.tm-reports-hub-person__empty i {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
  opacity: 0.55;
}

@media (max-width: 991.98px) {
  .tm-reports-hub-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tm-reports-hub-toolbar__actions {
    justify-content: flex-end;
  }

  .tm-reports-hub-team__toggle {
    flex-wrap: wrap;
  }

  .tm-reports-hub-team__panels {
    grid-template-columns: 1fr;
  }

  .tm-reports-hub-members--row .tm-reports-hub-person {
    flex: 0 0 11.5rem;
    max-width: none;
  }
}

/* —— Supervisor monthly reports dashboard —— */
.tm-reports-supervisor__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.tm-reports-supervisor__intro {
  flex: 1 1 16rem;
  min-width: 0;
}

.tm-reports-supervisor__welcome {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
  max-width: 42rem;
}

.tm-reports-supervisor-toolbar {
  margin-top: 0 !important;
}

.tm-reports-supervisor__filter-hint {
  font-size: 0.8125rem;
  color: #64748b;
  padding: 0.55rem 0.85rem;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  border-radius: 0.5rem;
}

.tm-reports-supervisor__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.tm-reports-supervisor__period-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
}

.tm-reports-supervisor__period-field {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0 0.65rem 0 0.55rem;
  height: 36px;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  box-sizing: border-box;
}

.tm-reports-supervisor__period-icon {
  color: #94a3b8;
  font-size: 0.8rem;
  flex: 0 0 auto;
}

.tm-reports-supervisor__period-select {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  min-width: 7.5rem;
}

.tm-reports-supervisor__period-select--main {
  min-width: 8.5rem;
}

.tm-reports-submit-btn,
.tm-reports-submit-btn:hover,
.tm-reports-submit-btn:focus,
.tm-reports-submit-btn:active,
.tm-reports-submit-btn:focus-visible,
.tm-reports-submit-btn:visited {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 10px !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: 6px !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  background: var(--tm-reports-accent) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
  cursor: pointer;
  opacity: 1 !important;
  margin: 0 !important;
  flex: 0 0 180px !important;
  transform: none !important;
  transition: none !important;
  outline: none !important;
  vertical-align: middle !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}

.tm-reports-submit-btn::before {
  content: "";
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M8 8l4-4 4 4'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") !important;
}

.tm-reports-submit-btn__label,
.tm-reports-submit-btn:hover .tm-reports-submit-btn__label,
.tm-reports-submit-btn:focus .tm-reports-submit-btn__label,
.tm-reports-submit-btn:active .tm-reports-submit-btn__label,
.tm-reports-submit-btn:focus-visible .tm-reports-submit-btn__label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 124px !important;
  width: 124px !important;
  min-width: 124px !important;
  max-width: 124px !important;
  line-height: 1 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  transition: none !important;
  color: inherit !important;
  white-space: nowrap !important;
  text-align: center !important;
}

.tm-reports-supervisor__stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.tm-reports-supervisor-stat {
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
  padding: 0.75rem 0.8rem 0.65rem;
  box-sizing: border-box;
  min-height: 5.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
}

.tm-reports-supervisor-stat__top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.tm-reports-supervisor-stat__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  font-size: 0.85rem;
}

.tm-reports-supervisor-stat--blue .tm-reports-supervisor-stat__icon { background: #eff6ff; color: #3b82f6; }
.tm-reports-supervisor-stat--green .tm-reports-supervisor-stat__icon { background: #f0fdf4; color: #16a34a; }
.tm-reports-supervisor-stat--orange .tm-reports-supervisor-stat__icon { background: #fff7ed; color: #ea580c; }
.tm-reports-supervisor-stat--purple .tm-reports-supervisor-stat__icon { background: #faf5ff; color: #7c3aed; }
.tm-reports-supervisor-stat--red .tm-reports-supervisor-stat__icon { background: #fff1f2; color: #e11d48; }

.tm-reports-supervisor-stat__content {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tm-reports-supervisor-stat__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #94a3b8;
  line-height: 1.2;
}

.tm-reports-supervisor-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}

.tm-reports-supervisor-stat__pct {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.35rem;
  border-radius: 999px;
  flex: 0 0 auto;
  align-self: flex-start;
}

.tm-reports-supervisor-stat--green .tm-reports-supervisor-stat__pct { background: #dcfce7; color: #15803d; }
.tm-reports-supervisor-stat--orange .tm-reports-supervisor-stat__pct { background: #ffedd5; color: #c2410c; }
.tm-reports-supervisor-stat--purple .tm-reports-supervisor-stat__pct { background: #f3e8ff; color: #7c3aed; }
.tm-reports-supervisor-stat--red .tm-reports-supervisor-stat__pct { background: #ffe4e6; color: #be123c; }

.tm-reports-supervisor-stat__bar {
  height: 3px;
  border-radius: 999px;
  background: #f1f5f9;
  overflow: hidden;
}

.tm-reports-supervisor-stat__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: none;
}

.tm-reports-supervisor-stat--green .tm-reports-supervisor-stat__bar-fill { background: #22c55e; }
.tm-reports-supervisor-stat--orange .tm-reports-supervisor-stat__bar-fill { background: #f97316; }
.tm-reports-supervisor-stat--purple .tm-reports-supervisor-stat__bar-fill { background: #a855f7; }
.tm-reports-supervisor-stat--red .tm-reports-supervisor-stat__bar-fill { background: #f43f5e; }

.tm-reports-supervisor__layout {
  display: grid;
  grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.tm-reports-supervisor-my,
.tm-reports-supervisor-members {
  border-radius: 0.85rem !important;
  height: 100%;
}

.tm-reports-supervisor-my__label,
.tm-reports-supervisor-members__label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #1e293b;
  margin: 0 0 0.85rem;
}

.tm-reports-supervisor-my {
  background: #f8fbff !important;
  border: 1px solid #dbeafe !important;
  padding: 1rem;
}

.tm-reports-supervisor-my__body,
.tm-reports-supervisor-my__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}

.tm-reports-supervisor-my__icon-circle {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #3b82f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  margin-bottom: 0.15rem;
}

.tm-reports-supervisor-my__period {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.tm-reports-supervisor-my__subtitle {
  font-size: 0.8rem;
  color: #94a3b8;
}

.tm-reports-supervisor-my__meta {
  font-size: 0.68rem;
  color: #94a3b8;
}

.tm-reports-supervisor-my .tm-report-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tm-reports-supervisor-my__action,
.tm-reports-supervisor-my__action:hover,
.tm-reports-supervisor-my__action:focus,
.tm-reports-supervisor-my__action:active {
  width: 100%;
  margin-top: 0.55rem;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.45rem !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.75rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: var(--tm-reports-accent) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.tm-reports-supervisor-my__action span {
  flex: 1 1 auto;
  text-align: left;
}

.tm-reports-supervisor-my__action .fa-chevron-right {
  margin-left: auto;
  font-size: 0.7rem;
  opacity: 0.75;
}

.tm-reports-supervisor-members {
  padding: 1rem 1rem 0.35rem;
}

.tm-reports-supervisor-members__list {
  display: flex;
  flex-direction: column;
}

.tm-reports-supervisor-member {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid #f1f5f9;
}

.tm-reports-supervisor-member:first-child {
  border-top: 0;
  padding-top: 0;
}

.tm-reports-supervisor-member__person {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}

.tm-reports-supervisor-member__avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.35rem;
  font-size: 0.9rem;
  overflow: hidden;
}

.tm-reports-supervisor-member__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-reports-supervisor-member__avatar--orange { background: #ffedd5; color: #ea580c; }
.tm-reports-supervisor-member__avatar--purple { background: #f3e8ff; color: #7c3aed; }
.tm-reports-supervisor-member__avatar--teal { background: #ccfbf1; color: #0d9488; }
.tm-reports-supervisor-member__avatar--rose { background: #ffe4e6; color: #e11d48; }
.tm-reports-supervisor-member__avatar--blue { background: #eff6ff; color: #3b82f6; }
.tm-reports-supervisor-member__avatar--amber { background: #fffbeb; color: #d97706; }

.tm-reports-supervisor-member__info {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.tm-reports-supervisor-member__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-reports-supervisor-member__role {
  font-size: 0.72rem;
  color: #94a3b8;
}

.tm-reports-supervisor-member .tm-report-badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tm-reports-supervisor-member__date {
  font-size: 0.78rem;
  color: #64748b;
  white-space: nowrap;
}

.tm-reports-supervisor-member__action,
.tm-reports-supervisor-member__action:hover,
.tm-reports-supervisor-member__action:focus,
.tm-reports-supervisor-member__action:active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  min-width: 7.5rem !important;
  padding: 0 0.65rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid #e2e8f0 !important;
  background: #fff !important;
  color: var(--tm-reports-accent) !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.tm-reports-supervisor-member__action .fa-chevron-right {
  font-size: 0.65rem;
  opacity: 0.75;
}

.tm-reports-supervisor-member__action--disabled {
  opacity: 0.45 !important;
  pointer-events: none;
  color: #94a3b8 !important;
}

.tm-reports-supervisor-members__empty {
  padding: 1.5rem 0.5rem;
  text-align: center;
}

@media (max-width: 1199.98px) {
  .tm-reports-supervisor__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .tm-reports-supervisor__layout {
    grid-template-columns: 1fr;
  }

  .tm-reports-supervisor__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .tm-reports-supervisor__header {
    flex-direction: column;
  }

  .tm-reports-supervisor__controls {
    width: 100%;
    justify-content: stretch;
  }

  .tm-reports-supervisor__period-form {
    flex: 1 1 auto;
  }

  .tm-reports-submit-btn,
  .tm-reports-submit-btn:hover,
  .tm-reports-submit-btn:focus,
  .tm-reports-submit-btn:active,
  .tm-reports-submit-btn:visited {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  .tm-reports-supervisor__stats {
    grid-template-columns: 1fr;
  }

  .tm-reports-supervisor-member {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .tm-reports-supervisor-member__action,
  .tm-reports-supervisor-member__action--disabled {
    justify-content: flex-start !important;
    width: 100%;
  }
}

/* —— Team detail page —— */
.tm-team-detail-page {
  --tm-team-detail-accent: #7c3aed;
}

.tm-team-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}

.tm-team-detail__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tm-team-detail__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.65rem;
  background: #f5f3ff;
  color: #7c3aed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  font-size: 1.1rem;
}

.tm-team-detail__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.tm-team-detail__subtitle {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.45;
  max-width: 40rem;
}

.tm-team-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.tm-team-detail__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
}

.tm-team-detail__meta-label {
  color: #94a3b8;
  font-weight: 600;
}

.tm-team-detail__meta-value {
  color: #334155;
  font-weight: 700;
}

.tm-team-detail__meta-pill--active {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
  font-weight: 600;
}

.tm-team-detail__meta-pill--inactive {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #64748b;
  font-weight: 600;
}

.tm-team-detail__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tm-team-detail__action-btn,
.tm-team-detail__action-btn:hover,
.tm-team-detail__action-btn:focus,
.tm-team-detail__action-btn:active,
.tm-team-detail__action-btn:focus-visible {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  cursor: pointer;
  margin: 0 !important;
}

.tm-team-detail__action-btn--edit,
.tm-team-detail__action-btn--edit:hover,
.tm-team-detail__action-btn--edit:focus,
.tm-team-detail__action-btn--edit:active {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #ea580c !important;
  text-decoration: none !important;
}

.tm-team-detail__action-btn--delete,
.tm-team-detail__action-btn--delete:hover,
.tm-team-detail__action-btn--delete:focus,
.tm-team-detail__action-btn--delete:active {
  background: #fff !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

.tm-team-detail__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.tm-team-detail-stat {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85rem 1rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.75rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.tm-team-detail-stat__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.25rem;
  font-size: 0.95rem;
}

.tm-team-detail-stat__icon--members {
  background: #eff6ff;
  color: #3b82f6;
}

.tm-team-detail-stat__icon--projects {
  background: #f5f3ff;
  color: #7c3aed;
}

.tm-team-detail-stat__content {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}

.tm-team-detail-stat__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.tm-team-detail-stat__value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}

.tm-team-detail__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.tm-team-detail-panel {
  border-radius: 0.85rem !important;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tm-team-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.tm-team-detail-panel__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-team-detail-panel__count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.tm-team-detail-panel__body {
  padding: 0.5rem 0.65rem 0.65rem;
  flex: 1 1 auto;
}

.tm-team-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid transparent;
}

.tm-team-detail-row + .tm-team-detail-row {
  border-top: 1px solid #f1f5f9;
  margin-top: 0.15rem;
  padding-top: 0.75rem;
}

.tm-team-detail-row--link {
  text-decoration: none;
  color: inherit;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.tm-team-detail-row--link:hover {
  background: #f8fafc;
  border-color: #eef2f6;
}

.tm-team-detail-row__person {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tm-team-detail-row__avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
}

.tm-team-detail-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-team-detail-row__avatar--purple { background: #f3e8ff; color: #7c3aed; }
.tm-team-detail-row__avatar--teal { background: #ccfbf1; color: #0d9488; }
.tm-team-detail-row__avatar--amber { background: #ffedd5; color: #ea580c; }
.tm-team-detail-row__avatar--blue { background: #eff6ff; color: #3b82f6; }
.tm-team-detail-row__avatar--rose { background: #ffe4e6; color: #e11d48; }
.tm-team-detail-row__avatar--orange { background: #fff7ed; color: #c2410c; }

.tm-team-detail-row__icon {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.35rem;
  background: #f5f3ff;
  color: #7c3aed;
  font-size: 0.9rem;
}

.tm-team-detail-row__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tm-team-detail-row__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-team-detail-row__role {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-team-detail-row__badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tm-team-detail-row__badge--member {
  background: #eff6ff;
  color: #2563eb;
}

.tm-team-detail-row__badge--supervisor {
  background: #f5f3ff;
  color: #7c3aed;
}

.tm-team-detail-row__badge--super_admin {
  background: #f1f5f9;
  color: #475569;
}

.tm-team-detail-project-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tm-team-detail-project-status--active {
  background: #e0f2fe;
  color: #0369a1;
}

.tm-team-detail-project-status--planning {
  background: #f1f5f9;
  color: #475569;
}

.tm-team-detail-project-status--completed {
  background: #dcfce7;
  color: #15803d;
}

.tm-team-detail-project-status--archived {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.tm-team-detail-row__chevron {
  font-size: 0.7rem;
  color: #94a3b8;
  flex: 0 0 auto;
}

.tm-team-detail-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

.tm-team-detail-empty i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.55;
}

@media (max-width: 991.98px) {
  .tm-team-detail__panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .tm-team-detail__stats {
    grid-template-columns: 1fr;
  }

  .tm-team-detail-row {
    flex-wrap: wrap;
  }
}

/* —— Project detail page —— */
.tm-project-detail-page {
  --tm-project-detail-accent: #f97316;
}

.tm-project-detail__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 0.85rem;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.tm-project-detail__title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tm-project-detail__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.65rem;
  background: #fff7ed;
  color: #ea580c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.75rem;
  font-size: 1.1rem;
}

.tm-project-detail__icon--initials {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.tm-project-detail__title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.tm-project-detail__subtitle {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.45;
  max-width: 42rem;
}

.tm-project-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
}

.tm-project-detail__meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  font-size: 0.75rem;
  text-decoration: none;
}

.tm-project-detail__meta-pill--link:hover {
  background: #fff7ed;
  border-color: #fed7aa;
}

.tm-project-detail__meta-label {
  color: #94a3b8;
  font-weight: 600;
}

.tm-project-detail__meta-value {
  color: #334155;
  font-weight: 700;
}

.tm-project-detail-project-status {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
}

.tm-project-detail-project-status--active {
  background: #e0f2fe;
  color: #0369a1;
}

.tm-project-detail-project-status--planning {
  background: #f1f5f9;
  color: #475569;
}

.tm-project-detail-project-status--completed {
  background: #dcfce7;
  color: #15803d;
}

.tm-project-detail-project-status--archived {
  background: #f8fafc;
  color: #64748b;
  border: 1px solid #e2e8f0;
}

.tm-project-detail__actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.tm-project-detail-tasks-btn,
.tm-project-detail-tasks-btn:hover,
.tm-project-detail-tasks-btn:focus,
.tm-project-detail-tasks-btn:active,
.tm-project-detail-tasks-btn:focus-visible {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 168px !important;
  max-width: 168px !important;
  width: 168px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 0.75rem !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
  background: #0ea5e9 !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.25) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tm-project-detail-tasks-btn:hover,
.tm-project-detail-tasks-btn:focus {
  background: #0284c7 !important;
  color: #fff !important;
}

.tm-project-detail-tasks-btn__label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-project-detail__action-btn,
.tm-project-detail__action-btn:hover,
.tm-project-detail__action-btn:focus,
.tm-project-detail__action-btn:active,
.tm-project-detail__action-btn:focus-visible {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.5rem !important;
  box-sizing: border-box !important;
  font-size: 0.85rem !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
  cursor: pointer;
  margin: 0 !important;
}

.tm-project-detail__action-btn--edit,
.tm-project-detail__action-btn--edit:hover,
.tm-project-detail__action-btn--edit:focus,
.tm-project-detail__action-btn--edit:active {
  background: #fff7ed !important;
  border: 1px solid #fed7aa !important;
  color: #ea580c !important;
  text-decoration: none !important;
}

.tm-project-detail__action-btn--delete,
.tm-project-detail__action-btn--delete:hover,
.tm-project-detail__action-btn--delete:focus,
.tm-project-detail__action-btn--delete:active,
.tm-project-detail__action-btn--remove,
.tm-project-detail__action-btn--remove:hover,
.tm-project-detail__action-btn--remove:focus,
.tm-project-detail__action-btn--remove:active {
  background: #fff !important;
  border: 1px solid #fecaca !important;
  color: #dc2626 !important;
}

.tm-project-detail__panels {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1rem;
  align-items: stretch;
}

.tm-project-detail-panel {
  border-radius: 0.85rem !important;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tm-project-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  background: #fafbfc;
}

.tm-project-detail-panel__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1e293b;
}

.tm-project-detail-panel__count,
.tm-project-detail-panel__hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: #94a3b8;
}

.tm-project-detail-panel__body {
  padding: 0.5rem 0.65rem 0.85rem;
  flex: 1 1 auto;
}

.tm-project-detail-panel__footer {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.78rem;
  color: #94a3b8;
  line-height: 1.45;
}

.tm-project-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 0.55rem;
  border-radius: 0.55rem;
}

.tm-project-detail-row + .tm-project-detail-row {
  border-top: 1px solid #f1f5f9;
  margin-top: 0.15rem;
  padding-top: 0.75rem;
}

.tm-project-detail-row__person {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1 1 auto;
}

.tm-project-detail-row__avatar {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  overflow: hidden;
}

.tm-project-detail-row__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tm-project-detail-row__avatar--purple { background: #f3e8ff; color: #7c3aed; }
.tm-project-detail-row__avatar--teal { background: #ccfbf1; color: #0d9488; }
.tm-project-detail-row__avatar--amber { background: #ffedd5; color: #ea580c; }
.tm-project-detail-row__avatar--blue { background: #eff6ff; color: #3b82f6; }
.tm-project-detail-row__avatar--rose { background: #ffe4e6; color: #e11d48; }
.tm-project-detail-row__avatar--orange { background: #fff7ed; color: #c2410c; }

.tm-project-detail-row__info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tm-project-detail-row__name {
  font-size: 0.875rem;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-project-detail-row__role {
  font-size: 0.72rem;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-project-detail-row__badge {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tm-project-detail-row__badge--lead {
  background: #f5f3ff;
  color: #7c3aed;
}

.tm-project-detail-row__badge--member {
  background: #f1f5f9;
  color: #475569;
}

.tm-project-detail-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #94a3b8;
  font-size: 0.875rem;
}

.tm-project-detail-empty i {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  opacity: 0.55;
}

.tm-project-detail-add-member {
  margin-top: 0.85rem;
  padding: 0.85rem 0.55rem 0.25rem;
  border-top: 1px dashed #e2e8f0;
}

.tm-project-detail-add-member__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-bottom: 0.55rem;
}

.tm-project-detail-add-btn,
.tm-project-detail-add-btn:hover,
.tm-project-detail-add-btn:focus,
.tm-project-detail-add-btn:active {
  height: 31px !important;
  min-height: 31px !important;
  max-height: 31px !important;
  padding: 0 0.65rem !important;
  border-radius: 0.45rem !important;
  background: var(--tm-project-detail-accent) !important;
  border: none !important;
  color: #fff !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  box-shadow: none !important;
}

.tm-project-detail-add-btn:hover {
  background: #ea580c !important;
  color: #fff !important;
}

.tm-project-detail-task-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
}

.tm-project-detail-task-stat {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
}

.tm-project-detail-task-stat__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2rem;
  font-size: 0.85rem;
}

.tm-project-detail-task-stat__content {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.tm-project-detail-task-stat__label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.tm-project-detail-task-stat__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.1;
}

.tm-project-detail-task-stat--total {
  background: #eff6ff;
  border-color: #dbeafe;
}

.tm-project-detail-task-stat--total .tm-project-detail-task-stat__icon {
  background: #dbeafe;
  color: #2563eb;
}

.tm-project-detail-task-stat--pending {
  background: #fffbeb;
  border-color: #fde68a;
}

.tm-project-detail-task-stat--pending .tm-project-detail-task-stat__icon {
  background: #fde68a;
  color: #d97706;
}

.tm-project-detail-task-stat--completed {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.tm-project-detail-task-stat--completed .tm-project-detail-task-stat__icon {
  background: #bbf7d0;
  color: #15803d;
}

@media (max-width: 991.98px) {
  .tm-project-detail__panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .tm-project-detail-task-stats {
    grid-template-columns: 1fr;
  }

  .tm-project-detail__actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .tm-project-detail-tasks-btn,
  .tm-project-detail-tasks-btn:hover,
  .tm-project-detail-tasks-btn:focus,
  .tm-project-detail-tasks-btn:active {
    flex: 1 1 auto;
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .tm-project-detail-row {
    flex-wrap: wrap;
  }
}