@layer components {
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-10 {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
} 
[x-cloak] { display: none !important; }

/* Icon circles on the card divider line */
.pp-icon-blue {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #5b9cf6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-icon-orange {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background-color: #f5893a;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Horizontal rule with a centered icon sitting on top of it */
.pp-icon-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 32px 20px;
}

.pp-icon-divider hr {
  width: 100%;
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 0;
}

.pp-icon-divider-inner {
  position: absolute;
  background: #fff;
  padding: 0 8px;
}

/* Small circular icon wrapper used in the calls / submissions rows */
.pp-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Horizontal bar chart */
.pp-bar-track {
  flex: 1;
  height: 22px;
  background: #f3f4f6;
  border-radius: 3px;
  position: relative;
  overflow: visible; /* allows tooltip to appear outside track bounds */
}

.pp-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #93c5fd;
  border-radius: 3px;
  overflow: visible; /* let tooltip escape the fill boundary */
}

.pp-bar-grid-line {
  position: absolute;
  width: 1px;
  height: 100%;
  background: #e5e7eb;
  pointer-events: none;
}

/* Apply button — navy #1e3a6e is not in the default Tailwind palette */
.pp-btn-apply {
  background-color: #1e3a6e;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.pp-btn-apply:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pp-btn-apply:not(:disabled):hover {
  background-color: #1a3260;
}

/* Selected month cell in the month-picker grid */
.pp-month-selected {
  background: #1e3a6e !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
}

/* Table view */
.pp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.pp-table thead tr {
  background-color: #dbeafe; /* blue-100 */
}
.pp-table thead th {
  padding: 10px 16px;
  font-weight: 600;
  color: #000;
}
.pp-table thead th:first-child { border-radius: 6px 0 0 6px; }
.pp-table thead th:last-child  { border-radius: 0 6px 6px 0; }
.pp-table tbody tr {
  border-top: 1px solid #f3f4f6;
}
.pp-table tbody td {
  padding: 12px 16px;
  color: #000;
}
.reputation-select {
  position: relative;
  width: 100%;
}

.reputation-select-button {
  align-items: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  color: #111827;
  display: flex;
  font-size: 0.875rem;
  justify-content: space-between;
  min-height: 42px;
  padding: 0.625rem 2.5rem 0.625rem 1rem;
  position: relative;
  text-align: left;
  width: 100%;
}

.reputation-select-button:focus {
  border-color: #ed2024;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.18);
  outline: none;
}

.reputation-select-chevron {
  color: #111827;
  font-size: 1.25rem;
  line-height: 1;
  position: absolute;
  right: 0.875rem;
  top: 35%;
  transform: translateY(-54%) rotate(0deg);
  transition: transform 0.15s ease;
}

.reputation-select.is-open .reputation-select-chevron {
  transform: rotate(180deg);
}

.reputation-select-options {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.18);
  color: #111827;
  left: 0;
  list-style: none;
  margin: 0.375rem 0 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 30;
}

.reputation-select-options li {
  align-items: center;
  border-radius: 0.375rem;
  cursor: pointer;
  display: flex;
  font-size: 0.875rem;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0.55rem 0.7rem;
}

.reputation-select-options li:hover,
.reputation-select-options li[aria-selected="true"] {
  background: #fff1f1;
  color: #c8102e;
}

.reputation-option-check {
  color: #ed2024;
  font-weight: 700;
  width: 1rem;
}
#global-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#global-loader.gl-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
}

.gl-spinner {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(
    #ed2024 0%,
    rgba(237, 32, 36, 0.5) 40%,
    rgba(237, 32, 36, 0.15) 70%,
    transparent 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #fff calc(100% - 5px));
  animation: gl-spin 0.85s linear infinite;
}

turbo-frame[data-local-loading="true"] {
  display: block;
  min-height: 12rem;
  position: relative;
}

turbo-frame[data-local-loading="true"]::before {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 0.75rem;
  content: "";
  inset: 0;
  position: absolute;
  z-index: 40;
}

turbo-frame[data-local-loading="true"]::after {
  animation: gl-spin 0.85s linear infinite;
  border: 4px solid rgba(237, 32, 36, 0.18);
  border-radius: 9999px;
  border-top-color: #ed2024;
  content: "";
  height: 2.5rem;
  left: 50%;
  margin-left: -1.25rem;
  position: absolute;
  top: 7rem;
  width: 2.5rem;
  z-index: 41;
}

.section-local-loading {
  min-height: 12rem;
  position: relative;
}

.section-local-loading::before {
  background: rgba(255, 255, 255, 0.78);
  border-radius: 0.75rem;
  content: "";
  inset: 0;
  position: absolute;
  z-index: 40;
}

.section-local-loading::after {
  animation: gl-spin 0.85s linear infinite;
  border: 4px solid rgba(237, 32, 36, 0.18);
  border-radius: 9999px;
  border-top-color: #ed2024;
  content: "";
  height: 2.5rem;
  left: 50%;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  position: absolute;
  top: 50%;
  width: 2.5rem;
  z-index: 41;
}

.dashboard-section-loading {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  min-height: 16rem;
  position: relative;
}

.dashboard-section-loading--compact {
  min-height: 8rem;
}

.dashboard-section-loading::after {
  animation: gl-spin 0.85s linear infinite;
  border: 4px solid rgba(237, 32, 36, 0.18);
  border-radius: 9999px;
  border-top-color: #ed2024;
  content: "";
  height: 2.5rem;
  left: 50%;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  position: absolute;
  top: 50%;
  width: 2.5rem;
}

.dashboard-skeleton-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.dashboard-skeleton-program {
  border-radius: 0.75rem;
  margin-bottom: 2rem;
  padding: 1.5rem 1.75rem 1.75rem;
}

.dashboard-skeleton-header,
.dashboard-skeleton-actions,
.dashboard-skeleton-contact-heading,
.dashboard-skeleton-bar-row,
.dashboard-skeleton-contact-footer {
  align-items: center;
  display: flex;
}

.dashboard-skeleton-header {
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.dashboard-skeleton-actions {
  gap: 0.5rem;
}

.dashboard-skeleton-performance-grid,
.dashboard-skeleton-contacts-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-skeleton-panel {
  border: 1px solid #e5e7eb;
  min-height: 22rem;
  padding: 1.75rem 2rem;
}

.dashboard-skeleton-contact {
  border-radius: 0;
}

.dashboard-skeleton-contact-heading {
  gap: 0.5rem;
  padding: 1.5rem 1.25rem;
}

.dashboard-skeleton-table-head,
.dashboard-skeleton-table-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 0.85rem 1.25rem;
}

.dashboard-skeleton-table-head {
  background: #fff1f1;
}

.dashboard-skeleton-contact:nth-child(2) .dashboard-skeleton-table-head,
.dashboard-skeleton-contact:nth-child(2) .dashboard-skeleton-table-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-skeleton-table-row {
  border-top: 1px solid #f3f4f6;
}

.dashboard-skeleton-contact-footer {
  border-top: 1px solid #f3f4f6;
  justify-content: center;
  padding: 0.9rem 1rem;
}

.dashboard-skeleton-line,
.dashboard-skeleton-pill,
.dashboard-skeleton-square,
.dashboard-skeleton-circle,
.dashboard-skeleton-number,
.dashboard-skeleton-bar-track,
.dashboard-skeleton-info-dot,
.dashboard-skeleton-button {
  animation: dashboard-skeleton-shimmer 1.25s ease-in-out infinite;
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 45%, #f3f4f6 90%);
  background-size: 220% 100%;
}

.dashboard-skeleton-line {
  border-radius: 9999px;
  height: 0.75rem;
  width: 100%;
}

.dashboard-skeleton-line--title,
.dashboard-skeleton-line--contact-title {
  height: 1.2rem;
  width: 13rem;
}

.dashboard-skeleton-line--date {
  height: 0.75rem;
  margin-top: 0.55rem;
  width: 11rem;
}

.dashboard-skeleton-line--panel-title {
  height: 0.95rem;
  margin: 0 auto;
  width: 8rem;
}

.dashboard-skeleton-line--subtitle {
  height: 0.65rem;
  margin: 0.75rem auto 1.5rem;
  width: 13rem;
}

.dashboard-skeleton-line--label {
  height: 0.65rem;
  margin: 0.7rem auto 1.5rem;
  width: 7rem;
}

.dashboard-skeleton-line--bar-label {
  flex: 0 0 4rem;
}

.dashboard-skeleton-pill {
  border-radius: 0.5rem;
  height: 2rem;
  width: 5rem;
}

.dashboard-skeleton-pill--short,
.dashboard-skeleton-square {
  width: 2.7rem;
}

.dashboard-skeleton-square {
  border-radius: 0.5rem;
  height: 2rem;
}

.dashboard-skeleton-divider {
  border-top: 1px solid #e5e7eb;
  margin: 1.7rem 0 1.4rem;
  position: relative;
}

.dashboard-skeleton-circle,
.dashboard-skeleton-info-dot {
  border-radius: 9999px;
}

.dashboard-skeleton-circle {
  height: 2.5rem;
  left: 50%;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  position: absolute;
  top: 0;
  width: 2.5rem;
}

.dashboard-skeleton-info-dot {
  height: 1rem;
  width: 1rem;
}

.dashboard-skeleton-number {
  border-radius: 9999px;
  height: 2.8rem;
  margin: 2.3rem auto 0;
  width: 9rem;
}

.dashboard-skeleton-bars {
  display: grid;
  gap: 0.75rem;
}

.dashboard-skeleton-bar-row {
  gap: 0.8rem;
}

.dashboard-skeleton-bar-track {
  border-radius: 0.25rem;
  flex: 1;
  height: 1rem;
  overflow: hidden;
  position: relative;
}

.dashboard-skeleton-bar-fill {
  background: rgba(237, 32, 36, 0.28);
  border-radius: 0.25rem;
  height: 100%;
}

.dashboard-skeleton-bar-fill--1 { width: 52%; }
.dashboard-skeleton-bar-fill--2 { width: 36%; }
.dashboard-skeleton-bar-fill--3 { width: 4%; }
.dashboard-skeleton-bar-fill--4 { width: 12%; }
.dashboard-skeleton-bar-fill--5 { width: 28%; }

.dashboard-skeleton-button {
  border-radius: 0;
  height: 2rem;
  width: 8rem;
}

@media (max-width: 768px) {
  .dashboard-skeleton-header {
    align-items: flex-start;
    gap: 1rem;
  }

  .dashboard-skeleton-performance-grid,
  .dashboard-skeleton-contacts-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-skeleton-actions {
    display: none;
  }
}

@keyframes dashboard-skeleton-shimmer {
  0% { background-position: 140% 0; }
  100% { background-position: -80% 0; }
}

@keyframes gl-spin {
  to { transform: rotate(360deg); }
}

[x-cloak] { display: none !important; }
.project-workspace-body {
  --project-card-gap: 0.35rem;
  --project-card-padding: 0.6rem;
  --project-header-height: 4rem;
  --project-list-gap: 0.55rem;
  --project-list-width: 16rem;
  --project-section-padding: 0.9rem;
  background:
    radial-gradient(circle at 18% 0%, rgba(237, 32, 36, 0.08), transparent 26rem),
    #f3f4f6;
  color: #111827;
  font-size: 0.9rem;
  margin: 0;
  min-height: 100vh;
}

/* Native timeline administration */
.timeline-admin-page {
  width: min(100%, 96rem);
  margin: 0 auto;
  padding: 1.5rem;
  color: #111827;
}

.timeline-admin-page-narrow {
  width: min(100%, 56rem);
}

.timeline-page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.timeline-page-heading h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
}

.timeline-page-heading p {
  margin: 0.25rem 0 0;
  color: #6b7280;
}

.timeline-page-heading .timeline-eyebrow {
  color: var(--fuel-blue);
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1rem;
}

.timeline-admin-card,
.timeline-admin-panel,
.timeline-admin-table-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 0.2rem 0.8rem rgb(15 23 42 / 0.06);
}

.timeline-admin-card,
.timeline-admin-panel {
  padding: 1.25rem;
}

.timeline-admin-card-heading,
.timeline-admin-actions,
.timeline-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
}

.timeline-admin-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 900;
}

.timeline-admin-meta {
  margin: 0.75rem 0;
  color: #4b5563;
  font-size: 0.875rem;
}

.timeline-admin-form {
  display: grid;
  gap: 1.1rem;
}

.timeline-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.timeline-fieldset legend,
.timeline-admin-form label > span:first-child,
.timeline-exception-form label > span:first-child {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.82rem;
  font-weight: 800;
}

.timeline-weekday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.55rem;
}

.timeline-weekday-grid .timeline-checkbox,
.timeline-default-calendar {
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  background: #f9fafb;
  padding: 0.7rem;
}

.timeline-default-calendar small {
  display: block;
  margin-top: 0.15rem;
  color: #6b7280;
  font-weight: 500;
}

.timeline-form-errors {
  border: 1px solid #fecaca;
  border-radius: 0.7rem;
  background: #fef2f2;
  color: #991b1b;
  padding: 0.85rem 1rem;
}

.timeline-form-errors ul {
  margin: 0.35rem 0 0 1.1rem;
}

.timeline-exception-form {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr 1.5fr auto auto;
  align-items: end;
  gap: 0.75rem;
}

.timeline-exception-working {
  min-height: 2.75rem;
  padding: 0 0.4rem;
}

.timeline-admin-table-wrap {
  max-height: 34rem;
  margin-top: 1rem;
  overflow: auto;
}

.timeline-admin-table {
  width: 100%;
  border-collapse: collapse;
}

.timeline-admin-table th,
.timeline-admin-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}

.timeline-admin-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timeline-admin-table .text-right {
  text-align: right;
}

.timeline-admin-empty-cell {
  padding: 2rem !important;
  color: #6b7280;
  text-align: center !important;
}

.timeline-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.timeline-status-badge.is-complete {
  background: #dcfce7;
  color: #166534;
}

.timeline-status-badge.is-late {
  background: #fee2e2;
  color: #991b1b;
}

.timeline-text-link {
  border: 0;
  background: transparent;
  color: var(--fuel-blue);
  font-weight: 800;
  text-decoration: none;
}

.timeline-text-link:hover {
  text-decoration: underline;
}

.timeline-button-danger {
  border-color: #fecaca;
  background: #fff;
  color: #b91c1c;
}

.timeline-empty-state {
  grid-column: 1 / -1;
  padding: 3rem 1.5rem;
  border: 1px dashed #d1d5db;
  border-radius: 0.9rem;
  background: #fff;
  text-align: center;
}

@media (max-width: 900px) {
  .timeline-exception-form {
    grid-template-columns: 1fr 1fr;
  }

  .timeline-exception-form > :nth-child(3) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .timeline-page-heading,
  .timeline-admin-card-heading,
  .timeline-admin-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .timeline-exception-form {
    grid-template-columns: 1fr;
  }

  .timeline-exception-form > :nth-child(3) {
    grid-column: auto;
  }
}

/* Native project timeline ------------------------------------------------- */
.timeline-shell {
  --timeline-left-column: 20rem;
  --timeline-row-height: 3.25rem;
  background: #f3f4f6;
  color: #111827;
  min-height: calc(100vh - 5rem);
  padding: 1rem;
}

.timeline-heading,
.timeline-heading-actions,
.timeline-view-tabs,
.timeline-export-actions,
.timeline-drawer-actions,
.timeline-dependency-form {
  align-items: center;
  display: flex;
}

.timeline-heading {
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}

.timeline-heading h1 {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  margin: 0.15rem 0;
}

.timeline-heading p {
  color: #6b7280;
  font-size: 0.82rem;
  margin: 0;
}

.timeline-kicker {
  color: var(--fuel-blue) !important;
  font-size: 0.7rem !important;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline-heading-actions,
.timeline-view-tabs,
.timeline-export-actions {
  flex-wrap: wrap;
  gap: 0.45rem;
}

.timeline-button,
.timeline-icon-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0.55rem;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 750;
  justify-content: center;
  line-height: 1;
  min-height: 2.25rem;
  padding: 0.65rem 0.85rem;
  text-decoration: none;
}

.timeline-button-primary {
  background: var(--fuel-blue);
  color: #fff;
}

.timeline-button-primary:hover {
  background: var(--fuel-blue-dark);
}

.timeline-button-secondary {
  background: #fff;
  border-color: #d1d5db;
  color: #1f2937;
}

.timeline-button-danger,
.timeline-link-danger {
  color: #b91c1c;
}

.timeline-button-danger {
  background: #fff1f2;
  border-color: #fecdd3;
}

.timeline-toolbar,
.timeline-admin-panel,
.timeline-backlog {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
}

.timeline-toolbar {
  margin-bottom: 0.75rem;
  padding: 0.65rem;
}

.timeline-view-tabs {
  margin-bottom: 0.55rem;
}

.timeline-tab {
  border-bottom: 2px solid transparent;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 0.45rem 0.65rem;
  text-decoration: none;
}

.timeline-tab:hover,
.timeline-tab.is-active {
  border-bottom-color: var(--fuel-blue);
  color: var(--fuel-blue);
}

.timeline-filter-form {
  align-items: end;
  display: grid;
  gap: 0.45rem;
  /* Wrap into as many rows as needed instead of truncating labels such as
     "All lifecycle projects" or "No baseline" at laptop widths. */
  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
}

.timeline-filter-form .timeline-search {
  grid-column: span 2;
}

.timeline-input {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
  box-sizing: border-box;
  color: #111827;
  font-size: 0.78rem;
  min-height: 2.25rem;
  padding: 0.5rem 0.65rem;
  width: 100%;
}

.timeline-input:focus {
  border-color: var(--fuel-blue);
  box-shadow: 0 0 0 3px rgb(239 35 40 / 0.12);
  outline: none;
}

.timeline-export-actions {
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.timeline-feedback {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
  font-size: 0.78rem;
  font-weight: 700;
  left: 50%;
  padding: 0.65rem 0.9rem;
  position: fixed;
  top: 1rem;
  transform: translateX(-50%);
  z-index: 120;
}

.timeline-feedback[data-state="error"] {
  border-color: #fca5a5;
  color: #b91c1c;
}

.timeline-board {
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 0.7rem;
  box-shadow: 0 2px 7px rgb(15 23 42 / 0.06);
  max-height: calc(100vh - 19rem);
  min-height: 20rem;
  overflow: auto;
  position: relative;
}

/* The date header and every track share one column. Its minimum width must
   fit every period at its minimum width, or the header overflows while the
   tracks shrink and bars stop lining up with their dates. */
.timeline-grid {
  --timeline-period-min: 5.5rem;
  display: grid;
  grid-template-columns: var(--timeline-left-column) minmax(max(52rem, calc(var(--timeline-columns) * var(--timeline-period-min))), 1fr);
  min-width: 75rem;
}

.timeline-grid-corner,
.timeline-row-label {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  border-right: 1px solid #d1d5db;
  left: 0;
  position: sticky;
  z-index: 4;
}

.timeline-grid-corner {
  align-items: center;
  display: flex;
  font-size: 0.72rem;
  font-weight: 800;
  justify-content: space-between;
  padding: 0 0.7rem;
  top: 0;
  z-index: 8;
}

.timeline-grid-corner span:last-child {
  color: #6b7280;
  font-weight: 600;
}

.timeline-periods {
  background: #f8fafc;
  display: grid;
  grid-template-columns: var(--timeline-period-columns, repeat(var(--timeline-columns), 1fr));
  position: sticky;
  top: 0;
  z-index: 7;
}

.timeline-period {
  border-bottom: 1px solid #d1d5db;
  border-right: 1px solid #e5e7eb;
  min-height: 2.8rem;
  padding: 0.35rem 0.45rem;
  text-align: center;
}

.timeline-period strong,
.timeline-period span {
  display: block;
}

.timeline-period strong {
  font-size: 0.72rem;
}

.timeline-period span {
  color: #6b7280;
  font-size: 0.64rem;
  margin-top: 0.1rem;
}

.timeline-row-label {
  align-items: center;
  contain-intrinsic-size: auto var(--timeline-row-height);
  content-visibility: auto;
  display: flex;
  gap: 0.55rem;
  justify-content: space-between;
  min-height: var(--timeline-row-height);
  padding: 0.35rem 0.65rem 0.35rem calc(0.65rem + (var(--timeline-depth) * 0.8rem));
}

.timeline-item-main {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  min-width: 0;
}

.timeline-item-kind {
  align-items: center;
  background: #e5e7eb;
  border-radius: 999px;
  color: #374151;
  display: inline-flex;
  flex: 0 0 1.35rem;
  font-size: 0.62rem;
  font-weight: 900;
  height: 1.35rem;
  justify-content: center;
}

.timeline-item-kind-milestone {
  background: #fef3c7;
  color: #92400e;
}

.timeline-item-title {
  color: #111827;
  display: block;
  font-size: 0.75rem;
  font-weight: 750;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-item-title:hover {
  color: var(--fuel-blue);
}

.timeline-item-meta {
  align-items: center;
  color: #6b7280;
  display: flex;
  font-size: 0.6rem;
  gap: 0.3rem;
  margin-top: 0.12rem;
  overflow: hidden;
  white-space: nowrap;
}

.timeline-health {
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.1rem 0.3rem;
}

.timeline-health-on_track {
  background: #dcfce7;
  color: #166534;
}

.timeline-health-at_risk {
  background: #fef3c7;
  color: #92400e;
}

.timeline-health-late {
  background: #fee2e2;
  color: #991b1b;
}

.timeline-health-client_pacing {
  background: #e5e7eb;
  color: #374151;
}

.timeline-progress {
  color: #6b7280;
  font-size: 0.65rem;
  font-weight: 700;
}

.timeline-track {
  background-color: #fff;
  background-image: var(--timeline-gridlines, none);
  border-bottom: 1px solid #e5e7eb;
  contain-intrinsic-size: auto var(--timeline-row-height);
  content-visibility: auto;
  min-height: var(--timeline-row-height);
  position: relative;
}

.timeline-group-label,
.timeline-group-track {
  background: #f1f5f9;
  border-bottom: 1px solid #cbd5e1;
  min-height: 2rem;
}

.timeline-group-label {
  align-items: center;
  border-right: 1px solid #cbd5e1;
  color: #111827;
  display: flex;
  font-size: 0.7rem;
  font-weight: 850;
  left: 0;
  padding: 0.35rem 0.65rem;
  position: sticky;
  text-transform: uppercase;
  z-index: 5;
}

.timeline-group-track {
  background-image: linear-gradient(to right, #dfe4ea 1px, transparent 1px);
  background-size: calc(100% / var(--timeline-columns)) 100%;
}

.timeline-collapse-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 1.15rem;
  font-size: 0.7rem;
  height: 1.15rem;
  justify-content: center;
  padding: 0;
}

.timeline-collapse-button:hover,
.timeline-collapse-button:focus-visible {
  background: #fee2e2;
  color: var(--fuel-blue);
  outline: none;
}

.timeline-dependency-layer {
  height: 100%;
  inset: 0 0 0 var(--timeline-left-column);
  overflow: visible;
  pointer-events: none;
  position: absolute;
  width: calc(100% - var(--timeline-left-column));
  z-index: 3;
}

.timeline-dependency-layer path {
  fill: none;
  stroke: #64748b;
  stroke-width: 0.28;
  vector-effect: non-scaling-stroke;
}

.timeline-bar,
.timeline-milestone {
  border: 0;
  cursor: grab;
  position: absolute;
  top: 0.8rem;
  touch-action: none;
}

.timeline-bar {
  border-radius: 0.35rem;
  color: #fff;
  height: 1.65rem;
  min-width: 0.7rem;
  overflow: visible;
  padding: 0 0.45rem;
  text-align: left;
}

.timeline-bar > span:first-child {
  display: block;
  font-size: 0.63rem;
  font-weight: 800;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  z-index: 2;
}

.timeline-bar-progress {
  background: rgb(255 255 255 / 0.3);
  bottom: 0;
  height: 0.25rem;
  left: 0;
  position: absolute;
}

.timeline-milestone {
  height: 1.2rem;
  transform: rotate(45deg);
  width: 1.2rem;
}

.timeline-bar-fixed {
  align-items: center;
  cursor: default;
  display: flex;
}

.timeline-bar-fixed > span:first-child {
  flex: 1;
  min-width: 0;
}

.timeline-summary-marker {
  height: 1.65rem;
  margin-left: -0.45rem;
  outline: none;
  position: absolute;
  top: 0.8rem;
  width: 0.9rem;
  z-index: 3;
}

.timeline-summary-diamond {
  background: #fff;
  border: 2px solid #111827;
  height: 0.7rem;
  left: 0.1rem;
  position: absolute;
  top: 0.48rem;
  transform: rotate(45deg);
  width: 0.7rem;
}

.timeline-summary-marker-complete .timeline-summary-diamond {
  background: #111827;
  border-color: #fff;
  box-shadow: 0 0 0 1px #111827;
}

.timeline-summary-marker-late .timeline-summary-diamond {
  background: #fee2e2;
  border-color: #7f1d1d;
}

.timeline-summary-marker-at_risk .timeline-summary-diamond {
  background: #fef3c7;
  border-color: #92400e;
}

.timeline-summary-marker:hover .timeline-summary-diamond,
.timeline-summary-marker:focus-visible .timeline-summary-diamond {
  transform: rotate(45deg) scale(1.25);
}

.timeline-track.is-expanded .timeline-summary-marker {
  display: none;
}

.timeline-tooltip {
  background: #111827;
  border-radius: 0.4rem;
  bottom: calc(100% + 0.35rem);
  box-shadow: 0 8px 20px rgb(15 23 42 / 0.25);
  color: #fff;
  display: none;
  flex-direction: column;
  font-size: 0.7rem;
  gap: 0.1rem;
  left: 50%;
  line-height: 1.25;
  padding: 0.4rem 0.55rem;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 30;
}

.timeline-tooltip strong {
  font-weight: 800;
}

.timeline-tooltip span {
  color: #d1d5db;
}

.timeline-summary-marker:hover .timeline-tooltip,
.timeline-summary-marker:focus-visible .timeline-tooltip {
  display: flex;
}

.timeline-track:has(.timeline-summary-marker:hover, .timeline-summary-marker:focus-visible) {
  content-visibility: visible;
  z-index: 20;
}

.timeline-milestone-actual {
  background: #111827;
  border: 2px solid #fff;
  border-radius: 9999px;
  box-shadow: 0 0 0 1px #111827;
  height: 0.7rem;
  margin-left: 0.25rem;
  pointer-events: none;
  position: absolute;
  top: 1.05rem;
  width: 0.7rem;
  z-index: 4;
}

.timeline-health-bg-on_track,
.timeline-health-bg-complete {
  background: #16a34a;
}

.timeline-health-bg-at_risk {
  background: #d97706;
}

.timeline-health-bg-late {
  background: #dc2626;
}

.timeline-health-bg-client_pacing {
  background: #6b7280;
}

/* Project bars are drawn as stretches between milestones. */
.timeline-bar-segment {
  height: 1.65rem;
  pointer-events: none;
  position: absolute;
  top: 0.8rem;
  z-index: 1;
}

.timeline-bar-segment + .timeline-bar-segment {
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.7);
}

.timeline-bar-segment.is-first {
  border-radius: 0.35rem 0 0 0.35rem;
}

.timeline-bar-segment.is-last {
  border-radius: 0 0.35rem 0.35rem 0;
}

.timeline-bar-segment.is-first.is-last {
  border-radius: 0.35rem;
}

.timeline-bar-segment-on_time {
  background: #16a34a;
}

.timeline-bar-segment-late {
  background: #dc2626;
}

.timeline-bar-segmented {
  background: transparent;
  z-index: 2;
}

.timeline-planned-launch {
  background: #111827;
  border-radius: 1px;
  height: 2.15rem;
  margin-left: -1px;
  position: absolute;
  top: 0.55rem;
  width: 3px;
  z-index: 3;
}

.timeline-milestone-forecast {
  border: 2px dashed #111827;
  height: 0.8rem;
  margin-left: 0.2rem;
  pointer-events: auto;
  position: absolute;
  top: 1rem;
  transform: rotate(45deg);
  width: 0.8rem;
  z-index: 4;
}

.timeline-resize-handle {
  cursor: ew-resize;
  height: 100%;
  position: absolute;
  top: 0;
  width: 0.45rem;
  z-index: 3;
}

.timeline-resize-start {
  left: -0.15rem;
}

.timeline-resize-finish {
  right: -0.15rem;
}

.timeline-bar.is-dragging,
.timeline-milestone.is-dragging {
  cursor: grabbing;
  opacity: 0.78;
  outline: 2px solid #111827;
  z-index: 10;
}

.timeline-baseline-bar {
  background: #64748b;
  bottom: 0.3rem;
  height: 0.2rem;
  opacity: 0.75;
  position: absolute;
}

.timeline-empty-grid {
  grid-column: 1 / -1;
}

.timeline-empty {
  align-items: center;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  justify-content: center;
  min-height: 8rem;
  padding: 1rem;
  text-align: center;
}

.timeline-backlog,
.timeline-admin-panel {
  margin-top: 0.75rem;
  padding: 0.75rem;
}

.timeline-backlog > summary,
.timeline-admin-panel > summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 800;
}

.timeline-admin-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.7rem;
}

.timeline-admin-form,
.timeline-admin-inline-form,
.timeline-editor-form,
.timeline-dependency-form {
  display: grid;
  gap: 0.55rem;
}

.timeline-admin-form {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  padding: 0.7rem;
}

.timeline-admin-form h3,
.timeline-drawer-section h3 {
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
}

.timeline-drawer-backdrop {
  align-items: center;
  background: rgb(0 0 0 / 0.58);
  display: none;
  inset: 0;
  justify-content: flex-end;
  padding: 1rem;
  position: fixed;
  z-index: 100;
}

.timeline-drawer-backdrop.is-open {
  display: flex;
}

.timeline-drawer {
  background: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.35);
  display: flex;
  flex-direction: column;
  height: min(52rem, calc(100vh - 2rem));
  max-width: 44rem;
  overflow: hidden;
  width: min(44rem, 96vw);
}

.timeline-drawer-header {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 0.75rem 0.9rem;
}

.timeline-drawer-header p {
  color: var(--fuel-blue);
  font-size: 0.65rem;
  font-weight: 800;
  margin: 0;
  text-transform: uppercase;
}

.timeline-drawer-header h2 {
  font-size: 1.15rem;
  margin: 0.1rem 0 0;
}

.timeline-icon-button {
  background: #fff;
  border-color: #d1d5db;
  color: #374151;
  font-size: 1.25rem;
  min-width: 2.25rem;
  padding: 0;
}

.timeline-drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem;
}

.timeline-editor-form label > span,
.timeline-editor-form legend {
  display: block;
  font-size: 0.7rem;
  font-weight: 750;
  margin-bottom: 0.25rem;
}

.timeline-form-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.timeline-assignee-grid {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  display: grid;
  gap: 0.3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 8rem;
  overflow-y: auto;
  padding: 0.45rem;
}

.timeline-checkbox {
  align-items: center;
  display: flex !important;
  font-size: 0.7rem;
  gap: 0.35rem;
}

.timeline-drawer-actions {
  background: #fff;
  bottom: -0.85rem;
  border-top: 1px solid #e5e7eb;
  gap: 0.45rem;
  margin: 0 -0.85rem -0.85rem;
  padding: 0.65rem 0.85rem;
  position: sticky;
  z-index: 4;
}

.timeline-drawer-section,
.timeline-danger-zone {
  border-top: 1px solid #e5e7eb;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
}

.timeline-dependency-form {
  grid-template-columns: 1.5fr 1fr 0.7fr auto;
  margin-top: 0.55rem;
}

.timeline-dependency-list {
  display: grid;
  font-size: 0.7rem;
  gap: 0.35rem;
  list-style: none;
  margin: 0.5rem 0;
  padding: 0;
}

.timeline-dependency-list li {
  align-items: center;
  background: #f8fafc;
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0.5rem;
}

.timeline-saved-view-menu {
  position: relative;
}

.timeline-saved-view-menu > summary {
  list-style: none;
}

.timeline-saved-view-menu > summary::-webkit-details-marker {
  display: none;
}

.timeline-saved-view-panel {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.65rem;
  box-shadow: 0 14px 35px rgb(15 23 42 / 0.16);
  display: grid;
  gap: 0.45rem;
  min-width: 17rem;
  padding: 0.65rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.35rem);
  z-index: 30;
}

.timeline-saved-view-link {
  border-radius: 0.4rem;
  color: #111827;
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.4rem 0.5rem;
  text-decoration: none;
}

.timeline-saved-view-link:hover,
.timeline-saved-view-link.is-active {
  background: #fee2e2;
  color: var(--fuel-blue);
}

.timeline-saved-view-form,
.timeline-saved-view-actions {
  border-top: 1px solid #e5e7eb;
  display: grid;
  gap: 0.4rem;
  padding-top: 0.55rem;
}

.timeline-impact-dialog,
.timeline-shortcut-dialog {
  background: #fff;
  border: 0;
  border-radius: 0.8rem;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.28);
  color: #111827;
  margin: auto;
  max-height: min(42rem, calc(100vh - 2rem));
  max-width: min(36rem, calc(100vw - 2rem));
  overflow: auto;
  padding: 0;
  width: 100%;
}

.timeline-impact-dialog::backdrop,
.timeline-shortcut-dialog::backdrop {
  background: rgb(0 0 0 / 0.62);
}

.timeline-impact-content,
.timeline-shortcut-content {
  padding: 1rem;
}

.timeline-impact-content h2,
.timeline-shortcut-content h2 {
  font-size: 1rem;
  font-weight: 850;
  margin: 0 0 0.35rem;
}

.timeline-impact-list,
.timeline-shortcut-list {
  display: grid;
  gap: 0.4rem;
  list-style: none;
  margin: 0.75rem 0;
  padding: 0;
}

.timeline-impact-list li,
.timeline-shortcut-list li {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.45rem;
  font-size: 0.72rem;
  padding: 0.5rem;
}

.timeline-impact-conflicts {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 0.45rem;
  color: #9a3412;
  font-size: 0.72rem;
  padding: 0.55rem;
}

.timeline-impact-actions {
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1rem;
}

.timeline-danger-zone {
  display: flex;
  gap: 0.45rem;
}

body.timeline-drawer-open {
  overflow: hidden;
}

@media (max-width: 80rem) {
  .timeline-filter-form {
    grid-template-columns: repeat(4, minmax(8rem, 1fr));
  }

  .timeline-search {
    grid-column: span 2;
  }

  .timeline-admin-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  .timeline-shell {
    --timeline-left-column: 16rem;
    padding: 0.6rem;
  }

  .timeline-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .timeline-filter-form,
  .timeline-form-grid,
  .timeline-assignee-grid,
  .timeline-dependency-form {
    grid-template-columns: 1fr;
  }

  .timeline-search {
    grid-column: auto;
  }

  .timeline-drawer-backdrop {
    padding: 0;
  }

  .timeline-drawer {
    border-radius: 0;
    height: 100vh;
    max-width: none;
    width: 100vw;
  }
}

@media print {
  .timeline-heading-actions,
  .timeline-toolbar,
  .timeline-backlog,
  .timeline-admin-panel,
  .timeline-drawer-backdrop {
    display: none !important;
  }

  .timeline-board {
    max-height: none;
    overflow: visible;
  }
}

.project-workspace-header {
  align-items: center;
  background: #050505;
  border-bottom: 2px solid #ed2024;
  display: flex;
  height: var(--project-header-height);
  justify-content: space-between;
  padding: 0 1.25rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.project-workspace-main {
  min-height: calc(100vh - var(--project-header-height));
}

.project-header-link,
.project-board-tool-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.65rem;
  color: #fff;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 800;
  justify-content: center;
  padding: 0.65rem 0.9rem;
}

.project-header-link:hover,
.project-board-tool-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.project-icon-button {
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.65rem;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.project-icon-button:hover {
  background: rgba(255, 255, 255, 0.16);
}

.project-icon-button-light {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  color: #4b5563;
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.project-icon-button-light:hover {
  background: #f9fafb;
  color: #ed2024;
}

.project-avatar {
  align-items: center;
  background: #ed2024;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  display: flex;
  font-size: 0.75rem;
  font-weight: 900;
  height: 2.6rem;
  justify-content: center;
  width: 2.6rem;
}

.project-header-menu {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
  margin-top: 0.55rem;
  min-width: 15rem;
  overflow: hidden;
  position: absolute;
  top: 100%;
  z-index: 120;
}

.project-directory,
.project-narrow-page {
  margin: 0 auto;
  max-width: 92rem;
  padding: var(--project-section-padding) 1.25rem 3rem;
}

.project-narrow-page {
  max-width: 72rem;
}

.project-page-heading {
  align-items: flex-start;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.project-page-heading h1 {
  color: #0f172a;
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  font-weight: 950;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0;
}

.project-page-heading p:not(.project-eyebrow) {
  color: #64748b;
  line-height: 1.6;
  margin: 0.65rem 0 0;
}

.project-eyebrow {
  color: #ed2024;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.project-back-link {
  align-items: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.7rem;
  color: #374151;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 850;
  gap: 0.35rem;
  line-height: 1;
  min-height: 2.5rem;
  padding: 0.7rem 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}

.project-back-link:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.project-primary-button,
.project-secondary-button {
  align-items: center;
  border-radius: 0.7rem;
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 850;
  justify-content: center;
  line-height: 1;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
}

.project-primary-button {
  background: #ed2024;
  border: 1px solid #ed2024;
  color: #fff;
  box-shadow: 0 8px 20px rgba(237, 32, 36, 0.18);
}

.project-primary-button:hover {
  background: #c8102e;
  border-color: #c8102e;
}

.project-primary-button:disabled,
.project-danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.project-secondary-button {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #374151;
}

.project-secondary-button:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Tailwind's `hidden` utility loses to the button display rules above, so
   upload forms showed "Cancel upload" before any file was chosen. */
.project-primary-button.hidden,
.project-secondary-button.hidden {
  display: none;
}

.project-directory-toolbar,
.project-form-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}

.project-directory-toolbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.project-form-card {
  padding: clamp(1.25rem, 4vw, 2.25rem);
}

.project-label {
  color: #374151;
  display: block;
  font-size: 0.82rem;
  font-weight: 850;
}

.project-input {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
  color: #111827;
  font-size: 0.92rem;
  min-height: 2.75rem;
  padding: 0.68rem 0.85rem;
}

.project-input::placeholder {
  color: #111827;
  opacity: 0.72;
}

.project-search-icon {
  color: #4b5563;
  left: 1rem;
}

.project-search-input {
  color: #111827;
  padding-left: 3rem;
}

.project-input:focus {
  border-color: #ed2024;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.14);
  outline: none;
}

.project-select {
  min-width: 0;
  position: relative;
}

.project-select-button {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
  color: #111827;
  cursor: pointer;
  display: flex;
  font-size: 0.92rem;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.68rem 0.85rem;
  text-align: left;
  width: 100%;
}

.project-select-button:hover {
  border-color: #94a3b8;
}

.project-select-button:focus-visible {
  border-color: #ed2024;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.14);
  outline: none;
}

.project-select-menu {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.85rem;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
  left: 0;
  margin-top: 0.4rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  z-index: 180;
}

.project-select-option {
  background: transparent;
  border: 0;
  border-radius: 0.6rem;
  color: #111827;
  cursor: pointer;
  display: block;
  font-size: 0.9rem;
  font-weight: 750;
  padding: 0.65rem 0.75rem;
  text-align: left;
  width: 100%;
}

.project-select-option:hover,
.project-select-option.is-active {
  background: #fee2e2;
  color: #991b1b;
}

.project-form-errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.75rem;
  color: #991b1b;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.project-board-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.project-board-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
  min-height: 11.5rem;
  overflow: hidden;
  padding: var(--project-section-padding);
  position: relative;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.project-board-card:hover {
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.1);
  transform: translateY(-2px);
}

.project-board-card-accent {
  background: linear-gradient(90deg, #ed2024, #991b1b);
  height: 0.3rem;
  inset: 0 0 auto;
  position: absolute;
}

.project-owner-avatar,
.project-member-avatar,
.project-card-avatar {
  align-items: center;
  background: #111827;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 900;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.project-member-avatar {
  border: 2px solid #111;
  height: 2rem;
  width: 2rem;
}

.project-card-avatar {
  background: #ed2024;
  border: 2px solid #fff;
  font-size: 0.58rem;
  height: 1.65rem;
  width: 1.65rem;
}

.project-empty-state {
  align-items: center;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 22rem;
  padding: 2rem;
  text-align: center;
}

.project-empty-state h2,
.project-board-empty-list h2 {
  color: #111827;
  font-size: 1.25rem;
  font-weight: 900;
  margin: 1rem 0 0;
}

.project-empty-state p,
.project-board-empty-list p {
  color: #6b7280;
  margin: 0.4rem 0 0;
}

.project-empty-icon {
  align-items: center;
  background: #fff1f1;
  border-radius: 999px;
  color: #ed2024;
  display: flex;
  height: 4rem;
  justify-content: center;
  width: 4rem;
}

.project-board-page {
  background:
    linear-gradient(110deg, rgba(0, 0, 0, 0.96), rgba(21, 21, 21, 0.93)),
    radial-gradient(circle at 20% 10%, rgba(237, 32, 36, 0.35), transparent 32rem);
  min-height: calc(100vh - var(--project-header-height));
  overflow: hidden;
}

.project-board-heading {
  align-items: center;
  color: #fff;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  padding: var(--project-section-padding) 1.25rem 0.45rem;
}

.project-board-heading h1 {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 950;
  letter-spacing: -0.03em;
}

.project-board-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 1.25rem 0.7rem;
}

.project-board-canvas {
  align-items: flex-start;
  display: flex;
  gap: var(--project-list-gap);
  min-height: calc(100vh - 12rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 0 1.25rem 1.5rem;
  scroll-snap-type: x proximity;
}

.project-list {
  background: #f1f2f4;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.9rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  flex: 0 0 var(--project-list-width);
  max-height: calc(100vh - 13.5rem);
  overflow: hidden;
  padding: 0.65rem;
  scroll-snap-align: start;
}

.project-list-header {
  align-items: center;
  display: flex;
  gap: 0.45rem;
  padding: 0.25rem 0.2rem 0.6rem;
}

.project-list-header h2 {
  color: #172033;
  font-size: 0.92rem;
  font-weight: 900;
}

.project-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--project-card-gap);
  max-height: calc(100vh - 19rem);
  min-height: 0.5rem;
  overflow-y: auto;
  padding: 0.1rem 0.15rem 0.45rem;
}

.project-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.7rem;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.09);
  cursor: grab;
  padding: var(--project-card-padding);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.project-card:hover {
  border-color: #fca5a5;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
  transform: translateY(-1px);
}

.project-card h3 {
  color: #172033;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.35;
  margin-top: 0.35rem;
}

.project-client-chip {
  background: #fff1f1;
  border-radius: 999px;
  color: #b91c1c;
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 850;
  max-width: 100%;
  overflow: hidden;
  padding: 0.25rem 0.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-add-card summary {
  border-radius: 0.55rem;
  color: #4b5563;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 800;
  list-style: none;
  margin-top: 0.4rem;
  padding: 0.6rem 0.7rem;
}

.project-add-card summary:hover {
  background: #e5e7eb;
  color: #111827;
}

.project-sortable-ghost {
  background: #fee2e2;
  border: 2px dashed #ed2024;
  opacity: 0.55;
}

.project-board-empty-list {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  display: flex;
  flex: 0 0 24rem;
  flex-direction: column;
  justify-content: center;
  min-height: 13rem;
  padding: 1.5rem;
  text-align: center;
}

.project-archive-panel {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 1rem;
  margin: 0 1.5rem 2rem;
  padding: 1rem 1.25rem;
}

.project-archive-panel > summary {
  color: #374151;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 900;
}

.project-modal-backdrop {
  align-items: center;
  background: rgba(0, 0, 0, 0.74);
  display: flex;
  inset: 0;
  justify-content: center;
  overflow-y: auto;
  padding: 1rem;
  position: fixed;
  z-index: 1000;
}

.project-card-modal {
  background: #fff;
  border-radius: 1.15rem;
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem);
  max-width: 72rem;
  overflow: hidden;
  width: 100%;
}

.project-card-modal-create {
  max-width: 40rem;
}

.project-card-modal-preview {
  max-width: 34rem;
}

.project-card-modal-create-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--project-section-padding);
}

.project-card-modal-header {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  justify-content: space-between;
  padding: 0.9rem var(--project-section-padding);
  flex: 0 0 auto;
}

.project-card-modal-grid {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.85fr);
  min-height: 0;
  overflow: hidden;
}

.project-card-modal-main,
.project-card-modal-activity {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--project-section-padding);
}

.project-card-modal-activity {
  background: #f8fafc;
  border-left: 1px solid #e5e7eb;
}

.project-card-view-panel[hidden],
.project-card-edit-panel[hidden] {
  display: none !important;
}

.project-card-view-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.project-card-detail-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.project-card-detail {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 0.85rem;
}

.project-card-detail span {
  color: #64748b;
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-card-detail strong {
  color: #111827;
  display: block;
  font-size: 0.95rem;
  margin-top: 0.3rem;
}

.project-card-description-view {
  border: 1px solid #e5e7eb;
  border-radius: 0.85rem;
  color: #374151;
  line-height: 1.65;
  min-height: 6rem;
  padding: 1rem;
}

.project-comment-composer {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
  margin-bottom: 1.25rem;
  padding: 0.85rem;
}

.project-activity-title {
  align-items: center;
  color: #111827;
  display: flex;
  font-size: 1rem;
  font-weight: 900;
  gap: 0.5rem;
}

.project-comment {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.8rem;
  padding: 0.9rem;
}

.project-comment-body {
  color: #374151;
  font-size: 0.86rem;
  line-height: 1.55;
  margin-top: 0.75rem;
}

/* Trix lays the toolbar out as one non-wrapping, scrollable row, which hides
   the last buttons in narrow columns (client Project page comments). */
.project-rich-text trix-toolbar .trix-button-row {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 0.35rem;
}

/* Let the wide block-tools group take its own row; undo/redo sit beside the
   text tools so a narrow column wraps into two rows instead of three. */
.project-rich-text trix-toolbar .trix-button-group--block-tools {
  order: 2;
}

.project-rich-text trix-toolbar .trix-button-group-spacer {
  display: none;
}

.project-rich-text trix-toolbar .trix-button-group--file-tools {
  display: none !important;
}

.project-rich-text trix-editor {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  min-height: 9rem;
  padding: 0.85rem;
}

.project-rich-text trix-editor:focus {
  border-color: #ed2024;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.14);
  outline: none;
}

.project-card-order-controls {
  align-items: center;
  border-top: 1px solid #f1f5f9;
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
  margin-top: 0.65rem;
  padding-top: 0.45rem;
}

.project-card-order-controls button {
  background: transparent;
  border: 0;
  border-radius: 0.4rem;
  color: #64748b;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 900;
  height: 1.75rem;
  width: 1.75rem;
}

.project-card-order-controls button:hover,
.project-card-order-controls button:focus-visible {
  background: #fee2e2;
  color: #b91c1c;
  outline: none;
}

.project-sortable-ghost {
  opacity: 0.35;
}

.project-sortable-drag {
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.25);
  transform: rotate(1deg);
}

.project-board-page[style*="--project-board-background-image"] {
  background:
    linear-gradient(110deg, rgba(0, 0, 0, 0.82), rgba(15, 15, 15, 0.7)),
    var(--project-board-background-image) center / cover fixed;
}

.project-board-background-slate {
  background:
    linear-gradient(115deg, rgba(15, 23, 42, 0.97), rgba(51, 65, 85, 0.92)),
    radial-gradient(circle at 20% 10%, rgba(148, 163, 184, 0.24), transparent 32rem);
}

.project-board-background-charcoal {
  background:
    linear-gradient(110deg, rgba(0, 0, 0, 0.97), rgba(25, 25, 25, 0.94)),
    radial-gradient(circle at 20% 10%, rgba(237, 32, 36, 0.3), transparent 32rem);
}

.project-board-background-ruby {
  background:
    linear-gradient(115deg, rgba(69, 10, 10, 0.98), rgba(127, 29, 29, 0.9)),
    radial-gradient(circle at 15% 5%, rgba(248, 113, 113, 0.28), transparent 28rem);
}

.project-board-background-ember {
  background:
    linear-gradient(115deg, rgba(67, 20, 7, 0.98), rgba(154, 52, 18, 0.9)),
    radial-gradient(circle at 20% 10%, rgba(251, 146, 60, 0.26), transparent 30rem);
}

.project-board-background-ocean {
  background:
    linear-gradient(115deg, rgba(8, 47, 73, 0.98), rgba(14, 116, 144, 0.9)),
    radial-gradient(circle at 20% 10%, rgba(34, 211, 238, 0.22), transparent 30rem);
}

.project-board-background-forest {
  background:
    linear-gradient(115deg, rgba(5, 46, 22, 0.98), rgba(21, 128, 61, 0.88)),
    radial-gradient(circle at 20% 10%, rgba(74, 222, 128, 0.22), transparent 30rem);
}

.project-board-background-sand {
  background:
    linear-gradient(115deg, rgba(66, 32, 6, 0.96), rgba(146, 64, 14, 0.86)),
    radial-gradient(circle at 20% 10%, rgba(253, 186, 116, 0.3), transparent 30rem);
}

.project-filter-bar {
  background: rgba(3, 7, 18, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.18);
  margin: 0 1.5rem 1rem;
  padding: 1rem;
}

.project-filter-bar .project-input {
  min-width: 0;
}

.project-card-completed {
  opacity: 0.78;
}

.project-card-cover,
.project-card-cover-image {
  border-radius: 0.65rem 0.65rem 0 0;
  height: 4.5rem;
  margin: calc(-1 * var(--project-card-padding)) calc(-1 * var(--project-card-padding)) 0.65rem;
  object-fit: cover;
  width: calc(100% + (2 * var(--project-card-padding)));
}

.project-card-cover-red {
  background: linear-gradient(135deg, #ef4444, #991b1b);
}

.project-card-cover-orange {
  background: linear-gradient(135deg, #fb923c, #c2410c);
}

.project-card-cover-yellow {
  background: linear-gradient(135deg, #facc15, #ca8a04);
}

.project-card-cover-green {
  background: linear-gradient(135deg, #4ade80, #15803d);
}

.project-card-cover-blue {
  background: linear-gradient(135deg, #60a5fa, #1d4ed8);
}

.project-card-cover-slate {
  background: linear-gradient(135deg, #94a3b8, #334155);
}

.project-label-chip,
.project-list-chip,
.project-date-badge,
.project-meta-badge {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  min-height: 1.55rem;
  padding: 0.35rem 0.55rem;
}

.project-label-chip {
  color: #fff;
}

.project-label-red {
  background: #dc2626;
}

.project-label-orange {
  background: #ea580c;
}

.project-label-yellow {
  background: #ca8a04;
}

.project-label-green {
  background: #15803d;
}

.project-label-blue {
  background: #2563eb;
}

.project-label-purple {
  background: #7e22ce;
}

.project-label-slate {
  background: #475569;
}

.project-list-chip {
  background: #e2e8f0;
  color: #334155;
}

.project-date-badge {
  background: #f1f5f9;
  color: #475569;
}

.project-date-badge.is-overdue {
  background: #fee2e2;
  color: #b91c1c;
}

.project-date-badge.is-complete {
  background: #dcfce7;
  color: #166534;
}

.project-meta-badge {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.project-completion-control {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.8rem;
  display: flex;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
}

.project-completion-control input,
.project-label-option input {
  accent-color: #ed2024;
}

.project-label-option {
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 0.7rem;
  cursor: pointer;
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem;
}

.project-label-option:hover {
  background: #f8fafc;
  border-color: #fca5a5;
}

.project-checklist {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.9rem;
  padding: 1rem;
}

.project-checklist-progress {
  background: #e2e8f0;
  border-radius: 999px;
  height: 0.45rem;
  overflow: hidden;
}

.project-checklist-progress span {
  background: linear-gradient(90deg, #ed2024, #b91c1c);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 180ms ease;
}

.project-checklist-item {
  align-items: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.7rem;
  display: flex;
  gap: 0.65rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.65rem;
}

.project-drag-handle {
  background: transparent;
  border: 0;
  color: #94a3b8;
  cursor: grab;
  font-weight: 900;
  padding: 0.2rem;
}

.project-checklist-toggle,
.project-checklist-remove,
.project-attachment-delete {
  align-items: center;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.9rem;
  justify-content: center;
  line-height: 1;
  width: 1.9rem;
}

.project-checklist-toggle span {
  align-items: center;
  border: 1px solid #94a3b8;
  border-radius: 0.25rem;
  display: inline-flex;
  height: 1rem;
  justify-content: center;
  width: 1rem;
}

.project-checklist-toggle span.is-complete {
  background: #ed2024;
  border-color: #ed2024;
  color: #fff;
}

.project-checklist-remove:hover,
.project-attachment-delete:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.project-upload-form {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 0.9rem;
  padding: 1rem;
}

.project-file-input {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  color: #475569;
  font-size: 0.82rem;
  padding: 0.5rem;
}

.project-file-input::file-selector-button {
  background: #111827;
  border: 0;
  border-radius: 0.5rem;
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  margin-right: 0.7rem;
  padding: 0.55rem 0.75rem;
}

.project-upload-row {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
}

.project-attachment-grid {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.project-attachment-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.8rem;
  display: flex;
  gap: 0.85rem;
  min-width: 0;
  padding: 0.7rem;
}

.project-attachment-preview,
.project-attachment-file-icon {
  align-items: center;
  background: #f1f5f9;
  border-radius: 0.55rem;
  display: flex;
  flex: 0 0 4.25rem;
  height: 3.25rem;
  justify-content: center;
  overflow: hidden;
}

.project-attachment-preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.project-attachment-file-icon {
  color: #475569;
  font-size: 0.7rem;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.project-settings-card,
.project-my-cards-board {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
  margin-top: 1.5rem;
  padding: var(--project-section-padding);
}

.project-settings-card h2,
.project-my-cards-board h2 {
  color: #0f172a;
  font-size: 1.25rem;
  font-weight: 950;
}

.project-settings-card > div:first-child > p:last-child {
  color: #64748b;
  margin-top: 0.35rem;
}

.project-label-create-form,
.project-label-update-form {
  display: flex;
  gap: 0.65rem;
}

.project-label-create-form {
  margin-top: 1.25rem;
}

.project-label-settings-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 1rem;
}

.project-label-settings-row {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.8rem;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) auto;
  padding: 0.75rem;
}

.project-settings-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 0.8rem;
  color: #64748b;
  padding: 1rem;
  text-align: center;
}

.project-my-cards-grid {
  display: grid;
  gap: 1.25rem;
}

.project-my-cards-board > header {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.project-my-cards-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.project-my-card {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.9rem 1rem;
  text-decoration: none;
}

.project-my-card:hover {
  background: #fff;
  border-color: #fca5a5;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}

.project-my-card h3 {
  color: #0f172a;
  font-size: 0.95rem;
  font-weight: 900;
  margin-top: 0.5rem;
}

.project-my-card p {
  color: #64748b;
  font-size: 0.78rem;
  margin-top: 0.2rem;
}

.project-shortcut-dialog {
  background: #fff;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
  color: #334155;
  margin: auto;
  max-width: 30rem;
  padding: 0;
  width: calc(100% - 2rem);
}

.project-shortcut-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.project-shortcut-dialog kbd {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 0.35rem;
  box-shadow: 0 1px 0 #94a3b8;
  color: #0f172a;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 900;
  min-width: 1.75rem;
  padding: 0.2rem 0.4rem;
  text-align: center;
}

.project-timeline-page,
.project-trello-page {
  margin: 0 auto;
  max-width: 120rem;
  padding: var(--project-section-padding) 1rem 3rem;
}

.project-timeline-heading,
.project-trello-heading {
  align-items: flex-start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.project-timeline-heading h1,
.project-trello-heading h1 {
  color: #0f172a;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0;
}

.project-timeline-heading p:not(.project-eyebrow),
.project-trello-heading p:not(.project-eyebrow) {
  color: #64748b;
  line-height: 1.45;
  margin: 0.45rem 0 0;
}

.project-timeline-tabs {
  align-items: center;
  border-bottom: 1px solid #dbe1e8;
  display: flex;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  overflow-x: auto;
}

.project-timeline-tab {
  border-bottom: 3px solid transparent;
  color: #64748b;
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-weight: 850;
  padding: 0.65rem 0.85rem 0.55rem;
  text-decoration: none;
}

.project-timeline-tab:hover,
.project-timeline-tab.is-active {
  border-color: #ed2024;
  color: #b91c1c;
}

.project-timeline-filters,
.project-trello-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.85rem;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.project-timeline-filters {
  align-items: end;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: minmax(12rem, 1.35fr) repeat(5, minmax(8rem, 0.75fr)) repeat(2, minmax(9.5rem, 0.8fr)) auto auto;
  padding: 0.7rem;
}

.project-timeline-date label {
  color: #64748b;
  display: block;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.project-timeline-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  padding: 0.6rem 0.2rem;
}

.project-timeline-legend span {
  align-items: center;
  color: #64748b;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 750;
  gap: 0.35rem;
}

.project-timeline-legend i {
  border-radius: 0.2rem;
  height: 0.65rem;
  width: 0.65rem;
}

.project-timeline-shell {
  background: #fff;
  border: 1px solid #dbe1e8;
  border-radius: 0.85rem;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.project-timeline-scroll {
  overflow: auto;
}

.project-timeline-table {
  min-width: 84rem;
}

.project-timeline-row {
  border-bottom: 1px solid #e5e7eb;
  display: grid;
  grid-template-columns: 43rem minmax(42rem, 1fr);
  min-height: 4.15rem;
}

.project-timeline-row:last-child {
  border-bottom: 0;
}

.project-timeline-header-row {
  background: #f8fafc;
  min-height: 3.35rem;
  position: sticky;
  top: 0;
  z-index: 6;
}

.project-timeline-fixed {
  border-right: 2px solid #cbd5e1;
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr) 6.5rem;
  position: sticky;
  left: 0;
  z-index: 4;
}

.project-timeline-row:not(.project-timeline-header-row) .project-timeline-fixed {
  background: #fff;
}

.project-timeline-fixed > div {
  border-right: 1px solid #e5e7eb;
  min-width: 0;
  padding: 0.55rem 0.65rem;
}

.project-timeline-fixed > div:last-child {
  border-right: 0;
}

.project-timeline-header-row .project-timeline-fixed > div {
  align-items: center;
  color: #64748b;
  display: flex;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-timeline-koc {
  color: #64748b;
  font-size: 0.76rem;
  font-weight: 800;
  text-align: center;
}

.project-timeline-project strong {
  color: #172033;
  font-size: 0.8rem;
}

.project-timeline-project > span,
.project-timeline-project small {
  color: #64748b;
  display: block;
  font-size: 0.68rem;
  line-height: 1.35;
  margin-top: 0.15rem;
}

.project-timeline-board span {
  background: #fff1f1;
  border-radius: 999px;
  color: #b91c1c;
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 950;
  margin: 0.1rem;
  padding: 0.25rem 0.4rem;
}

.project-timeline-lane {
  min-width: 42rem;
  overflow: hidden;
  position: relative;
}

.project-timeline-periods,
.project-timeline-grid-lines {
  display: flex;
  height: 100%;
  inset: 0;
  position: absolute;
}

.project-timeline-periods {
  position: relative;
}

.project-timeline-periods > div {
  align-items: center;
  border-right: 1px solid #dbe1e8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 2.5rem;
}

.project-timeline-periods strong {
  color: #334155;
  font-size: 0.7rem;
}

.project-timeline-periods span {
  color: #94a3b8;
  font-size: 0.6rem;
}

.project-timeline-grid-lines i {
  border-right: 1px solid #edf0f3;
  min-width: 2.5rem;
}

.project-timeline-bar {
  align-items: center;
  border-radius: 0.3rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.22);
  color: #fff;
  display: flex;
  font-size: 0.64rem;
  font-weight: 900;
  height: 1.45rem;
  min-width: 0.5rem;
  overflow: hidden;
  padding: 0 0.4rem;
  position: absolute;
  text-overflow: ellipsis;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  z-index: 2;
}

.project-timeline-override {
  flex: 0 0 auto;
  position: relative;
}

.project-timeline-override > summary {
  color: #b91c1c;
  cursor: pointer;
  font-size: 0.64rem;
  font-weight: 900;
  list-style: none;
}

.project-timeline-override-panel {
  background: #fff;
  border: 1px solid #dbe1e8;
  border-radius: 0.8rem;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22);
  left: 0;
  padding: 1rem;
  position: absolute;
  top: 1.5rem;
  width: 28rem;
  z-index: 20;
}

.project-timeline-override-panel h2 {
  font-size: 1rem;
  font-weight: 950;
  margin: 0 0 0.8rem;
}

.project-timeline-empty {
  color: #64748b;
  padding: 3rem;
  text-align: center;
}

.project-trello-grid,
.project-trello-metrics {
  display: grid;
  gap: 0.75rem;
}

.project-trello-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.project-trello-panel {
  grid-column: span 12;
  overflow: hidden;
  padding: var(--project-section-padding);
}

.project-trello-panel.is-half {
  grid-column: span 6;
}

.project-trello-panel h2 {
  color: #0f172a;
  font-size: 1rem;
  font-weight: 950;
  margin: 0;
}

.project-trello-panel-heading,
.project-trello-cutover,
.project-trello-actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.project-trello-actions {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-top: 0.9rem;
}

.project-trello-actions form,
.project-trello-cutover form,
.project-trello-match-actions form {
  margin: 0;
}

.project-trello-details {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0.85rem 0 0;
}

.project-trello-details div {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  min-width: 0;
  padding: 0.65rem;
}

.project-trello-details dt {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-trello-details dd {
  color: #111827;
  font-size: 0.76rem;
  font-weight: 750;
  margin: 0.2rem 0 0;
  overflow-wrap: anywhere;
}

.project-trello-status {
  background: #e2e8f0;
  border-radius: 999px;
  color: #475569;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.67rem;
  font-weight: 900;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
}

.project-trello-status--connected,
.project-trello-status--completed,
.project-trello-status--cutover {
  background: #dcfce7;
  color: #166534;
}

.project-trello-status--importing,
.project-trello-status--pending,
.project-trello-status--processing,
.project-trello-status--running {
  background: #fef3c7;
  color: #92400e;
}

.project-trello-status--error,
.project-trello-status--failed {
  background: #fee2e2;
  color: #991b1b;
}

.project-trello-status--rolled_back,
.project-trello-status--ignored {
  background: #f1f5f9;
  color: #64748b;
}

.project-trello-error,
.project-trello-success {
  border-radius: 0.65rem;
  font-size: 0.76rem;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
}

.project-trello-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.project-trello-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.project-danger-button {
  align-items: center;
  background: #991b1b;
  border: 1px solid #991b1b;
  border-radius: 0.7rem;
  color: #fff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 900;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
}

.project-text-button {
  background: transparent;
  border: 0;
  color: #b91c1c;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0.25rem;
}

.project-muted {
  color: #94a3b8;
  font-size: 0.72rem;
}

.project-trello-panel > p {
  color: #64748b;
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
}

.project-trello-metrics {
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-top: 0.8rem;
}

.project-trello-metrics > div {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.65rem;
}

.project-trello-metrics strong,
.project-trello-metrics span {
  display: block;
}

.project-trello-metrics strong {
  color: #111827;
  font-size: 1.25rem;
}

.project-trello-metrics span {
  color: #64748b;
  font-size: 0.65rem;
  font-weight: 900;
  margin-top: 0.1rem;
  text-transform: uppercase;
}

.project-trello-metric {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.7rem;
  padding: 0.75rem;
}

.project-trello-metric span {
  color: #64748b;
  display: block;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.project-trello-metric strong {
  color: #111827;
  display: block;
  font-size: 1.35rem;
  margin-top: 0.2rem;
}

.project-status-pill {
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 900;
  padding: 0.3rem 0.55rem;
  white-space: nowrap;
}

.project-status-pill.is-success {
  background: #dcfce7;
  color: #166534;
}

.project-status-pill.is-warning {
  background: #fef3c7;
  color: #92400e;
}

.project-status-pill.is-danger {
  background: #fee2e2;
  color: #991b1b;
}

.project-status-pill.is-neutral {
  background: #e2e8f0;
  color: #475569;
}

.project-trello-table-wrap {
  margin-top: 0.8rem;
  max-height: 25rem;
  overflow: auto;
}

.project-trello-table {
  border-collapse: collapse;
  font-size: 0.76rem;
  width: 100%;
}

.project-trello-table th,
.project-trello-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 0.55rem;
  text-align: left;
  vertical-align: top;
}

.project-trello-table th {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.66rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 2;
}

.project-trello-issues {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 0.7rem;
  color: #9a3412;
  font-size: 0.78rem;
  margin-top: 0.75rem;
  padding: 0.7rem 0.85rem;
}

.project-trello-issues li + li {
  margin-top: 0.25rem;
}

.project-trello-error-row td {
  background: #fff7ed;
  color: #9a3412;
}

.project-trello-empty {
  color: #64748b;
  padding: 1.5rem;
  text-align: center;
}

.project-trello-matches {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.project-trello-match {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(20rem, 1.2fr);
  padding: 0.75rem;
}

.project-trello-match h3 {
  color: #111827;
  font-size: 0.86rem;
  font-weight: 900;
  margin: 0.4rem 0 0.15rem;
}

.project-trello-match p,
.project-trello-match small {
  color: #64748b;
  display: block;
  font-size: 0.72rem;
  margin: 0;
}

.project-trello-match-actions {
  align-items: flex-end;
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.project-trello-match-actions form:first-child {
  flex: 1 1 auto;
}

.project-trello-match-actions label {
  color: #475569;
  display: block;
  font-size: 0.68rem;
  font-weight: 900;
  margin-bottom: 0.25rem;
}

.project-trello-match-actions form:first-child > div {
  display: flex;
  gap: 0.5rem;
}

.project-trello-match-actions select {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.65rem;
  color: #111827;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.65rem 2rem 0.65rem 0.7rem;
}

.project-trello-events code {
  font-size: 0.68rem;
}

@media (max-width: 768px) {
  .project-workspace-header {
    height: 4.25rem;
    padding: 0 0.75rem;
  }

  .project-workspace-main {
    min-height: calc(100vh - 4.25rem);
  }

  .project-directory,
  .project-narrow-page {
    padding: 1.25rem 0.85rem 3rem;
  }

  .project-page-heading,
  .project-directory-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .project-board-heading {
    align-items: flex-start;
    padding: 1rem 0.85rem 0.5rem;
  }

  .project-board-toolbar {
    padding: 0.5rem 0.85rem 0.85rem;
  }

  .project-board-canvas {
    min-height: calc(100vh - 10.5rem);
    padding: 0 0.85rem 1.25rem;
  }

  .project-list {
    flex-basis: min(18rem, calc(100vw - 2rem));
    max-height: calc(100vh - 12rem);
  }

  .project-card-stack {
    max-height: calc(100vh - 17.5rem);
  }

  .project-card-modal-grid {
    display: block;
    min-height: 0;
    overflow-y: auto;
  }

  .project-card-modal-main,
  .project-card-modal-activity {
    overflow: visible;
    padding: 1rem;
  }

  .project-card-modal-activity {
    border-left: 0;
    border-top: 1px solid #e5e7eb;
  }

  .project-filter-bar {
    margin: 0 0.85rem 0.85rem;
  }

  .project-label-create-form,
  .project-label-update-form,
  .project-label-settings-row {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .project-label-settings-row > .project-attachment-delete {
    align-self: flex-end;
  }

  .project-my-cards-board > header,
  .project-my-card {
    align-items: stretch;
    flex-direction: column;
  }

  .project-my-card > div:last-child {
    text-align: left;
  }

  .project-timeline-page,
  .project-trello-page {
    padding: 0.85rem 0.6rem 2rem;
  }

  .project-timeline-heading,
  .project-trello-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .project-timeline-filters {
    grid-template-columns: 1fr;
  }

  .project-timeline-table {
    min-width: 70rem;
  }

  .project-timeline-row {
    grid-template-columns: 36rem minmax(34rem, 1fr);
  }

  .project-timeline-fixed {
    grid-template-columns: 4.5rem minmax(0, 1fr) 5.5rem;
  }

  .project-timeline-override-panel {
    left: auto;
    right: 0;
    width: min(26rem, calc(100vw - 2rem));
  }

  .project-trello-panel.is-half {
    grid-column: span 12;
  }

  .project-trello-panel-heading,
  .project-trello-cutover,
  .project-trello-match,
  .project-trello-match-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
  }

  .project-trello-details {
    grid-template-columns: 1fr;
  }

  .project-trello-match-actions form:first-child > div {
    flex-direction: column;
  }
}
/* Keep large portfolio schedules bounded without shrinking timeline controls. */
.timeline-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0;
  color: #4b5563;
  font-size: 0.875rem;
}

/* Timeline drawer: per-item change history ------------------------------- */
.timeline-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.timeline-history-entry { border: 1px solid var(--project-border, #e5e7eb); border-radius: 0.75rem; padding: 0.75rem 0.9rem; background: #fff; }
.timeline-history-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; color: #4b5563; }
.timeline-history-meta strong { color: #111827; }
.timeline-history-changes { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; font-size: 0.8rem; color: #374151; }
.timeline-history-field { font-weight: 700; color: #111827; margin-right: 0.25rem; }
.timeline-history-before { text-decoration: line-through; color: #9ca3af; }
.timeline-history-after { font-weight: 700; color: #b91c1c; }
.timeline-drawer-muted { font-size: 0.85rem; color: #6b7280; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
  --fuel-navy: #000000;
  --fuel-navy-dark: #000000;
  --fuel-navy-soft: #1a1a1a;
  --fuel-white: #ffffff;
  --fuel-blue: #ed2024;
  --fuel-blue-dark: #c8102e;
  --fuel-blue-soft: #fff1f1;
  --fuel-blue-border: #f8b4b4;
  --fuel-muted: #6b7280;
}

body {
  color: #111827;
}

[x-cloak] {
  display: none !important;
}

@media (min-width: 80rem) {
  .container {
    max-width: 80rem;
  }
}

.clients-index-shell {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.client-search-input::-webkit-search-cancel-button {
  cursor: pointer;
  margin-right: -0.15rem;
}

.client-table-card {
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 8px 24px rgba(17, 24, 39, 0.05);
  overflow: hidden;
}

.client-table-header-cell {
  border-right: 1px solid #e5e7eb;
  padding: 0.875rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.client-table-header-cell:last-child {
  border-right: 0;
}

.client-table-sort-button,
.client-table-static-heading {
  align-items: center;
  color: #4b5563;
  display: flex;
  font-size: 0.75rem;
  font-weight: 700;
  gap: 0.35rem;
  justify-content: space-between;
  letter-spacing: 0.06em;
  line-height: 1rem;
  margin-bottom: 0.625rem;
  min-height: 2rem;
  text-transform: uppercase;
  width: 100%;
}

.client-table-sort-button:hover,
.client-table-sort-button[aria-pressed="true"] {
  color: #111827;
}

.client-table-sort-button:focus-visible {
  border-radius: 0.375rem;
  outline: 2px solid var(--fuel-blue);
  outline-offset: 2px;
}

.client-table-filter {
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  color: #374151;
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  height: 2.25rem;
  letter-spacing: normal;
  line-height: 1rem;
  min-width: 0;
  padding-left: 0.625rem;
  padding-right: 1.75rem;
  text-transform: none;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  width: 100%;
}

.client-table-filter:hover {
  border-color: #9ca3af;
}

.client-table-filter:focus {
  border-color: var(--fuel-blue);
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.14);
  outline: none;
}

.client-table-filter[data-active="true"] {
  background-color: var(--fuel-blue-soft);
  border-color: var(--fuel-blue-border);
  color: #991b1b;
  font-weight: 700;
}

.fuel-select[data-active="true"] .client-table-filter {
  background-color: var(--fuel-blue-soft);
  border-color: var(--fuel-blue-border);
  color: #991b1b;
  font-weight: 700;
}

@media (min-width: 64rem) {
  .clients-index-shell {
    --clients-index-bleed: max(calc(50% - 50vw + 2rem), calc(50% - (var(--clients-index-max) / 2)));
    --clients-index-max: 104rem;
    margin-left: var(--clients-index-bleed);
    margin-right: var(--clients-index-bleed);
    width: auto;
  }
}

@media (min-width: 96rem) {
  .clients-index-shell {
    --clients-index-bleed: max(calc(50% - 50vw + 3rem), calc(50% - (var(--clients-index-max) / 2)));
  }
}

.fuel-public-main {
  background: #000000;
  box-sizing: border-box;
  display: flow-root;
  min-height: 100vh;
  padding: 0;
}

.fuel-public-hero {
  align-items: center;
  background:
    radial-gradient(circle at 22% 18%, rgba(237, 32, 36, 0.28), transparent 24rem),
    radial-gradient(circle at 80% 76%, rgba(237, 32, 36, 0.12), transparent 28rem),
    linear-gradient(135deg, #070707 0%, #000000 48%, #111111 100%);
  color: var(--fuel-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: clamp(1rem, 4vh, 3rem) 1.25rem;
  position: relative;
}

.fuel-public-hero::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 84px 84px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
  opacity: 0.55;
  position: absolute;
}

.fuel-public-glow {
  border-radius: 999px;
  filter: blur(8px);
  pointer-events: none;
  position: absolute;
}

.fuel-public-glow-one {
  background: rgba(237, 32, 36, 0.18);
  height: 18rem;
  left: 11%;
  top: 18%;
  width: 18rem;
}

.fuel-public-glow-two {
  background: rgba(255, 255, 255, 0.07);
  bottom: 14%;
  height: 22rem;
  right: 9%;
  width: 22rem;
}

.fuel-public-hero-card {
  background: rgba(8, 8, 8, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 1.5rem;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
  max-width: 58rem;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: min(100%, 58rem);
  z-index: 1;
}

.fuel-public-brand {
  align-items: center;
  background: #000000;
  border-bottom: 1px solid rgba(237, 32, 36, 0.35);
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 2.6vh, 2rem) 1.5rem clamp(0.9rem, 2.3vh, 1.75rem);
}

.fuel-public-logo {
  height: clamp(2.1rem, 4.4vh, 3.25rem);
  width: auto;
  max-width: 100%;
}

.fuel-public-copy {
  padding: clamp(1.25rem, 3.5vh, 3rem) 2rem clamp(0.75rem, 1.5vh, 1.5rem);
}

.fuel-public-eyebrow {
  color: var(--fuel-blue);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  margin: 0 0 0.9rem;
  text-transform: uppercase;
}

.fuel-public-copy h1 {
  color: var(--fuel-white);
  font-size: clamp(1.9rem, 2.2vw + 2.2vh, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 0 auto;
  max-width: 48rem;
  text-wrap: balance;
}

.fuel-public-headline-line {
  display: block;
}

.fuel-public-copy p:not(.fuel-public-eyebrow) {
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.08rem;
  line-height: 1.75;
  margin: 1.4rem auto 0;
  max-width: 42rem;
}

.fuel-public-actions {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.2vh, 0.9rem);
  padding: 0.5rem 2rem clamp(1.25rem, 4vh, 3rem);
}

.fuel-public-login-button {
  background: var(--fuel-blue);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(237, 32, 36, 0.32);
  color: var(--fuel-white);
  display: inline-flex;
  font-size: 1rem;
  font-weight: 800;
  justify-content: center;
  min-width: 14rem;
  padding: 0.9rem 1.45rem;
  text-decoration: none;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.fuel-public-login-button:hover,
.fuel-public-login-button:focus {
  background: var(--fuel-blue-dark);
  box-shadow: 0 16px 36px rgba(237, 32, 36, 0.42);
  outline: none;
  transform: translateY(-1px);
}

.fuel-public-actions span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.9rem;
}

.fuel-top-nav {
  align-items: center;
  background: var(--fuel-navy);
  border-bottom: 1px solid rgba(237, 32, 36, 0.38);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  color: var(--fuel-white);
  display: flex;
  justify-content: space-between;
  min-height: 4rem;
  padding: 0.55rem 1.5rem;
}

/* Below the desktop breakpoint the link rows wrap, so the bar can no longer be a
   fixed-height overlay: let it scroll with the page and sit above the content. */
@media (max-width: 1023px) {
  .fuel-top-nav {
    position: sticky;
  }

  main.container.mt-28 {
    margin-top: 1.5rem;
  }
}

.fuel-top-nav-inner {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 1.75rem;
  min-width: 0;
}

.fuel-top-nav-brand {
  align-items: center;
  display: inline-flex;
  flex-shrink: 0;
}

.fuel-top-nav-logo {
  display: block;
  height: 1.6rem;
  width: auto;
}

.fuel-top-nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
}

.fuel-top-nav-menu {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin-left: auto;
}

.fuel-site-domain {
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.fuel-site-domain:hover,
.fuel-site-domain:focus { color: var(--fuel-blue); }

.fuel-site-switcher { position: relative; max-width: 19rem; }

.fuel-site-switcher-select {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 0.5rem;
  background: #111;
  color: #fff;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.fuel-site-switcher-select:focus {
  border-color: var(--fuel-blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.25);
}

.fuel-site-switcher-chevron {
  pointer-events: none;
  position: absolute;
  right: 0.65rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.75);
}

.fuel-select {
  min-width: 0;
  position: relative;
}

.fuel-select-button {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 0.7rem;
  box-shadow: 0 2px 5px rgba(15, 23, 42, 0.05);
  color: #111827;
  cursor: pointer;
  display: flex;
  font-size: 0.92rem;
  gap: 0.75rem;
  justify-content: space-between;
  min-height: 2.75rem;
  padding: 0.68rem 0.85rem;
  text-align: left;
  width: 100%;
}

.fuel-select-button:hover {
  border-color: #94a3b8;
}

.fuel-select-button:focus-visible {
  border-color: var(--fuel-blue);
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.14);
  outline: none;
}

.fuel-select-menu {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.85rem;
  box-shadow: 0 22px 60px rgba(15, 23, 42, 0.2);
  left: 0;
  margin-top: 0.4rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: 0.35rem;
  position: absolute;
  right: 0;
  z-index: 180;
}

.fuel-select-option {
  background: transparent;
  border: 0;
  border-radius: 0.6rem;
  color: #111827;
  cursor: pointer;
  display: block;
  font-size: 0.9rem;
  font-weight: 750;
  padding: 0.65rem 0.75rem;
  text-align: left;
  width: 100%;
}

.fuel-select-option:hover,
.fuel-select-option.is-active {
  background: var(--fuel-blue-soft);
  color: var(--fuel-blue-dark);
}

.fuel-select--compact .fuel-select-button {
  border-radius: 0.5rem;
  font-size: 0.78rem;
  min-height: 2.2rem;
  padding: 0.45rem 0.65rem;
}

.fuel-select--compact .fuel-select-menu {
  border-radius: 0.65rem;
  max-height: 14rem;
  z-index: 220;
}

.fuel-select--compact .fuel-select-option {
  border-radius: 0.45rem;
  font-size: 0.78rem;
  padding: 0.48rem 0.55rem;
}

.fuel-site-switcher .fuel-select-button {
  background: #111;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  min-height: 2.35rem;
}

.fuel-site-switcher .fuel-select-button:focus-visible {
  border-color: var(--fuel-blue);
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.25);
}

.fuel-top-nav-link {
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.fuel-top-nav-link:hover,
.fuel-top-nav-link:focus {
  background: rgba(237, 32, 36, 0.18);
  color: var(--fuel-white);
  outline: none;
}

.fuel-top-nav-logout {
  background: var(--fuel-blue);
  border: 1px solid var(--fuel-blue);
  border-radius: 999px;
  color: var(--fuel-white);
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.01em;
  padding: 0.55rem 1.2rem;
  text-transform: uppercase;
  transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.fuel-top-nav-logout:hover,
.fuel-top-nav-logout:focus {
  background: var(--fuel-blue-dark);
  border-color: var(--fuel-blue-dark);
  outline: none;
  transform: translateY(-1px);
}

.fuel-sidebar {
  background: var(--fuel-navy);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.2);
}

.fuel-sidebar-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.fuel-sidebar-link {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.fuel-sidebar-link:hover,
.fuel-sidebar-link:focus {
  background: rgba(237, 32, 36, 0.16);
  color: var(--fuel-white);
  outline: none;
}

.fuel-sidebar-link-active {
  background: var(--fuel-navy-soft);
  box-shadow: inset 4px 0 0 var(--fuel-blue);
  color: var(--fuel-white);
}

.fuel-login-shell {
  align-items: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(237, 32, 36, 0.22), transparent 26rem),
    linear-gradient(135deg, #000000 0%, #111111 50%, #000000 100%);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.fuel-login-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 1rem;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
  max-width: 28rem;
  overflow: hidden;
  padding: 0 2rem 2rem;
  width: 100%;
}

.fuel-login-brand {
  align-items: center;
  background: var(--fuel-navy);
  display: flex;
  justify-content: center;
  margin: 0 -2rem 1.75rem;
  padding: 1.35rem 2rem 1.2rem;
}

.fuel-login-logo {
  height: 2.5rem;
  width: auto;
  max-width: 100%;
}

.fuel-login-form {
  margin-top: 1.75rem;
}

.fuel-login-submit,
.bg-blue-500,
.bg-blue-600,
.bg-indigo-500,
.bg-indigo-600,
.hover\:bg-blue-500:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-indigo-500:hover,
.hover\:bg-indigo-600:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--fuel-blue) !important;
}

.fuel-login-submit:hover,
.fuel-login-submit:focus,
.bg-blue-700,
.bg-indigo-700,
.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--fuel-blue-dark) !important;
}

.text-blue-400,
.text-blue-500,
.text-blue-600,
.text-blue-700,
.text-blue-800,
.text-blue-900,
.text-indigo-500,
.text-indigo-600,
.text-indigo-700,
.text-indigo-800,
.text-indigo-900,
.hover\:text-blue-500:hover,
.hover\:text-blue-600:hover,
.hover\:text-blue-800:hover,
.hover\:text-blue-900:hover,
.hover\:text-indigo-500:hover,
.hover\:text-indigo-600:hover,
.hover\:text-indigo-800:hover,
.hover\:text-indigo-900:hover {
  color: var(--fuel-blue) !important;
}

.border-blue-100,
.border-blue-200,
.border-blue-300,
.border-blue-400,
.border-blue-500,
.border-blue-600,
.border-indigo-100,
.border-indigo-200,
.border-indigo-300,
.border-indigo-400,
.border-indigo-500,
.border-indigo-600,
.hover\:border-blue-400:hover,
.hover\:border-indigo-400:hover {
  border-color: var(--fuel-blue-border) !important;
}

.bg-blue-50,
.bg-blue-100,
.bg-indigo-50,
.bg-indigo-100,
.hover\:bg-blue-50:hover,
.hover\:bg-indigo-50:hover,
.hover\:bg-indigo-100:hover,
.hover\:bg-indigo-200:hover {
  background-color: var(--fuel-blue-soft) !important;
}

.focus\:border-blue-300:focus,
.focus\:border-blue-500:focus,
.focus\:outline-blue-600:focus,
.focus\:ring-blue-200:focus,
.focus\:ring-blue-500:focus,
.focus\:border-indigo-300:focus,
.focus\:border-indigo-500:focus,
.focus\:outline-indigo-600:focus,
.focus\:ring-indigo-200:focus,
.focus\:ring-indigo-500:focus {
  border-color: var(--fuel-blue) !important;
  outline-color: var(--fuel-blue) !important;
  --tw-ring-color: rgba(237, 32, 36, 0.28) !important;
}

.ring-blue-500,
.ring-indigo-500,
.border-\[1\.5px\].border-blue-500,
.border-\[1\.5px\].border-dashed.border-blue-500,
.border-\[1\.5px\].border-indigo-500,
.border-\[1\.5px\].border-dashed.border-indigo-500 {
  border-color: var(--fuel-blue) !important;
  --tw-ring-color: rgba(237, 32, 36, 0.28) !important;
}

.pp-icon-blue,
.pp-btn-apply,
.pp-month-selected,
.reputation-rating-track > div,
.reputation-breakdown-card .bg-blue-500 {
  background-color: var(--fuel-blue) !important;
}

.pp-btn-apply:not(:disabled):hover {
  background-color: var(--fuel-blue-dark) !important;
}

/* Custom Range picker: months between the first and last picked month. */
.pp-month-in-range {
  background-color: var(--fuel-blue-soft) !important;
  color: #111827;
  cursor: pointer;
}

.pp-month-in-range:hover {
  background-color: var(--fuel-blue-border) !important;
}

.pp-bar-fill {
  background: rgba(237, 32, 36, 0.42) !important;
}

.pp-table thead tr {
  background-color: var(--fuel-blue-soft) !important;
}

.reputation-select-button:focus {
  border-color: var(--fuel-blue) !important;
  box-shadow: 0 0 0 3px rgba(237, 32, 36, 0.18) !important;
}

.reputation-select-options li:hover,
.reputation-select-options li[aria-selected="true"] {
  background: var(--fuel-blue-soft) !important;
  color: var(--fuel-blue-dark) !important;
}

.reputation-option-check {
  color: var(--fuel-blue) !important;
}

@media (max-width: 768px) {
  .fuel-top-nav {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
  }

  .fuel-top-nav-logo {
    height: 1.3rem;
  }

  .fuel-top-nav-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.6rem;
  }

  .fuel-top-nav-menu {
    margin-left: 0;
  }

  .fuel-top-nav-link {
    padding-left: 0;
  }

  .fuel-top-nav-logout {
    padding: 0.45rem 0.9rem;
  }

  .fuel-login-card {
    padding: 0 1.25rem 1.5rem;
  }

  .fuel-login-brand {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .fuel-public-hero {
    justify-content: flex-start;
    padding: 1rem;
  }

  .fuel-public-brand {
    padding: 1.45rem 1rem 1.25rem;
  }

  .fuel-public-logo {
    height: 2.25rem;
  }

  .fuel-public-copy {
    padding: 2.25rem 1.25rem 1.25rem;
  }

  .fuel-public-copy h1 {
    font-size: 2.65rem;
  }

  .fuel-public-actions {
    padding: 0.25rem 1.25rem 2rem;
  }

}

/* ── Public landing: inline sign-in form ───────────────────────────────────── */
.fuel-public-login-form {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.4vh, 0.85rem);
  padding: 0 2rem;
  margin: 0 auto;
  width: 100%;
  max-width: 24rem;
}

.fuel-public-input {
  width: 100%;
  padding: 0.65rem 0.9rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.94);
  color: #111827;
  font-size: 0.95rem;
}

.fuel-public-input:focus {
  outline: none;
  border-color: var(--fuel-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.35);
}

.fuel-public-form-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.76);
}

.fuel-public-remember {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.fuel-public-forgot {
  color: rgba(255, 255, 255, 0.76);
  text-decoration: underline;
}

.fuel-public-forgot:hover,
.fuel-public-forgot:focus {
  color: var(--fuel-white);
}

.fuel-public-login-form .fuel-public-login-button {
  width: 100%;
  cursor: pointer;
  font-size: 1rem;
  padding: 0.7rem 1rem;
}

/* ── Family-of-brands logo rows ────────────────────────────────────────────── */
.fuel-public-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  flex-wrap: wrap;
  margin-top: clamp(0.5rem, 1.6vh, 1.1rem);
}

.fuel-public-brand-logo {
  height: clamp(2.2rem, 4.6vh, 3.4rem);
  width: auto;
  max-width: 9rem;
  object-fit: contain;
}

/* Marine is a stacked mark-over-wordmark lockup, so it needs extra height for
   its wordmark to read at the same size as the horizontal Fuel/Hunt marks. */
.fuel-public-brand-logo-stacked {
  height: clamp(3.4rem, 7.2vh, 5.4rem);
}

.fuel-brand-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 0.75rem;
  padding: 1.5rem 1.25rem;
  min-height: 7.5rem;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

.fuel-brand-tile:hover,
.fuel-brand-tile:focus {
  background: rgba(17, 24, 39, 0.03);
  border-color: rgba(17, 24, 39, 0.28);
  box-shadow: 0 10px 22px rgba(17, 24, 39, 0.10);
  transform: translateY(-2px);
}

.fuel-brand-tile-logo {
  max-height: 4.5rem;
  max-width: 80%;
  width: auto;
  object-fit: contain;
}

.fuel-brand-tile-logo-stacked {
  max-height: 6.5rem;
}

@media (max-width: 640px) {
  .fuel-public-login-form {
    padding: 0 1.25rem;
  }

  .fuel-public-brands {
    gap: 1.25rem;
  }

  .fuel-public-brand-logo {
    height: 2.6rem;
  }

  .fuel-public-brand-logo-stacked {
    height: 4.2rem;
  }
}

/* ── Dedicated team ────────────────────────────────────────────────────────── */
/* Cards share the row evenly and shrink to fit, so a fourth team member never
   drops onto a line of their own. --fuel-team-columns is set from the member
   count in the view. */
.fuel-team-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  justify-content: center;
}

@media (min-width: 1024px) {
  .fuel-team-grid {
    grid-template-columns: repeat(var(--fuel-team-columns, 3), minmax(0, 1fr));
  }
}

/* ── SEO technical reports ────────────────────────────────────────────────── */
.seo-link-clamp-2,
.seo-link-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.seo-link-clamp-2 {
  -webkit-line-clamp: 2;
}

.seo-link-clamp-3 {
  -webkit-line-clamp: 3;
}

.geo-toggle-input:checked + .geo-toggle-track .geo-toggle-knob {
  transform: translateX(1.25rem);
}

/* Client Files page ------------------------------------------------------- */
.client-files-folder {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid transparent;
  color: #111827;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.client-files-folder:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.client-files-folder.is-active {
  background: #fef2f2;
  border-color: var(--fuel-blue-border);
  color: var(--fuel-blue-dark);
}

.client-files-folder.is-active .client-files-folder-icon {
  color: var(--fuel-blue);
}

.client-files-folder-icon {
  flex-shrink: 0;
  color: #6b7280;
}

.client-files-folder-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
}

.client-files-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.client-files-badge--client {
  background: #ecfdf5;
  color: #047857;
}

.client-files-badge--internal {
  background: #f3f4f6;
  color: #4b5563;
}

.client-files-dropzone {
  border: 2px dashed #d1d5db;
  border-radius: 0.75rem;
  background: #fafafa;
  padding: 1.5rem;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.client-files-dropzone.is-dragging {
  border-color: var(--fuel-blue);
  background: #fef2f2;
}

.client-files-upload-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.8rem;
  overflow: hidden;
}

.client-files-upload-row::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--upload-progress, 0%);
  background: #fee2e2;
  transition: width 0.2s ease;
  z-index: 0;
}

.client-files-upload-row > * {
  position: relative;
  z-index: 1;
}

.client-files-details > summary {
  list-style: none;
  cursor: pointer;
}

.client-files-details > summary::-webkit-details-marker {
  display: none;
}

.client-files-table {
  max-height: 32rem;
  overflow-y: auto;
}

.client-files-table thead th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  z-index: 1;
}

/* Files page preview popup. The panel can be resized by dragging the grip in
   its bottom-right corner (client_file_preview_controller.js) or maximized;
   the media area fills whatever is left. */
.client-file-preview-panel {
  position: relative;
  width: min(64rem, 100%);
  height: min(85vh, 60rem);
  min-width: 20rem;
  min-height: 16rem;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.client-file-preview-panel--maximized {
  width: 100%;
  height: 100%;
  border-radius: 0.75rem;
}

.client-file-preview-panel--resizing {
  user-select: none;
}

.client-file-preview-panel--resizing iframe,
.client-file-preview-panel--resizing video {
  pointer-events: none; /* keeps the drag from being swallowed by the PDF viewer */
}

.client-file-preview-body {
  flex: 1 1 auto;
  min-height: 0;
}

/* Drag grip in the bottom-right corner. */
.client-file-preview-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 55%, #9ca3af 55% 62%, transparent 62% 73%, #9ca3af 73% 80%, transparent 80%);
}

.client-file-preview-grip:hover,
.client-file-preview-grip:focus-visible {
  background:
    linear-gradient(135deg, transparent 0 55%, #ed2024 55% 62%, transparent 62% 73%, #ed2024 73% 80%, transparent 80%);
  outline: none;
}

.client-file-preview-panel--maximized .client-file-preview-grip {
  display: none;
}