/*
 * Story 0132 — Violation navigation: card delineation, sticky jump strip,
 * anchor-scroll highlight.
 *
 * Plain-CSS layer registered via FilamentAsset (AppServiceProvider), same
 * route as topnav-compaction.css (story 0078) and cases-coloring.css
 * (story 0080) — the project has no custom Filament theme/Tailwind build,
 * so utility classes not present in Filament's precompiled stylesheet
 * (sticky positioning, scroll-margin, left-border banding) live here as
 * named classes instead.
 *
 * Status buckets (see ViewCase::violationStatusBucket()):
 *   open    — any "Open - *" except Past Due  → amber
 *   pastdue — "Open - Past Due"               → red
 *   closed  — "Closed"                        → emerald
 *   none    — no status                       → gray
 */

/* ---- per-violation card ---- */

.vio-card {
    /* Keep the sticky jump strip + Filament topbar from covering the
       card when an anchor scroll lands on it. */
    scroll-margin-top: 8.5rem;
    border-left-width: 4px;
}

.vio-card-open    { border-left-color: rgb(217 119 6); }   /* amber-600  */
.vio-card-pastdue { border-left-color: rgb(220 38 38); }   /* red-600    */
.vio-card-closed  { border-left-color: rgb(5 150 105); }   /* emerald-600 */
.vio-card-none    { border-left-color: rgb(107 114 128); } /* gray-500   */

/* Anchor-scroll highlight pulse — added/removed by JS on deep-link land
   and jump-chip click. */
.vio-anchor-flash {
    transition: box-shadow 0.4s ease;
    box-shadow: 0 0 0 3px rgb(245 158 11 / 0.75); /* amber-500 ring */
}

/* ---- card header band ---- */

.vio-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: -1rem -1rem 0.75rem -1rem; /* bleed to card edges (card has p-4) */
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgb(107 114 128 / 0.25);
    border-top-left-radius: 0.4rem;
    border-top-right-radius: 0.5rem;
}

.vio-band-open    { background: rgb(217 119 6 / 0.12); }
.vio-band-pastdue { background: rgb(220 38 38 / 0.12); }
.vio-band-closed  { background: rgb(5 150 105 / 0.12); }
.vio-band-none    { background: rgb(107 114 128 / 0.10); }

.vio-band-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.vio-band-counter {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.vio-band-shortid {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Operator UAT 2026-06-10: shortIds were too small to read. */
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Operator UAT 2026-06-10 round 5 — status conveyed by the BORDER color
   only; text stays black + bold for legibility (colored fonts and
   tinted fills both read poorly, e.g. gold-on-gold). */
.vio-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    background: transparent;
    border: 2px solid rgb(107 114 128);
    color: rgb(17 24 39); /* near-black */
}

.vio-status-pill-open    { border-color: rgb(202 138 4); }
.vio-status-pill-pastdue { border-color: rgb(220 38 38); }
.vio-status-pill-closed  { border-color: rgb(22 163 74); }
.vio-status-pill-none    { border-color: rgb(107 114 128); }

/* Dark mode — keep the text legible (light), border carries the status. */
.dark .vio-status-pill          { color: rgb(243 244 246); }
.dark .vio-status-pill-open     { border-color: rgb(250 204 21); }
.dark .vio-status-pill-pastdue  { border-color: rgb(248 113 113); }
.dark .vio-status-pill-closed   { border-color: rgb(74 222 128); }
.dark .vio-status-pill-none     { border-color: rgb(156 163 175); }

/* prev / next traversal buttons */

.vio-band-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.vio-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(107 114 128 / 0.4);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    background: transparent;
}

.vio-nav-btn:hover:not(:disabled) { background: rgb(107 114 128 / 0.15); }

.vio-nav-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ---- sticky jump strip ---- */

.vio-jump-strip {
    position: sticky;
    /* Filament topbar is 4rem; small breathing gap below it. */
    top: 4.25rem;
    z-index: 15;
    display: flex;
    align-items: center;
    /* Operator UAT 2026-06-10: single row that scrolls horizontally on
       overflow — wrapping ate vertical space on many-violation cases. */
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(107 114 128 / 0.3);
    border-radius: 0.5rem;
    background: rgb(255 255 255);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
}

.dark .vio-jump-strip { background: rgb(24 24 27); }

.vio-strip-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-right: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.vio-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    border: 2px solid rgb(107 114 128);
    /* Operator UAT 2026-06-10: bumped from 0.72rem — IDs were too small. */
    font-size: 0.9rem;
    /* Round 5 — heavier weight + near-black text for legibility. */
    font-weight: 700;
    color: rgb(17 24 39);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    cursor: pointer;
    background: transparent;
    white-space: nowrap;
    flex-shrink: 0;
}

.dark .vio-chip { color: rgb(243 244 246); }

.vio-chip:hover { background: rgb(107 114 128 / 0.12); }

/* Scroll-spy active chip — toggled by IntersectionObserver JS. Uses a
   filled amber background to mark the in-view card, overriding the
   status border. */
.vio-chip-active {
    border-color: rgb(245 158 11);
    background: rgb(245 158 11 / 0.2);
}

/* Operator UAT 2026-06-10 round 5 — status conveyed by chip BORDER color
   (round 3 used font color, but colored text on the dark strip read
   poorly; black bold text + colored border is legible):
   gold = open, red = past due, green = closed, gray = no status. */
.vio-chip-open    { border-color: rgb(202 138 4); }
.vio-chip-pastdue { border-color: rgb(220 38 38); }
.vio-chip-closed  { border-color: rgb(22 163 74); }
.vio-chip-none    { border-color: rgb(107 114 128); }

.dark .vio-chip-open    { border-color: rgb(250 204 21); }
.dark .vio-chip-pastdue { border-color: rgb(248 113 113); }
.dark .vio-chip-closed  { border-color: rgb(74 222 128); }
.dark .vio-chip-none    { border-color: rgb(156 163 175); }