/* =============================================================
   COMPONENTS
   ============================================================= */

/* ===== CARDS ===== */
.in-card {
  background: var(--in-surface);
  border: 1px solid var(--in-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.in-card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--in-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.in-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: var(--in-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.in-card__title i {
  color: var(--in-text-muted);
  font-size: 1.1rem;
}

.in-card__body {
  padding: 1.25rem;
}

.in-card__body--flush { padding: 0; }

.in-card__footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--in-border);
  background: var(--in-surface-alt);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* ===== KPI CARDS ===== */
.kpi-card {
  background: var(--in-surface);
  border: 1px solid var(--in-border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.kpi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.kpi-card__label {
  font-size: 0.8rem;
  color: var(--in-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
}

.kpi-card__value {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--in-text);
  line-height: 1;
}

.kpi-card__trend {
  font-size: 0.75rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.kpi-card__trend--up { color: var(--in-success); }
.kpi-card__trend--down { color: var(--in-danger); }

.kpi-card--accent .kpi-card__icon { background: var(--in-accent-soft); color: var(--in-accent); }
.kpi-card--warning .kpi-card__icon { background: var(--status-under-approval-bg); color: var(--status-under-approval); }
.kpi-card--success .kpi-card__icon { background: var(--status-converted-bg); color: var(--status-converted); }
.kpi-card--danger .kpi-card__icon { background: var(--status-aborted-bg); color: var(--status-aborted); }
.kpi-card--neutral .kpi-card__icon { background: var(--in-bg); color: var(--in-text-muted); }

/* ===== STATUS BADGES ===== */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge--development {
  background: var(--status-development-bg);
  color: var(--status-development);
}

.status-badge--under-approval {
  background: var(--status-under-approval-bg);
  color: var(--status-under-approval);
}

.status-badge--pre-approved {
  background: var(--status-pre-approved-bg);
  color: var(--status-pre-approved);
}

.status-badge--converted {
  background: var(--status-converted-bg);
  color: var(--status-converted);
}

.status-badge--aborted {
  background: var(--status-aborted-bg);
  color: var(--status-aborted);
}

/* ===== TABLE ===== */
.in-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
}

.in-table thead th {
  background: var(--in-surface-alt);
  border-bottom: 1px solid var(--in-border);
  border-top: 1px solid var(--in-border);
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--in-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.in-table thead th:first-child { border-left: 1px solid var(--in-border); }
.in-table thead th:last-child { border-right: 1px solid var(--in-border); }

.in-table thead th:hover { background: var(--in-bg); color: var(--in-text); }

.in-table thead th .sort-icon {
  margin-left: 0.2rem;
  opacity: 0.4;
  font-size: 0.75rem;
}

.in-table thead th.sorted .sort-icon { opacity: 1; color: var(--in-primary); }

.in-table tbody td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--in-border);
  color: var(--in-text);
  vertical-align: middle;
}

.in-table tbody td:first-child { border-left: 1px solid var(--in-border); }
.in-table tbody td:last-child { border-right: 1px solid var(--in-border); }

.in-table tbody tr {
  transition: background-color 0.1s ease;
}

.in-table tbody tr:hover {
  background: var(--in-surface-alt);
}

.in-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); }
.in-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-md); }

.in-table .order-number {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--in-primary);
  font-size: 0.825rem;
}

.in-table .row-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.in-table tbody tr:hover .row-actions { opacity: 1; }

.in-table .row-action-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--in-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  font-size: 1.2rem;
  line-height: 1;
}

.row-action-btn__dots {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 0.7;
  font-weight: 700;
  letter-spacing: 0;
}

.in-table .row-action-btn:hover {
  background: var(--in-bg);
  color: var(--in-primary);
}

.in-table .empty-state td {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--in-text-muted);
}

/* ===== FILTERS BAR ===== */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  background: var(--in-surface);
  border: 1px solid var(--in-border);
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  align-items: center;
}

.filters-bar__search {
  position: relative;
  flex: 1;
  min-width: 240px;
}

.filters-bar__search i {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--in-text-muted);
  pointer-events: none;
}

.filters-bar__search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--in-border);
  border-radius: var(--radius-sm);
  background: var(--in-surface);
  font-size: 0.875rem;
  transition: all 0.15s ease;
}

.filters-bar__search input:focus {
  outline: none;
  border-color: var(--in-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem 0.35rem 0.75rem;
  background: var(--in-primary-soft);
  color: var(--in-primary);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 500;
}

.filter-chip__remove {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(26, 58, 92, 0.15);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--in-primary);
  font-size: 0.75rem;
  transition: background 0.15s ease;
}

.filter-chip__remove:hover { background: rgba(26, 58, 92, 0.25); }

/* ===== APPROVAL TIMELINE ===== */
.approval-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.approval-timeline__item {
  position: relative;
  padding-left: 3rem;
  padding-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.approval-timeline__item:last-child { padding-bottom: 0; }

.approval-timeline__item::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 36px;
  bottom: -8px;
  width: 2px;
  background: var(--in-border);
}

.approval-timeline__item:last-child::before { display: none; }

.approval-timeline__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--in-bg);
  color: var(--in-text-muted);
  border: 2px solid var(--in-border);
  z-index: 1;
}

.approval-timeline__item--approved .approval-timeline__marker {
  background: var(--status-converted-bg);
  color: var(--status-converted);
  border-color: var(--status-converted);
}

.approval-timeline__item--rejected .approval-timeline__marker {
  background: var(--status-aborted-bg);
  color: var(--status-aborted);
  border-color: var(--status-aborted);
}

.approval-timeline__item--pending .approval-timeline__marker {
  background: var(--status-under-approval-bg);
  color: var(--status-under-approval);
  border-color: var(--status-under-approval);
}

.approval-timeline__item--current .approval-timeline__marker {
  box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.15);
}

.approval-timeline__item--skipped .approval-timeline__marker {
  background: var(--in-bg);
  color: var(--in-text-subtle);
  opacity: 0.6;
}

.approval-timeline__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.approval-timeline__title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--in-text);
}

.approval-timeline__user {
  font-size: 0.825rem;
  color: var(--in-text-muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.approval-timeline__date {
  font-size: 0.75rem;
  color: var(--in-text-subtle);
}

.approval-timeline__comment {
  background: var(--in-surface-alt);
  border-left: 3px solid var(--in-border-strong);
  padding: 0.6rem 0.85rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.825rem;
  color: var(--in-text);
  margin-top: 0.25rem;
  font-style: italic;
}

.approval-timeline__item--rejected .approval-timeline__comment {
  border-left-color: var(--in-danger);
  background: var(--status-aborted-bg);
}

/* ===== TABS ===== */
.in-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--in-border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
}

.in-tab {
  padding: 0.75rem 1.25rem;
  border: none;
  background: transparent;
  color: var(--in-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.in-tab:hover { color: var(--in-text); }

.in-tab.active {
  color: var(--in-primary);
}

.in-tab.active::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: -1px;
  height: 2px;
  background: var(--in-primary);
  border-radius: 2px 2px 0 0;
}

.in-tab__badge {
  font-size: 0.7rem;
  background: var(--in-bg);
  color: var(--in-text-muted);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.in-tab.active .in-tab__badge {
  background: var(--in-primary-soft);
  color: var(--in-primary);
}

.in-tab[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ===== FORMS ===== */
.form-section {
  margin-bottom: 2rem;
}

.form-section__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--in-text);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-section__title i { color: var(--in-accent); }

.form-section__description {
  font-size: 0.825rem;
  color: var(--in-text-muted);
  margin-bottom: 1rem;
}

.form-label {
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--in-text);
  margin-bottom: 0.4rem;
}

.form-label .required { color: var(--in-danger); }

.form-control, .form-select {
  border-color: var(--in-border);
  font-size: 0.875rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--in-primary);
  box-shadow: 0 0 0 3px rgba(26, 58, 92, 0.1);
}

.form-help {
  font-size: 0.75rem;
  color: var(--in-text-muted);
  margin-top: 0.25rem;
}

/* Wizard stepper */
.wizard-steps {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: var(--in-surface);
  border: 1px solid var(--in-border);
  border-radius: var(--radius-md);
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  position: relative;
}

.wizard-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.5rem;
  top: 50%;
  width: 1rem;
  height: 1px;
  background: var(--in-border);
}

.wizard-step__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--in-bg);
  color: var(--in-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.85rem;
  flex-shrink: 0;
  border: 2px solid var(--in-border);
}

.wizard-step.active .wizard-step__number {
  background: var(--in-primary);
  color: white;
  border-color: var(--in-primary);
}

.wizard-step.completed .wizard-step__number {
  background: var(--status-converted);
  color: white;
  border-color: var(--status-converted);
}

.wizard-step__label {
  font-size: 0.85rem;
  color: var(--in-text-muted);
  font-weight: 500;
}

.wizard-step.active .wizard-step__label {
  color: var(--in-text);
  font-weight: 600;
}

.wizard-step.completed .wizard-step__label {
  color: var(--in-text);
}

/* ===== INFO LIST (key-value display) ===== */
.info-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem 1.5rem;
}

.info-item__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--in-text-muted);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.info-item__value {
  font-size: 0.9rem;
  color: var(--in-text);
  font-weight: 500;
}

.info-item__value--mono { font-family: var(--font-mono); font-size: 0.825rem; }

/* ===== DOCUMENT LIST ===== */
.doc-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--in-border);
  border-radius: var(--radius-sm);
  background: var(--in-surface);
  transition: all 0.15s ease;
}

.doc-item:hover {
  border-color: var(--in-border-strong);
  background: var(--in-surface-alt);
}

.doc-item__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--in-primary-soft);
  color: var(--in-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.doc-item__icon--url { background: var(--in-accent-soft); color: var(--in-accent); }

.doc-item__info {
  flex: 1;
  min-width: 0;
}

.doc-item__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--in-text);
  margin-bottom: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-item__meta {
  font-size: 0.75rem;
  color: var(--in-text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ===== AUDIT LOG ===== */
.audit-log {
  list-style: none;
  padding: 0;
  margin: 0;
}

.audit-log__item {
  display: flex;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--in-border);
}

.audit-log__item:last-child { border-bottom: none; }

.audit-log__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--in-bg);
  color: var(--in-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.audit-log__icon--approval { background: var(--status-converted-bg); color: var(--status-converted); }
.audit-log__icon--rejection { background: var(--status-aborted-bg); color: var(--status-aborted); }
.audit-log__icon--email { background: var(--in-accent-soft); color: var(--in-accent); }
.audit-log__icon--status { background: var(--status-under-approval-bg); color: var(--status-under-approval); }

.audit-log__content { flex: 1; }

.audit-log__title {
  font-size: 0.875rem;
  color: var(--in-text);
  font-weight: 500;
}

.audit-log__meta {
  font-size: 0.75rem;
  color: var(--in-text-muted);
  margin-top: 0.15rem;
}

/* ===== EMPTY STATE ===== */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--in-text-muted);
}

.empty-state__icon {
  font-size: 3rem;
  color: var(--in-border-strong);
  margin-bottom: 1rem;
}

.empty-state__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--in-text);
  margin-bottom: 0.5rem;
}

.empty-state__text { font-size: 0.875rem; }

/* ===== TOAST ===== */
.in-toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.in-toast {
  pointer-events: auto;
  background: var(--in-surface);
  border: 1px solid var(--in-border);
  border-left: 4px solid var(--in-accent);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 320px;
  max-width: 420px;
  animation: toastIn 0.25s ease-out;
}

@keyframes toastIn {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.in-toast--success { border-left-color: var(--in-success); }
.in-toast--warning { border-left-color: var(--in-warning); }
.in-toast--danger { border-left-color: var(--in-danger); }
.in-toast--info { border-left-color: var(--in-info); }

.in-toast__icon { font-size: 1.25rem; }
.in-toast--success .in-toast__icon { color: var(--in-success); }
.in-toast--warning .in-toast__icon { color: var(--in-warning); }
.in-toast--danger .in-toast__icon { color: var(--in-danger); }
.in-toast--info .in-toast__icon { color: var(--in-info); }

.in-toast__content { flex: 1; }
.in-toast__title { font-weight: 600; font-size: 0.875rem; color: var(--in-text); }
.in-toast__message { font-size: 0.825rem; color: var(--in-text-muted); margin-top: 0.15rem; }

.in-toast__close {
  background: transparent;
  border: none;
  color: var(--in-text-muted);
  cursor: pointer;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
}

/* ===== MASTERPLAN GRID ===== */
.masterplan-grid {
  display: grid;
  grid-template-columns: 80px repeat(12, 1fr) 90px;
  gap: 4px;
  font-size: 0.8rem;
}

.masterplan-grid__year {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--in-text);
  padding: 0.4rem 0.5rem;
  background: var(--in-surface-alt);
  border-radius: var(--radius-sm);
}

.masterplan-grid__cell {
  padding: 0.4rem;
  text-align: center;
  background: var(--in-surface-alt);
  border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}

.masterplan-grid__cell--header {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--in-text-muted);
  background: transparent;
}

.masterplan-grid__cell--input {
  padding: 0;
  background: transparent;
}

.masterplan-grid__cell--input input {
  width: 100%;
  border: 1px solid var(--in-border);
  background: var(--in-surface);
  border-radius: var(--radius-sm);
  padding: 0.35rem;
  text-align: center;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.masterplan-grid__cell--input input:focus {
  outline: none;
  border-color: var(--in-primary);
  box-shadow: 0 0 0 2px rgba(26, 58, 92, 0.1);
}

.masterplan-grid__cell--total {
  font-weight: 700;
  background: var(--in-primary-soft);
  color: var(--in-primary);
}

.masterplan-grid__cell--filled {
  background: var(--in-accent-soft);
  color: var(--in-accent);
  font-weight: 600;
}

/* ===== SECTION DIVIDERS ===== */
.section-divider {
  height: 1px;
  background: var(--in-border);
  margin: 1.5rem 0;
  border: none;
}

/* ===== PAGINATION ===== */
.in-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--in-border);
  background: var(--in-surface);
  font-size: 0.825rem;
  color: var(--in-text-muted);
}

.in-pagination__pages {
  display: flex;
  gap: 0.25rem;
}

.in-pagination__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--in-border);
  background: var(--in-surface);
  border-radius: var(--radius-sm);
  font-size: 0.825rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--in-text);
}

.in-pagination__btn:hover { background: var(--in-surface-alt); }
.in-pagination__btn.active { background: var(--in-primary); border-color: var(--in-primary); color: white; }
.in-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== ACTION BAR (sticky) ===== */
.action-bar {
  position: sticky;
  bottom: 0;
  background: var(--in-surface);
  border-top: 1px solid var(--in-border);
  padding: 0.85rem 1.25rem;
  margin: 0 -1.25rem -1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  gap: 1rem;
  flex-wrap: wrap;
}

.action-bar__info {
  font-size: 0.825rem;
  color: var(--in-text-muted);
}

.action-bar__actions {
  display: flex;
  gap: 0.5rem;
}

/* ===== WORK TEAM CARD ===== */
.team-member {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--in-border);
  background: var(--in-surface);
}

.team-member__info { flex: 1; min-width: 0; }
.team-member__role {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--in-text-muted);
  font-weight: 600;
}
.team-member__name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--in-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== LOADING ===== */
.in-spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--in-border);
  border-top-color: var(--in-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.in-loading {
  padding: 4rem 1rem;
  text-align: center;
  color: var(--in-text-muted);
}

/* ===== HAZARDOUS / NON-HAZARDOUS PILL ===== */
.hw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  background: var(--status-aborted-bg);
  color: var(--status-aborted);
  border-radius: var(--radius-sm);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hw-pill--nhw {
  background: var(--status-converted-bg);
  color: var(--status-converted);
}

.hw-pill i { font-size: 0.8rem; }

/* ===== MARGINALITY CHART ===== */
.legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.scatter-svg { display: block; width: 100%; height: 100%; }

.scatter-svg .axis-line { stroke: var(--in-border); stroke-width: 1; }
.scatter-svg .grid-line { stroke: var(--in-border); stroke-width: 1; stroke-dasharray: 2,3; opacity: 0.6; }
.scatter-svg .axis-label { fill: var(--in-text-muted); font-size: 11px; font-family: var(--font-sans); }
.scatter-svg .axis-title { fill: var(--in-text); font-size: 12px; font-weight: 600; font-family: var(--font-sans); }
.scatter-svg .trend-line { stroke: var(--in-text-subtle); stroke-width: 1.5; stroke-dasharray: 5,5; fill: none; }
.scatter-svg .zero-line { stroke: var(--in-danger); stroke-width: 1; stroke-dasharray: 4,3; opacity: 0.5; }
.scatter-svg .point-label { fill: var(--in-text); font-size: 10px; font-family: var(--font-sans); pointer-events: none; }

.scatter-svg .scatter-point {
  cursor: pointer;
  transition: opacity 0.15s ease;
  stroke: white;
  stroke-width: 1.5;
}

.scatter-svg .scatter-point:hover {
  stroke: var(--in-text);
  stroke-width: 2;
}

.scatter-svg.has-hover .scatter-point:not(:hover) {
  opacity: 0.35;
}

.scatter-tooltip {
  position: absolute;
  background: var(--in-text);
  color: white;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  z-index: 10;
  min-width: 220px;
  opacity: 0;
  transition: opacity 0.1s ease;
}

.scatter-tooltip.visible { opacity: 1; }
.scatter-tooltip__title { font-weight: 600; margin-bottom: 0.3rem; font-family: var(--font-mono); }
.scatter-tooltip__customer { font-weight: 500; margin-bottom: 0.4rem; opacity: 0.9; }
.scatter-tooltip__row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.75rem; opacity: 0.85; }
.scatter-tooltip__row strong { font-family: var(--font-mono); }

/* ===== TABLE FIXED LAYOUT ===== */
.in-table--fixed {
  table-layout: fixed;
}

/* Default: clip su tutte le celle */
.in-table--fixed td, .in-table--fixed th {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: top;
}

/* Celle che ospitano dropdown/popover devono permettere overflow visible */
.in-table--fixed td.cell-actions {
  overflow: visible;
  position: relative;
  z-index: 1;
}

/* Quando il dropdown è aperto, la cella deve stare sopra le altre righe */
.in-table--fixed tr:has(.dropdown-menu.show) {
  position: relative;
  z-index: 1050;
}
.in-table--fixed td.cell-actions:has(.dropdown-menu.show) {
  z-index: 1051;
}

/* Dropdown menu sopra a tutto */
.in-table .dropdown-menu {
  z-index: 1055;
}

.in-table--fixed tbody td {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
  padding-left: 0.6rem;
  padding-right: 0.6rem;
  vertical-align: top;
}

.in-table--fixed thead th {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* Celle marcate come wrap: vanno a capo */
.in-table--fixed td.cell-wrap,
.in-table td.cell-wrap {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
  line-height: 1.35;
  vertical-align: top;
}

.cell-clip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multiline cell: due righe (main + sub) ognuna con truncation propria */
.in-table--fixed td.cell-multiline,
.in-table td.cell-multiline {
  overflow: hidden;
  white-space: normal;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  vertical-align: top;
}
.cell-multiline__main {
  font-weight: 500;
  font-size: 0.825rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cell-multiline__sub {
  font-size: 0.72rem;
  color: var(--in-text-muted);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

/* Category badge */
.cat-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

/* Branch tag piccolo sotto Order # */
.branch-tag {
  font-size: 0.65rem;
  color: var(--in-text-subtle);
  font-weight: 500;
  margin-top: 1px;
  line-height: 1.1;
}

/* Tender icon */
.tender-icon {
  color: #d4a017;
  font-size: 0.9rem;
  margin-left: 4px;
  vertical-align: middle;
}

/* Margin color coding */
.margin-bad  { color: var(--in-danger); font-weight: 600; }
.margin-ok   { color: var(--in-text); }
.margin-good { color: var(--in-success); font-weight: 600; }

/* Dropdown action button */
.in-table .dropdown .row-action-btn {
  margin: 0 auto;
}

/* Safety net: dropdown closed by default even if Bootstrap JS hasn't loaded yet */
.in-table .dropdown-menu:not(.show) {
  display: none;
}

/* ===== APPROVAL CARD (my-approvals) ===== */

.approval-card {
  border-left: 4px solid var(--in-border);
  transition: border-color 0.15s ease;
}

.approval-card.delay-ok       { border-left-color: var(--in-text-subtle); }
.approval-card.delay-warning  { border-left-color: var(--in-warning); }
.approval-card.delay-critical { border-left-color: var(--in-danger); }

.approval-delay {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--in-bg);
}

.delay-ok .approval-delay       { background: var(--in-bg); color: var(--in-text-muted); }
.delay-warning .approval-delay  { background: rgba(255, 193, 7, 0.12); color: var(--in-warning); }
.delay-critical .approval-delay { background: rgba(220, 53, 69, 0.12); color: var(--in-danger); }

.approval-delay__icon { font-size: 1.5rem; line-height: 1; }
.approval-delay__days { font-size: 1.4rem; font-weight: 700; line-height: 1; font-family: var(--font-mono); }
.approval-delay__days small { font-size: 0.7rem; font-weight: 500; opacity: 0.8; }
.approval-delay__label { font-size: 0.7rem; opacity: 0.85; }

.approval-chain-timeline {
  background: var(--in-bg);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  border: 1px solid var(--in-border);
}

.approval-chain-timeline__title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--in-text);
}

.approval-timeline--compact { padding-left: 0; list-style: none; margin: 0; }

.approval-timeline--compact .approval-timeline__item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 0.85rem;
}

.approval-timeline--compact .approval-timeline__item:last-child { padding-bottom: 0; }

.approval-timeline--compact .approval-timeline__item::before {
  content: '';
  position: absolute;
  left: 0.95rem;
  top: 1.6rem;
  bottom: 0;
  width: 2px;
  background: var(--in-border);
}

.approval-timeline--compact .approval-timeline__item:last-child::before { display: none; }

.approval-timeline--compact .approval-timeline__marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: var(--in-surface);
  border: 2px solid var(--in-border);
  color: var(--in-text-muted);
}

.approval-timeline__item--approved .approval-timeline__marker {
  background: var(--in-success);
  border-color: var(--in-success);
  color: white;
}

.approval-timeline__item--rejected .approval-timeline__marker {
  background: var(--in-danger);
  border-color: var(--in-danger);
  color: white;
}

.approval-timeline__item--current .approval-timeline__marker {
  background: var(--in-primary);
  border-color: var(--in-primary);
  color: white;
  animation: pulse-current 2s ease-in-out infinite;
}

@keyframes pulse-current {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 163, 163, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(0, 163, 163, 0); }
}

.approval-timeline__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: flex-start;
}

.approval-timeline__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--in-text);
}

.approval-timeline__user {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--in-text-muted);
  margin-top: 0.2rem;
}

.approval-timeline__comment {
  font-size: 0.75rem;
  margin-top: 0.3rem;
  color: var(--in-text-muted);
  font-style: italic;
}

.approval-timeline__meta {
  text-align: right;
  font-size: 0.7rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.approval-timeline__state { font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.approval-timeline__item--approved .approval-timeline__state { color: var(--in-success); }
.approval-timeline__item--rejected .approval-timeline__state { color: var(--in-danger); }
.approval-timeline__item--current  .approval-timeline__state { color: var(--in-primary); }
.approval-timeline__item--pending  .approval-timeline__state { color: var(--in-text-muted); }

.approval-timeline__date { color: var(--in-text-muted); margin-top: 0.2rem; font-family: var(--font-mono); }

/* ===== PLANTS MAP ===== */
.plants-map {
  position: relative;
  height: 400px;
  border-bottom: 1px solid var(--in-border);
}

.plants-map__legend {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  flex-wrap: wrap;
}

.plants-map__legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1 1 0;
  min-width: 0;
}

.plants-map__pin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 0 0 1px var(--in-border);
  flex-shrink: 0;
}

.plants-map__legend-arrow {
  color: var(--in-primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* ===== OBJECT TYPE CHOOSER ===== */
.object-type-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--in-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  margin: 0;
  background: var(--in-surface);
  height: 100%;
}

.object-type-card:hover {
  border-color: var(--in-primary);
  background: var(--in-primary-soft);
}

.object-type-card--selected {
  border-color: var(--in-primary);
  background: var(--in-primary-soft);
  box-shadow: 0 0 0 2px var(--in-primary-soft);
}

.object-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.object-type-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--in-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--in-primary);
  flex-shrink: 0;
}

.object-type-card--selected .object-type-card__icon {
  background: var(--in-primary);
  color: white;
}

/* ===== ECONOMICS EDIT ===== */
.economics-card--revenues {
  border-top: 3px solid var(--in-success);
}
.economics-card--costs {
  border-top: 3px solid var(--in-warning);
}
.economics-card--gp {
  border-top: 3px solid var(--in-primary);
}

.gp-formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}

.gp-formula__term {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--in-bg);
  border: 1px solid var(--in-border);
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  min-width: 130px;
  text-align: center;
}

.gp-formula__term small {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--in-text-muted);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.gp-formula__term--revenue { color: var(--in-success); }
.gp-formula__term--cost    { color: var(--in-warning); }

.gp-formula__term--result {
  border-width: 2px;
  background: var(--in-primary-soft);
  border-color: var(--in-primary);
  color: var(--in-primary);
}

.gp-formula__term--result.gp-formula__term--negative {
  background: rgba(220, 53, 69, 0.1);
  border-color: var(--in-danger);
  color: var(--in-danger);
}

.gp-formula__term--result.gp-formula__term--positive {
  background: rgba(25, 135, 84, 0.1);
  border-color: var(--in-success);
  color: var(--in-success);
}

.gp-formula__op {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--in-text-muted);
}

/* ===== OBJECT BADGE (Waste / Product) ===== */
.object-badge {
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.object-badge--waste {
  background: rgba(255, 193, 7, 0.18);
  color: #8a6500;
  border-color: rgba(255, 193, 7, 0.45);
}

.object-badge--product {
  background: rgba(13, 110, 253, 0.15);
  color: #084298;
  border-color: rgba(13, 110, 253, 0.45);
}

/* ===== KICKOFF MEETING ===== */
.kickoff-attendees {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.5rem;
}

.kickoff-attendee {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--in-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--in-surface);
  margin: 0;
}

.kickoff-attendee:hover { background: var(--in-bg); }
.kickoff-attendee:has(input:checked) {
  border-color: var(--in-primary);
  background: var(--in-primary-soft);
}

.kickoff-attendee input { margin: 0; flex-shrink: 0; }

.kickoff-notes {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.5;
}

.kickoff-notes-view {
  padding: 0.85rem 1rem;
  background: var(--in-bg);
  border-radius: var(--radius-sm);
  border: 1px solid var(--in-border);
}

.kickoff-notes-view h3,
.kickoff-notes-view h4,
.kickoff-notes-view h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}
.kickoff-notes-view h3 { font-size: 1.05rem; font-weight: 700; }
.kickoff-notes-view h4 { font-size: 0.95rem; font-weight: 700; color: var(--in-text); }
.kickoff-notes-view h5 { font-size: 0.85rem; font-weight: 600; color: var(--in-text-muted); }
.kickoff-notes-view p { margin-bottom: 0.65rem; line-height: 1.55; }
.kickoff-notes-view ul { padding-left: 1.4rem; margin-bottom: 0.65rem; }
.kickoff-notes-view li { margin-bottom: 0.2rem; }
.kickoff-notes-view .md-todo { list-style: none; margin-left: -1rem; }

.kickoff-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.kickoff-attachment {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--in-border);
  border-radius: var(--radius-sm);
  background: var(--in-surface);
}

.kickoff-attachment > i { color: var(--in-text-muted); font-size: 1.1rem; }

/* Tracker step list */
.kickoff-tracker {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kickoff-tracker__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  position: relative;
}

.kickoff-tracker__item + .kickoff-tracker__item::before {
  content: '';
  position: absolute;
  top: -0.5rem;
  left: 16px;
  height: 1.5rem;
  width: 2px;
  background: var(--in-border);
}

.kickoff-tracker__marker {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--in-bg);
  border: 2px solid var(--in-border);
  color: var(--in-text-muted);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.kickoff-tracker__item--done .kickoff-tracker__marker {
  background: var(--in-success);
  border-color: var(--in-success);
  color: white;
}

.kickoff-tracker__item--progress .kickoff-tracker__marker {
  background: var(--in-warning);
  border-color: var(--in-warning);
  color: white;
}

.kickoff-tracker__item--todo .kickoff-tracker__marker {
  border-color: var(--in-primary);
  color: var(--in-primary);
}

.kickoff-tracker__item--locked .kickoff-tracker__marker {
  opacity: 0.5;
}

.kickoff-tracker__label {
  font-weight: 500;
}
.kickoff-tracker__item--locked .kickoff-tracker__label { color: var(--in-text-muted); }

.kickoff-conversion {
  border: 2px solid var(--in-success);
  background: rgba(21, 128, 61, 0.03);
}
.kickoff-conversion--locked {
  border-color: var(--in-warning);
  background: rgba(217, 119, 6, 0.03);
}

/* ===== CALENDAR ===== */
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 1rem;
}

.calendar-legend {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--in-text-muted);
}
.calendar-legend__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.calendar-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.calendar-dot--scheduled { background: var(--in-primary); }
.calendar-dot--completed { background: var(--in-success); }
.calendar-dot--pending   { background: var(--in-warning); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--in-border);
  border-top: 1px solid var(--in-border);
}

.calendar-grid__header {
  background: var(--in-bg);
  padding: 0.5rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--in-text-muted);
}
.calendar-grid__header--weekend { color: var(--in-danger); }

.calendar-day {
  background: var(--in-surface);
  min-height: 110px;
  padding: 0.4rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: relative;
}

.calendar-day--outside {
  background: #fafbfc;
  color: var(--in-text-subtle);
}
.calendar-day--outside .calendar-day__num { color: var(--in-text-subtle); }

.calendar-day--weekend {
  background: #fbfcfd;
}

.calendar-day--today {
  background: var(--in-primary-soft);
}
.calendar-day--today .calendar-day__num {
  background: var(--in-primary);
  color: white;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.calendar-day__num {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--in-text);
}

.calendar-day__events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0.15rem;
}

.calendar-event {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  text-decoration: none;
  border-left: 3px solid var(--in-text-muted);
  background: var(--in-bg);
  color: var(--in-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}
.calendar-event:hover { filter: brightness(0.95); }

.calendar-event--scheduled {
  border-left-color: var(--in-primary);
  background: var(--in-primary-soft);
  color: var(--in-primary);
}
.calendar-event--completed {
  border-left-color: var(--in-success);
  background: rgba(21, 128, 61, 0.08);
  color: var(--in-success);
}
.calendar-event--pending {
  border-left-color: var(--in-warning);
  background: rgba(217, 119, 6, 0.08);
  color: var(--in-warning);
}
.calendar-event--more {
  font-style: italic;
  color: var(--in-text-muted);
  cursor: pointer;
  border-left-color: transparent;
}

.calendar-event__time {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.65rem;
}
.calendar-event__title {
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

/* Upcoming list */
.upcoming-list {
  display: flex;
  flex-direction: column;
}

.upcoming-list__item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--in-border);
  text-decoration: none;
  color: var(--in-text);
  transition: background 0.1s;
}
.upcoming-list__item:hover { background: var(--in-bg); }
.upcoming-list__item:last-child { border-bottom: none; }

.upcoming-list__date {
  flex-shrink: 0;
  width: 60px;
  text-align: center;
  padding: 0.4rem 0;
  border-radius: var(--radius-sm);
  background: var(--in-bg);
  border: 1px solid var(--in-border);
}
.upcoming-list__weekday {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--in-primary);
}
.upcoming-list__daynum {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.1;
}
.upcoming-list__month {
  font-size: 0.7rem;
  color: var(--in-text-muted);
  text-transform: uppercase;
}

.upcoming-list__details { flex: 1; min-width: 0; }
.upcoming-list__title { font-size: 0.95rem; margin-bottom: 0.2rem; }
.upcoming-list__meta {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--in-text-muted);
  flex-wrap: wrap;
}
.upcoming-list__meta i { margin-right: 0.2rem; }
.upcoming-list__when { flex-shrink: 0; }

/* ===== LIFECYCLE RADIAL CHART ===== */
.lifecycle-radial {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lifecycle-radial__svg {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
}

.lifecycle-bar {
  cursor: pointer;
  transition: opacity 0.15s;
}
.lifecycle-bar:hover { opacity: 1 !important; }
.lifecycle-marker { cursor: pointer; }

.lifecycle-tooltip {
  position: absolute;
  display: none;
  background: rgba(20, 30, 45, 0.95);
  color: white;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  pointer-events: none;
  z-index: 100;
  min-width: 200px;
  box-shadow: var(--shadow-md);
}

.lifecycle-tooltip__title {
  font-weight: 700;
  font-family: var(--font-mono);
  margin-bottom: 0.2rem;
}
.lifecycle-tooltip__customer {
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.lifecycle-tooltip__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1px 0;
}
.lifecycle-tooltip__row span { opacity: 0.7; }

.lifecycle-summary {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: space-around;
}
.lifecycle-summary__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.lifecycle-summary__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--in-text-muted);
  font-weight: 600;
}
.lifecycle-summary__value {
  font-size: 1.4rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* ===== APPROVAL CHAINS BY CATEGORY ===== */
.chain-category-section { margin-bottom: 2rem; }
.chain-category-section:last-child { margin-bottom: 0; }

.chain-category-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--in-border);
}

.chain-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
}

/* ===== HISTORY (detailed) ===== */
.history-day { margin-bottom: 1.5rem; }
.history-day:last-child { margin-bottom: 0; }

.history-day__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--in-text-muted);
  padding: 0.3rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--in-border);
}

.audit-log__detail {
  font-size: 0.82rem;
  color: var(--in-text-muted);
  font-style: italic;
  margin: 0.15rem 0;
}

.audit-log__time {
  font-family: var(--font-mono);
  font-weight: 600;
}

.audit-log__meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.audit-log__meta .user-avatar { width: 18px; height: 18px; font-size: 0.6rem; }
.audit-log__who { font-weight: 600; color: var(--in-text); }
.audit-log__role {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--in-bg);
  border: 1px solid var(--in-border);
  border-radius: 4px;
  padding: 1px 6px;
  color: var(--in-text-muted);
}
.audit-log__sep { color: var(--in-text-subtle); }
.audit-log__datetime {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--in-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.audit-log__icon--created       { background: var(--in-primary); color: white; }
.audit-log__icon--approval-start{ background: #6610f2; color: white; }
.audit-log__icon--kickoff       { background: var(--status-pre-approved); color: white; }
.audit-log__icon--edit          { background: var(--in-warning); color: white; }