/* ============================================================
   Smart Hiring — branded auth pages
   Used by: admin/hr/candidate login, password recovery, etc.
   ============================================================ */

:root {
    --rv-navy: #1a3c6e;
    --rv-navy-dark: #14305a;
    --rv-bg: #eef1f5;
    --rv-card: #ffffff;
    --rv-border: #e3e8ef;
    --rv-border-strong: #c7d0db;
    --rv-muted: #6b7280;
    --rv-text: #1f2937;
    --rv-input-bg: #f4f7fb;
    /* --rv-pill-bg is used by nav hover, dropdown active, breadcrumb hover,
       etc. It tracks the brand color via --rv-navy-tint (set per-request
       in partials/brand-style.blade.php). Hard-coded fallback for first
       paint before the brand-style block runs. */
    --rv-navy-tint: #e7eefb;
    --rv-pill-bg: var(--rv-navy-tint);
    --rv-error: #dc2626;
    --rv-error-bg: #fef2f2;
    --rv-success-bg: #ecfdf5;
    --rv-success-border: #a7f3d0;
    --rv-success-text: #065f46;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    /* Belt-and-suspenders: stops any rogue wide child from pushing the
       body past the viewport on narrow screens (data tables with long
       cell content, etc.). The page-level overflow control means the
       offending element itself stays clipped/scrollable instead of
       dragging the whole layout sideways. */
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--rv-font-system);
    background: var(--rv-bg);
    color: var(--rv-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------- Header ----------
   Neutral white header (was previously branded navy) so the brand color
   doesn't repaint the chrome of every page — keeps the logo + UI elements
   readable regardless of which color the admin picks in Branding.
   Shared by all four layouts (app / dashboard / auth / candidate) via the
   .rv-header class, so a single rule covers admin, HR, candidate, and
   interviewer surfaces. */
.rv-header {
    background: #fff;
    color: var(--rv-text);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--rv-border);
}
.rv-header-inner { max-width: 1200px; margin: 0 auto; }
.rv-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.rv-header-brand { min-width: 0; }
.rv-brand-name {
    font-family: var(--rv-font-brand);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: .04em;
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--rv-navy);
}
.rv-brand-sub {
    font-size: .7rem;
    letter-spacing: .25em;
    opacity: 1;
    color: var(--rv-muted);
    margin-top: .15rem;
    text-transform: uppercase;
}

/* Header right side — bell + profile */
.rv-header-actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

/* Bell button — sits on the now-white header, so borders/colors flipped
   from the old white-on-navy scheme to muted-grey-on-white. */
.rv-bell .rv-bell-btn {
    position: relative;
    width: 40px; height: 40px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--rv-border);
    color: var(--rv-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rv-bell .rv-bell-btn:hover {
    background: rgba(var(--rv-navy-rgb), .06);
    border-color: var(--rv-navy);
    color: var(--rv-navy);
}
.rv-bell-badge {
    position: absolute;
    top: -4px; right: -4px;
    box-sizing: border-box;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    border: 2px solid #fff;             /* match the now-white header bg */
    /* Flex-center the count so the border + box-sizing don't push the
       digit off-center (line-height centering breaks under border-box). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rv-bell-menu {
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 1rem 2rem rgba(0,0,0,.15);
    overflow: hidden;
}
.rv-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .9rem;
    border-bottom: 1px solid #e5e7eb;
    color: var(--rv-navy);
    font-size: .92rem;
}
/* "Mark all read" should follow the brand color, not Bootstrap link blue. */
.rv-bell-head .btn-link {
    color: var(--rv-navy);
    font-weight: 600;
}
.rv-bell-head .btn-link:hover,
.rv-bell-head .btn-link:focus {
    color: var(--rv-navy-dark);
}
.rv-bell-list { max-height: 360px; overflow-y: auto; }
.rv-bell-item {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .65rem .9rem;
    color: #1f2937;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
    transition: background .12s;
}
.rv-bell-item:last-child { border-bottom: 0; }
.rv-bell-item:hover { background: #f8fafc; color: #1f2937; }
.rv-bell-item-icon {
    width: 32px; height: 32px; border-radius: 8px;
    background: linear-gradient(135deg, var(--rv-navy) 0%, var(--rv-navy-dark) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: .85rem;
}
.rv-bell-item-text { flex: 1; min-width: 0; }
.rv-bell-item-title { font-weight: 600; color: var(--rv-navy); font-size: .88rem; line-height: 1.3; }
.rv-bell-item-body { color: #4b5563; font-size: .8rem; line-height: 1.4; margin-top: 2px; }
.rv-bell-item-time { color: #9ca3af; font-size: .72rem; margin-top: 2px; }
.rv-bell-empty {
    text-align: center; padding: 1.5rem 1rem; color: #9ca3af; font-size: .85rem;
}
.rv-bell-foot {
    display: block;
    padding: .65rem .9rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    color: var(--rv-navy);
    font-size: .85rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
}
.rv-bell-foot:hover { background: #f1f5f9; color: var(--rv-navy); }

/* Profile button on header — flipped to dark-on-white to match the
   neutral header. Same hover affordance as the bell button. */
.rv-profile-btn {
    background: transparent;
    border: 1px solid var(--rv-border);
    color: var(--rv-text);
    padding: .45rem .8rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .88rem;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.rv-profile-btn:hover {
    background: rgba(var(--rv-navy-rgb), .06);
    border-color: var(--rv-navy);
    color: var(--rv-navy);
}
.rv-profile-btn .bi-person-circle { font-size: 1.15rem; }
.rv-profile-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Responsive: compact the header on small screens */
@media (max-width: 575.98px) {
    .rv-header { padding: .75rem 1rem; }
    .rv-brand-name { font-size: 1.1rem; }
    .rv-brand-sub { font-size: .6rem; letter-spacing: .15em; }
    .rv-profile-btn { padding: .4rem; border-radius: 999px; }
    .rv-profile-name,
    .rv-profile-btn .bi-chevron-down { display: none; }
    .rv-bell-menu { width: 320px; }
}

/* ---------- Main shell ---------- */
.rv-main {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 1rem 2rem;
}
.rv-shell {
    width: 100%;
    max-width: 460px;
}
.rv-shell--wide { max-width: 560px; }

/* ---------- Hero block ---------- */
.rv-hero { text-align: center; }
.rv-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--rv-navy) 0%, var(--rv-navy-dark) 100%);
    color: #fff;
    font-size: 1.65rem;
    line-height: 1;
    box-shadow: 0 14px 32px -10px rgba(var(--rv-navy-rgb), .55);
}
.rv-lock i { line-height: 1; }

/* ---------- Portal selector cards (welcome page) ---------- */
.rv-portal-grid {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.rv-portal-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: #fff;
    border: 1px solid var(--rv-border);
    border-radius: 14px;
    text-decoration: none;
    color: var(--rv-text);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rv-portal-card:hover {
    transform: translateY(-2px);
    border-color: var(--rv-border-strong);
    box-shadow: 0 14px 32px -18px rgba(15, 23, 42, .25);
    color: var(--rv-text);
    text-decoration: none;
}
.rv-portal-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: #fff;
    font-size: 1.2rem;
}
.rv-portal-icon--candidate    { background: linear-gradient(135deg, #0d9488 0%, #115e59 100%); }
.rv-portal-icon--interviewer  { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
.rv-portal-icon--hr           { background: linear-gradient(135deg, var(--rv-navy) 0%, var(--rv-navy-dark) 100%); }
.rv-portal-icon--admin        { background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%); }

.rv-portal-text {
    flex: 1;
    min-width: 0;
}
.rv-portal-title {
    font-weight: 700;
    color: var(--rv-navy);
    font-size: 1rem;
    line-height: 1.2;
}
.rv-portal-meta {
    color: var(--rv-muted);
    font-size: .8rem;
    margin-top: .15rem;
    line-height: 1.35;
}
.rv-portal-arrow {
    flex-shrink: 0;
    color: var(--rv-muted);
    font-size: 1.1rem;
    transition: transform .18s ease, color .18s ease;
}
.rv-portal-card:hover .rv-portal-arrow {
    color: var(--rv-navy);
    transform: translateX(3px);
}
.rv-pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    font-size: .68rem;
    letter-spacing: .18em;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 999px;
    text-transform: uppercase;
}
.rv-title {
    font-family: var(--rv-font-brand);
    font-weight: 700;
    font-size: clamp(1.6rem, 4.5vw, 2.1rem);
    color: var(--rv-navy);
    margin: .85rem 0 .5rem;
    line-height: 1.2;
}
.rv-title--mb-lg { margin-bottom: 1.6rem; }
.rv-lede {
    color: var(--rv-muted);
    font-size: .92rem;
    line-height: 1.55;
    max-width: 460px;
    margin: 0 auto 1.75rem;
}

/* ---------- Card ---------- */
.rv-card {
    background: var(--rv-card);
    border: 1px solid var(--rv-border);
    border-radius: 14px;
    padding: 1.6rem 1.5rem 1.5rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, .06);
}
.rv-card--mb { margin-bottom: 1rem; }

/* ---------- Numbered step (candidate two-step form) ---------- */
.rv-step-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--rv-navy);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: .35rem;
}
.rv-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--rv-navy);
    color: #fff;
    font-size: .75rem;
    letter-spacing: 0;
}
.rv-step-help {
    color: var(--rv-muted);
    font-size: .82rem;
    margin: 0 0 .7rem;
}

/* ---------- Form ---------- */
.rv-label {
    display: block;
    color: var(--rv-navy);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}
.rv-field { margin-bottom: 1rem; }

.rv-input {
    width: 100%;
    font-size: 1rem;
    font-family: var(--rv-font-system);
    padding: .8rem 1rem;
    border: 1.5px solid var(--rv-border);
    border-radius: 8px;
    background: var(--rv-input-bg);
    color: var(--rv-text);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rv-input::placeholder { color: #9ca3af; }
.rv-input:focus {
    outline: none;
    border-color: var(--rv-navy);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .1);
}
.rv-input.is-invalid {
    border-color: var(--rv-error);
    background: var(--rv-error-bg);
}
.rv-input--mono {
    font-family: 'DM Mono', 'Courier New', monospace;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.rv-error {
    color: var(--rv-error);
    font-size: .82rem;
    margin-top: .4rem;
}

/* Parsley.js error list styling — match .rv-error look */
.parsley-errors-list {
    list-style: none;
    margin: .4rem 0 0;
    padding: 0;
    color: var(--rv-error);
    font-size: .82rem;
}
.parsley-errors-list li { margin: 0; }
.rv-input.parsley-error,
.rv-input.is-invalid {
    border-color: var(--rv-error);
    background: var(--rv-error-bg);
}
.rv-input.parsley-success {
    border-color: #10b981;
}

.rv-flash {
    background: var(--rv-success-bg);
    border: 1px solid var(--rv-success-border);
    color: var(--rv-success-text);
    padding: .85rem 1rem;
    border-radius: 10px;
    font-size: .9rem;
    margin-bottom: 1rem;
    line-height: 1.45;
}
.rv-flash code {
    font-family: 'DM Mono', 'Courier New', monospace;
    background: #fff;
    padding: .1rem .4rem;
    border-radius: 4px;
    border: 1px solid #d1fae5;
}

/* ---------- Buttons ---------- */
.rv-cta {
    width: 100%;
    background: var(--rv-navy);
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: .95rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: background .15s ease, transform .05s ease;
    -webkit-tap-highlight-color: transparent;
    margin-top: .5rem;
    text-decoration: none;
}
.rv-cta:hover { background: var(--rv-navy-dark); color: #fff; }
.rv-cta:active { transform: translateY(1px); }
.rv-cta:disabled { opacity: .65; cursor: wait; }

.rv-cta-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    width: 100%;
    background: #fff;
    color: var(--rv-navy);
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    padding: .85rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    margin-top: .65rem;
    transition: background .15s ease, border-color .15s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.rv-cta-secondary:hover {
    background: #f8fafc;
    border-color: var(--rv-border-strong);
    color: var(--rv-navy);
    text-decoration: none;
}

/* ---------- Security info block (candidate page) ---------- */
.rv-security {
    background: #eef2f7;
    border: 1px solid #dde3ec;
    border-radius: 10px;
    padding: .85rem 1rem;
    margin-top: 1.25rem;
    text-align: center;
}
.rv-security-title {
    font-size: .82rem;
    font-weight: 600;
    color: var(--rv-navy);
}
.rv-security-sub {
    font-size: .75rem;
    color: var(--rv-muted);
    margin-top: .15rem;
}

/* ---------- Top navigation (under brand header) ---------- */
/* Header sits ABOVE the nav in z-order so dropdowns opened from the header
   (bell, profile) overlay the nav strip below them. Without this the
   header's stacking context (z 60) was below the nav's (z 70) and only the
   bottom of any header dropdown leaked out past the nav. */
.rv-header { position: relative; z-index: 80; }
/* The secondary nav strip below the header uses the admin-configurable
   Primary Brand Color (Settings → Branding). Sibling text + buttons are
   flipped to light variants below to stay readable. */
.rv-nav {
    position: relative;
    background: var(--rv-navy);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
    z-index: 70;
}
.rv-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Mobile-only: tappable user name (dropdown trigger) on the left of the nav bar */
.rv-nav-mobile-user { display: none; }
.rv-nav-mobile-name {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    max-width: 100%;
    min-width: 0;
}
.rv-nav-mobile-name i.bi-person-circle { font-size: 1.2rem; flex-shrink: 0; }
.rv-nav-mobile-name .rv-nav-mobile-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.rv-nav-mobile-name[aria-expanded="true"] .rv-nav-chev { transform: rotate(180deg); }

/* Hamburger toggle — hidden on desktop, shown on tablet/mobile */
.rv-nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 8px;
    padding: .5rem .7rem;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-family: inherit;
    flex-shrink: 0;
}
.rv-nav-toggle:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .45); }
.rv-nav-icon-close { display: none; }
.rv-nav.rv-nav--open .rv-nav-icon-open { display: none; }
.rv-nav.rv-nav--open .rv-nav-icon-close { display: inline; }

/* Collapse wrapper holds links + user area; row on desktop, panel on mobile */
.rv-nav-collapse {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}

.rv-nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .15rem;
    flex: 1;
    min-width: 0;
}
.rv-nav-links li { flex-shrink: 0; list-style: none; }
.rv-nav-links a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .9rem .95rem;
    color: rgba(255, 255, 255, .75);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.rv-nav-links a:hover {
    color: #fff;
    text-decoration: none;
}
.rv-nav-links a.active {
    color: #fff;
    border-bottom-color: #fff;
    font-weight: 600;
}

.rv-nav-user {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Dropdown trigger (the admin name button) */
.rv-nav-user-trigger {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: .88rem;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    font-family: inherit;
    transition: background .15s ease;
}
.rv-nav-user-trigger:hover { background: rgba(255, 255, 255, .12); }
.rv-nav-user-trigger i.bi-person-circle { font-size: 1.15rem; }
.rv-nav-chev { font-size: .68rem; opacity: .6; transition: transform .15s ease; }
.rv-nav-user-trigger[aria-expanded="true"] .rv-nav-chev { transform: rotate(180deg); }

/* Dropdown menu */
.rv-nav-dropdown {
    min-width: 200px;
    padding: .35rem 0;
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
    margin-top: .5rem;
}
.rv-nav-dropdown .dropdown-item {
    padding: .55rem 1rem;
    font-size: .88rem;
    color: var(--rv-text);
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: pointer;
}
.rv-nav-dropdown .dropdown-item i { font-size: 1rem; opacity: .75; width: 18px; text-align: center; }
/* Light-navy hover/focus/active — overrides Bootstrap's bright primary blue */
.rv-nav-dropdown .dropdown-item:hover,
.rv-nav-dropdown .dropdown-item:focus,
.rv-nav-dropdown .dropdown-item:focus-visible,
.rv-nav-dropdown .dropdown-item.active,
.rv-nav-dropdown .dropdown-item:active {
    background-color: var(--rv-pill-bg);
    color: var(--rv-navy);
    outline: none;
}
.rv-nav-dropdown form { margin: 0; }
.rv-nav-dropdown form button {
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
}
.rv-nav-dropdown-danger { color: var(--rv-error) !important; }
.rv-nav-dropdown-danger:hover,
.rv-nav-dropdown-danger:focus {
    background: var(--rv-error-bg) !important;
    color: var(--rv-error) !important;
}

/* Submenu inside main nav (e.g. "Users" → HR Users / Admin Users) */
.rv-nav-submenu-trigger { cursor: pointer; }
.rv-nav-submenu-trigger[aria-expanded="true"] .rv-nav-chev { transform: rotate(180deg); }
.rv-nav-submenu .rv-nav-dropdown .dropdown-item.active {
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    font-weight: 600;
}

/* Tablet + mobile — collapse to hamburger */
@media (max-width: 991.98px) {
    .rv-nav-inner { padding: 0 1rem; }

    .rv-nav-mobile-user { display: block; margin-right: auto; min-width: 0; max-width: calc(100% - 60px); }
    .rv-nav-toggle { display: inline-flex; align-items: center; }

    /* The mobile name's own dropdown — pop down from the trigger, not the inline-static
       behaviour the in-menu .rv-nav-dropdown gets. */
    .rv-nav-mobile-dropdown {
        display: none;
        position: absolute !important;
        top: 100%;
        left: 0;
        margin-top: .35rem;
        border: 1px solid var(--rv-border);
        border-radius: 10px;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .12);
        background: #fff;
        padding: .35rem 0;
        min-width: 200px;
        width: auto;
        z-index: 110;
    }
    .rv-nav-mobile-dropdown.show { display: block !important; }

    /* Hide the in-collapse user block on mobile — its actions are now reachable
       via the top-bar mobile name dropdown. */
    .rv-nav-collapse .rv-nav-user { display: none; }

    .rv-nav-collapse {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        /* Match the desktop nav background so the inherited white text +
           white-tinted dividers + hover states stay readable. Previously
           set to #fff, which made every link invisible (white-on-white). */
        background: var(--rv-navy);
        border-bottom: 1px solid rgba(0, 0, 0, .15);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        z-index: 100;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .25);
    }
    .rv-nav.rv-nav--open .rv-nav-collapse { display: flex; }

    .rv-nav-links {
        flex-direction: column;
        gap: 0;
        flex: none;
    }
    .rv-nav-links li { width: 100%; }
    .rv-nav-links a {
        display: flex;
        width: 100%;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        border-left: 3px solid transparent;
        font-size: .95rem;
    }
    .rv-nav-links li:last-child a { border-bottom: 0; }
    .rv-nav-links a.active {
        border-bottom-color: rgba(255, 255, 255, .12);
        border-left-color: #fff;
        background: rgba(255, 255, 255, .08);
    }

    /* User area on mobile: hide trigger, render dropdown items inline as full-row */
    .rv-nav-user {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .rv-nav-user-trigger { display: none; }
    /* Scoped to .rv-nav-collapse so it only flattens the in-menu user block,
       not the top-bar .rv-nav-mobile-dropdown which needs to pop down normally. */
    .rv-nav-collapse .rv-nav-dropdown {
        display: block !important;
        position: static !important;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        min-width: 0;
        width: 100%;
        transform: none !important;
        /* Override Bootstrap's default white dropdown background so the
           parent .rv-nav-collapse (navy) shows through. Without this the
           submenu renders white-text-on-white and items appear blank. */
        background: transparent !important;
    }
    .rv-nav-collapse .rv-nav-dropdown .dropdown-divider { display: none; }
    /* Inline-flattened dropdown items (mobile-collapsed menu) live on the
       now-dark nav background — color/border flipped to light so they're
       readable. The desktop dropdown (floating panel) still uses the
       default dark-text-on-white styling from .rv-nav-dropdown above. */
    .rv-nav-collapse .rv-nav-dropdown .dropdown-item {
        /* Extra left padding indents submenu items so the visual hierarchy
           is clear under the parent (e.g. HR Users / Admin Users under
           Users). Faint left border reinforces the "nested" cue.
           Slightly smaller font + lighter tint also distinguishes them
           from the top-level nav items. */
        padding: .85rem 1.25rem .85rem 2.5rem;
        font-size: .9rem;
        color: rgba(255, 255, 255, .75);
        background: rgba(0, 0, 0, .12);
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        border-left: 3px solid rgba(255, 255, 255, .25);
    }
    .rv-nav-collapse .rv-nav-dropdown .dropdown-item:hover,
    .rv-nav-collapse .rv-nav-dropdown .dropdown-item:focus,
    .rv-nav-collapse .rv-nav-dropdown .dropdown-item.active {
        background-color: rgba(255, 255, 255, .08);
        color: #fff;
    }
    .rv-nav-collapse .rv-nav-dropdown li:last-child .dropdown-item { border-bottom: 0; }
    .rv-nav-collapse .rv-nav-dropdown form button { padding: 1rem 1.25rem; }

    /* Lock body scroll while menu is open */
    body.rv-nav-locked { overflow: hidden; }

    /* Backdrop blur (covers everything below the nav while menu is open) */
    body.rv-nav-locked::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .35);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        z-index: 50;
        pointer-events: auto;
    }
}

@media (max-width: 575.98px) {
    .rv-nav-inner { padding: 0 .75rem; }
    .rv-nav-mobile-name { font-size: .85rem; }
}

/* ---------- Breadcrumb ---------- */
.rv-breadcrumb {
    background: #f3f5f9;
    border-bottom: 1px solid #e3e7ee;
}
.rv-breadcrumb-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: .55rem 1.25rem;
}
.rv-breadcrumb-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .35rem;
    font-size: .82rem;
    line-height: 1.4;
}
.rv-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: #6c757d;
    min-width: 0;
}
.rv-breadcrumb-item a {
    color: var(--rv-navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .4rem;
    border-radius: 6px;
    transition: background-color .12s ease, color .12s ease;
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv-breadcrumb-item a span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.rv-breadcrumb-item a:hover {
    background: var(--rv-navy-tint);
    color: var(--rv-navy-dark);
}
.rv-breadcrumb-item.is-current > span {
    color: var(--rv-navy);
    font-weight: 600;
    padding: .15rem .4rem;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.rv-breadcrumb-sep {
    color: #b0b7c2;
    font-size: .7rem;
}
@media (max-width: 575.98px) {
    .rv-breadcrumb-inner { padding: .45rem .75rem; }
    .rv-breadcrumb-list { font-size: .76rem; gap: .15rem .25rem; }
    .rv-breadcrumb-item a,
    .rv-breadcrumb-item.is-current > span { max-width: 160px; }
}

/* ---------- Dashboard ---------- */
.rv-dashboard-main {
    flex: 1;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem 3rem;
    /* Flex children default to min-width: auto which prevents shrinking
       below their intrinsic content width. min-width: 0 lets the shell
       actually clip wide tables instead of bursting outward. */
    min-width: 0;
}
.rv-dashboard-shell {
    width: 100%;
    max-width: 1200px;
    min-width: 0;
}

.rv-dashboard-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.75rem;
}
.rv-dashboard-title {
    font-family: var(--rv-font-brand);
    font-weight: 700;
    color: var(--rv-navy);
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    line-height: 1.2;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}
.rv-dashboard-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    font-size: 1.15rem;
    flex-shrink: 0;
}
.rv-dashboard-subtitle {
    color: var(--rv-muted);
    font-size: .85rem;
    margin-top: .25rem;
}

/* Action bar (CSV / Clear / Exit etc.) */
.rv-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.rv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem 1rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    background: #fff;
    color: var(--rv-navy);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s ease, border-color .15s ease;
}
.rv-action-btn:hover {
    background: #f8fafc;
    border-color: var(--rv-border-strong);
    color: var(--rv-navy);
    text-decoration: none;
}
.rv-action-btn--danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.rv-action-btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}
.rv-action-btn-form {
    display: inline-block;
    margin: 0;
}

/* Stats grid */
.rv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.rv-stat-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--rv-border);
    border-radius: 14px;
    padding: 1.4rem 1.25rem 1.25rem;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rv-stat-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--rv-stat-accent, var(--rv-navy));
}
.rv-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(15,23,42,.18);
    border-color: var(--rv-border-strong);
}

/* Accent palette — drives the top strip and the icon tint */
.rv-stat-card--accent-navy    { --rv-stat-accent: var(--rv-navy); --rv-stat-tint: #e7eefb; }
.rv-stat-card--accent-teal    { --rv-stat-accent: #0d9488; --rv-stat-tint: #ccfbf1; }
.rv-stat-card--accent-emerald { --rv-stat-accent: #059669; --rv-stat-tint: #d1fae5; }
.rv-stat-card--accent-rose    { --rv-stat-accent: #e11d48; --rv-stat-tint: #ffe4e6; }
.rv-stat-card--accent-violet  { --rv-stat-accent: #7c3aed; --rv-stat-tint: #ede9fe; }
.rv-stat-card--accent-amber   { --rv-stat-accent: #d97706; --rv-stat-tint: #fef3c7; }
.rv-stat-card--accent-slate   { --rv-stat-accent: #475569; --rv-stat-tint: #e2e8f0; }

.rv-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--rv-stat-tint, var(--rv-pill-bg));
    color: var(--rv-stat-accent, var(--rv-navy));
    font-size: 1.1rem;
    margin-bottom: .85rem;
}

.rv-stat-num {
    font-family: var(--rv-font-system);
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--rv-text);
    line-height: 1.1;
    margin-bottom: .35rem;
    letter-spacing: -.01em;
}
.rv-stat-num--text {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--rv-text);
    /* prevent long names from blowing out the card */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Legacy alias kept so existing markup outside this partial still renders */
.rv-stat-num--muted { color: var(--rv-muted); font-weight: 600; }

.rv-stat-label {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--rv-muted);
    font-weight: 600;
}
.rv-stat-label-meta {
    display: block;
    margin-top: .15rem;
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--rv-muted);
    font-weight: 500;
}

/* Tablet */
@media (max-width: 991.98px) {
    .rv-dashboard-main { padding: 1.5rem 1rem 2rem; }
    .rv-stat-num { font-size: 2.1rem; }
}
/* Mobile */
@media (max-width: 575.98px) {
    .rv-dashboard-main { padding: 1.25rem .75rem 1.5rem; }
    .rv-dashboard-head { gap: .75rem; }
    .rv-stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .rv-stat-card { padding: 1rem .85rem; }
    .rv-stat-icon { width: 32px; height: 32px; font-size: .95rem; margin-bottom: .55rem; }
    .rv-stat-num { font-size: 1.6rem; }
    .rv-stat-num--text { font-size: 1.05rem; }
    .rv-action-btn { padding: .5rem .75rem; font-size: .82rem; }
    .rv-dashboard-title i { width: 32px; height: 32px; font-size: 1rem; }
}

/* ---------- Footer ---------- */
.rv-footer {
    text-align: center;
    color: var(--rv-muted);
    font-size: .78rem;
    padding: 1.5rem 1rem 1.25rem;
    border-top: 1px solid #dde3ec;
    margin-top: 1.5rem;
}

/* ---------- Spinner ---------- */
.rv-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: rv-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes rv-spin { to { transform: rotate(360deg); } }

/* ---------- Generic icon + text helpers ---------- */
.rv-icon {
    text-align: center;
    font-size: 3rem;
    color: var(--rv-navy);
    margin-bottom: .75rem;
}

.rv-text {
    color: var(--rv-muted);
    font-size: .95rem;
    line-height: 1.55;
    text-align: center;
    margin-bottom: 1.25rem;
}

/* ---------- Tablet ---------- */
@media (max-width: 991.98px) {
    .rv-main { padding: 2.5rem 1rem 1.5rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .rv-card { padding: 1.25rem 1.1rem; }
    .rv-main { padding: 2rem .75rem 1.25rem; }
    .rv-input { font-size: 16px; } /* prevent iOS auto-zoom */
    .rv-header { padding: 1rem 1.25rem; }
    .rv-brand-name { font-size: 1.2rem; }
    .rv-brand-sub { font-size: .62rem; letter-spacing: .2em; }
    .rv-lock { width: 56px; height: 56px; font-size: 1.45rem; border-radius: 16px; }
    .rv-lede { font-size: .88rem; }
    .rv-title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}

/* ---------- Bootstrap btn-primary override (use brand navy) ---------- */
.btn-primary {
    --bs-btn-bg: var(--rv-navy);
    --bs-btn-border-color: var(--rv-navy);
    --bs-btn-hover-bg: var(--rv-navy-dark);
    --bs-btn-hover-border-color: var(--rv-navy-dark);
    --bs-btn-active-bg: var(--rv-navy-dark);
    --bs-btn-active-border-color: var(--rv-navy-dark);
    --bs-btn-disabled-bg: var(--rv-navy);
    --bs-btn-disabled-border-color: var(--rv-navy);
    --bs-btn-focus-shadow-rgb: var(--rv-navy-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--rv-navy);
    --bs-btn-border-color: var(--rv-navy);
    --bs-btn-hover-bg: var(--rv-navy);
    --bs-btn-hover-border-color: var(--rv-navy);
    --bs-btn-active-bg: var(--rv-navy);
    --bs-btn-active-border-color: var(--rv-navy);
    --bs-btn-focus-shadow-rgb: var(--rv-navy-rgb);
}
.text-primary { color: var(--rv-navy) !important; }
.bg-primary  { background-color: var(--rv-navy) !important; }

/* ---------- SweetAlert2 backdrop blur ---------- */
.swal2-container {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.swal2-popup {
    border-radius: 14px !important;
    font-family: var(--rv-font-system) !important;
}
.swal2-title {
    font-family: var(--rv-font-brand) !important;
    color: var(--rv-navy) !important;
}
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: .6rem 1.1rem !important;
}

/* ---------- DataTables processing (table blur + spinner) ---------- */
.dataTables_wrapper { position: relative; }
.dataTables_wrapper .dataTables_processing { display: none !important; } /* hide default DT message */

.dataTables_wrapper.rv-dt-processing-active table.dataTable {
    filter: blur(2px);
    transition: filter .2s ease;
    pointer-events: none;
}
.dataTables_wrapper.rv-dt-processing-active::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 5;
    border-radius: inherit;
}
.dataTables_wrapper.rv-dt-processing-active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 3px solid rgba(30, 58, 95, .15);
    border-top-color: var(--rv-navy);
    border-radius: 50%;
    animation: rv-spin .8s linear infinite;
    z-index: 10;
}

/* DataTables pagination — primary navy theme */
.dataTables_wrapper .pagination .page-link {
    color: var(--rv-navy);
    border-color: var(--rv-border);
}
.dataTables_wrapper .pagination .page-link:hover {
    background-color: var(--rv-pill-bg);
    border-color: var(--rv-border-strong);
    color: var(--rv-navy);
}
.dataTables_wrapper .pagination .page-link:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--rv-navy-rgb), .2);
    color: var(--rv-navy);
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: var(--rv-navy);
    border-color: var(--rv-navy);
    color: #fff;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: var(--rv-muted);
    background: #fff;
}

/* DataTables toolbar layout — keep length + search inline, info + pagination
   inline, even on mobile. The Bootstrap5 wrapper uses col-sm-12 columns that
   would otherwise stack vertically. */
.dataTables_wrapper > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
/* Toolbar columns (length / filter / info / paginate) grow to content. The
   table's column gets the inverse treatment below so .table-responsive can
   scroll horizontally instead of bursting out of the card. */
.dataTables_wrapper > .row > [class*="col-"]:not(.rv-dt-table-col) {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
.dataTables_wrapper > .row > .rv-dt-table-col {
    flex: 1 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
}
.dataTables_wrapper > .row > .rv-dt-table-col > .table-responsive {
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
/* Scroll-to-top floating button (created by public/js/scroll-to-top.js).
   Hidden by default; fades + slides in once the page scrolls past ~320px.
   Brand-coloured background tracks --rv-navy so it follows the admin's
   Branding setting like every other primary surface. */
.rv-scroll-top {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1080;             /* sit above sticky table headers + Bootstrap modals backdrop */
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--rv-navy);
    color: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease, background-color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.rv-scroll-top.is-visible {
    opacity: .92;
    visibility: visible;
    transform: translateY(0);
}
.rv-scroll-top:hover { opacity: 1; background: var(--rv-navy-dark); }
.rv-scroll-top:focus,
.rv-scroll-top:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(var(--rv-navy-rgb), .25), 0 4px 14px rgba(15, 23, 42, .25);
}
.rv-scroll-top:active { transform: translateY(1px); }
@media (max-width: 575.98px) {
    .rv-scroll-top { right: .75rem; bottom: .75rem; width: 40px; height: 40px; }
}

/* Kill horizontal scrollbar on every DataTable wrapper. The DataTables
   Responsive plugin isn't loaded in this project (only the core lib +
   bootstrap5 adapter), so `responsive: true` in datatable-init.js is
   silently ignored and wide tables otherwise show a permanent scrollbar.
   `overflow: clip` is stronger than `hidden` — content overflowing the
   wrapper is hard-clipped and the wrapper can't be scrolled even
   programmatically. Per-table CSS (table-layout: fixed + word-break) is
   how we keep all content visible inside the wrapper. */
/* Desktop: clip the scrollbar (audit-log + similar tables fit naturally
   after our per-table tightening). Mobile / tablet: re-enable the
   horizontal scrollbar so wide tables remain usable.
   The DataTables Responsive plugin isn't loaded in this project; if
   we ever add it, these rules can be removed. */
.rv-dt-scroll,
.dataTables_wrapper .table-responsive {
    overflow-x: clip !important;
    overflow-x: hidden !important;       /* fallback for browsers without `clip` */
}
@media (max-width: 991.98px) {
    .rv-dt-scroll,
    .dataTables_wrapper .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   Project-wide responsive sweep — applies on tablet (≤ 991px)
   and phone (≤ 575px). Layered after Bootstrap's own breakpoints
   so we override only where needed.
   ============================================================ */

/* --- Tablet and below ---------------------------------------- */
@media (max-width: 991.98px) {
    /* Filter rows in DataTable headers — let select2 / inputs stack
       cleanly instead of cramming into a half-width column. */
    .card .row.g-2.align-items-end > [class*="col-"],
    .card .row.g-3.align-items-end > [class*="col-"] {
        margin-bottom: .5rem;
    }

    /* Card headers with toolbar buttons — always allow wrap so the
       title doesn't push the buttons off-screen. */
    .card-header.d-flex,
    .d-flex.justify-content-between.align-items-center {
        flex-wrap: wrap;
    }

    /* Stats grid — already responsive, but force gap to be tighter
       on small tablets to avoid a single card per row. */
    .rv-stats-grid {
        gap: .65rem;
    }

    /* Long body cell content (emails, URLs) wraps so a single long
       cell doesn't blow out the row. Headers are NEVER broken — they
       must read as a single word; if the viewport is too narrow the
       parent .rv-dt-scroll wrapper scrolls horizontally instead. */
    table.dataTable td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    table.dataTable th {
        white-space: nowrap;
    }

    /* Force every DataTable to keep its intrinsic width on small
       viewports — let the wrapper's overflow-x: auto kick in instead
       of squishing the columns. Bootstrap's .table sets width: 100%
       so we need a min-width to force the horizontal scroll. */
    .rv-dt-scroll > table.dataTable,
    .table-responsive > table.dataTable {
        min-width: 720px;
    }
}

/* --- Phone (≤ 575px) ---------------------------------------- */
@media (max-width: 575.98px) {
    /* Card bodies — tighter padding so content fills the narrow viewport
       without wasting horizontal space. */
    .card-body { padding: .85rem !important; }
    .card-header { padding: .65rem .85rem; }

    /* Stat cards stack vertically and use less padding. */
    .rv-stat-card { padding: .9rem; }
    .rv-stat-num  { font-size: 1.4rem; }

    /* Toolbar above DataTables (Export CSV / New / Generate PIN / Clear All)
       — buttons should wrap onto their own line with a small gap. */
    .d-flex.gap-2.flex-wrap,
    .d-flex.justify-content-between.flex-wrap {
        gap: .35rem !important;
    }
    .d-flex.gap-2.flex-wrap .btn,
    .d-flex.justify-content-between.flex-wrap .btn {
        font-size: .8rem;
        padding: .45rem .65rem;
    }

    /* DataTables pagination + length / info row — let them stack instead
       of overlapping. */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
        width: 100%;
        margin: .25rem 0;
    }

    /* SweetAlert modals — full-width on phones with reasonable padding. */
    .swal2-popup { width: 92vw !important; padding: 1rem !important; }
    .swal2-title { font-size: 1.05rem !important; }
    .swal2-html-container { font-size: .9rem !important; }
    .swal2-actions { gap: .35rem !important; flex-wrap: wrap; }
    .swal2-styled { padding: .55rem 1rem !important; font-size: .85rem !important; }

    /* Bootstrap modal — same idea, edge-to-edge on phone. */
    .modal-dialog { margin: .5rem; }
    .modal-content { border-radius: 12px; }

    /* Form labels — slightly tighter rhythm. */
    .form-label { margin-bottom: .25rem; font-size: .9rem; }

    /* Per-card cell content — chart cards need a min-height bump on
       phone or charts squish; Chart.js handles its own resize fine. */
    .card-rv .chart-wrap,
    .rv-chart-card .rv-chart-wrap { min-height: 220px; }
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    text-align: left;
}
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    text-align: right;
    margin-left: auto;
}
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter input {
    margin-left: 0;
    max-width: 180px;
}

@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_filter input { max-width: 140px; }
    .dataTables_wrapper .dataTables_length select { min-width: 64px; }
    .dataTables_wrapper .dataTables_info { font-size: .8rem; }
}

/* ---------- Select2 (Bootstrap 5 theme polish) ---------- */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + 0.75rem + 2px);
}
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-top: 0;
    padding-bottom: .4rem;
}
.select2-container--open .select2-dropdown {
    border-color: var(--rv-navy);
}
.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--rv-navy) !important;
    box-shadow: 0 0 0 .2rem rgba(var(--rv-navy-rgb), .18) !important;
}
/* Parsley-driven invalid state for Select2 — the .is-invalid class sits on
   the hidden <select>, not the visible wrapper, so we mirror it via a class
   the parsley-init handler toggles on the .select2-container wrapper. */
.select2-container.rv-select2-invalid .select2-selection {
    border-color: #dc3545 !important;
}
.select2-container.rv-select2-invalid.select2-container--focus .select2-selection {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .18) !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted,
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-results__option:hover {
    background-color: var(--rv-navy-tint) !important;
    color: var(--rv-navy) !important;
}
/* Currently-selected option — override the bright Bootstrap primary blue */
.select2-container--bootstrap-5 .select2-results__option[aria-selected="true"],
.select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: var(--rv-pill-bg) !important;
    color: var(--rv-navy) !important;
    font-weight: 600;
}

/* ---------- Star rating widget (HR Evaluation) ---------- */
.rv-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: .15rem;
    direction: ltr;
}
.rv-stars input { display: none; }
.rv-stars label {
    font-size: 1.6rem;
    line-height: 1;
    color: #d1d5db;
    cursor: pointer;
    transition: color .15s ease, transform .05s ease;
    user-select: none;
}
.rv-stars label:hover { transform: scale(1.1); }
.rv-stars input:checked ~ label,
.rv-stars label:hover,
.rv-stars label:hover ~ label {
    color: #f59e0b;
}
.rv-stars-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--rv-border);
}
.rv-stars-row:last-child { border-bottom: 0; }
.rv-stars-label {
    flex: 1;
    font-weight: 500;
    color: var(--rv-text);
}
.rv-stars-clear {
    background: transparent;
    border: 0;
    color: var(--rv-muted);
    font-size: .78rem;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 4px;
}
.rv-stars-clear:hover { color: var(--rv-error); background: var(--rv-error-bg); }
.rv-stars-total {
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    font-weight: 700;
    border-radius: 999px;
    padding: .35rem 1rem;
    font-size: .9rem;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

/* ============================================================
   Professional polish — system-wide refinements
   Lightweight overrides on Bootstrap primitives so cards, tables,
   badges, buttons, and form controls all feel cohesive.
   ============================================================ */

/* Cards — softer shadow, clean border, subtle lift on hover for
   any card whose ancestor opts in via .rv-hoverable. Default cards
   stay static so we don't add motion noise to settings/forms. */
.card {
    border: 1px solid var(--rv-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.card.shadow-sm,
.card.shadow {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px -10px rgba(15, 23, 42, .12) !important;
}
.rv-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -16px rgba(15, 23, 42, .18) !important;
    border-color: var(--rv-border-strong);
}
.card-header.bg-white {
    border-bottom-color: var(--rv-border);
    padding: .9rem 1.1rem;
}
.card-header h6 {
    color: var(--rv-navy);
    font-weight: 700;
    letter-spacing: .01em;
}

/* Tables — quieter header, refined separators, tighter rhythm */
.table > :not(caption) > * > * {
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.table > thead {
    background: #f8fafc;
}
.table > thead > tr > th {
    color: var(--rv-muted);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    border-bottom: 1px solid var(--rv-border);
}
.table > tbody > tr {
    border-color: var(--rv-border);
}
.table-hover > tbody > tr:hover > * {
    background-color: #f8fafc;
}
.table > tbody > tr > td { color: var(--rv-text); }
.table > tbody > tr > td strong { color: var(--rv-navy); }

/* Badges — pill chips with breathing room and subtle saturation */
.badge {
    font-weight: 600;
    letter-spacing: .02em;
    padding: .35em .65em;
    border-radius: 5px;
    font-size: .72rem;
}
.badge.bg-success    { background-color: #059669 !important; }
.badge.bg-warning    { background-color: #d97706 !important; color: #fff !important; }
.badge.bg-danger     { background-color: #dc2626 !important; }
.badge.bg-secondary  { background-color: #64748b !important; }
.badge.bg-info       { background-color: #0891b2 !important; color: #fff !important; }

/* Buttons — consistent radius, smoother motion, softer focus ring */
.btn {
    /* inline-flex so the column-gap below applies between the icon and
       the label. CSS `:first-child`/`:only-child` can't see text-node
       siblings, so margin-based spacing would misfire on "<i></i> Label"
       (the <i> would look like `:only-child` and get no margin). With
       inline-flex, each contiguous text run becomes an anonymous flex
       item, so the gap correctly separates icon + label, and icon-only
       buttons (one flex item) stay flush. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: .45rem;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: .01em;
    /* Project-wide: first letter of every word capitalised. Existing
       all-uppercase tokens (PIN, CV, HR, AI, SMTP, …) are preserved
       because `capitalize` only touches the first letter of each word. */
    text-transform: capitalize;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .08s ease;
}
.btn-sm { border-radius: 7px; padding: .42rem .8rem; }
.btn:active:not(:disabled) { transform: translateY(1px); }

/* SweetAlert2 cancel button — white background, gray border, gray text +
   icon in every state (default / hover / focus / active). SweetAlert applies
   `background` shorthand inline from cancelButtonColor, so we use the
   `background` shorthand + !important to win the cascade. */
.swal2-cancel.swal2-styled,
.swal2-cancel.swal2-styled:hover,
.swal2-cancel.swal2-styled:focus,
.swal2-cancel.swal2-styled:active {
    background: #fff !important;
    background-image: none !important;
    color: #6c757d !important;
    border: 1px solid #6c757d !important;
    box-shadow: none !important;
}
.swal2-cancel.swal2-styled:hover {
    background: #f8f9fa !important;
    color: #495057 !important;
    border-color: #495057 !important;
}
/* Confirm + Cancel only — match the project-wide button presentation
   (icon-label gap, capitalised text). Scoped explicitly so SweetAlert's
   hidden .swal2-deny button is NOT forced visible by `!important`. */
.swal2-confirm.swal2-styled,
.swal2-cancel.swal2-styled {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    column-gap: .45rem;
    text-transform: capitalize;
    font-weight: 600;
}
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 .2rem rgba(var(--rv-navy-rgb), .18);
    outline: 0;
}

/* Input-group base — auth pages (auth.blade.php) DON'T load bootstrap.min.css
   for payload reasons, so .input-group has no flex container styles there.
   Define the minimum required behaviour here so password-enhance.js's
   wrapper looks correct on every page (with or without Bootstrap loaded). */
.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}
.input-group > :not(:first-child) {
    /* Overlap adjacent 1px borders for the seamless "pill" look. */
    margin-left: -1px;
}

/* Input-group children: only the OUTER corners of the group should be
   rounded. The default .btn { border-radius: 8px } above would otherwise
   round every button individually and the .form-control still keeps its
   own radius — making the input + appended buttons look like three
   separate floating boxes.

   This codebase always places .invalid-feedback OUTSIDE the input-group
   (so Bootstrap's `has-validation` second-to-last-child mechanic never
   applies here). Plain first-child / last-child rules are enough. */
.input-group > .form-control,
.input-group > .form-select,
.input-group > .rv-input,
.input-group > .input-group-text,
.input-group > .btn {
    border-radius: 0;
}
.input-group > *:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.input-group > *:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Auth pages use a custom .rv-input { width: 100% } instead of .form-control.
   When password-enhance.js wraps that input in an .input-group, the input
   keeps width:100% and overflows the flex row — buttons get pushed to the
   line below. Restore the same flex sizing Bootstrap applies to .form-control
   so input + appended buttons sit on a single row. */
.input-group > .rv-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

/* Harmonise standalone .form-control / .form-select height with the
   `.input-group > .btn` height (`.8rem 1rem` padding). Without this,
   plain text inputs render shorter than password / search inputs that
   sit inside an input-group with appended eye / shuffle / send buttons,
   and forms with a mix of both look uneven. Tuned so a 16px line-height
   1.5 input + this padding produces the same visual height as a 16px
   icon button with the input-group padding. */
.form-control,
.form-select {
    padding-top: .55rem;
    padding-bottom: .55rem;
}
/* Compact size still smaller — used in filter rows where space is tight. */
.form-control.form-control-sm,
.form-select.form-select-sm {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* Admin-uploaded brand logo. Raster uploads are downscaled server-side to
   fit within 160×60 (see SettingController::resizeLogoToFit). These CSS
   constraints match that ceiling so SVGs and oversized images alike render
   at the canonical brand size across the app shell. */
.rv-brand-logo {
    display: block;
    max-height: 48px;
    max-width: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Action buttons inside an input-group (eye, shuffle, etc.) must visually
   match the field next to them — same padding, same border, same fill —
   so input + buttons read as one continuous pill.

   Mirrors the .rv-input style above:
     padding:       .8rem 1rem
     border:        1.5px solid var(--rv-border)
     background:    var(--rv-input-bg) — the same light-navy tint
     color:         muted gray for the icon

   On auth pages where bootstrap.min.css isn't loaded, .btn-outline-secondary
   has no styling on its own — these rules cover both cases (auth + main app)
   from a single block. */
.input-group > .btn {
    padding: .8rem 1rem;
    border: 1.5px solid var(--rv-border);
    background: var(--rv-input-bg);
    color: var(--rv-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-weight: 500;
    min-width: 2.75rem;     /* keep icon-only buttons visually substantial */
}
.input-group > .btn:hover {
    background: rgba(var(--rv-navy-rgb), .08);
    color: var(--rv-navy);
    border-color: var(--rv-navy);
    z-index: 2;             /* lift above neighbouring input border */
}
.input-group > .btn:focus,
.input-group > .btn:focus-visible {
    outline: 0;
    border-color: var(--rv-navy);
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .1);    /* match .rv-input:focus ring */
    background: #fff;                              /* match .rv-input:focus bg */
    z-index: 2;
}
.input-group > .btn:active {
    background: rgba(var(--rv-navy-rgb), .12);
    transform: none;        /* defeat the global .btn:active translateY tilt */
}

/* Form controls — subtle focus glow that matches brand navy */
.form-control,
.form-select {
    border-color: var(--rv-border);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--rv-navy);
    box-shadow: 0 0 0 .2rem rgba(var(--rv-navy-rgb), .18);
}
.form-label {
    font-weight: 600;
    color: var(--rv-text);
    font-size: .85rem;
    letter-spacing: .01em;
    margin-bottom: .35rem;
}

/* Question-type form panes — toggled in JS based on the type selector */
.rv-iq-pane { padding-top: .25rem; }
.rv-iq-pane[style*="display: none"] { display: none !important; }

/* ---------- Audit Log page ---------- */
.rv-audit-quick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}
.rv-audit-quick-label {
    color: var(--rv-muted);
    font-size: .8rem;
    margin-right: .25rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.rv-audit-pill {
    border: 1px solid var(--rv-border);
    background: #fff;
    color: var(--rv-text);
    border-radius: 999px;
    padding: .3rem .85rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rv-audit-pill:hover {
    background: var(--rv-pill-bg);
    border-color: var(--rv-border-strong);
    color: var(--rv-navy);
}
.rv-audit-pill.is-active {
    background: var(--rv-navy);
    border-color: var(--rv-navy);
    color: #fff;
}

/* Event badge with leading icon */
.badge.rv-audit-evt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4em .7em;
}
.badge.rv-audit-evt i { font-size: .9em; }

/* IP and metadata cells */
code.rv-audit-ip {
    background: #f1f5f9;
    color: var(--rv-text);
    padding: .15rem .45rem;
    border-radius: 5px;
    font-size: .78rem;
}
.rv-audit-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    max-width: 380px;
}
.rv-audit-meta-chip {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid var(--rv-border);
    border-radius: 6px;
    overflow: hidden;
    font-size: .72rem;
    line-height: 1;
    max-width: 100%;
}
.rv-audit-meta-k {
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    padding: .25rem .45rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: .02em;
}
.rv-audit-meta-v {
    padding: .25rem .5rem;
    color: var(--rv-text);
    font-family: 'DM Mono', 'Courier New', monospace;
    font-size: .72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

/* ---------- Candidate top bar (assessment flow) ----------
   Flipped to a neutral white header (matches .rv-header on the other 3
   layouts) so the brand color doesn't repaint the candidate's chrome
   during the assessment. */
.rv-cand-topbar {
    background: #fff;
    color: var(--rv-text);
    padding: .9rem 1.5rem;
    border-bottom: 1px solid var(--rv-border);
}
/* Center content to the same 1200px column the auth/admin/HR headers use, so
   the brand logo sits at an identical x-position across login and assessment.
   The inner .75rem gutter mirrors the container-fluid padding in layouts.auth. */
.rv-cand-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 .75rem;
    gap: .75rem;
}
.rv-cand-brand-name {
    font-family: var(--rv-font-brand);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .03em;
    line-height: 1.1;
    color: var(--rv-navy);
}
.rv-cand-brand-sub {
    font-size: .65rem;
    letter-spacing: .25em;
    opacity: 1;
    color: var(--rv-muted);
    margin-top: .1rem;
}
.rv-cand-user-trigger {
    color: var(--rv-text) !important;
}
.rv-cand-user-trigger i { color: var(--rv-muted); }
.rv-cand-user-trigger:hover {
    opacity: 1;
    color: var(--rv-navy) !important;
}
.rv-cand-user-trigger:hover i { color: var(--rv-navy); }

/* Sticky timer bar inside the candidate flow */
.rv-timer-bar {
    position: sticky; top: 0; z-index: 50;
    background: #fff;
    border: 1px solid var(--rv-border);
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 14px -10px rgba(15,23,42,.18);
}
.rv-timer-label {
    color: var(--rv-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 600;
    margin-bottom: .15rem;
}
.rv-timer {
    font-family: var(--rv-font-system);
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--rv-navy);
    letter-spacing: .04em;
}
.rv-timer.is-warning { color: #b45309; }
.rv-timer.is-danger  { color: #dc2626; animation: rv-pulse .7s ease-in-out infinite alternate; }
@keyframes rv-pulse { from { opacity: 1; } to { opacity: .55; } }

/* Question card inside the section card */
.rv-q-card {
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    margin-bottom: .85rem;
    background: #fff;
}
.rv-q-card:last-child { margin-bottom: 0; }
.rv-q-card legend {
    font-size: .98rem;
    font-weight: 600;
    color: var(--rv-text);
    margin-bottom: .65rem;
    padding: 0;
    float: none;
    width: auto;
    line-height: 1.4;
}
.rv-q-meta {
    font-size: .68rem;
    color: var(--rv-muted);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    margin-bottom: .35rem;
}

/* Likert scale */
.rv-likert {
    display: flex;
    gap: .5rem;
    justify-content: space-between;
    flex-wrap: wrap;
}
.rv-likert label {
    flex: 1 1 0;
    min-width: 90px;
    padding: .6rem .35rem;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    text-align: center;
    font-size: .8rem;
    cursor: pointer;
    background: #fff;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.rv-likert label:hover { background: #f1f5f9; }
.rv-likert input[type="radio"] { display: block; margin: 0 auto .25rem; accent-color: var(--rv-navy); }
.rv-likert label:has(input:checked) {
    background: var(--rv-pill-bg);
    border-color: var(--rv-navy);
    color: var(--rv-navy);
    font-weight: 600;
}

/* ---------- PWA install prompt (bottom sheet on mobile, banner on tablet) ---------- */
.rv-install {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9000;
    display: flex;
    justify-content: center;
    padding: 0 .75rem .75rem;
    pointer-events: none; /* card itself catches; backdrop area doesn't block */
}
.rv-install-card {
    pointer-events: auto;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border: 1px solid var(--rv-border);
    border-radius: 14px 14px 14px 14px;
    box-shadow: 0 18px 38px -14px rgba(15, 23, 42, .35);
    padding: .9rem 1rem;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas:
        "icon  text  close"
        "actions actions actions";
    column-gap: .75rem;
    row-gap: .65rem;
    align-items: center;
    transform: translateY(150%);
    opacity: 0;
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease;
}
.rv-install.is-open .rv-install-card { transform: translateY(0); opacity: 1; }

.rv-install-icon {
    grid-area: icon;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--rv-navy) 0%, var(--rv-navy-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.rv-install-icon img,
.rv-install-icon svg { width: 100%; height: 100%; object-fit: cover; display: block; }

.rv-install-text  { grid-area: text; min-width: 0; }
.rv-install-title { font-weight: 700; color: var(--rv-navy); font-size: .95rem; line-height: 1.2; }
.rv-install-desc  { color: var(--rv-muted); font-size: .8rem; margin-top: .15rem; line-height: 1.4; }
.rv-install-desc i { color: var(--rv-navy); }
.rv-install-desc strong { color: var(--rv-text); }

.rv-install-actions {
    grid-area: actions;
    display: flex;
    gap: .5rem;
}
.rv-install-btn {
    flex: 1;
    border: 1px solid var(--rv-border);
    background: #fff;
    color: var(--rv-text);
    padding: .55rem .9rem;
    border-radius: 8px;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.rv-install-btn:hover { background: #f1f5f9; }
.rv-install-btn--primary {
    background: var(--rv-navy);
    border-color: var(--rv-navy);
    color: #fff;
}
.rv-install-btn--primary:hover { background: var(--rv-navy-dark); border-color: var(--rv-navy-dark); color: #fff; }
.rv-install-btn i { margin-right: .25rem; }

.rv-install-close {
    grid-area: close;
    width: 28px; height: 28px;
    border: 0;
    background: transparent;
    color: var(--rv-muted);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: start;
    transition: background-color .15s ease, color .15s ease;
}
.rv-install-close:hover { background: #f1f5f9; color: var(--rv-text); }

@media (max-width: 575.98px) {
    .rv-install { padding: 0 .5rem .5rem; }
    .rv-install-card { padding: .8rem .85rem; }
    .rv-install-title { font-size: .9rem; }
    .rv-install-desc { font-size: .76rem; }
}

@media (prefers-reduced-motion: reduce) {
    .rv-install-card { transition: none; transform: none; opacity: 1; }
}

/* ---------- Candidate Thank-You page ---------- */
.rv-thanks {
    max-width: 640px;
    margin: 1.5rem auto;
}
.rv-thanks-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    box-shadow: 0 14px 32px -10px rgba(5, 150, 105, .55);
    margin-bottom: 1rem;
}
.rv-thanks-title {
    font-family: var(--rv-font-brand);
    color: var(--rv-navy);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 2.6rem);
    line-height: 1;
    margin: 0 0 1.5rem;
}

.rv-thanks-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}
.rv-thanks-success-title {
    color: #065f46;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: .35rem;
}
.rv-thanks-success-body {
    color: #047857;
    font-size: .92rem;
    line-height: 1.5;
}

.rv-thanks-next {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    text-align: left;
}
.rv-thanks-next-title {
    color: var(--rv-muted);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: .65rem;
}
.rv-thanks-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rv-thanks-next-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .35rem 0;
    color: var(--rv-text);
    font-size: .9rem;
    line-height: 1.4;
}
.rv-thanks-next-list li i {
    color: var(--rv-navy);
    font-size: 1.05rem;
    flex-shrink: 0;
    margin-top: .15rem;
}

.rv-thanks-divider {
    margin: 1.25rem -1rem 1rem;
    border-color: var(--rv-border);
}
.rv-thanks-foot {
    color: var(--rv-muted);
    font-size: .9rem;
}
.rv-thanks-foot-strong {
    color: var(--rv-navy);
    font-weight: 700;
    font-size: .95rem;
}

/* Back-to-role-selection link — placed top-left, above the hero. Clean nav-style link. */
.rv-intake-back-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--rv-muted);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 1rem;
    padding: .35rem .55rem .35rem .35rem;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}
.rv-intake-back-link:hover {
    color: var(--rv-navy);
    background: var(--rv-pill-bg);
    text-decoration: none;
}
.rv-intake-back-link:hover i { transform: translateX(-2px); }
.rv-intake-back-link i { transition: transform .15s ease; }

/* Hero chips — the selected role + level summarised under the heading */
.rv-intake-hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    margin: .25rem 0 .75rem;
}
.rv-intake-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    border: 1px solid #c7d6f0;
    border-radius: 999px;
    padding: .25rem .7rem;
    font-size: .78rem;
    font-weight: 600;
}
.rv-intake-hero-chip i { font-size: .85em; opacity: .8; }

/* ---------- Candidate Intake (profile) page ---------- */
.rv-intake-hero {
    text-align: center;
    margin: 0 auto 1.5rem;
    max-width: 620px;
}
.rv-intake-hero-pill {
    display: inline-block;
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: .85rem;
}
.rv-intake-hero-title {
    font-family: var(--rv-font-brand);
    font-weight: 700;
    color: var(--rv-navy);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    line-height: 1.2;
    margin: 0 0 .5rem;
    letter-spacing: .01em;
}
.rv-intake-hero-sub {
    color: var(--rv-muted);
    font-size: .95rem;
    line-height: 1.55;
    margin: 0 0 .75rem;
}
.rv-intake-hero-meta {
    color: var(--rv-muted);
    font-size: .8rem;
    margin: 0;
}
.rv-intake-hero-meta .badge { font-size: .72rem; }

/* Legacy alias kept in case something still references it */
.rv-cand-intake-head { margin-bottom: 1.25rem; }
.rv-cand-intake-head h4 {
    font-family: var(--rv-font-brand);
    color: var(--rv-navy);
    font-weight: 700;
}
.rv-intake-card {
    border: 1px solid var(--rv-border) !important;
}
.rv-intake-section-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--rv-navy);
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 1rem;
}
.rv-intake-section-head i { font-size: 1.05rem; }
.rv-intake-sep { opacity: .4; margin: 0 .15rem; }

.rv-intake-label {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rv-muted);
    margin-bottom: .35rem;
}
.rv-intake-card .form-control,
.rv-intake-card .form-select {
    background: #f4f7fb;
    border-color: #e3e8ef;
}
.rv-intake-card .form-control:focus,
.rv-intake-card .form-select:focus {
    background: #fff;
    border-color: var(--rv-navy);
}

/* Selfie capture stages */
.rv-cam-stage {
    border: 2px dashed #c7d6f0;
    background: #f4f7fb;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
}
.rv-cam-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto .75rem;
    border-radius: 14px;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rv-navy);
    font-size: 1.6rem;
    box-shadow: 0 4px 12px -6px rgba(15,23,42,.18);
}
.rv-cam-prompt-title {
    color: var(--rv-navy);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: .15rem;
}
.rv-cam-prompt-meta {
    color: var(--rv-muted);
    font-size: .85rem;
}
.rv-cam-cta {
    margin-top: 1rem;
    background: var(--rv-navy);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: .55rem 1.25rem;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    transition: background-color .15s ease;
}
.rv-cam-cta:hover { background: var(--rv-navy-dark); color: #fff; }

/* Secondary / ghost variant of the camera CTA (used by "Choose from device") */
.rv-cam-cta--ghost {
    background: #fff;
    color: var(--rv-navy);
    border: 1px solid var(--rv-border-strong);
}
.rv-cam-cta--ghost:hover {
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    border-color: var(--rv-navy);
}

/* Button group that holds the camera + upload CTAs side by side */
.rv-cam-cta-group {
    margin-top: 1rem;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}
.rv-cam-cta-group .rv-cam-cta { margin-top: 0; }

.rv-cam-thumb {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid var(--rv-border);
    margin: 0 auto;
    display: block;
}
.rv-cam-live-frame {
    display: flex;
    justify-content: center;
}
.rv-cam-video {
    width: 100%;
    max-width: 320px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    background: #1f2937;
    transform: scaleX(-1);
}

/* Soft hint banner used inside intake cards */
.rv-intake-hint {
    background: #ecfdf5;
    color: #065f46;
    border-left: 3px solid #059669;
    border-radius: 8px;
    font-size: .85rem;
    padding: .55rem .85rem;
    margin: 0;
}
.rv-intake-hint i { margin-right: .25rem; }

/* Role-chip multi-select grid */
.rv-role-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .65rem;
}
.rv-role-chip {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .8rem;
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    user-select: none;
    margin: 0;
    transition: border-color .15s ease, background-color .15s ease;
}
.rv-role-chip input { display: none; }
.rv-role-chip:hover { border-color: var(--rv-border-strong); background: #f8fafc; }
.rv-role-chip:has(input:checked) {
    border-color: var(--rv-navy);
    background: var(--rv-pill-bg);
    box-shadow: 0 0 0 2px rgba(var(--rv-navy-rgb), .12) inset;
}
.rv-role-chip-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--rv-pill-bg);
    color: var(--rv-navy);
    font-size: .9rem;
}
.rv-role-chip:has(input:checked) .rv-role-chip-icon {
    background: var(--rv-navy);
    color: #fff;
}
.rv-role-chip-name {
    font-size: .85rem;
    font-weight: 600;
    color: var(--rv-text);
    line-height: 1.25;
}
.rv-role-chip:has(input:checked) .rv-role-chip-name {
    color: var(--rv-navy);
}

/* ---------- Candidate Details page ---------- */
.rv-cand-hero { border-left: 4px solid var(--rv-navy); }
.rv-cand-photo {
    width: 96px; height: 96px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--rv-pill-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.rv-cand-photo img { width: 100%; height: 100%; object-fit: cover; }
.rv-cand-photo-fallback {
    color: var(--rv-navy);
    font-size: 2.4rem;
    font-weight: 700;
    font-family: var(--rv-font-system);
}
.rv-cand-name {
    font-family: var(--rv-font-brand);
    color: var(--rv-navy);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 1.85rem);
    line-height: 1.1;
}

.rv-info-list dt { color: var(--rv-muted); font-weight: 500; font-size: .82rem; padding-top: .15rem; padding-bottom: .15rem; }
.rv-info-list dd { color: var(--rv-text); font-weight: 500; font-size: .9rem; padding-top: .15rem; padding-bottom: .15rem; }

/* Mini-stat tiles inside the Compensation card. The tile lives INSIDE
   the Bootstrap col (not on the col itself) so the .row.g-2 gutter
   shows as actual whitespace between adjacent tiles. */
.rv-mini-stat {
    background: #f8fafc;
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    padding: .65rem .75rem;
    text-align: center;
    height: 100%;
}
.rv-mini-stat.is-flag { background: #fef3c7; border-color: #fde68a; }

/* ---------- Pill chips (candidate header position/level/status/flag) ----------
   Replaces Bootstrap .badge with a softer, consistently sized pill that
   matches the rest of the brand UI. Variants:
     --neutral  light grey-blue (positions, levels)
     --success  emerald (status: completed)
     --info     navy-tint (status: active / in_progress)
     --muted    plain grey (status: expired)
     --warning  amber (hike / appraisal flags) */
.rv-cand-pills { row-gap: .35rem; }
.rv-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .65rem;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.1;
    border-radius: 5px;
    border: 1px solid transparent;
    letter-spacing: .01em;
    white-space: nowrap;
}
.rv-pill i { font-size: .82em; }
.rv-pill--neutral { background: #eef2f7; color: #475569; border-color: #dde4ee; }
.rv-pill--success { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.rv-pill--info    { background: var(--rv-navy-tint); color: var(--rv-navy); border-color: rgba(var(--rv-navy-rgb), .2); }
.rv-pill--muted   { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.rv-pill--warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.rv-mini-stat-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--rv-muted);
    font-weight: 600;
}
.rv-mini-stat-value {
    font-family: var(--rv-font-system);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rv-navy);
    margin-top: .15rem;
}

/* Section title chip used inside cards */
.rv-block-title {
    color: var(--rv-navy);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-bottom: .65rem;
}
.rv-block-title i { margin-right: .25rem; }

/* Assessment grade hero card */
.rv-grade-card {
    border-radius: 12px;
    padding: 1.25rem 1.1rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(135deg, var(--rv-navy) 0%, var(--rv-navy-dark) 100%);
    height: 100%;
    box-shadow: 0 6px 18px -10px rgba(15,23,42,.35);
}
.rv-grade-card.rv-grade--aplus { background: linear-gradient(135deg, #059669 0%, #065f46 100%); }
.rv-grade-card.rv-grade--a     { background: linear-gradient(135deg, var(--rv-navy) 0%, var(--rv-navy-dark) 100%); }
.rv-grade-card.rv-grade--b     { background: linear-gradient(135deg, #0d9488 0%, #115e59 100%); }
.rv-grade-card.rv-grade--c     { background: linear-gradient(135deg, #d97706 0%, #92400e 100%); }
.rv-grade-card.rv-grade--d     { background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%); }
.rv-grade-label {
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    opacity: .85;
    font-weight: 600;
}
.rv-grade-letter {
    font-family: var(--rv-font-brand);
    font-size: 4.5rem;
    font-weight: 700;
    line-height: 1;
    margin: .25rem 0;
}
.rv-grade-meta { font-size: 1.05rem; font-weight: 600; opacity: .95; }
.rv-grade-sub { font-size: .75rem; margin-top: .35rem; opacity: .75; }

/* Section / Big-5 progress bars */
.rv-section-bar { margin-bottom: .65rem; }
.rv-section-bar-head {
    display: flex;
    justify-content: space-between;
    font-size: .82rem;
    margin-bottom: .25rem;
}
.rv-section-bar-name { color: var(--rv-text); font-weight: 500; }
.rv-section-bar-val { color: var(--rv-navy); font-weight: 600; }
.rv-section-bar-track {
    background: #e3e8ef;
    border-radius: 999px;
    height: 7px;
    overflow: hidden;
}
.rv-section-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width .35s ease;
}

/* HR Evaluation rating rows */
.rv-rating-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .35rem 0;
    border-bottom: 1px dashed var(--rv-border);
    font-size: .88rem;
}
.rv-rating-row:last-child { border-bottom: 0; }
.rv-rating-label { color: var(--rv-text); }
.rv-stars-display i { font-size: .95rem; }
.rv-stars-display .star-on  { color: #f59e0b; }
.rv-stars-display .star-off { color: #d1d5db; }

/* Evaluation notes (Strengths / Concerns / Psychosocial) */
.rv-eval-note {
    border-radius: 10px;
    padding: .75rem .85rem;
    height: 100%;
    border: 1px solid var(--rv-border);
    border-left-width: 3px;
}
.rv-eval-note-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-bottom: .35rem;
}
.rv-eval-note-body { font-size: .88rem; line-height: 1.5; color: var(--rv-text); }
.rv-eval-note--success { background: #ecfdf5; border-left-color: #059669; }
.rv-eval-note--success .rv-eval-note-label { color: #065f46; }
.rv-eval-note--warning { background: #fef3c7; border-left-color: #d97706; }
.rv-eval-note--warning .rv-eval-note-label { color: #854d0e; }
.rv-eval-note--info    { background: #eff6ff; border-left-color: var(--rv-navy); }
.rv-eval-note--info    .rv-eval-note-label { color: var(--rv-navy); }

/* HR review — free-text candidate responses */
.rv-text-answers { display: flex; flex-direction: column; gap: .65rem; }
.rv-text-answer {
    border: 1px solid var(--rv-border);
    border-left: 3px solid var(--rv-navy);
    border-radius: 8px;
    padding: .75rem .9rem;
    background: #fafbfc;
}
.rv-text-answer-q {
    font-weight: 600;
    color: var(--rv-navy);
    font-size: .9rem;
    margin-bottom: .35rem;
}
.rv-text-answer-a {
    color: var(--rv-text);
    font-size: .92rem;
    line-height: 1.55;
    white-space: pre-wrap;
}
.rv-text-answer-empty {
    color: var(--rv-muted);
    font-size: .82rem;
    font-style: italic;
}

/* ---------- MCQ detail (Knowledge per-question on candidate dossier) ---------- */
/* Reusable Q-Bank cards (Know each other / Technical) — soft gray bubble
   under the brand-coloured question label. Mirrors the existing knowledge
   per-question block visually without duplicating its full MCQ machinery. */
.rv-qa-answer {
    background: #f3f5f9;
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    padding: .55rem .85rem;
    line-height: 1.5;
}
.rv-qa-pair + .rv-qa-pair { padding-top: .25rem; }

.rv-mcq-list { display: flex; flex-direction: column; gap: .85rem; }
.rv-mcq-item {
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    padding: .75rem .9rem;
    background: #fff;
}
.rv-mcq-item-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .6rem;
}
.rv-mcq-item-q {
    font-weight: 600;
    color: var(--rv-navy);
    font-size: .92rem;
    line-height: 1.45;
    flex: 1;
}
.rv-mcq-item-status {
    font-size: .72rem;
    font-weight: 700;
    padding: .15rem .5rem;
    border-radius: 999px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rv-mcq-item-status--correct  { background: #d1fae5; color: #065f46; }
.rv-mcq-item-status--wrong    { background: #fee2e2; color: #991b1b; }
.rv-mcq-item-status--unscored { background: #e5e7eb; color: #4b5563; }
.rv-mcq-item-status--skipped  { background: #fef3c7; color: #854d0e; }
.rv-mcq-options { display: flex; flex-direction: column; gap: .25rem; }
.rv-mcq-option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .4rem .55rem;
    border-radius: 6px;
    font-size: .88rem;
    line-height: 1.4;
    background: #fafbfc;
    border: 1px solid transparent;
}
.rv-mcq-option-letter {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    color: #374151;
    font-weight: 700;
    font-size: .72rem;
}
.rv-mcq-option-text { flex: 1; color: var(--rv-text); }
.rv-mcq-option-tag {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .4rem;
    border-radius: 4px;
}
.rv-mcq-option--picked {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.rv-mcq-option--correct .rv-mcq-option-letter { background: #10b981; color: #fff; }
.rv-mcq-option--picked.rv-mcq-option--correct {
    background: #d1fae5;
    border-color: #6ee7b7;
}
.rv-mcq-option--picked-wrong .rv-mcq-option-letter { background: #ef4444; color: #fff; }
.rv-mcq-option--picked-wrong {
    background: #fee2e2;
    border-color: #fca5a5;
}
.rv-mcq-meta {
    display: flex;
    gap: .75rem;
    margin-top: .55rem;
    color: var(--rv-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Toggle-switch row — used for boolean settings (dashboard widgets, etc.).
   Rendered as a <label for="…"> so the entire tile is a click target. */
.rv-toggle-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .7rem .9rem;
    background: #f8fafc;
    border: 1px solid var(--rv-border);
    border-radius: 10px;
    cursor: pointer;
    user-select: none;
    margin-bottom: 0;
    transition: border-color .15s ease, background-color .15s ease;
}
.rv-toggle-row:hover {
    border-color: var(--rv-border-strong);
    background: #f1f5f9;
}
.rv-toggle-row:has(input.form-check-input:checked) {
    background: var(--rv-pill-bg);
    border-color: #c7d6f0;
}
/* Danger variant — used when toggling ON means flagging something bad
   (e.g. red flags on the HR Evaluation form). Active state goes red. */
.rv-toggle-row--danger:has(input.form-check-input:checked) {
    background: #fef2f2;
    border-color: #fecaca;
}
.rv-toggle-row--danger:has(input.form-check-input:checked) .rv-toggle-row-title {
    color: #b91c1c;
}
.rv-toggle-row--danger:has(input.form-check-input:checked) .rv-toggle-row-meta {
    color: #dc2626;
    font-weight: 600;
}
.rv-toggle-row--danger:has(input.form-check-input:checked) .form-switch .form-check-input {
    background-color: #dc2626;
    border-color: #dc2626;
}

/* Master toggle row (e.g. "Select All Permissions") — slightly more prominent */
.rv-toggle-row--master {
    background: #fff;
    border-color: var(--rv-border-strong);
    border-width: 1px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.rv-toggle-row--master .rv-toggle-row-title {
    color: var(--rv-navy);
    font-size: .95rem;
}
.rv-toggle-row--master .rv-toggle-row-title i { margin-right: .25rem; }
/* Indeterminate state — when some but not all child permissions are on */
.form-switch .form-check-input:indeterminate {
    background-color: var(--rv-navy);
    border-color: var(--rv-navy);
    opacity: .55;
    background-image: linear-gradient(to right,
        transparent 0,
        transparent calc(50% - 5px),
        #fff calc(50% - 5px),
        #fff calc(50% + 5px),
        transparent calc(50% + 5px));
    background-position: center;
    background-size: 100% 2px;
    background-repeat: no-repeat;
}
.rv-toggle-row-text { flex: 1; min-width: 0; }
.rv-toggle-row-title {
    color: var(--rv-text);
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.2;
}
.rv-toggle-row-meta {
    color: var(--rv-muted);
    font-size: .75rem;
    margin-top: .15rem;
}

/* Relative-time prefix shown ABOVE a date display when the date falls
   within the last 5 weeks. Always its own line via .d-block from the
   helper output. Generated by app_*_html() in app/Helpers/helpers.php. */
.rv-time-rel {
    font-size: .72rem;
    color: #9aa6b6;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1px;
}

/* Help-tip icon — small info dot next to setting labels that reveals a
   detailed explanation on hover/focus. Deliberately low-contrast so it
   doesn't compete with the actual label text; lights up on hover. */
.rv-help-tip {
    color: #9e9e9e;
    font-size: .8em;
    margin-left: .35rem;
    cursor: help;
    vertical-align: baseline;
    opacity: .85;
    transition: color .12s ease, opacity .12s ease, transform .12s ease;
}
.rv-help-tip:hover,
.rv-help-tip:focus {
    color: var(--rv-navy);
    opacity: 1;
    outline: none;
    transform: scale(1.05);
}

/* White card-style tooltip that matches the rest of the UI. Bootstrap 5
   exposes CSS variables on .tooltip — we override here only for the
   .rv-help-tooltip class so other Bootstrap tooltips keep their defaults. */
.tooltip.rv-help-tooltip {
    --bs-tooltip-bg: #ffffff;
    --bs-tooltip-color: #1f2937;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 380px;
    z-index: 2000; /* above the backdrop (1500), below modals (1055+) */
}
.tooltip.rv-help-tooltip .tooltip-inner {
    max-width: 380px;
    text-align: left;
    padding: .9rem 1.05rem;
    line-height: 1.55;
    font-size: .85rem;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid rgba(var(--rv-navy-rgb), .14);
    border-radius: 10px;
    box-shadow:
        0 12px 28px rgba(15, 23, 42, .18),
        0 3px 8px rgba(15, 23, 42, .08);
}
.tooltip.rv-help-tooltip .tooltip-inner strong { color: var(--rv-navy); font-weight: 600; }
.tooltip.rv-help-tooltip .tooltip-inner em { color: #334155; font-style: italic; }
.tooltip.rv-help-tooltip .tooltip-inner code {
    color: var(--rv-navy);
    background: #eef2f8;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.tooltip.rv-help-tooltip .tooltip-inner a {
    color: var(--rv-navy);
    text-decoration: underline;
    font-weight: 500;
}
.tooltip.rv-help-tooltip .tooltip-inner a:hover { color: var(--rv-navy-dark); }
/* Arrow color is already handled by Bootstrap's per-placement rules using
   --bs-tooltip-bg (white). Don't override the per-direction border-colors
   here — for left/right placement the top+bottom borders also have
   non-zero width, so colouring them turns the clean triangle into a
   diamond. Just add a soft drop-shadow on the rendered triangle so the
   white arrow stays visible against the page. */
.tooltip.rv-help-tooltip .tooltip-arrow::before {
    filter: drop-shadow(0 0 1.5px rgba(var(--rv-navy-rgb), .28));
}

/* Page backdrop — softly blurs the rest of the screen while a help-tip
   tooltip is open so the eye is naturally drawn to the popover text.
   Toggled by app.js on Bootstrap's show.bs.tooltip / hide.bs.tooltip. */
.rv-tip-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .14);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
    z-index: 1500;
    opacity: 0;
    pointer-events: none; /* never blocks hover/click on the underlying page */
    transition: opacity .14s ease;
}
.rv-tip-backdrop.is-visible { opacity: 1; }

/* Bootstrap form-switch — brand-tinted active state with smooth slide */
.form-check.form-switch { padding-left: 2.6em; }
.form-check-input.rv-toggle-switch,
.form-switch .form-check-input {
    width: 2.4em;
    height: 1.3em;
    margin-top: 0;
    background-color: #cbd5e1;
    border-color: #cbd5e1;
    cursor: pointer;
    /* background-position drives the thumb slide. Slightly longer duration +
       a tuned cubic-bezier (slight overshoot easing) makes the transition
       feel more polished than Bootstrap's default 150ms ease-in-out. */
    transition:
        background-color .25s ease,
        border-color     .25s ease,
        box-shadow       .2s  ease,
        background-position .28s cubic-bezier(.4, .0, .2, 1) !important;
}
.form-switch .form-check-input:checked {
    background-color: var(--rv-navy);
    border-color: var(--rv-navy);
}
.form-switch .form-check-input:active {
    /* tiny press feedback */
    filter: brightness(.95);
}
.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(var(--rv-navy-rgb), .18);
    border-color: var(--rv-navy);
}

/* Page header — consistent across every list / edit / show page.
   Matches the d-flex justify-content-between header pattern already
   used by index views and gives the lead paragraph a cleaner look. */
.rv-page-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1.25rem;
}
.rv-page-head .text-muted { font-size: .9rem; }

/* Alerts — modernized */
.alert {
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 10px;
    padding: .85rem 1.1rem;
    font-size: .9rem;
    margin-bottom: 1.75rem;
}
.alert-success { background: var(--rv-success-bg); color: var(--rv-success-text); border-left-color: #059669; }
.alert-info    { background: #eff6ff; color: #1e3a8a;             border-left-color: var(--rv-navy); }
.alert-warning { background: #fefce8; color: #854d0e;             border-left-color: #ca8a04; }
.alert-danger  { background: var(--rv-error-bg); color: var(--rv-error); border-left-color: var(--rv-error); }

/* DataTable polish — tighter wrappers, refined search/length controls */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--rv-border);
    border-radius: 8px;
    padding: .4rem .7rem;
    font-size: .85rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--rv-navy);
    box-shadow: 0 0 0 .2rem rgba(var(--rv-navy-rgb), .15);
    outline: 0;
}
.dataTables_wrapper .dataTables_length select {
    border-radius: 7px;
    border-color: var(--rv-border);
}
.dataTables_wrapper .dataTables_info {
    color: var(--rv-muted);
    font-size: .82rem;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .rv-cta, .rv-cta-secondary, .rv-input { transition: none; }
    .rv-spinner { animation: none; }
    .dataTables_wrapper.rv-dt-processing-active::after { animation: none; }
    .dataTables_wrapper.rv-dt-processing-active table.dataTable { transition: none; }
    .card, .rv-stat-card, .btn { transition: none; }
    .rv-stat-card:hover, .rv-hoverable:hover { transform: none; }
    .form-switch .form-check-input { transition: none !important; }
}