/* ==========================================================================
   modern.css — UI modernization foundation layer (Wave 1)
   Loaded AFTER style.css / resq.css. Re-skins the existing class vocabulary
   with design tokens. Brand palette and logos are fixed — see
   UI-MODERNIZATION.md. Do not edit style.css; override it here.
   ========================================================================== */

:root {
    /* Brand palette (fixed) */
    --rq-blue: #407cbd;
    --rq-blue-dark: #0f4c7d;
    --rq-blue-hover: #156eb5;
    --rq-teal: #89d0c7;
    --rq-teal-hover: #73afa8;
    --rq-gray: #9d9d9d;
    --rq-gray-hover: #909090;
    --rq-red: #c3391e;

    /* Neutrals */
    --rq-border: #dbe1e8;
    --rq-border-strong: #c3cbd7;
    --rq-surface: #ffffff;
    --rq-surface-alt: #f6f8fa;
    --rq-surface-hover: #eef4fa;
    --rq-thead-bg: #eef1f5;
    --rq-text: #2b3440;
    --rq-text-muted: #6b7684;

    /* Shape & depth */
    --rq-radius-sm: 4px;
    --rq-radius: 6px;
    --rq-radius-lg: 10px;
    --rq-shadow-sm: 0 1px 2px rgba(15, 76, 125, 0.08);
    --rq-shadow: 0 2px 8px rgba(15, 76, 125, 0.10);
    --rq-shadow-lg: 0 12px 32px rgba(15, 76, 125, 0.18);
    --rq-focus-ring: 0 0 0 3px rgba(64, 124, 189, 0.30);

    --rq-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    --rq-transition: 0.15s ease;
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

body {
    font-family: var(--rq-font);
    color: var(--rq-text);
    background-color: var(--rq-surface-alt);
    -webkit-font-smoothing: antialiased;
}

/* Sticky footer on the authenticated layout (login page keeps its own layout).
   Fixed/absolute elements (loader, modals, overlay) are out of flow, so making
   the body a flex column only affects header / main / footer. */
body:not(.login-body) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body:not(.login-body) .rq-main {
    flex: 1 0 auto;
}

.app-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--rq-border);
    background: var(--rq-surface);
    color: var(--rq-text-muted);
    font-size: 12px;
    text-align: center;
    padding: 0.85rem 1rem;
    margin-top: 1.5rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rq-font);
    color: var(--rq-blue-dark);
}

a {
    color: var(--rq-blue);
    transition: color var(--rq-transition);
}

a:hover {
    color: var(--rq-blue-dark);
}

/* --------------------------------------------------------------------------
   App header — single bar: logo + nav (markup in MasterInnerLayout.cshtml)
   -------------------------------------------------------------------------- */

.app-header {
    background: var(--rq-surface);
    border-bottom: 1px solid var(--rq-border);
    box-shadow: var(--rq-shadow-sm);
    margin-bottom: 1.25rem;
}

.app-header .app-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    min-height: 60px;
}

/* logoHeader.png is now the 812x255 export from worktime-mobile (@3x), so any
   legacy fixed-box use (style.css .logo-home-image has no background-size)
   must scale it instead of cropping. */
.logo-home-image {
    background-image: url("../Images/logoHeader.png?v=2");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
}

/* Same asset, scaled to fit the slimmer bar */
.app-header .logo-home-image {
    background-image: url("../Images/logoHeader.png?v=2");
    height: 46px;
    width: 116px;
    flex: 0 0 auto;
    display: block;
    float: none;
}

.app-header .navbar {
    flex: 1 1 auto;
    padding: 0;
    background: transparent !important;
}

.app-header .navbar-nav .nav-link {
    color: var(--rq-text);
    font-weight: 500;
    font-size: 14px;
    padding: 1.15rem 0.9rem;
    position: relative;
    transition: color var(--rq-transition);
}

.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus {
    color: var(--rq-blue);
}

.app-header .navbar-nav .nav-link.active {
    color: var(--rq-blue-dark);
    font-weight: 600;
}

/* Active-page underline indicator */
.app-header .navbar-nav .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--rq-blue);
}

.app-header .navbar-nav .fa-home {
    color: var(--rq-blue);
}

/* Collapsed (mobile) menu: stacked panel, indicator becomes a left bar */
@media (max-width: 767.98px) {
    .app-header .app-header-inner {
        flex-wrap: wrap;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .app-header .navbar-nav .nav-link {
        padding: 0.6rem 0.75rem;
    }

    .app-header .navbar-nav .nav-link.active::after {
        left: 0;
        right: auto;
        top: 0.35rem;
        bottom: 0.35rem;
        width: 3px;
        height: auto;
        border-radius: 0 3px 3px 0;
    }
}

/* --------------------------------------------------------------------------
   Buttons — legacy classes re-skinned + Bootstrap harmonized
   -------------------------------------------------------------------------- */

.greenBtn,
.greenBtnInput,
.cancel-btn,
.backBtn,
.reject-btn {
    border-radius: var(--rq-radius);
    font-family: var(--rq-font);
    font-weight: 600;
    border: none;
    box-shadow: var(--rq-shadow-sm);
    transition: background-color var(--rq-transition), box-shadow var(--rq-transition);
    text-decoration: none;
}

.greenBtn:hover,
.greenBtnInput:hover {
    background: var(--rq-teal-hover);
    text-decoration: none;
}

.cancel-btn:hover {
    background: var(--rq-gray-hover);
    text-decoration: none;
}

.greenBtn:focus-visible,
.greenBtnInput:focus-visible,
.cancel-btn:focus-visible,
.backBtn:focus-visible,
.reject-btn:focus-visible,
.btn:focus-visible {
    outline: none;
    box-shadow: var(--rq-focus-ring);
}

.btn {
    border-radius: var(--rq-radius);
    font-weight: 500;
    transition: background-color var(--rq-transition), border-color var(--rq-transition),
        box-shadow var(--rq-transition);
}

.btn-primary {
    background-color: var(--rq-blue);
    border-color: var(--rq-blue);
}

.btn-primary:hover,
.btn-primary:not(:disabled):active {
    background-color: var(--rq-blue-dark);
    border-color: var(--rq-blue-dark);
}

/* --------------------------------------------------------------------------
   Tables — Bootstrap .table and legacy .contentWrap tables
   -------------------------------------------------------------------------- */

/* No border-radius/overflow here: row action dropdowns (e.g. UsersList)
   render inside the table and must not be clipped. */
.table {
    background: var(--rq-surface);
    box-shadow: var(--rq-shadow-sm);
}

.table thead th,
.table .thead-light th {
    background: var(--rq-thead-bg);
    color: var(--rq-blue-dark);
    border-bottom: 2px solid var(--rq-border-strong);
    border-top: none;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.table td {
    border-top: 1px solid var(--rq-border);
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--rq-surface-alt);
}

.table tbody tr:hover {
    background-color: var(--rq-surface-hover);
}

/* Legacy tables built with inline #d1d8e2 headers keep their look but gain
   row hover via the shared contentWrap wrapper. */
.contentWrap table tr:hover td {
    background-color: var(--rq-surface-hover);
}

/* --------------------------------------------------------------------------
   .rq-table — quiet data table (ops-center institutions style): unfilled
   uppercase headers, hairline row dividers, no zebra, tabular numerals.
   Opt-in via <table class="table rq-table">.
   -------------------------------------------------------------------------- */

.table.rq-table {
    box-shadow: none;
    margin-bottom: 0;
}

.table.rq-table thead th {
    background: transparent;
    color: var(--rq-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: none;
    border-bottom: 1px solid var(--rq-border);
    padding: 0.5rem 0.625rem;
}

/* Sortable column headers (Ajax.ActionLink on Users/Organizations lists)
   keep the quiet header look instead of link blue. */
.table.rq-table thead th a {
    color: inherit;
    text-decoration: none;
}

.table.rq-table thead th a:hover {
    color: var(--rq-blue-dark);
}

/* border:none first: WorkTime/Hours render this partial where .contentWrap
   would otherwise draw a full 1px grid on every cell. */
.table.rq-table td {
    border: none;
    border-top: 1px solid var(--rq-border);
    padding: 0.55rem 0.625rem;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
}

/* Week group header: a muted section label, not a data row. */
.table.rq-table .rq-week-row td {
    background: var(--rq-surface-alt);
    color: var(--rq-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: left;
    padding: 0.4rem 0.625rem;
}

.table.rq-table .rq-total-row td {
    font-weight: 600;
    color: var(--rq-blue-dark);
}

/* Group/summary rows are not interactive — suppress the .table row hover. */
.table.rq-table .rq-week-row:hover td {
    background-color: var(--rq-surface-alt);
}

.table.rq-table .rq-total-row:hover td {
    background-color: transparent;
}

/* Secondary line inside a cell (edit context/original values) — matches the
   ops-center two-line cell: small and muted under the primary value. */
.table.rq-table td .small {
    color: var(--rq-text-muted);
    font-size: 12px;
}

/* Legacy report tables (.logTable: Hours/Violations/Authentication lists;
   .resultTable: Compliance report). They ship no stylesheet of their own, so
   this gives them the same quiet look as .rq-table without touching the
   eight partials that share the markup. */
.logTable,
.resultTable {
    width: 100%;
    border-collapse: collapse;
    background: var(--rq-surface);
    font-size: 14px;
    color: var(--rq-text);
}

.logTable th,
.resultTable th {
    background: transparent;
    color: var(--rq-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    border-bottom: 1px solid var(--rq-border);
    padding: 0.5rem 0.625rem;
    text-align: left;
    vertical-align: middle;
}

.logTable th a,
.resultTable th a {
    color: inherit;
    text-decoration: none;
}

.logTable th a:hover,
.resultTable th a:hover {
    color: var(--rq-blue-dark);
}

.logTable td,
.resultTable td {
    border: none;
    border-top: 1px solid var(--rq-border);
    padding: 0.55rem 0.625rem;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.logTable tr:hover td,
.resultTable tr:hover td {
    background-color: var(--rq-surface-hover);
}

/* The report partials render .logTable with no wrapper element, so on narrow
   screens the table itself becomes the horizontal scroll container instead of
   widening the page. */
@media (max-width: 767.98px) {
    .logTable {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-control,
select,
input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    border-radius: var(--rq-radius);
    border: 1px solid var(--rq-border-strong);
    font-family: var(--rq-font);
    transition: border-color var(--rq-transition), box-shadow var(--rq-transition);
}

.form-control:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: var(--rq-blue);
    box-shadow: var(--rq-focus-ring);
    outline: none;
}

label {
    font-weight: 500;
    color: var(--rq-text);
}

/* --------------------------------------------------------------------------
   Pagination (legacy .pagination ul/li markup)
   -------------------------------------------------------------------------- */

.pagination li {
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-sm);
    margin-right: 6px;
    overflow: hidden;
    background: var(--rq-surface);
    transition: border-color var(--rq-transition);
}

.pagination li a {
    color: var(--rq-blue-dark);
    transition: background-color var(--rq-transition);
}

.pagination li a:hover {
    background: var(--rq-surface-hover);
}

.pagination li .sel {
    background: var(--rq-blue);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Modals & legacy popups
   -------------------------------------------------------------------------- */

.modal-content {
    border: none;
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-lg);
}

.modal-header {
    border-bottom: 1px solid var(--rq-border);
}

.modal-header .modal-title {
    color: var(--rq-blue-dark);
    font-weight: 600;
}

.popup-wrap {
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-lg);
}

/* Legacy overlay popups (.overlay_form system) — modernized visuals only.
   The JS wiring (popupctrlId/positionPopup in page scripts) is unchanged;
   full migration to Bootstrap modals is tracked as Wave 4b. */
.overlay_form,
.overlay_form1,
.overlay_formImg {
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-lg);
    padding: 1.25rem;
    z-index: 1050;
}

.background_overlay {
    background: rgba(15, 39, 60, 0.55);
    opacity: 1;
    z-index: 1040;
}

/* Legacy .popup-wrap h2 paints a solid #407cbd banner with white text;
   override background AND color together or the title goes blue-on-blue. */
.overlay_form h2,
.overlay_form1 h2,
.popup-wrap h2,
.popup-wrap1 h2 {
    color: var(--rq-blue-dark);
    background: none;
    font-size: 16px;
    font-weight: 600;
    border-bottom: 1px solid var(--rq-border);
    padding: 0 0 0.6rem 0;
    margin: 0 0 0.75rem 0;
}

.pgy-btn-wrap {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding-top: 0.75rem;
}

.popuptable tr td,
.popuptable1 tr td,
.popuptable2 tr td {
    padding: 6px 8px;
}

/* --------------------------------------------------------------------------
   List-page toolbar (Wave 3) — search + filters + primary actions in one card
   above the table. Reference implementation: Views/Users/Index.cshtml.
   -------------------------------------------------------------------------- */

.rq-toolbar {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rq-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Search group stays compact instead of spanning the page */
.rq-toolbar .rq-search {
    flex: 1 1 260px;
    max-width: 420px;
}

/* Actions cluster to the right edge */
.rq-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Filter clusters: label + controls read as one unit */
.rq-filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 0.25rem 0.75rem;
    border-left: 3px solid var(--rq-border);
}

/* Variant without the leading rule — for dropdown filters at the row start */
.rq-filter-group--plain {
    border-left: none;
    padding-left: 0;
}

.rq-filter-group > .rq-filter-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rq-text-muted);
    margin: 0;
}

/* Selects inside filter groups size to content so the label sits inline-left,
   matching the header Institution selector (Bootstrap's .form-control is
   width:100%, which pushed the select onto its own line). */
.rq-filter-group select.form-control {
    width: auto;
    max-width: 300px;
}

/* Global AJAX loading pill (#imgloaderIndex in MasterInnerLayout) */
.rq-loader {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: 999px;
    box-shadow: var(--rq-shadow);
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--rq-blue-dark);
}

.rq-loader-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid var(--rq-border-strong);
    border-top-color: var(--rq-blue);
    border-radius: 50%;
    animation: rq-spin 0.7s linear infinite;
}

@keyframes rq-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .rq-loader-spinner {
        animation-duration: 1.6s;
    }
}

/* Empty state used by list partials (.noData) */
.noData {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--rq-text-muted);
    background: var(--rq-surface);
    border: 1px dashed var(--rq-border-strong);
    border-radius: var(--rq-radius);
}

/* --------------------------------------------------------------------------
   Alpine.js
   -------------------------------------------------------------------------- */

/* Hide Alpine-managed elements until Alpine initializes (prevents FOUC) */
[x-cloak] {
    display: none !important;
}

/* Modernized tab strip (overrides legacy .tab-menu blocks) */
.tab-menu li {
    background: transparent;
    border-radius: var(--rq-radius) var(--rq-radius) 0 0;
    margin-right: 2px;
}

.tab-menu li a {
    color: var(--rq-text-muted);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: color var(--rq-transition), border-color var(--rq-transition);
}

.tab-menu li a:hover {
    background: var(--rq-surface-hover);
    color: var(--rq-blue);
}

.tab-menu li.active {
    background: transparent !important;
}

.tab-menu li.active a {
    color: var(--rq-blue-dark);
    font-weight: 600;
    border-bottom-color: var(--rq-blue);
}

/* --------------------------------------------------------------------------
   Login / outer pages (Wave 6)
   -------------------------------------------------------------------------- */

/* Center the login card in the viewport so the tinted background shows on all
   sides (it used to sit flush against the top edge). */
.login-body {
    background: var(--rq-surface-alt);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 1rem;
}

.login-body .container {
    max-width: 560px;
}

/* Logo now lives inside the white login card (#loginTabContent), so it needs
   no tile treatment — its opaque white background blends into the card. */
.login-logo {
    display: block;
    width: 200px;
    max-width: 70%;
    height: auto;
    margin: 0 auto 1.5rem;
}

.login-body .tab-content {
    border: 1px solid var(--rq-border) !important;
    border-radius: var(--rq-radius-lg);
    background: var(--rq-surface);
    box-shadow: var(--rq-shadow);
}

/* Brand-align the login actions (view markup uses btn-success) */
.login-body .btn-success {
    background-color: var(--rq-blue);
    border-color: var(--rq-blue);
}

.login-body .btn-success:hover,
.login-body .btn-success:not(:disabled):active {
    background-color: var(--rq-blue-dark);
    border-color: var(--rq-blue-dark);
}

.login-body .code-digit:focus {
    border-color: var(--rq-blue);
    box-shadow: var(--rq-focus-ring);
}

.login-body .info-box {
    background-color: var(--rq-surface-hover);
    border-left-color: var(--rq-blue);
}

.login-body .info-box strong {
    color: var(--rq-blue-dark);
}

.login-body .back-link,
.login-body .login-footer a {
    color: var(--rq-blue);
}

/* --------------------------------------------------------------------------
   Dashboard KPI tiles (Home/Dashboard.cshtml .dashboard-tile)
   resq.css gives these a jarring 2px solid black border on hover; make them
   proper brand cards. Keep border width constant (1px) hover/rest so the
   grid doesn't shift. margin uses the Bootstrap gutter, verified in harness
   not to wrap the 5-tile row.
   -------------------------------------------------------------------------- */

.dashboard-tile {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
    padding: 1.1rem 0.75rem;
    margin: 0 6px;
    transition: box-shadow var(--rq-transition), transform var(--rq-transition),
        border-color var(--rq-transition);
}

.dashboard-tile:first-child { margin-left: 0; }
.dashboard-tile:last-child { margin-right: 0; }

.dashboard-tile:hover {
    background: var(--rq-surface);
    border: 1px solid var(--rq-blue);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow);
    transform: translateY(-2px);
}

/* Dashboard full-screen loading overlay (was hardcoded Bootstrap #007bff) */
.rq-spinner {
    color: var(--rq-blue);
}

.rq-loading-text {
    color: var(--rq-blue-dark);
    font-weight: 500;
}

/* The big metric number and its label */
.dashboard-tile .h1 {
    color: var(--rq-blue-dark);
    font-weight: 700;
}

.dashboard-tile .h4,
.dashboard-tile .h6 {
    color: var(--rq-text-muted);
    font-size: 0.95rem;
    font-weight: 600;
}

/* Metric tiles are laid out in Bootstrap columns on the User detail page;
   give them vertical breathing room when they wrap. */
.col-md-3 > .dashboard-tile,
.col-sm-12 > .dashboard-tile {
    height: 100%;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Cards (Reports index report-launcher, Programs settings, etc.)
   -------------------------------------------------------------------------- */

.card {
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
}

.card-header {
    background: var(--rq-thead-bg);
    border-bottom: 1px solid var(--rq-border);
    color: var(--rq-blue-dark);
    font-weight: 600;
    border-radius: var(--rq-radius-lg) var(--rq-radius-lg) 0 0;
}

/* Reports index lists report links inline with no separation; making each
   .card-link a full-width block turns them into scannable rows. (No flex on
   .card-body — that would shrink table/content children in other cards.) */
.card-body .card-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.25rem;
    border-radius: var(--rq-radius-sm);
    border-bottom: 1px solid var(--rq-border);
    transition: background-color var(--rq-transition), padding-left var(--rq-transition);
}

.card-body .card-link:last-child {
    border-bottom: none;
}

.card-body .card-link:hover {
    background: var(--rq-surface-hover);
    padding-left: 0.6rem;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Misc chrome
   -------------------------------------------------------------------------- */

.badge {
    font-weight: 500;
    border-radius: var(--rq-radius-sm);
}

.alert {
    border-radius: var(--rq-radius);
    border: none;
    box-shadow: var(--rq-shadow-sm);
}

/* --------------------------------------------------------------------------
   Header right-side actions — the overflow "⋮" menu (Profile, Logout, and for
   superadmins Institutions + Organizations) — see Menu.cshtml
   -------------------------------------------------------------------------- */

.rq-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

/* Global institution selector (superadmin only) — sits between the nav links
   and the Profile/Logout buttons. Same filter-group look as the list toolbars. */
.rq-header-institution {
    flex-wrap: nowrap;
    margin-right: 0.75rem;
    padding-right: 0;
}

/* Dashboard analytics panels — white cards around the top-5 tables and
   Google Charts, same treatment as .rq-report-results on the Reports page. */
.rq-panel {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    height: 100%;
}

.rq-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--rq-blue-dark);
    margin: 0 0 0.75rem 0;
}

/* Bottom gap when panel columns wrap (mobile single-column) */
.rq-dashboard-panels > [class*="col-"] {
    margin-bottom: 1.25rem;
}

/* Dashboard Program selector row — mirrors the header Institution selector */
.rq-dashboard-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1.25rem 0;
}

.rq-dashboard-filter #selectProgram {
    width: auto;
    max-width: 340px;
}

.rq-header-institution select {
    max-width: 260px;
}

/* Pages that depend on query params (User detail) lock the selector */
.rq-header-institution select:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

@media (max-width: 767.98px) {
    /* Inside the collapsed hamburger menu the selector stacks under the links */
    .rq-header-institution {
        margin: 0.5rem 0;
    }
}

.app-header .btn-outline-primary {
    color: var(--rq-blue);
    border-color: var(--rq-blue);
}

.app-header .btn-outline-primary:hover,
.app-header .btn-outline-primary.active {
    background-color: var(--rq-blue);
    border-color: var(--rq-blue);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Work Time Report (Reports/Index) — bring the report builder into the app
   scheme: white sidebar card, brand segmented control, app-styled results.
   -------------------------------------------------------------------------- */

.rq-report-sidebar {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
    padding: 1rem;
}

.rq-report-sidebar .h4 {
    font-size: 1.05rem;
    color: var(--rq-blue-dark);
    font-weight: 600;
}

.rq-report-sidebar .h6 {
    color: var(--rq-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 12px;
    margin-bottom: 0.35rem;
}

/* Segmented control choosing the report grouping (Programs/Levels/…) */
.rq-segmented .btn {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border-strong);
    color: var(--rq-text-muted);
    box-shadow: none;
    font-weight: 500;
}

.rq-segmented .btn:hover {
    background: var(--rq-surface-hover);
    color: var(--rq-blue);
}

.rq-segmented .btn.active,
.rq-segmented .btn.active:hover {
    background: var(--rq-blue);
    border-color: var(--rq-blue);
    color: #fff;
    box-shadow: none;
}

.rq-segmented .btn .fas {
    margin-right: 5px;
}

/* One horizontal control panel above a full-width results table.
   Line 1: Programs / Institution selectors. Line 2: Date Range, Last 30 Days,
   Run Report, Export Excel, and the grouping segmented control — all aligned.
   The two <form>s use display:contents so their controls become flex items of
   the panel (letting cross-form controls share one flex row). */
.rq-report-panel {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
}

.rq-report-form,
.rq-report-export {
    display: contents;
}

/* Selectors flow inline with the rest of the controls (no forced line break) */
.rq-report-selectors {
    flex: 0 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
    margin: 0;
}

.rq-report-panel .rq-filter-block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.rq-report-panel .rq-filter-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rq-text-muted);
    margin: 0;
}

.rq-report-panel select[multiple] {
    min-width: 220px;
}

.rq-report-panel .input-daterange {
    width: auto;
}

.rq-report-panel .input-daterange .form-control {
    width: 110px;
    flex: 0 0 auto;
}

/* Keep the checkbox and buttons on the control row bottom-aligned with the
   date inputs (the taller controls set the baseline). */
.rq-filter-check {
    display: flex;
    align-items: center;
    padding-bottom: 0.45rem;
}

.rq-filter-check .form-check {
    padding-left: 1.5rem;
    margin: 0;
}

.rq-filter-actions {
    display: flex;
    align-items: flex-end;
}

.rq-report-panel .rq-segmented {
    margin-bottom: 0;
}

/* Report title above the full-width results */
.rq-report-header-row {
    margin-bottom: 0.75rem;
}

.rq-report-titles .h4 {
    color: var(--rq-blue-dark);
    margin: 0;
}

.rq-report-titles .h6 {
    color: var(--rq-text-muted);
    margin: 0;
}

/* Results panel wraps the Google Charts table in a white card; wide tables
   scroll inside it so the page body never scrolls sideways. */
.rq-report-results {
    background: var(--rq-surface);
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-sm);
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
}

/* Google Charts sizes its wrapper to the table's natural width; force both to
   fill the results panel so the table spans the full container width. */
#logList .google-visualization-table,
#logList .google-visualization-table > div {
    width: 100% !important;
}

/* Restyle the Google Charts Table to match the app's tables */
#logList .google-visualization-table-table {
    width: 100% !important;
    font-family: var(--rq-font) !important;
    font-size: 14px !important;
    border-collapse: collapse !important;
    font-variant-numeric: tabular-nums;
}

#logList .google-visualization-table-tr-head,
#logList .google-visualization-table-th {
    background: transparent !important;
    background-image: none !important;
    color: var(--rq-text-muted) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none !important;
    border-bottom: 1px solid var(--rq-border) !important;
    padding: 8px 10px !important;
    white-space: nowrap;
}

#logList .google-visualization-table-th:hover {
    color: var(--rq-blue-dark) !important;
}

#logList .google-visualization-table-td {
    border: none !important;
    border-top: 1px solid var(--rq-border) !important;
    padding: 9px 10px !important;
    color: var(--rq-text) !important;
}

#logList .google-visualization-table-tr-even,
#logList .google-visualization-table-tr-odd {
    background: var(--rq-surface) !important;
}

#logList .google-visualization-table-tr-over td {
    background: var(--rq-surface-hover) !important;
}

/* Charts table pager buttons */
#logList .google-visualization-table-div-page {
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   Table row action button (Users list "⋮" menu) — replaces the old bordered
   grey dropdown-toggle with a clean, borderless icon affordance.
   -------------------------------------------------------------------------- */

.rq-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--rq-text-muted);
    border-radius: 50%;
    line-height: 1;
    transition: background-color var(--rq-transition), color var(--rq-transition);
}

.rq-row-action:hover,
.rq-row-action:focus,
.rq-row-action[aria-expanded="true"] {
    background: var(--rq-surface-hover);
    color: var(--rq-blue);
    box-shadow: none;
}

.rq-row-action:focus-visible {
    box-shadow: var(--rq-focus-ring);
}

/* Drop Bootstrap's caret triangle — the ellipsis icon is the affordance */
.rq-row-action.dropdown-toggle::after {
    display: none;
}

/* --------------------------------------------------------------------------
   Dropdown menus (Users row-action "⋮" popup, and any future .dropdown-menu)
   — stock Bootstrap 4 menus are square, flat, and cramped. Rounded card with
   real depth, padded items with hover pills, aligned icons, softened danger.
   -------------------------------------------------------------------------- */

.dropdown-menu {
    border: 1px solid var(--rq-border);
    border-radius: var(--rq-radius-lg);
    box-shadow: var(--rq-shadow-lg);
    padding: 0.375rem;
    min-width: 12rem;
    font-size: 14px;
}

.dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: var(--rq-radius);
    color: var(--rq-text);
    font-weight: 500;
    transition: background-color var(--rq-transition), color var(--rq-transition);
}

/* Fixed-width icon slot so labels align regardless of glyph width
   (spacing itself still comes from the markup's mr-2) */
.dropdown-menu .dropdown-item .fas,
.dropdown-menu .dropdown-item .far {
    width: 1.25em;
    text-align: center;
    color: var(--rq-text-muted);
    transition: color var(--rq-transition);
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--rq-surface-hover);
    color: var(--rq-blue-dark);
}

.dropdown-menu .dropdown-item:hover .fas,
.dropdown-menu .dropdown-item:focus .fas {
    color: var(--rq-blue);
}

.dropdown-menu .dropdown-item:active {
    background: var(--rq-blue);
    color: #fff;
}

.dropdown-menu .dropdown-item:active .fas {
    color: #fff;
}

.dropdown-menu .dropdown-item.disabled {
    color: var(--rq-text-muted);
    opacity: 0.55;
}

/* Destructive action: brand red, soft red hover instead of the grey pill.
   (!important needed to beat Bootstrap's .text-danger !important.) */
.dropdown-menu .dropdown-item.text-danger {
    color: var(--rq-red) !important;
}

.dropdown-menu .dropdown-item.text-danger .fas {
    color: var(--rq-red);
}

.dropdown-menu .dropdown-item.text-danger:hover,
.dropdown-menu .dropdown-item.text-danger:focus {
    background: rgba(195, 57, 30, 0.08);
}

.dropdown-menu .dropdown-item.text-danger:active {
    background: var(--rq-red);
    color: #fff !important;
}

.dropdown-menu .dropdown-item.text-danger:active .fas {
    color: #fff;
}

.dropdown-menu .dropdown-divider {
    border-top-color: var(--rq-border);
    margin: 0.375rem 0.25rem;
}

/* .table-responsive's overflow clips an open row menu on short lists (a
   two-row WorkZones or API-key list can't show a five-item menu). Release
   the clip only while a menu is open; browsers without :has() keep today's
   clipping behavior. */
.table-responsive:has(.dropdown-menu.show) {
    overflow: visible;
}

/* Users list on narrow screens: the inline table-layout:fixed + width:100%
   crams all five columns into the viewport, so the avatar overlaps the name and
   the username truncates to "t...". Let the table size to its content and
   scroll horizontally inside .table-responsive instead. */
@media (max-width: 767.98px) {
    #userList table {
        table-layout: auto !important;
        width: auto !important;
        min-width: 100%;
    }

    #userList th,
    #userList td {
        width: auto !important;
    }

    /* Give the name/username cells room so their content isn't clipped */
    #userList td[onclick] {
        overflow: visible !important;
        text-overflow: clip !important;
        padding-right: 1rem;
    }
}

/* --------------------------------------------------------------------------
   Compact inline date-range filter (User detail "Recorded Shifts") — keeps the
   date inputs from stretching full width and puts "Last 30 Days" beside them.
   -------------------------------------------------------------------------- */

.rq-daterange-filter {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1rem;
}

.rq-daterange-filter .input-daterange {
    width: auto;
    max-width: 340px;
}

.rq-daterange-filter .form-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-left: 0;
}

.rq-daterange-filter .form-check-input {
    position: static;
    margin: 0;
}

/* Reports: centered title + date selector sitting above the full-width table */
.rq-report-caption {
    margin: 0.25rem 0 0.75rem;
}

.rq-report-caption .h4 {
    color: var(--rq-blue-dark);
    margin-bottom: 0.15rem;
}

.rq-report-caption .h6 {
    color: var(--rq-text-muted);
    margin-bottom: 0.75rem;
}

/* Program / Institution multi-selects in the Reports toolbar filter groups */
.rq-toolbar .rq-filter-group select[multiple] {
    min-width: 200px;
}