/* ============================================================
   Project-wide theme overrides on top of Modernize.
   ============================================================
   Loaded AFTER Modernize's compiled CSS, so these rules win without
   needing !important. Don't edit Modernize itself — its CSS is vendor
   code and changes there get blown away on update / re-import.
   ----------------------------------------------------------------- */

/* Dark-mode body background. Sets a single CSS variable used by
   Bootstrap (which Modernize is built on) — flows through every body
   surface, content area, etc. without us touching every component
   one by one.

   Modernize ships a slightly different dark default (#1c1d2a-ish);
   #2b3035 is the project palette per design direction. Cards, panels,
   and the Modernize topbar still use Modernize's slightly-lighter
   dark surface tokens, which gives them automatic contrast against
   this body color. */
[data-bs-theme="dark"] {
    --bs-body-bg: var(--rq-surface);
}

html[data-layout=horizontal] .body-wrapper > .container-fluid {
    padding-top: 15px !important;
}

.leaflet-control-attribution {
    display: none !important;
}
/* ============================================================
   Keyboard focus ring - global
   ============================================================
   Before this, keyboard focus was effectively invisible across the app.
   Three rules in app-auth-pages.css set "outline: none" on the search,
   inquiry-search and reply inputs and replaced it with a 1px
   border-colour change. Nothing else - buttons, links,
   cards, nav items, tabs - had any focus treatment at all, so a keyboard
   or screen-reader user had no way to tell where they were.

   ":focus-visible" (not ":focus") means the ring only appears for
   keyboard and programmatic focus. Mouse users see nothing change, so
   this costs the visual design nothing.

   Specificity note: site.css is loaded BEFORE app-auth-pages.css, so a
   bare ":focus-visible" (0,1,0) would lose to ".rq-search-input"
   (0,1,0) on source order. ":is()" takes the specificity of its most
   specific argument - the class selectors here - which lifts the whole
   rule to (0,2,0) and lets it win without !important.
   ----------------------------------------------------------------- */

:root {
    --rq-focus-ring: var(--rq-accent);
}

[data-bs-theme="dark"] {
    /* #3b6cf5 sits at roughly 3.3:1 on the dark body; the lighter tint
       clears 4.5:1 so the ring stays obvious on dark surfaces. */
    --rq-focus-ring: var(--rq-accent);
}

:is(a, button, input, select, textarea, summary, [tabindex],
    .rq-btn, .rq-pill, .nav-link, .page-link, .dropdown-item):focus-visible {
    outline: 2px solid var(--rq-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Landmarks only ever receive focus programmatically (skip links, route
   changes). A ring around the whole region is noise - the heading
   announcement already tells the user where they landed. */
:is(main, section, [role="region"]):focus-visible {
    outline: none;
}

/* ============================================================
   Dock the sidebar from 1200px instead of 1300px
   ============================================================
   Modernize hides the vertical sidebar off-canvas below 1300px:
       @media (max-width:1299.98px) { .left-sidebar { left:-270px } }
   which means a 1280x800 laptop - one of the most common screen sizes
   in use - loses the entire primary navigation behind a hamburger. That
   is a desktop problem, not a mobile one.

   1200px is Bootstrap's xl breakpoint and the one the rest of the shell
   already keys off (the in-sidebar close button is .d-block .d-xl-none),
   so docking here keeps one consistent breakpoint across CSS and markup.
   Below 1200px the off-canvas drawer stays, which is correct for tablets
   and phones.

   1024px was considered and rejected: a 270px rail would leave 754px for
   the grid-heavy landlord screens, which is too tight.

   These rules re-apply Modernize's own min-width:1300px docked geometry
   in the 1200-1299.98px band. Both sidebar states are covered, because
   Modernize's app.min.js forces data-sidebartype="mini-sidebar" under
   1300px - so in this band the rail usually renders at its 87px width,
   and expands on hover exactly as it does above 1300px.

   site.css loads after Modernize, so equal-specificity rules win on
   source order; the .left-sidebar override is lifted to (0,2,0) by the
   attribute selector to beat the vendor's (0,1,0).

   Not covered: html[dir=rtl]. The app doesn't ship RTL, and mirroring
   these offsets untested would be worse than leaving the vendor
   behaviour in place.
   ----------------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1299.98px) {

    [data-layout="vertical"] .left-sidebar {
        left: 0;
    }

    /* data-sidebartype="full" - 270px rail */
    [data-layout="vertical"] body[data-sidebartype="full"] .left-sidebar {
        width: 270px;
    }

    [data-layout="vertical"] body[data-sidebartype="full"] .topbar {
        width: calc(100% - 270px);
    }

    [data-layout="vertical"] body[data-sidebartype="full"] .page-wrapper {
        margin-left: 270px;
    }

    /* data-sidebartype="mini-sidebar" - 87px icon rail, expands on hover */
    [data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .left-sidebar {
        width: 87px;
    }

    [data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .left-sidebar:hover {
        width: 270px;
        position: fixed;
        height: 100vh;
    }

    [data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .topbar {
        width: calc(100% - 87px);
    }

    [data-layout="vertical"] body[data-sidebartype="mini-sidebar"] .page-wrapper {
        margin-left: 87px;
    }

    /* The scrim belongs to the off-canvas drawer. With the rail docked it
       would grey out the page for no reason if .show-sidebar were ever
       toggled in this band. */
    [data-layout="vertical"] .show-sidebar + .dark-transparent {
        display: none;
    }
}