/* ============================================================================
   Modern UI enhancements — tables, row hover, animations, skeleton shimmer.
   Scoped to the app's custom grid tables (div.table with .table-head/.table-body)
   so Bootstrap <table class="table"> elements are NOT affected.
   Brand: NJ TRANSIT navy #1A2B57 / orange #F58220.
   ============================================================================ */
:root {
    --rf-navy: #1A2B57;
    --rf-orange: #F58220;
    --rf-row-hover: rgba(26, 43, 87, 0.06);
    --rf-border: rgba(0, 0, 0, 0.08);
}

/* ---- #1 Modern table shell ---- */
div.table {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    border: 1px solid var(--rf-border);
}

.table .table-head {
    font-weight: 700;
    background: var(--rf-navy);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    letter-spacing: .2px;
}
    .table .table-head > div,
    .table .table-head > div span {
        color: #fff;
    }
    /* keep the header column separators subtle on the dark header */
    .table .table-head > div:not(:last-child) {
        border-right: 1px solid rgba(255,255,255,0.15);
    }

/* zebra striping for readability */
.table .table-body:nth-of-type(even) {
    background-color: rgba(26, 43, 87, 0.025);
}

/* ---- #2 Row hover: color the ENTIRE row (all cells together) ---- */
.table .table-body {
    transition: background-color .15s ease, box-shadow .15s ease;
}
.table .table-body:hover {
    background-color: var(--rf-row-hover) !important;
    box-shadow: inset 4px 0 0 var(--rf-orange);
}
    .table .table-body:hover > div {
        color: var(--rf-navy) !important;
    }
    /* keep the last-cell "details" link readable on hover */
    .table .table-body:hover > div:last-child {
        color: var(--rf-orange) !important;
    }

/* ---- #3 Animations ---- */
/* gentle fade-in for freshly rendered table bodies / cards */
@keyframes rf-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
.rf-fade-in { animation: rf-fade-in .25s ease both; }

/* buttons get a subtle lift on hover */
.btn {
    transition: background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.btn:active { transform: translateY(0); box-shadow: none; }

/* respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .rf-fade-in, .btn, .table .table-body { animation: none !important; transition: none !important; }
}

/* ---- #4 Skeleton shimmer — generic block placeholders.
   NOTE: LoadingSkeleton.razor already ships its own shimmer on .rf-skeleton-row;
   .rf-skeleton (its container) is deliberately NOT targeted here to avoid clobbering it. ---- */
.rf-skeleton-box,
.skeleton-box,
.loading-skeleton .skeleton {
    background: linear-gradient(90deg, #eceff3 25%, #f6f8fa 37%, #eceff3 63%);
    background-size: 400% 100%;
    animation: rf-shimmer 1.4s ease infinite;
    border-radius: 6px;
}
@keyframes rf-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

/* ---- #8 App footer ---- */
.rf-footer {
    text-align: center;
    padding: 14px 8px;
    color: #6b7280;
    font-size: .82rem;
    border-top: 1px solid var(--rf-border);
}
.rf-footer a { color: var(--rf-navy); text-decoration: none; }
.rf-footer a:hover { text-decoration: underline; }

/* ============================================================================
   #4 Responsive foundation — desktop / tablet / mobile. Additive, mobile-first
   touch + layout improvements. Breakpoints: tablet <=1024px, mobile <=640px.
   ============================================================================ */

/* Comfortable touch targets on touch devices */
@media (hover: none) and (pointer: coarse) {
    .btn, button, .nav-link, a.btn { min-height: 44px; }
    select, input[type="text"], input[type="search"], input[type="date"], input[type="email"], input[type="password"] {
        min-height: 42px; font-size: 16px; /* 16px avoids iOS zoom-on-focus */
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .content, .main-div { padding-left: 1rem !important; padding-right: 1rem !important; }
    div.table { font-size: .92rem; }
}

/* Mobile */
@media (max-width: 640px) {
    .content, .main-div { padding-left: .6rem !important; padding-right: .6rem !important; }

    /* full-width form controls + buttons stack */
    .input-group, .validate-input { width: 100% !important; }
    .table-controls .btn, .table-controls button { width: 100%; margin: 4px 0 !important; }

    /* NOTE: the app already collapses .table to a single column below 861px (app.css);
       we deliberately don't override that mobile table strategy here. */

    /* dialogs/modals fit the viewport */
    .modal_content, .rf-session-modal, .modal-content { width: calc(100vw - 1.5rem) !important; max-width: none !important; }

    /* tighter headings */
    h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.15rem; }

    .rf-footer { font-size: .76rem; padding: 12px 6px; }
}

/* Respect notches / safe areas on mobile */
@supports (padding: max(0px)) {
    .rf-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}