@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
/* =====================================================================
   BACKEND CHROME: the dashboard header and footer, and nothing else.
   One stylesheet for every backend layout, portal and theme.
     Header: application/views/admin/layouts/partials/dheader.php  (.qme-ah)
     Footer: application/views/enduser/layouts/partials/dfooter.php (.qme-af)
   Colours come only from the portal's theme variables:
     accent    var(--site_color_g)       (design "blue")
     ink/text  var(--site_font_color_g)  (design "navy"/"ink")
     highlight var(--secondary-color)    (design "yellow")
   Tints are mixed from those with color-mix(); each has a plain fallback
   declared first for browsers without color-mix(). Minimum type 14px.
   Inner containers: 16px gutters, capped at 1320px from 1300px up.
   ===================================================================== */

.qme-ah,
.qme-af {
    --ah-accent: var(--site_color_g, #1b2de6);
    --ah-ink: var(--site_font_color_g, #202020);
    --ah-hi: var(--secondary-color, #2ecc71);
    --ah-tint: color-mix(in srgb, var(--ah-accent) 6%, #fff);
    --ah-tint2: color-mix(in srgb, var(--ah-accent) 12%, #fff);
    --ah-line: color-mix(in srgb, var(--ah-ink) 10%, transparent);
    --ah-soft: color-mix(in srgb, var(--ah-ink) 80%, #fff);
    --ah-muted: color-mix(in srgb, var(--ah-ink) 60%, #fff);
    --ah-ring: color-mix(in srgb, var(--ah-accent) 35%, transparent);
    --ah-shadow: 0 1px 0 var(--ah-line), 0 8px 24px -20px color-mix(in srgb, var(--ah-ink) 45%, transparent);
    --ah-panel-shadow: 0 24px 48px -20px color-mix(in srgb, var(--ah-ink) 45%, transparent), 0 0 0 1px var(--ah-line);
    --ah-dot: #d6453d;
}

/* ---------- page: the design's type and grey background --------------- */
/* Manrope, as in the client design. Set on elements, not classes, so icon
   fonts (.fa, .mdi, feather) keep their own family. Backend pages only:
   this file is loaded by the dashboard header and footer partials. */
html body,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body li, body td, body th, body label,
body button, body input, body select, body textarea {
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}
/* the design's page grey, exactly */
html, html body, .main-wrapper, .page-wrapper {
    background-color: #eef1fa;
}

/* ---------- containers ------------------------------------------------ */
.qme-ah-in,
.qme-af-in {
    box-sizing: border-box;
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1300px) {
    .qme-ah-in,
    .qme-af-in { max-width: 1320px; padding-left: 12px; }
    .qme-ah-in { padding-right: 12px; }
    /* the backend's middle content: one 1320px container, edges in line with
       the header and footer (custom.css caps .container at 1250px) */
    .page-wrapper .container { max-width: 1320px !important; }
    .page-wrapper .page-content { max-width: 1320px !important; }
}
.qme-ah-bar2 > .qme-ah-in { padding-left: 0; }

/* ---------- header shell ---------------------------------------------- */
/* .horizontal-menu stays on the element only as a hook (the support widget
   reads it); the theme's own .horizontal-menu rules are neutralised here. */
.qme-ah.horizontal-menu {
    position: -webkit-sticky;
    position: sticky !important;
    top: env(safe-area-inset-top, 0px);
    left: auto;
    right: auto;
    z-index: 1030;
    background: #fff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .08), 0 8px 24px -20px rgba(0, 0, 0, .4);
    box-shadow: var(--ah-shadow);
    color: var(--ah-ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
}
.qme-ah *,
.qme-ah *::before,
.qme-ah *::after { box-sizing: border-box; }
.qme-ah a { text-decoration: none; }
.qme-ah button,
.qme-ah input,
.qme-ah select { font-family: inherit; }
.qme-ah svg { flex: 0 0 auto; }
/* The old fixed header pushed the page down 60px on small screens; this one
   is in the flow, so that offset is not needed. */
@media (max-width: 991px) {
    .qme-ah ~ .page-wrapper { margin-top: 0; }
}

/* ---------- bar 1: brand, search, icons ------------------------------- */
.qme-ah-bar1 { position: relative; }
.qme-ah-bar1 > .qme-ah-in {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 64px;
}
.qme-ah-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    max-width: 220px;
    line-height: 1.1;
    color: var(--ah-ink);
}
.qme-ah-brand:hover { color: var(--ah-ink); }
.qme-ah-brand img {
    display: block;
    height: 34px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
}
.qme-ah-brand-name {
    display: block;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ah-ink);
}
.qme-ah-role {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ah-accent);
}

/* search box */
.qme-ah-search {
    flex: 1 1 auto;
    max-width: 780px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px;
    border-radius: 14px;
    background: #f5f6fb;
    background: var(--ah-tint);
    border: 1px solid rgba(0, 0, 0, .08);
    border: 1px solid var(--ah-line);
}
.qme-ah-field {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0 10px;
    color: var(--ah-muted);
    font-weight: 400;
    cursor: text;
}
.qme-ah-field.qme-ah-kw { flex: 1.4 1 200px; }
.qme-ah-field + .qme-ah-field {
    border-left: 1px solid rgba(0, 0, 0, .08);
    border-left: 1px solid var(--ah-line);
}
.qme-ah-ac {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}
.qme-ah-search input,
.qme-ah-search select {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    outline: none;
    color: var(--ah-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}
.qme-ah-search select { cursor: pointer; text-overflow: ellipsis; }
.qme-ah-search select:disabled { cursor: not-allowed; opacity: .6; }
.qme-ah-search input::placeholder { color: var(--ah-muted); font-weight: 500; opacity: 1; }

/* buttons (search / reset / guest links) */
.qme-ah-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 8px 14px;
    border: 0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .2s, background .2s, color .2s, box-shadow .2s;
}
.qme-ah-btn--go,
.qme-ah-btn--go:hover,
.qme-ah-btn--go:focus {
    background: var(--ah-accent);
    color: #fff;
}
.qme-ah-btn--go:hover { filter: brightness(.92); }
.qme-ah-btn--line {
    background: #fff;
    color: var(--ah-accent);
    box-shadow: inset 0 0 0 1.5px var(--ah-ring);
}
.qme-ah-btn--line:hover,
.qme-ah-btn--line:focus {
    background: var(--ah-accent);
    color: #fff;
    box-shadow: none;
}

/* State / City: select2 (searchable), wider than the old native selects */
.qme-ah .qme-ah-field.qme-ah-loc { flex: 0 0 200px; }
.qme-ah .qme-ah-loc .select2-container { flex: 1 1 auto; min-width: 0; width: auto !important; }
.qme-ah .qme-ah-loc .select2-container .select2-selection--single { height: auto; padding: 8px 0; border: 0; background: none; outline: 0; }
.qme-ah .qme-ah-loc .select2-container .select2-selection__rendered { padding: 0 22px 0 0; color: var(--ah-ink); font-size: 14px; font-weight: 600; line-height: 20px; }
.qme-ah .qme-ah-loc .select2-container .select2-selection__arrow { top: 0; height: 100%; }
.qme-ah .qme-ah-loc .select2-container .select2-selection__arrow b { border-width: 0 !important; }  /* one chevron: the site CSS draws its own */
.qme-ah .qme-ah-loc .select2-container--disabled .select2-selection__rendered { color: var(--ah-muted); }
.qme-ah-s2drop.select2-dropdown { min-width: 240px; border: 0; border-radius: 12px; overflow: hidden; z-index: 1070;
    box-shadow: 0 24px 48px -20px rgba(8,15,84,.45), 0 0 0 1px rgba(8,15,84,.09); }
.qme-ah-s2drop .select2-search--dropdown { padding: 8px; }
.qme-ah-s2drop .select2-search__field { padding: 8px 10px; border: 1px solid rgba(8,15,84,.14) !important; border-radius: 8px; font-size: 14px; outline: 0; }
.qme-ah-s2drop .select2-results__option { padding: 8px 12px; font-size: 14px; }
.qme-ah-s2drop .select2-results__option--highlighted[aria-selected] { background: var(--site_color_g, #1326f3); color: #fff; }

/* autocomplete suggestions */
.qme-ah-suggest {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    left: -33px;
    min-width: 300px;
    width: max(calc(100% + 43px), 620px);
    max-width: calc(100vw - 32px);
    max-height: 440px;
    overflow-y: auto;
    padding: 6px;
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--ah-panel-shadow);
    z-index: 1060;
}
.qme-ah-suggest.is-visible { display: block; }
.qme-ah-sugg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ah-ink);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}
.qme-ah-sugg:hover,
.qme-ah-sugg.is-active { background: var(--ah-tint); color: var(--ah-accent); }
/* a long match (a bio, a statement) stays two lines; the type sits on the right, one line */
.qme-ah-sugg-label { flex: 1 1 auto; min-width: 0; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.qme-ah-sugg-meta { white-space: nowrap; }
.qme-ah-sugg mark { padding: 0; background: none; color: var(--ah-accent); font-weight: 800; }
.qme-ah-sugg-meta {
    flex: 0 0 auto;
    color: var(--ah-muted);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* icon buttons */
.qme-ah-icons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 0 auto;
    padding: 0;
    list-style: none;
}
.qme-ah-icon-item { position: relative; margin: 0; }
.qme-ah-search-toggle-item { display: none; }
.qme-ah-ib {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: #f5f6fb;
    background: var(--ah-tint);
    color: var(--ah-ink);
    cursor: pointer;
    transition: background .2s, color .2s;
}
.qme-ah-ib:hover,
.qme-ah-ib:focus,
.qme-ah-ib[aria-expanded="true"] {
    background: var(--ah-accent);
    color: #fff;
}
.qme-ah .dropdown-toggle::after { display: none; }
#l_notifiy,
#l_notifiy2 { position: absolute; inset: 0; line-height: 0; pointer-events: none; }  /* off the grid, so the icon stays centred */
.qme-ah-ib .indicator {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 8px;
    height: 8px;
}
.qme-ah-ib .indicator .circle {
    position: static;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ah-dot);
    box-shadow: 0 0 0 2px #fff;
    animation: none;
}
.qme-ah-ib .indicator .circle::before,
.qme-ah-ib .indicator .circle::after { display: none; }
.qme-ah-me {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    background: var(--ah-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--ah-ring);
    cursor: pointer;
}
.qme-ah-me:hover,
.qme-ah-me:focus { color: #fff; }
.qme-ah-me img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.qme-ah-guest { gap: 8px; }

/* dropdown panels: messages, notifications, account */
.qme-ah .qme-ah-panel {
    width: 340px;
    max-width: calc(100vw - 24px);
    margin-top: 10px;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--ah-panel-shadow);
    color: var(--ah-ink);
    font-size: 14px;
    z-index: 1060;
}
.qme-ah .qme-ah-panel::before,
.qme-ah .qme-ah-panel::after { display: none; }
.qme-ah .qme-ah-panel p { margin: 0; font-size: 14px; }
.qme-ah .qme-ah-panel .dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--ah-line);
    color: var(--ah-ink);
    font-size: 14px;
    font-weight: 700;
    white-space: normal;
}
.qme-ah .qme-ah-panel .dropdown-header a { font-size: 14px; color: var(--ah-muted); }
.qme-ah .qme-ah-panel .dropdown-header a:hover { color: var(--ah-accent); }
.qme-ah .qme-ah-panel .dropdown-body { max-height: 340px; overflow-y: auto; }
.qme-ah .qme-ah-panel .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    white-space: normal;
    color: var(--ah-ink);
    font-size: 14px;
}
.qme-ah .qme-ah-panel .dropdown-item:hover,
.qme-ah .qme-ah-panel .dropdown-item:focus { background: var(--ah-tint); }
.qme-ah .qme-ah-panel .dropdown-item .figure img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}
.qme-ah .qme-ah-panel .dropdown-item .icon {
    display: grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ah-tint2);
    color: var(--ah-accent);
}
.qme-ah .qme-ah-panel .dropdown-item .icon svg { width: 16px; height: 16px; }
.qme-ah .qme-ah-panel .dropdown-item .content { flex: 1 1 auto; min-width: 0; }
.qme-ah .qme-ah-panel .dropdown-item .content > div { gap: 8px; }
.qme-ah .qme-ah-panel .sub-text { color: var(--ah-muted); font-size: 14px; }
.qme-ah .qme-ah-panel .dropdown-footer {
    padding: 10px 16px;
    border-top: 1px solid var(--ah-line);
}
.qme-ah .qme-ah-panel .dropdown-footer a { color: var(--ah-accent); font-weight: 700; }
/* messages / notifications: a titled panel, a count, and an empty state when there is nothing */
.qme-ah .qme-ah-panel .qme-ah-ptitle { font-size: 16px; font-weight: 800; color: var(--ah-ink); display: flex; align-items: center; gap: 8px; }
.qme-ah .qme-ah-panel .qme-ah-count { padding: 2px 9px; border-radius: 999px; background: var(--ah-tint2); color: var(--ah-accent); font-size: 14px; font-weight: 700; }
.qme-ah .qme-ah-panel .qme-ah-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 18px 22px; text-align: center; }
.qme-ah .qme-ah-panel .qme-ah-empty-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 50%; background: var(--ah-tint); color: var(--ah-accent); }
.qme-ah .qme-ah-panel .qme-ah-empty b { font-size: 15px; color: var(--ah-ink); }
.qme-ah .qme-ah-panel .qme-ah-empty span:not(.qme-ah-empty-ic) { font-size: 14px; color: var(--ah-muted); }

/* account panel: fixed under the header, scrolling body, Log Out pinned
   (profile_dropdown_layout.php's script builds .pdd-extra / .pdd-footer) */
.qme-ah .nav-profile > .qme-ah-panel {
    position: fixed !important;
    top: 72px !important;
    right: 16px !important;
    left: auto !important;
    transform: none !important;
    margin: 0;
    width: 340px;
    max-height: calc(100vh - 88px);
    overflow: hidden;
    padding: 22px 22px 12px;
}
.qme-ah .nav-profile > .qme-ah-panel.show { display: flex; flex-direction: column; }
.qme-ah .nav-profile > .qme-ah-panel .dropdown-header {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
}
.qme-ah .nav-profile > .qme-ah-panel .dropdown-header .figure img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
}
.qme-ah .nav-profile > .qme-ah-panel .info { width: 100%; }
.qme-ah .nav-profile > .qme-ah-panel .info .name { font-size: 18px; line-height: 1.2; white-space: normal; }
.qme-ah .nav-profile > .qme-ah-panel .info .email { color: var(--ah-muted); white-space: normal; }
.qme-ah .nav-profile > .qme-ah-panel .qme-ah-volunteer { padding: 5px; border: 1px solid var(--ah-line); border-radius: 8px; }
.qme-ah .nav-profile > .qme-ah-panel .qme-ah-volunteer .menu-title { display: block; font-weight: 600; white-space: normal; }
.qme-ah .nav-profile > .qme-ah-panel .dropdown-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}
.qme-ah .nav-profile .profile-nav { margin: 0; list-style: none; }
.qme-ah .nav-profile .profile-nav .nav-item { margin: 0 0 4px; }
.qme-ah .nav-profile .profile-nav .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--ah-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
}
.qme-ah .nav-profile .profile-nav .nav-link:hover { background: var(--ah-tint); color: var(--ah-accent); }
.qme-ah .nav-profile .profile-nav .nav-link svg { width: 17px; height: 17px; }
.qme-ah .nav-profile .profile-nav .nav-link span { font-size: 14px; }
.qme-ah .nav-profile .pdd-extra {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--ah-line);
    text-align: center;
}
.qme-ah .nav-profile .pdd-footer {
    flex: 0 0 auto;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--ah-line);
}

/* ---------- bar 2: navigation ----------------------------------------- */
.qme-ah.horizontal-menu .qme-ah-bar2.bottom-navbar,
.qme-ah.horizontal-menu.fixed-on-scroll .qme-ah-bar2.bottom-navbar {
    position: static !important;
    display: block !important;
    width: auto;
    max-height: none;
    overflow: visible;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-top: 1px solid var(--ah-line);
    border-bottom: 0;
    box-shadow: none;
    transition: none;
}
.qme-ah-bar2 > .qme-ah-in { display: flex; align-items: center; min-height: 50px; }
.qme-ah.horizontal-menu .qme-ah-nav.page-navigation {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border: 0;
    z-index: auto;
}
.qme-ah-nav::-webkit-scrollbar { display: none; }
.qme-ah-item { flex: 0 0 auto; margin: 0; }
.qme-ah-nv {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 10px;
    background: none;
    color: var(--ah-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background .2s, color .2s;
}
/* assets/css/custom.css forces `body .horizontal-menu .bottom-navbar li a`
   to 15px !important / normal weight; the header's own links win back here. */
body .qme-ah.horizontal-menu .qme-ah-bar2 .qme-ah-nv {
    font-size: 14px !important;
    font-weight: 700;
    font-family: inherit;
}
body .qme-ah.horizontal-menu .qme-ah-bar2 .qme-ah-sub-col a {
    font-size: 14px !important;
    font-weight: 600;
    font-family: inherit;
}
.qme-ah-nv svg { width: 16px; height: 16px; }
.qme-ah-nv .qme-ah-caret { width: 10px; height: 10px; transition: transform .2s; }
.qme-ah-nv:hover,
.qme-ah-nv:focus,
.qme-ah-item.is-open > .qme-ah-nv {
    background: #f5f6fb;
    background: var(--ah-tint);
    color: var(--ah-accent);
}
.qme-ah-item.is-open > .qme-ah-nv .qme-ah-caret { transform: rotate(180deg); }
.qme-ah-nv[aria-current="page"],
.qme-ah-nv[aria-current="page"]:hover {
    background: #eceefb;
    background: var(--ah-tint2);
    color: var(--ah-accent);
}
/* the support widget's "How it works" pill, when it moves into this row,
   sits at the far right as in the design (the pill itself is untouched) */
.qme-ah-nav > .qme-sw-how-item { margin-left: auto; flex: 0 0 auto; padding-left: 8px; }

/* nav dropdowns (Activity, mega menus): fixed so the sideways-scrolling row
   cannot clip them; placed by backend-header.js */
.qme-ah-sub {
    display: none;
    position: fixed;
    z-index: 1060;
    min-width: 240px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 150px);
    overflow-y: auto;
    padding: 8px;
    background: #fff;
    border-radius: 14px;
    box-shadow: var(--ah-panel-shadow);
}
.qme-ah-item.is-open > .qme-ah-sub { display: flex; gap: 8px; }
.qme-ah-sub--mega { width: 760px; }
.qme-ah-sub-col { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.qme-ah-sub-head {
    padding: 8px 12px 4px;
    color: var(--ah-accent);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.qme-ah-sub-col a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--ah-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: normal;
}
.qme-ah-sub-col a:hover,
.qme-ah-sub-col a:focus { background: var(--ah-tint); color: var(--ah-accent); }
.qme-ah-sub-col a.active { background: var(--ah-tint2); color: var(--ah-accent); }

/* ---------- responsive ------------------------------------------------- */
@media (max-width: 980px) {
    .qme-ah-loc { display: none; }
    .qme-ah-sub--mega { width: auto; flex-direction: column; }
}
@media (max-width: 640px) {
    .qme-ah-bar1 > .qme-ah-in { gap: 10px; }
    .qme-ah-brand { max-width: calc(100% - 210px); }
    .qme-ah-brand img { height: 30px; max-width: 100%; }
    .qme-ah-brand-name { font-size: 18px; }
    .qme-ah-role { display: none; }
    .qme-ah-search-toggle-item { display: block; }
    /* search opens as a panel under bar 1 from the search icon */
    .qme-ah-search {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1050;
        max-width: none;
        flex-wrap: wrap;
        margin: 0;
        padding: 10px 16px 12px;
        border: 0;
        border-top: 1px solid var(--ah-line);
        border-radius: 0;
        background: #fff;
        box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--ah-ink) 45%, transparent);
    }
    .qme-ah-search.is-open { display: flex; }
    .qme-ah-search .qme-ah-field {
        flex: 1 1 100%;
        padding: 2px 10px;
        border: 1px solid var(--ah-line);
        border-radius: 10px;
        background: var(--ah-tint);
    }
    .qme-ah-search .qme-ah-field + .qme-ah-field { border-left: 1px solid var(--ah-line); }
    .qme-ah-search .qme-ah-loc { display: flex; }
    .qme-ah-search .qme-ah-btn { flex: 1 1 0; }
    .qme-ah-suggest { left: -27px; width: calc(100% + 37px); min-width: 0; }
    .qme-ah .nav-profile > .qme-ah-panel { top: 70px !important; right: 12px !important; width: calc(100vw - 24px); }
    .qme-ah .qme-ah-panel { width: calc(100vw - 24px); }
}

/* =====================================================================
   FOOTER
   The Band mechanics (position, --qme-footer-h, the page reserve) stay in
   dfooter.php's own <style> per ADR-0032/0037; this is only its look.
   ===================================================================== */
.qme-af.footer {
    display: block;
    background: transparent;
    border-top: 0;
    padding: 18px 0 30px;
    color: var(--ah-muted);
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    transition: none;
}
/* A compact band. --qme-footer-h stays as dfooter declares it, so the support
   launcher (untouched) keeps its own position and the page keeps its reserve. */
.qme-af.footer.qme-af--band {
    display: flex !important;
    align-items: center;
    min-height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, .08);
    border-top: 1px solid var(--ah-line);
}
.qme-af-in {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
}
.qme-af--band .qme-af-in { justify-content: flex-start; }
.qme-af.footer p {
    margin: 0;
    color: var(--ah-muted);
    font-size: 14px;
    line-height: 20px;
}
.qme-af.footer a { color: var(--ah-accent); font-weight: 700; }
.qme-af.footer a:hover { text-decoration: underline; }
.qme-af-note { display: inline-flex; align-items: center; gap: 6px; }
.qme-af-note svg { width: 14px; height: 14px; color: var(--ah-accent); }
/* Room for the floating Support Desk / Copilot launcher: in the Band the
   launcher sits at the right, so the text keeps clear of that side; in the
   flow the footer keeps its text above the launcher's height. */
body:has(.qme-sw, .qme-vw) .qme-af--band .qme-af-in { padding-right: min(480px, 45vw); }
/* the in-flow footer (admin layout) looks like the Band: a compact white bar, text clear of the launcher */
.qme-af.footer:not(.qme-af--band) { margin-top: 32px; padding: 16px 0 17px !important; min-height: 56px; display: flex !important; align-items: center; background: #fff; border-top: 1px solid var(--ah-line); }
body:has(.qme-sw, .qme-vw) .qme-af.footer:not(.qme-af--band) .qme-af-in { padding-right: min(480px, 45vw); }
@media (max-width: 767.98px) {
    .qme-af.footer.qme-af--band { display: block !important; padding: 18px 0 24px !important; }
    body:has(.qme-sw, .qme-vw) .qme-af--band .qme-af-in { padding-right: 0; }
    body:has(.qme-sw, .qme-vw) .qme-af.footer { padding-bottom: calc(var(--qme-sw-pill, 63px) + 28px) !important; }
    .qme-af-in { flex-direction: column; align-items: flex-start; }
}