/* Style Lifecycle modal — visual feedback after a successful AJAX cell update. */
@keyframes lifecycle-cell-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, .55); }
    70%  { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

.style-lifecycle-cell {
    transition: background-color 200ms ease-out, transform 120ms ease-out;
}

.style-lifecycle-cell.cell-success-pulse {
    animation: lifecycle-cell-pulse 600ms ease-out;
    background-color: #f0fdf4;
}

/* Warning treatment for cells where supplier consensus says Discontinued but
   the tenant hasn't acknowledged it yet. */
.style-lifecycle-grid td.style-lifecycle-cell.cell-disagreeing {
    background-color: #fff8e1;
    border-color: #f0ad4e;
    box-shadow: 0 0 0 1px #f0ad4e inset, 0 1px 2px rgba(0, 0, 0, 0.04);
}

.style-lifecycle-grid td.style-lifecycle-cell.cell-disagreeing:hover {
    border-color: #ec971f;
    box-shadow: 0 0 0 1px #ec971f inset, 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* When the "show only disagreeing" toggle is on, hide rows that contain no
   disagreeing cells. The filter controller stamps .row-no-disagreement on
   <tr> elements that have zero disagreeing cells. */
.style-lifecycle-grid.show-disagreeing-only tbody tr.row-no-disagreement {
    display: none;
}

.style-lifecycle-grid {
    border-collapse: separate;
    border-spacing: 8px 8px;
    margin: 0 auto;
}

.style-lifecycle-grid th.lifecycle-row-header,
.style-lifecycle-grid th.lifecycle-col-header {
    position: sticky;
    background: #f8f9fa;
    z-index: 2;
    vertical-align: middle;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #dee2e6;
}

.style-lifecycle-grid th.lifecycle-row-header {
    left: 0;
    text-align: left;
    min-width: 200px;
}

.style-lifecycle-grid th.lifecycle-col-header {
    top: 0;
    text-align: center;
}

.style-lifecycle-grid td.style-lifecycle-cell {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.65rem 0.75rem;
    vertical-align: top;
    max-width: 260px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.style-lifecycle-grid td.style-lifecycle-cell:hover {
    border-color: #adb5bd;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.style-lifecycle-grid td.text-muted {
    background: #fafafa;
    border: 1px dashed #e9ecef;
    border-radius: 8px;
    padding: 0.5rem;
}

/* Swatch beside the color name in row headers. Uses CSS named colors that
 * happen to match the value string; unknown colors fall through to a neutral
 * gray fill so the swatch itself never breaks layout. */
.lifecycle-color-swatch {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.25);
    background-color: #ced4da;
    flex-shrink: 0;
}