/* Stowe Family Law brand theme over Metronic 8.
   Navy #17243e (site + logo ground), gold #fab600 (logo S accent).
   Loaded AFTER style.bundle.css so the :root overrides win. */

:root {
    --bs-primary: #17243e;
    --bs-primary-rgb: 23, 36, 62;
    --bs-primary-active: #0d1526;
    --bs-primary-light: #e9edf4;
    --bs-primary-light-rgb: 233, 237, 244;
    --bs-primary-inverse: #ffffff;
    --bs-text-primary: #17243e;
    --bs-link-color: #17243e;
    --bs-link-color-rgb: 23, 36, 62;
    --bs-link-hover-color: #0d1526;
    --bs-link-hover-color-rgb: 13, 21, 38;
}

/* Sidebar in brand navy (Metronic default is #1e1e2d) */
[data-kt-app-layout=dark-sidebar] .app-sidebar {
    --bs-app-sidebar-base-bg-color: #17243e;
    background-color: #17243e;
}

/* Sidebar icons in brand gold so they stand out on the navy */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link .menu-icon i {
    color: #fab600;
}

/* Gold accent for the active menu entry, echoing the logo's S */
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active {
    background-color: rgba(255, 255, 255, 0.06);
}
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-title,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout=dark-sidebar] .app-sidebar .menu .menu-item .menu-link:hover .menu-icon i {
    color: #ffd24d;
}

/* Live indicator: small pulsing brand-gold dot */
.seh-live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fab600;
    animation: seh-pulse 2s ease-in-out infinite;
}
@keyframes seh-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(250, 182, 0, 0.5); }
    50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(250, 182, 0, 0); }
}

/* Clickable table rows and cards: data-href navigates, data-detail
   opens the full-record modal. Every data table row should be one. */
tr[data-href], tr[data-detail] { cursor: pointer; }
tr[data-href]:hover > td, tr[data-detail]:hover > td { background-color: #f7f8fb; }
tr[data-href]:focus-visible, tr[data-detail]:focus-visible { outline: 2px solid #17243e; outline-offset: -2px; }
.min-w-0 { min-width: 0; }
.card[data-href] { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card[data-href]:hover { box-shadow: 0 4px 14px rgba(23, 36, 62, 0.10); transform: translateY(-1px); }

/* Focus states tinted navy instead of Metronic blue */
.form-control:focus,
.form-select:focus {
    border-color: #17243e;
    box-shadow: 0 0 0 0.25rem rgba(23, 36, 62, 0.15);
}

/* Code blocks for event detail and payload.
   Own colours rather than Metronic's bg-dark/text-white utilities, and
   its own compositing layer: Safari leaves smeared paint behind when
   scrolling a nested overflow box inside a card that has a shadow,
   which made scrolled payload text unreadable. */
.seh-code {
    margin: 0;
    padding: 14px 16px;
    max-height: 28rem;
    overflow: auto;
    background: #17243e;
    color: #e8ecf4;
    border-radius: 8px;
    font-family: Menlo, Consolas, "SF Mono", monospace;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre;
    tab-size: 2;
    transform: translateZ(0);
    -webkit-overflow-scrolling: touch;
}
.seh-code::selection,
.seh-code ::selection { background: #fab600; color: #17243e; }

/* Tab headers sit flush in a card header */
.nav-line-tabs .nav-link { padding-top: 0.75rem; }