/*
 * Day-schedule timeline — Person dashboard.
 *
 * The PHP card inlines all of this in a <style> block inside the partial, which
 * means it is re-sent on every AJAX section load. Here it is a stylesheet that
 * caches, which is the only difference: the class names and the colour values
 * are deliberately IDENTICAL to views/person/_sections/_dayScheduleCard.php, so
 * an operator switching between the two tiers sees the same card.
 *
 * Change a colour here and you have made the tiers disagree. Change it in both.
 */

.time-axis {
    height: 22px;
}

/*
 * The axis labels' nudge.
 *
 * THE SHIFT ARRIVES AS A CUSTOM PROPERTY BECAUSE translateX IS PHYSICAL. Each
 * marker is PLACED with `inset-inline-start`, which is logical and mirrors under
 * RTL — but it is then NUDGED half (or all) of its own width so the label reads
 * centred on its tick, and an inline `transform: translateX(-100%)` does not
 * mirror. Under RTL the 24:00 marker sits at the left end of the track and the
 * nudge pushed it further left, out of the container: measured at 77px of
 * horizontal overflow on the monitoring dialog's Schedule tab, and present on
 * the person dashboard's own timeline for the same reason.
 *
 * Negating it here rather than inline is what makes it fixable at all — a
 * stylesheet cannot override an inline `transform` without `!important`, and it
 * can override a value the inline style only supplies.
 */
.time-marker {
    transform: translateX(var(--marker-shift, 0));
}

html[dir="rtl"] .time-marker {
    transform: translateX(calc(-1 * var(--marker-shift, 0)));
}

.schedule-entry {
    transition: all 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    max-height: 40px;
    position: relative;
}

/*
 * Hover/focus widening.
 *
 * Driven entirely by the two custom properties the server sets per chip, so a
 * card with a dozen entries costs zero JavaScript. --expanded-left is already
 * clamped server-side (see chronos.ProcessDaySchedule), so the widened chip
 * cannot overhang the track.
 */
.schedule-entry.schedule-entry-expandable:hover,
.schedule-entry.schedule-entry-expandable:focus {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    z-index: 10;
    width: var(--expanded-width) !important;
    inset-inline-start: var(--expanded-left) !important;
}

.schedule-entry:not(.schedule-entry-expandable):hover,
.schedule-entry:not(.schedule-entry-expandable):focus {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    z-index: 10;
}

.schedule-entry-time { font-size: 0.78rem; }
.schedule-entry-label { font-size: 0.78rem; min-width: 0; flex: 1 1 auto; }
.schedule-entry-badge { font-size: 0.65rem; }
.schedule-entry-recurrence { font-size: 0.7rem; opacity: 0.75; }
.schedule-entry-row { overflow: hidden; }

/* Colour bands. Keyed by flg_tipo_agenda, shaded by tipo_area_restricao_codigo. */
.agenda-zones.intensity-low { background-color: #cce7ff; border-color: #66b3ff; color: #0066cc; }
.agenda-zones.intensity-medium { background-color: #66b3ff; border-color: #0066cc; color: white; }
.agenda-zones.intensity-high { background-color: #0066cc; border-color: #004499; color: white; }

.agenda-sites.intensity-low { background-color: #ccf2f0; border-color: #66d9d2; color: #00a693; }
.agenda-sites.intensity-medium { background-color: #66d9d2; border-color: #00a693; color: white; }
.agenda-sites.intensity-high { background-color: #00a693; border-color: #007d70; color: white; }

/*
 * Victim entries are the same red at every intensity, on purpose: a victim
 * exclusion is the highest-consequence thing on this card and must not read as
 * milder because its restriction code happens to be INC.
 */
.agenda-victim.intensity-low,
.agenda-victim.intensity-medium,
.agenda-victim.intensity-high { background-color: #dc3545; border-color: #b02a37; color: white; }

.agenda-biometric.intensity-low { background-color: #ffe6cc; border-color: #ffb366; color: #cc6600; }
.agenda-biometric.intensity-medium { background-color: #ffb366; border-color: #cc6600; color: white; }
.agenda-biometric.intensity-high { background-color: #cc6600; border-color: #994d00; color: white; }

.agenda-alcohol.intensity-low { background-color: #fff5cc; border-color: #ffe066; color: #ccb300; }
.agenda-alcohol.intensity-medium { background-color: #ffe066; border-color: #ccb300; color: #333; }
.agenda-alcohol.intensity-high { background-color: #ccb300; border-color: #998600; color: white; }

.agenda-default.intensity-low { background-color: #e9ecef; border-color: #6c757d; color: #495057; }
.agenda-default.intensity-medium { background-color: #6c757d; border-color: #495057; color: white; }
.agenda-default.intensity-high { background-color: #495057; border-color: #343a40; color: white; }

.badge-light-contrast { background-color: rgba(255, 255, 255, 0.9) !important; color: #333 !important; }
.badge-dark-contrast { background-color: rgba(0, 0, 0, 0.7) !important; color: white !important; }

.schedule-legend-chip { border: 1px solid; }

/*
 * The band classes set an explicit colour, and Bootstrap's icon and heading
 * rules would otherwise override it — in dark mode especially, where the chip
 * keeps its light background but the icon inside it turns pale.
 */
.schedule-legend .badge i,
.schedule-entry i,
[data-bs-theme="dark"] .schedule-legend .badge i,
[data-bs-theme="dark"] .schedule-entry i {
    color: inherit !important;
}

.schedule-timeline h1, .schedule-timeline h2, .schedule-timeline h3,
.schedule-timeline h4, .schedule-timeline h5, .schedule-timeline h6,
[data-bs-theme="dark"] .schedule-timeline h1, [data-bs-theme="dark"] .schedule-timeline h2,
[data-bs-theme="dark"] .schedule-timeline h3, [data-bs-theme="dark"] .schedule-timeline h4,
[data-bs-theme="dark"] .schedule-timeline h5, [data-bs-theme="dark"] .schedule-timeline h6 {
    color: inherit !important;
}

/*
 * Dashed marker at an entry's TRUE end, revealed on hover.
 *
 * A widened chip otherwise misreports how long the curfew is — which on this
 * card is a compliance question, not a cosmetic one.
 */
.actual-end-reference {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #666 0, #666 4px, transparent 4px, transparent 8px);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.3s ease;
}

.schedule-entry-expandable:hover .actual-end-reference,
.schedule-entry-expandable:focus .actual-end-reference {
    opacity: 0.9;
}

[data-bs-theme="dark"] .actual-end-reference {
    background: repeating-linear-gradient(to bottom, #aaa 0, #aaa 4px, transparent 4px, transparent 8px);
}

[dir="rtl"] .schedule-entry {
    transform-origin: right center;
}

@media (prefers-contrast: high) {
    .schedule-entry { border-width: 2px !important; }
    .schedule-entry:focus { outline-width: 3px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .schedule-entry { transition: none; }
    .schedule-entry-expandable:hover { transform: none; }
    .actual-end-reference { transition: none; }
}

/*
 * Recent Activity strip.
 *
 * Three rules the PHP dashboard gets from elsewhere and the Go tier does not:
 * .text-purple lives in flex_grid.css (a 45k-line sheet not on the Go asset
 * list, and not worth pulling in for one colour), and the two font sizes are
 * inline `style` attributes in the PHP card.
 *
 * The purple is copied from flex_grid.css verbatim — including the fact that
 * its dark-mode rule uses the SAME value, so the RF icon does not change colour
 * with the theme.
 */
.text-purple { color: #6f42c1 !important; }

.rf-age-badge { font-size: 0.6rem; }
.rf-chip { font-size: 0.65rem; }