/* ==========================================================================
   View Styles — I4G Integration Tracker
   Matrix table, KPI panel, bar chart, filter bar integration,
   expandable rows, and responsive layouts.
   Validates: Requirements 17.2, 17.3
   ========================================================================== */

/* --- Sub-tabs (inside Matrix route) --- */
.matrix-subtabs {
  margin-top: var(--space-4);
}

.matrix-subtabs__nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-4);
}

.matrix-subtab__btn {
  padding: var(--space-2) var(--space-4);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  cursor: pointer;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  transition: color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.matrix-subtab__btn:hover {
  color: var(--color-primary);
}

.matrix-subtab__btn--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* --- Matrix Wrapper --- */
.matrix-wrapper {
  width: 100%;
}

/* --- Matrix Table --- */
.matrix-table {
  width: 100%;
  table-layout: fixed;
  font-size: var(--font-size-small);
}

.matrix-header-company {
  width: 160px;
}

.matrix-header-track {
  text-align: center;
  padding: 8px 3px 8px;
  vertical-align: top;
  height: 150px;
  border-top: 6px solid transparent;
  position: relative;
}

/* Severity top-border color */
.matrix-header-track--sev-critical { border-top-color: var(--color-severity-critical); }
.matrix-header-track--sev-high     { border-top-color: var(--color-severity-high); }
.matrix-header-track--sev-medium   { border-top-color: var(--color-severity-medium); }
.matrix-header-track--sev-low      { border-top-color: var(--color-severity-low); }

.matrix-header-track__number {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: var(--font-weight-bold);
  font-size: 1rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
  line-height: 1;
}

.matrix-header-track__name {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  max-height: 110px;
  margin: 0 auto;
  line-height: 1.3;
  text-overflow: ellipsis;
}

/* --- Matrix Rows --- */
.matrix-row {
  transition: background-color var(--transition-fast);
}

.matrix-row:hover td {
  background-color: var(--color-bg-hover);
}

.matrix-cell-company {
  font-weight: var(--font-weight-medium);
  word-break: break-word;
}

.matrix-cell-company__year {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-small);
}

/* --- Company overall status indicator --- */
.company-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  margin-right: var(--space-2);
  vertical-align: middle;
  flex-shrink: 0;
}
.company-status-badge--completed   { background-color: var(--color-status-completed); color: #fff; }
.company-status-badge--in-progress { background-color: var(--color-status-in-progress); color: #fff; }
.company-status-badge--not-started { background-color: var(--color-status-not-started); color: #fff; }
.company-status-badge--stalled     { background-color: #E67E22; color: #fff; }

/* --- Matrix Cells --- */
.matrix-cell {
  text-align: center;
  padding: var(--space-2);
  position: relative;
  min-width: 40px;
  min-height: 36px;
  vertical-align: middle;
}

/* --- Status Dots (replace colored cell backgrounds) --- */
.matrix-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 auto;
  transition: transform var(--transition-fast);
}

.matrix-cell:hover .matrix-dot {
  transform: scale(1.4);
}

.matrix-dot--status-not-started { background-color: var(--color-status-not-started); }
.matrix-dot--status-in-progress { background-color: var(--color-status-in-progress); }
.matrix-dot--status-completed   { background-color: var(--color-status-completed); }
.matrix-dot--status-blocked     { background-color: var(--color-status-blocked); }
.matrix-dot--status-rejected    { background-color: var(--color-status-rejected); }
.matrix-dot--empty              { background-color: var(--color-border); opacity: 0.3; }

/* --- Matrix Legend --- */
.matrix-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 10px 4px 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
}

.matrix-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.matrix-legend__dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transition: none;
}

.matrix-legend__section-title {
  font-size: 0.7rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  align-self: center;
}

.matrix-legend__separator {
  width: 1px;
  height: 16px;
  background: var(--color-border);
  align-self: center;
  flex-shrink: 0;
}

.matrix-legend__sev-bar {
  width: 18px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

.matrix-legend__sev-bar--critical { background: var(--color-severity-critical); }
.matrix-legend__sev-bar--high     { background: var(--color-severity-high); }
.matrix-legend__sev-bar--medium   { background: var(--color-severity-medium); }
.matrix-legend__sev-bar--low      { background: var(--color-severity-low); }

/* --- Expandable Detail Row --- */
.matrix-detail-row {
  background-color: var(--color-bg-secondary);
}

.matrix-detail-cell {
  padding: var(--space-3) var(--space-4);
}

.matrix-detail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
}

.matrix-detail__track {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.matrix-detail__track-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.matrix-detail__track-title {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  flex: 1 1 auto;
  min-width: 120px;
}

.matrix-detail__subtasks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.matrix-detail__subtask {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--font-size-small);
  border-bottom: 1px solid var(--color-border);
}

.matrix-detail__subtask:last-child {
  border-bottom: none;
}

.matrix-detail__subtask--blocked {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.matrix-detail__subtask-status {
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.matrix-detail__subtask-summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-detail__subtask-label {
  flex-shrink: 0;
  font-size: 0.625rem;
  color: var(--color-text-secondary);
}

/* --- KPI Cards --- */
.kpi-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.kpi-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-4);
}

.kpi-card__icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-2);
}

.kpi-card__value {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.kpi-card__label {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.kpi-section-title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-3);
  color: var(--color-text-primary);
}

/* --- KPI Year Summary Table --- */
.kpi-year-summary {
  margin-bottom: var(--space-4);
}

.kpi-year-table__cell--critical {
  color: var(--color-severity-critical);
  font-weight: var(--font-weight-medium);
}

.kpi-year-table__cell--high {
  color: var(--color-severity-high);
  font-weight: var(--font-weight-medium);
}

.kpi-year-table__cell--medium {
  color: var(--color-severity-medium);
  font-weight: var(--font-weight-medium);
}

.kpi-year-table__cell--low {
  color: var(--color-severity-low);
  font-weight: var(--font-weight-medium);
}

/* --- Severity Bar Chart --- */
.kpi-severity-chart {
  margin-bottom: var(--space-4);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.chart-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-small);
}

.chart-legend__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chart-legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* --- Dot Chart --- */
.chart-dot-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chart-dot-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.chart-dot-year {
  min-width: 48px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
}

.chart-dots {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.chart-dot-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  min-width: 40px;
}

.chart-dot {
  border-radius: 50%;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.chart-dot:hover {
  transform: scale(1.3);
}

.chart-dot--critical { background-color: var(--color-severity-critical); }
.chart-dot--high     { background-color: var(--color-severity-high); }
.chart-dot--medium   { background-color: var(--color-severity-medium); }
.chart-dot--low      { background-color: var(--color-severity-low); }

.chart-dot-value {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.chart-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chart-year-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.chart-year-label {
  min-width: 48px;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  padding-top: var(--space-1);
}

.chart-bars {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.chart-bar-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 20px;
}

.chart-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 2px;
  transition: width var(--transition-normal);
}

.chart-bar--critical {
  background-color: var(--color-severity-critical);
}

.chart-bar--high {
  background-color: var(--color-severity-high);
}

.chart-bar--medium {
  background-color: var(--color-severity-medium);
}

.chart-bar--low {
  background-color: var(--color-severity-low);
}

.chart-bar-value {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* ==========================================================================
   Responsive — KPI Cards & Matrix
   ========================================================================== */

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .kpi-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .matrix-detail {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .kpi-cards {
    grid-template-columns: 1fr;
  }

  .matrix-detail {
    grid-template-columns: 1fr;
  }

  .chart-year-group {
    flex-direction: column;
    gap: var(--space-1);
  }

  .chart-year-label {
    min-width: auto;
  }
}


/* ==========================================================================
   Detail View — Company detail with 14 tracks
   Validates: Requirements 5.1, 5.2, 5.3, 5.4, 5.5
   ========================================================================== */

.detail-back-btn {
  margin-bottom: var(--space-4);
}

.detail-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.detail-header__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.detail-header__year,
.detail-header__region {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-secondary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.detail-tracks {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail-track-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  overflow: hidden;
}

.detail-track-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  flex-wrap: wrap;
  transition: background-color var(--transition-fast);
}

.detail-track-card__header:hover {
  background-color: var(--color-bg-hover);
}

.detail-track-card__header:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.detail-track-card__name {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  flex: 1 1 200px;
  min-width: 0;
}

.detail-track-card__completion {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  min-width: 40px;
  text-align: right;
}

.detail-track-card__counts {
  display: inline-flex;
  gap: var(--space-1);
}

.detail-track-card__assignee {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.detail-track-card__progress {
  margin: 0 var(--space-4) var(--space-2);
}

.detail-track-card__subtasks {
  padding: 0 var(--space-4) var(--space-3);
}

.detail-track-card__no-subtasks {
  font-size: var(--font-size-small);
  color: var(--color-text-disabled);
  margin: 0;
}

.detail-subtask-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.detail-subtask-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-size-small);
  border-bottom: 1px solid var(--color-border);
}

.detail-subtask-item:last-child {
  border-bottom: none;
}

.detail-subtask-item--blocked {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.detail-subtask-item__summary {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-subtask-item__assignee {
  flex-shrink: 0;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Region View — Companies grouped by region
   Validates: Requirements 9.1, 9.2, 9.3, 9.4
   ========================================================================== */

.region-view__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
}

.region-section {
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  overflow: hidden;
}

.region-section__header {
  background-color: var(--color-bg-secondary);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.region-section__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
}

.region-section__manager {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  margin: 0;
}

.region-section__metrics {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.region-metric {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.region-company-table {
  width: 100%;
  font-size: var(--font-size-body);
}

.region-company-row td {
  padding: var(--space-2) var(--space-4);
}

/* ==========================================================================
   Alerts View — Delayed tracks panel
   Validates: Requirements 6.1, 6.2, 6.4
   ========================================================================== */

.alerts-view__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-5);
}

.alerts-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.alert-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-surface);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
  flex-wrap: wrap;
}

.alert-item:hover {
  background-color: var(--color-bg-hover);
  box-shadow: var(--shadow-sm);
}

.alert-item:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: -2px;
}

.alert-item__company {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-body);
  min-width: 120px;
}

.alert-item__track {
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  flex: 1 1 200px;
  min-width: 0;
}

.alert-item__blocking {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  flex: 1 1 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive — Detail, Region, Alerts */
@media (max-width: 767px) {
  .detail-track-card__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .region-section__metrics {
    flex-direction: column;
    gap: var(--space-2);
  }

  .alert-item {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ==========================================================================
   Data Collection Module — Sheet Tabs, Inventory, Q&A Views
   Validates: Requirements 5.3, 5.4, 6.1-6.6, 7.1-7.7, 8.1-8.5
   ========================================================================== */

/* --- Sheet Tabs --- */
.dc-sheet-tabs__nav {
  margin-bottom: var(--space-4);
}

.dc-sheet-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid var(--color-border);
}

.dc-sheet-tabs__item {
  margin-bottom: -2px;
}

.dc-sheet-tabs__tab {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family);
  color: var(--color-text-secondary);
  background: none;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.dc-sheet-tabs__tab:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-hover);
}

.dc-sheet-tabs__tab--active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  border-bottom: 2px solid var(--color-bg-surface);
  background-color: var(--color-bg-surface);
}

/* --- Inventory Sheet --- */
.dc-inventory__toolbar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.dc-inventory__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dc-inventory__th--globant,
.dc-inventory__td--globant {
  background-color: var(--color-brand-light);
}

.dc-inventory__td--readonly {
  color: var(--color-text-secondary);
}

.dc-inventory__td--actions {
  width: 40px;
  text-align: center;
}

.dc-inventory__input,
.dc-qa-mgmt__input,
.dc-qa-simple__input {
  width: 100%;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-body);
  font-family: var(--font-family);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.dc-inventory__input:focus,
.dc-qa-mgmt__input:focus,
.dc-qa-simple__input:focus {
  border-color: var(--color-border-focus);
  outline: none;
  box-shadow: 0 0 0 2px rgba(15, 76, 129, 0.15);
}

/* Save confirmation */
.dc-inventory__input--saved,
.dc-qa-mgmt__input--saved,
.dc-qa-simple__input--saved {
  border-color: var(--color-success);
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.15);
}

/* Save error */
.dc-inventory__input--error,
.dc-qa-mgmt__input--error,
.dc-qa-simple__input--error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.15);
}

/* --- Q&A Management Sheet --- */
.dc-qa-mgmt__group,
.dc-qa-simple__group {
  margin-bottom: var(--space-5);
}

.dc-qa-mgmt__category-header,
.dc-qa-simple__section-header {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.dc-qa-mgmt__table-wrapper,
.dc-qa-simple__table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dc-qa-mgmt__th--globant,
.dc-qa-mgmt__td--globant {
  background-color: var(--color-brand-light);
}

.dc-qa-mgmt__td--readonly,
.dc-qa-simple__td--readonly {
  color: var(--color-text-secondary);
}

/* =========================================================================
   Compliance View — G4G Compliance Dashboard
   ========================================================================= */

.compliance-view {
  padding: var(--space-4);
  max-width: 1200px;
}

.compliance-title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-6);
}

.compliance-loading,
.compliance-error {
  padding: var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.compliance-error {
  color: var(--color-error);
}

/* --- Compliance inner tabs --- */
.compliance-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.compliance-tab-btn {
  padding: var(--space-2) var(--space-5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

.compliance-tab-btn:hover {
  color: var(--color-text-primary);
}

.compliance-tab-btn--active,
.compliance-tab-btn[aria-selected="true"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.compliance-tab-panel {
  min-height: 200px;
}

/* --- kept for backward compat, no longer used as wrapper --- */
.compliance-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* --- SOX section --- */
.compliance-sox-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  overflow: hidden;
}

.compliance-sox-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.compliance-section-title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
  flex-shrink: 0;
}

.compliance-sox-dims {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
}

/* --- SOX sub-dimension card --- */
.compliance-dim-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compliance-dim-title {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compliance-dim-epic {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Generic section (Compliance, GIST) --- */
.compliance-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compliance-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.compliance-section--compliance .compliance-section-title {
  color: var(--color-primary);
}

.compliance-section--gist .compliance-section-title {
  color: #6A1B9A;
}

.compliance-epic-name {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Progress bar --- */
.compliance-progress-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.compliance-progress-track {
  flex: 1;
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}

.compliance-progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.compliance-progress-label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  min-width: 36px;
  text-align: right;
}

/* --- Stats bar --- */
.compliance-stats-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 200px;
}

/* --- Pills --- */
.compliance-pills {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.compliance-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: var(--font-weight-medium);
}

.compliance-pill--neutral {
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
}

.compliance-pill--ok {
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-success);
}

.compliance-pill--danger {
  background: color-mix(in srgb, var(--color-error) 15%, transparent);
  color: var(--color-error);
}

/* --- Initiative badge --- */
.compliance-status-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}

.compliance-status-badge--completed  { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.compliance-status-badge--in-progress { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: #B45309; }
.compliance-status-badge--not-started { background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.compliance-status-badge--blocked    { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }
.compliance-status-badge--rejected   { background: color-mix(in srgb, #9E9E9E 15%, transparent); color: #616161; }

/* --- Task list --- */
.compliance-tasks-details {
  margin-top: var(--space-2);
}

.compliance-tasks-details > summary {
  font-size: var(--font-size-small);
  color: var(--color-primary);
  cursor: pointer;
  user-select: none;
  padding: var(--space-1) 0;
}

.compliance-task-table-wrap {
  overflow-x: auto;
  margin-top: var(--space-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.compliance-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  font-size: var(--font-size-small);
}

.compliance-pager-label {
  color: var(--color-text-secondary);
  min-width: 80px;
  text-align: center;
}

.compliance-pager-btn {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  cursor: pointer;
  font-size: var(--font-size-small);
}

.compliance-pager-btn:hover:not(:disabled) {
  background: var(--color-bg-hover, var(--color-bg-secondary));
}

.compliance-pager-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.compliance-task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.compliance-task-table thead tr {
  background: var(--color-bg-secondary);
}

.compliance-task-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.compliance-task-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.compliance-task-table tbody tr:last-child {
  border-bottom: none;
}

.compliance-task-table tbody tr:hover {
  background: var(--color-bg-secondary);
}

.compliance-task-row--overdue {
  background: color-mix(in srgb, var(--color-error) 5%, transparent);
}

.compliance-task-row--overdue:hover {
  background: color-mix(in srgb, var(--color-error) 10%, transparent) !important;
}

.compliance-task-td {
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-primary);
  vertical-align: top;
}

.compliance-task-td--key {
  font-family: monospace;
  font-size: 11px;
  color: var(--color-primary);
  white-space: nowrap;
}

.compliance-task-td--summary {
  max-width: 300px;
}

/* --- Latest-comments hover cue + popover ---------------------------------- */
.compliance-task-td--hascomments {
  cursor: default;
}

.compliance-comment-cue {
  margin-left: 6px;
  font-size: 0.8em;
  opacity: 0;
  transition: opacity 0.15s;
  cursor: help;
}

.compliance-task-td--hascomments:hover .compliance-comment-cue {
  opacity: 0.7;
}

.compliance-comment-popover {
  position: fixed;
  z-index: 10000;
  width: 340px;
  max-height: 320px;
  overflow-y: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-bg-surface, #ffffff);
  color: var(--color-text-primary, #1a1a2e);
  border: 1px solid var(--color-border, #d5dbdb);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  font-size: 0.82rem;
  line-height: 1.5;
}

.compliance-comment-popover__title {
  font-weight: var(--font-weight-bold, 700);
  font-size: 0.8rem;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
}

.compliance-comment-popover__item {
  padding: 8px 0;
  border-top: 1px solid var(--color-border, #45475a);
}
.compliance-comment-popover__item:first-of-type {
  border-top: none;
}

.compliance-comment-popover__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.compliance-comment-popover__text {
  white-space: pre-wrap;
  word-break: break-word;
}

.compliance-comment-popover__loading,
.compliance-comment-popover__empty {
  color: var(--color-text-secondary);
  font-style: italic;
}

.compliance-task-td--date {
  white-space: nowrap;
  color: var(--color-text-secondary);
}

.compliance-task-td--overdue {
  color: var(--color-error);
  font-weight: var(--font-weight-medium);
}

.compliance-task-td--num {
  text-align: right;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.compliance-task-td--due {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* Semaphore dot */
.compliance-semaphore {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.semaphore--green { background: var(--color-success, #2E7D32); }
.semaphore--red   { background: var(--color-error,   #D32F2F); }

/* --- GIST Vulnerability Charts --- */
.compliance-vuln-note {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 var(--space-3);
  font-style: italic;
}

.compliance-vuln-charts {
  display: flex;
  gap: var(--space-4);
  flex-wrap: nowrap;
}

.compliance-pie-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-bg-primary);
  min-width: 0;
}

.compliance-pie-card--open    { border-top: 3px solid var(--color-primary); }
.compliance-pie-card--blocked { border-top: 3px solid var(--color-error); }
.compliance-pie-card--closed  { border-top: 3px solid var(--color-success); }

.compliance-pie-card--active {
  background: var(--color-bg-secondary);
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: translateY(-2px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.compliance-clickable-pie-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.compliance-priority-bar {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.compliance-priority-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 2px solid var(--priority-color, var(--color-border));
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.compliance-priority-btn::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--priority-color);
}

.compliance-priority-btn--active {
  background: var(--priority-color);
  color: #fff;
}

.compliance-priority-btn:hover:not(.compliance-priority-btn--active) {
  background: color-mix(in srgb, var(--priority-color) 15%, transparent);
  color: var(--color-text-primary);
}

.compliance-pie-task-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  padding: var(--space-3);
}

.compliance-pie-task-empty {
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  padding: var(--space-4) 0;
  margin: 0;
}

.compliance-pie-title {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.compliance-donut {
  display: block;
  width: 100%;
  max-width: 160px;
  height: auto;
}

.compliance-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.compliance-pie-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  color: var(--color-text-secondary);
}

.compliance-pie-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.compliance-priority-badge {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

/* --- Compliance title row & refresh badge --- */
.compliance-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.compliance-title-row .compliance-title {
  margin-bottom: 0;
}

.compliance-refresh-badge {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  animation: compliance-pulse 1.4s ease-in-out infinite;
}

@keyframes compliance-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* --- Not connected empty state --- */
.compliance-not-connected {
  padding: var(--space-6);
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}

.compliance-not-connected__title {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.compliance-not-connected__hint {
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
}

.compliance-jira-link {
  color: var(--color-primary);
  text-decoration: none;
  font-family: monospace;
  font-size: 11px;
}

.compliance-jira-link:hover {
  text-decoration: underline;
}

/* ================================================================== */
/*  Admin Panel                                                        */
/* ================================================================== */

.admin-view {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.admin-view__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0;
}

.admin-view__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
  margin: 0;
}

.admin-form-card,
.admin-table-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-primary);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.admin-form-card__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--color-text-primary);
}

.admin-form-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}

.admin-input {
  flex: 1;
  min-width: 220px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.admin-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: -1px;
}

.admin-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  cursor: pointer;
}

.admin-select--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-small);
}

.admin-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.admin-section-cb {
  accent-color: var(--color-accent, #89b4fa);
  cursor: pointer;
}

.admin-section-cb:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.admin-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  cursor: pointer;
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  transition: opacity 0.15s;
}

.admin-btn:disabled { opacity: 0.5; cursor: default; }

.admin-btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.admin-btn--sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-small);
  background: var(--color-bg-secondary);
}

.admin-btn--warn  { background: var(--color-warning, #F57C00); color: #fff; border-color: transparent; }
.admin-btn--ok    { background: var(--color-success); color: #fff; border-color: transparent; }
.admin-btn--danger { background: var(--color-error); color: #fff; border-color: transparent; }

.admin-form-msg {
  font-size: var(--font-size-small);
  min-height: 1.2em;
}

.admin-form-msg--error { color: var(--color-error); }
.admin-form-msg--ok    { color: var(--color-success); }

.admin-table-wrap {
  overflow-x: auto;
}

.admin-search-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.admin-search-input {
  flex: 1;
  max-width: 320px;
}

.admin-search-count {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) 0 var(--space-2);
}

.admin-page-btn {
  min-width: 36px;
  font-size: 1rem;
}

.admin-page-info {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.admin-table thead tr {
  background: var(--color-bg-secondary);
}

.admin-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.admin-td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.admin-td--meta { color: var(--color-text-secondary); }

.admin-td--actions {
  white-space: nowrap;
}

.admin-td--actions > div {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.admin-row--inactive td {
  opacity: 0.5;
}

.admin-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-bold);
}

.admin-badge--active   { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.admin-badge--inactive { background: color-mix(in srgb, var(--color-error) 15%, transparent); color: var(--color-error); }

.admin-loading,
.admin-error {
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--font-size-small);
}

.admin-error { color: var(--color-error); }

/* --- Compliance Remind Button -------------------------------------------- */
.compliance-task-td--action {
  width: 90px;
  text-align: center;
}

.compliance-remind-btn,
.compliance-escalate-btn {
  width: 100%;
  box-sizing: border-box;
}

.compliance-remind-btn {
  padding: 2px 10px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.compliance-remind-btn:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}

.compliance-remind-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.compliance-remind-btn--sent {
  border-color: var(--color-success);
  color: var(--color-success);
}

.compliance-remind-btn--error {
  border-color: var(--color-error);
  color: var(--color-error);
}

/* --- Compliance Escalate Button ------------------------------------------ */
.compliance-escalate-btn {
  margin-top: 4px;
  padding: 2px 10px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-error);
  border-radius: 4px;
  background: transparent;
  color: var(--color-error);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.compliance-escalate-btn:hover:not(:disabled) {
  background: var(--color-error);
  color: #fff;
}

.compliance-escalate-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

.compliance-escalate-btn--sent {
  border-color: var(--color-success);
  color: var(--color-success);
}

/* --- Compliance Assign Button -------------------------------------------- */
.compliance-assign-btn {
  margin-top: 4px;
  padding: 2px 10px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-warning, #F57C00);
  border-radius: 4px;
  background: transparent;
  color: var(--color-warning, #F57C00);
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
}

.compliance-assign-btn:hover:not(:disabled) {
  background: var(--color-warning, #F57C00);
  color: #fff;
}

.compliance-assign-btn:disabled {
  cursor: default;
  opacity: 0.7;
}

.compliance-escalate-btn--error {
  border-color: var(--color-text-secondary);
  color: var(--color-text-secondary);
}

/* --- Email history badge -------------------------------------------------- */
.compliance-history-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--border, #45475a);
  background: none;
  color: var(--text-muted, #6c7086);
  font-size: .75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.compliance-history-badge:hover {
  border-color: #89b4fa;
  color: #89b4fa;
}

/* --- Compliance CSV Upload ------------------------------------------------ */
.compliance-upload-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--color-warning, #f59e0b) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent);
  border-radius: var(--radius-md);
}

.compliance-upload-hint {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  flex: 1;
}

.compliance-upload-btn {
  padding: 4px 14px;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: var(--color-primary);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.compliance-upload-btn:hover:not(:disabled) {
  opacity: 0.85;
}

.compliance-upload-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.compliance-upload-status {
  font-size: var(--font-size-small);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.compliance-upload-status--ok    { color: var(--color-success); }
.compliance-upload-status--error { color: var(--color-error); }