/* User Audit - Gantt Timeline Styles
   Colours and radii follow the theme tokens (fk-theme.css), with the old values as fallbacks.
   The page frame (page head, search, cards, tables) is in fk-pages-activity.css (.fk-page-uaudit). */

.user-audit-container {
    padding: 0 15px;
}

/* Event Transaction Cards (one per policy) */
.event-trx-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    align-items: stretch; /* cards of a row share the same height */
    gap: 12px;
}

.event-trx-card {
    min-width: 0;
    background: var(--fk-surface, #fff);
    border: 1px solid var(--fk-line, #dee2e6);
    border-radius: var(--fk-r, 12px);
    overflow: hidden;
}

.event-trx-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: var(--fk-surface, #fff);
    border-bottom: 1px solid var(--fk-line, #dee2e6);
    font-size: .875rem;
}

.event-trx-header .fk-badge {
    flex: 0 0 auto;
    margin-left: auto;
}

.event-trx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: .82rem;
}

/* rows separated from the previous one (a hidden revoked row leaves no stray border) */
.event-trx-row + .event-trx-row {
    border-top: 1px solid var(--fk-line, #f0f0f0);
}

.event-trx-row-accepted,
.event-trx-row-revoked {
    background: var(--fk-surface, #fff);
}

.event-trx-label {
    color: var(--fk-muted, #6c757d);
    white-space: nowrap;
}

.event-trx-sub-header {
    padding: 5px 12px;
    background: var(--fk-soft, #e9ecef);
    border-top: 1px solid var(--fk-line, #dee2e6);
    border-bottom: 1px solid var(--fk-line, #dee2e6);
    font-size: .72rem;
    color: var(--fk-muted, #6c757d);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.event-trx-card > div:first-of-type > .event-trx-sub-header {
    border-top: none;
}

.event-bubble-policy-link {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--fk-accent, #007bff);
    cursor: pointer;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.event-bubble-policy-link .fa-file-alt {
    margin-right: 4px;
    color: var(--fk-muted, #6c757d);
}

.event-bubble-policy-link .fa-external-link-alt {
    margin-left: 4px;
    opacity: .7;
}

.event-bubble-policy-link strong {
    font-weight: 600;
}

.event-bubble-policy-link:hover {
    color: var(--fk-accent-2, #0056b3);
    text-decoration: underline;
}

/* Gantt Container */
.gantt-container {
    position: relative;
    overflow-x: auto;
    min-height: 200px;
    border: 1px solid var(--fk-line, #dee2e6);
    border-radius: var(--fk-r-sm, 4px);
    background: var(--fk-surface, #fff);
}

.gantt-scroll-wrapper {
    display: inline-flex;
    flex-direction: column;
    min-width: 100%;
}

.gantt-header {
    display: flex;
    border-bottom: 1px solid var(--fk-line, #dee2e6);
    background: var(--fk-soft, #f8f9fa);
    position: sticky;
    top: 0;
    z-index: 10;
}

.gantt-header-label {
    width: 280px;
    min-width: 280px;
    padding: 8px 12px;
    display: flex;
    align-items: flex-end;
    color: var(--fk-muted, #212529);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-right: 1px solid var(--fk-line, #dee2e6);
    flex-shrink: 0;
}

.gantt-header-timeline {
    display: flex;
    position: relative;
    flex: 1;
}

.gantt-month {
    text-align: center;
    padding: 18px 2px 18px 2px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--fk-muted, #6c757d);
    border-right: 1px solid var(--fk-line, #f0f0f0);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* Day Ticks */
.gantt-days-row {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
}

.gantt-day-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: .6rem;
    color: #98a0b0;
    line-height: 1;
    pointer-events: none;
}

.gantt-day-tick.gantt-day-first {
    font-weight: 700;
    color: var(--fk-ink-2, #495057);
}

/* Gantt Body */
.gantt-body {
    position: relative;
}

/* Policy Group */
.gantt-policy-group {
    border-bottom: 1px solid var(--fk-line, #dee2e6);
}

.gantt-policy-group:last-child {
    border-bottom: 0;
}

.gantt-policy-header {
    display: flex;
    align-items: stretch;
    background: var(--fk-soft, #f8f9fa);
    cursor: pointer;
    border-bottom: 1px solid var(--fk-line, #e9ecef);
    transition: background-color .15s;
}

.gantt-policy-header:hover {
    background: var(--fk-neutral-bg, #e9ecef);
}

/* caret | policy name, project badge under the name */
.gantt-policy-label {
    width: 280px;
    min-width: 280px;
    padding: 8px 12px;
    color: var(--fk-ink, #212529);
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.3;
    border-right: 1px solid var(--fk-line, #dee2e6);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    align-content: center;
    gap: 3px 8px;
    flex-shrink: 0;
}

.gantt-policy-label .gantt-policy-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gantt-policy-label .gantt-policy-project {
    grid-column: 2;
    justify-self: start;
    max-width: 100%;
    overflow: hidden;
    font-size: .7rem;
}

/* caret on the first line of the policy name (a long name wraps on two lines) */
.gantt-policy-label .toggle-icon {
    align-self: start;
    line-height: 1.105rem; /* = one line of the name: .85rem x 1.3 */
    transition: transform .2s;
    font-size: .75rem;
    color: var(--fk-muted, #6c757d);
}

.gantt-policy-label .toggle-icon.collapsed {
    transform: rotate(-90deg);
}

.gantt-policy-timeline {
    flex: 1;
    position: relative;
    min-height: 36px;
}

/* Condition Row */
.gantt-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--fk-line, #f0f0f0);
    min-height: 32px;
}

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

.gantt-row:hover {
    background: var(--fk-soft, #fafafa);
}

.gantt-row-label {
    width: 280px;
    min-width: 280px;
    padding: 4px 12px 4px 36px;
    font-size: .8rem;
    color: var(--fk-ink-2, #495057);
    border-right: 1px solid var(--fk-line, #dee2e6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.gantt-row-timeline {
    flex: 1;
    position: relative;
    height: 28px;
}

/* Gantt Bars */
.gantt-bar {
    position: absolute;
    top: 5px;
    height: 18px;
    border-radius: 4px;
    opacity: .9;
    transition: opacity .2s;
    min-width: 3px;
}

.gantt-bar:hover {
    opacity: 1;
}

.gantt-bar-not-expressed {
    background-color: #d6d8db;
}

.gantt-bar-accepted {
    background-color: var(--fk-ok, #28a745);
}

.gantt-bar-refused {
    background-color: var(--fk-bad, #dc3545);
}

.gantt-bar-expired {
    background-color: var(--fk-warn, #ffc107);
}

.gantt-bar-revoked {
    background-color: #721c24;
}

.gantt-bar-future-valid {
    background: repeating-linear-gradient(
        45deg,
        var(--fk-info, #17a2b8),
        var(--fk-info, #17a2b8) 4px,
        #7fb0d3 4px,
        #7fb0d3 8px
    );
}

/* Today Line */
.gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--fk-bad, #dc3545);
    z-index: 5;
    pointer-events: none;
}

.gantt-today-label::before {
    content: 'Today';
    position: absolute;
    top: -18px;
    left: -16px;
    font-size: .65rem;
    color: var(--fk-bad, #dc3545);
    font-weight: 600;
}

/* Grid Lines */
.gantt-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--fk-line, #f0f0f0);
    opacity: .7;
    pointer-events: none;
}

/* Legend */
.gantt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 0;
    color: var(--fk-ink-2, #212529);
    font-size: .8rem;
}

.gantt-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gantt-legend-color {
    flex: 0 0 auto;
    width: 14px;
    height: 10px;
    border-radius: 3px;
}

.gantt-legend-future-valid {
    background: repeating-linear-gradient(
        45deg,
        var(--fk-info, #17a2b8),
        var(--fk-info, #17a2b8) 2px,
        #7fb0d3 2px,
        #7fb0d3 4px
    );
}

.gantt-bar-superseded-accepted {
    background-color: #6aaa6a;
    opacity: .6;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px
    );
}

.gantt-bar-superseded-refused {
    background-color: #c97a7a;
    opacity: .6;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 3px, rgba(255,255,255,0.3) 3px, rgba(255,255,255,0.3) 6px
    );
}

.gantt-legend-superseded-accepted {
    background-color: #6aaa6a;
    opacity: .6;
}

.gantt-legend-superseded-refused {
    background-color: #c97a7a;
    opacity: .6;
}

/* Bar tooltip */
.gantt-bar[title] {
    cursor: default;
}

/* Year Markers (Point 5) */
.gantt-year {
    position: absolute;
    top: 0;
    font-size: .8rem;
    font-weight: 700;
    color: var(--fk-ink, #343a40);
    border-left: 2px solid var(--fk-line-2, #adb5bd);
    padding-left: 4px;
    z-index: 6;
    line-height: 1;
    padding-top: 3px;
    font-variant-numeric: tabular-nums;
}

/* Bar Labels (Point 4) */
.gantt-bar-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    padding: 0 4px;
    text-shadow: 0 0 2px rgba(0,0,0,0.35);
}

/* Annotations (Point 3) */
.gantt-annotation {
    position: absolute;
    top: 7px;
    transform: translateX(-50%);
    z-index: 7;
    cursor: default;
}

.gantt-annotation-text {
    display: inline-block;
    background: var(--fk-neutral-bg, #e9ecef);
    border: 1px solid transparent;
    border-radius: var(--fk-r-pill, 10px);
    padding: 1px 8px;
    font-size: .66rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--fk-neutral-ink, #495057);
}

.gantt-annotation-active .gantt-annotation-text {
    background: var(--fk-ok-bg, #d4edda);
    border-color: rgba(46, 158, 79, .35);
    color: var(--fk-ok-ink, #155724);
}

.gantt-annotation-revoked .gantt-annotation-text {
    background: var(--fk-bad-bg, #f8d7da);
    border-color: rgba(217, 48, 37, .35);
    color: var(--fk-bad-ink, #721c24);
}

/* Section Title Label (Points 6, 7): no longer used by the view, which has card titles */
.section-title-label {
    border-left: 4px solid var(--fk-accent, #007bff);
    padding-left: 10px;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: 12px;
    color: var(--fk-ink, #343a40);
}

/* Hash Text (Point 7) */
.hash-text {
    font-family: var(--fk-mono, 'Courier New', Courier, monospace);
    font-size: .75rem;
    color: var(--fk-muted, #6c757d);
}

/* Activities table badge spacing (scoped to the user audit page: unscoped it changed every table) */
.fk-page-uaudit .table .badge {
    font-size: .7rem;
}

/* Zoom Controls */
.gantt-zoom-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.gantt-zoom-slider {
    width: 140px;
    margin: 0 4px;
    cursor: pointer;
    accent-color: var(--fk-accent, #007bff);
}

.gantt-zoom-value {
    min-width: 40px;
    color: var(--fk-muted, #6c757d);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* Responsive */
@media (max-width: 768px) {
    .gantt-header-label,
    .gantt-policy-label,
    .gantt-row-label {
        width: 180px;
        min-width: 180px;
    }

    .gantt-row-label {
        padding-left: 24px;
    }
}

@media (max-width: 575.98px) {
    .event-trx-list {
        grid-template-columns: minmax(0, 1fr);
    }

    .gantt-zoom-slider {
        flex: 1 1 auto;
        width: auto;
        min-width: 80px;
    }

    .gantt-zoom-controls {
        width: 100%;
    }
}