/*
 * Styly časové osy auditních záznamů (ADR 024) — komponenta core::filament.infolists.audit-timeline-entry.
 * Admin běží na výchozím prekompilovaném Filament theme bez Tailwind buildu, proto vlastní třídy
 * dodává tento asset (registrace v CoreServiceProvider, publikace přes filament:assets/upgrade).
 * Dark mode přepíná Filament třídou `.dark` na <html>.
 */

.audit-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.audit-timeline__item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding-bottom: 1.25rem;
}

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

.audit-timeline__connector {
    position: absolute;
    inset-inline-start: calc(1rem - 0.5px);
    top: 2.25rem;
    bottom: 0.25rem;
    width: 1px;
    background-color: rgb(0 0 0 / 0.1);
}

.dark .audit-timeline__connector {
    background-color: rgb(255 255 255 / 0.1);
}

/*
 * Ikona nese barvu druhu akce (AuditPresenter::actionColor). Akcent drží custom property
 * a odstíny míchá color-mix — varianty (i jejich dark verze) přepisují jen property,
 * takže nevznikají souboje specificity. Základ je neutrální šedá (`gray`, neznámá slovesa).
 */
.audit-timeline__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    --audit-timeline-accent: var(--gray-500, rgb(107 114 128));
    color: var(--audit-timeline-accent);
    background-color: color-mix(
        in srgb,
        var(--audit-timeline-accent) 10%,
        transparent
    );
    box-shadow: inset 0 0 0 1px
        color-mix(in srgb, var(--audit-timeline-accent) 20%, transparent);
}

.dark .audit-timeline__icon {
    --audit-timeline-accent: var(--gray-400, rgb(156 163 175));
}

.audit-timeline__icon--success {
    --audit-timeline-accent: var(--success-600, rgb(22 163 74));
}

.audit-timeline__icon--info {
    --audit-timeline-accent: var(--info-600, rgb(37 99 235));
}

.audit-timeline__icon--warning {
    --audit-timeline-accent: var(--warning-600, rgb(217 119 6));
}

.audit-timeline__icon--danger {
    --audit-timeline-accent: var(--danger-600, rgb(220 38 38));
}

.audit-timeline__icon--teal {
    --audit-timeline-accent: var(--teal-600, rgb(13 148 136));
}

.audit-timeline__icon--violet {
    --audit-timeline-accent: var(--violet-600, rgb(124 58 237));
}

.audit-timeline__icon--fuchsia {
    --audit-timeline-accent: var(--fuchsia-600, rgb(192 38 211));
}

.dark .audit-timeline__icon--success {
    --audit-timeline-accent: var(--success-400, rgb(74 222 128));
}

.dark .audit-timeline__icon--info {
    --audit-timeline-accent: var(--info-400, rgb(96 165 250));
}

.dark .audit-timeline__icon--warning {
    --audit-timeline-accent: var(--warning-400, rgb(251 191 36));
}

.dark .audit-timeline__icon--danger {
    --audit-timeline-accent: var(--danger-400, rgb(248 113 113));
}

.dark .audit-timeline__icon--teal {
    --audit-timeline-accent: var(--teal-400, rgb(45 212 191));
}

.dark .audit-timeline__icon--violet {
    --audit-timeline-accent: var(--violet-400, rgb(167 139 250));
}

.dark .audit-timeline__icon--fuchsia {
    --audit-timeline-accent: var(--fuchsia-400, rgb(232 121 249));
}

.audit-timeline__body {
    display: grid;
    flex: 1;
    gap: 0.375rem;
    min-width: 0;
}

/* Uzel s tlumeným textem — závěrečná notice oříznutého výpisu i prázdný stav. */
.audit-timeline__notice {
    display: flex;
    align-items: center;
    min-height: 2rem;
    font-size: 0.75rem;
    color: var(--gray-500, rgb(107 114 128));
}

.dark .audit-timeline__notice {
    color: var(--gray-400, rgb(156 163 175));
}

.audit-timeline__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    /* Střed prvního řádku drží osu kolečka (výška 2rem) i při zalomení. */
    min-height: 2rem;
}

.audit-timeline__subject {
    /* Popisek subjektu bývá složený (trasa, rozsah kapacity) — musí se zalomit, ne roztáhnout modal. */
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-950, rgb(3 7 18));
}

.dark .audit-timeline__subject {
    color: var(--gray-50, rgb(249 250 251));
}

.audit-timeline__causer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Aktér sedí vpravo u času — badge zůstává vlevo. Styl shodný s labely v tabulce změn. */
    margin-inline-start: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-700, rgb(55 65 81));
}

.dark .audit-timeline__causer {
    color: var(--gray-200, rgb(229 231 235));
}

.audit-timeline__time {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    /* Větší odstup od aktéra než základní gap hlavičky; barva shodná s aktérem. */
    margin-inline-start: 0.5rem;
    font-size: 0.75rem;
    color: var(--gray-700, rgb(55 65 81));
    cursor: default;
}

.dark .audit-timeline__time {
    color: var(--gray-200, rgb(229 231 235));
}

/* Tabulkové zarovnání: názvy polí a změny tvoří sloupce (dt/dd se přes
   display: contents propadají do gridu kontejneru). */
.audit-timeline__changes {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.125rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--gray-50, rgb(249 250 251));
    /* Jemný ring — stejný jazyk jako kulatá ikona osy a Filament badge. */
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.05);
    font-size: 0.75rem;
}

.dark .audit-timeline__changes {
    background-color: rgb(255 255 255 / 0.05);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.audit-timeline__change {
    display: contents;
}

/* Názvy polí jako labely — stejná váha a barva, jakou mají labely Filament infolistů. */
.audit-timeline__change dt {
    font-weight: 500;
    color: var(--gray-700, rgb(55 65 81));
}

.dark .audit-timeline__change dt {
    color: var(--gray-200, rgb(229 231 235));
}

.audit-timeline__change dt::after {
    content: ':';
}

.audit-timeline__change dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.375rem;
    margin: 0;
    /* Dlouhé nepřerušené hodnoty (URL…) se musí zalomit, ne roztáhnout modal. */
    min-width: 0;
}

.audit-timeline__old,
.audit-timeline__new {
    min-width: 0;
    overflow-wrap: anywhere;
}

.audit-timeline__old,
.audit-timeline__arrow {
    color: var(--gray-400, rgb(156 163 175));
}

.audit-timeline__old {
    text-decoration: line-through;
}

.dark .audit-timeline__old,
.dark .audit-timeline__arrow {
    color: var(--gray-500, rgb(107 114 128));
}

.audit-timeline__new {
    color: var(--gray-950, rgb(3 7 18));
}

.dark .audit-timeline__new {
    color: #fff;
}