/* =====================================================================
   BACKEND UI: shared pieces of the backend pages' middle content, in the
   client design (2026-10-05). Loaded once per backend page by
   application/views/beckend_colors.php, after backend-feed.css.
   Colours only from the portal's theme variables; minimum type 14px.
   ===================================================================== */

/* ---------- tab bars ---------------------------------------------------
   Every Bootstrap tab row inside a backend page (ul.nav.nav-tabs) becomes
   the dashboard's white pill bar: the open tab filled with the accent.
   Pages that style their own bar more specifically (the dashboard's
   #fix_js_active, the Manage menu page) keep theirs. */
.page-wrapper .nav.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 20px;
    padding: 5px;
    border: 0 !important;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(8,15,84,.05), 0 12px 28px -20px rgba(8,15,84,.45);
}
.page-wrapper .nav.nav-tabs .nav-item { margin: 0 !important; }
.page-wrapper .nav.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 9px 16px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: none !important;
    box-shadow: none !important;
    color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 80%, #fff) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.page-wrapper .nav.nav-tabs .nav-link:hover {
    color: var(--site_color_g) !important;
    background: color-mix(in srgb, var(--site_color_g) 6%, #fff) !important;
}
.page-wrapper .nav.nav-tabs .nav-link.active,
.page-wrapper .nav.nav-tabs .nav-link.active:hover,
.page-wrapper .nav.nav-tabs .nav-item.show > .nav-link {
    color: #fff !important;
    background: linear-gradient(135deg, var(--site_color_g), color-mix(in srgb, var(--site_color_g) 55%, #b9a8ff)) !important;
    box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--site_color_g) 90%, transparent) !important;
}
/* older page rules (.steelton_home_section / .portals-tabs-wrap ... .active, all !important, loaded later)
   draw a 3px underline and square corners on the open tab; this outranks them everywhere */
body .page-wrapper .nav.nav-tabs .nav-link,
body .page-wrapper .nav.nav-tabs .nav-link:hover,
body .page-wrapper .nav.nav-tabs .nav-link.active,
body .page-wrapper .nav.nav-tabs .nav-item.show > .nav-link { border: 0 !important; border-radius: 10px !important; }
.page-wrapper .nav.nav-tabs .nav-link::before,
.page-wrapper .nav.nav-tabs .nav-link::after { display: none !important; }
.page-wrapper .nav.nav-tabs .nav-link .badge {
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--site_color_g) 12%, transparent) !important;
    color: var(--site_color_g) !important;
    font-size: 14px;
    font-weight: 700;
}
/* counts sit centred beside the label (some pages lift them like superscripts) */
.page-wrapper .nav.nav-tabs .nav-link .badge { position: static !important; top: auto !important; right: auto !important; margin: 0 !important; transform: none !important; vertical-align: middle; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; }
.page-wrapper .nav.nav-tabs .nav-link.active .badge { background: rgba(255,255,255,.22) !important; color: #fff !important; }
/* phones: one row that scrolls sideways */
@media (max-width: 767.98px) {
    .page-wrapper .nav.nav-tabs {
        flex-wrap: nowrap;
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .page-wrapper .nav.nav-tabs::-webkit-scrollbar { display: none; }
}

/* tab rows whose links have no .nav-link class (li > a): the same pill look */
.page-wrapper .nav.nav-tabs > li { margin: 0 !important; }
.page-wrapper .nav.nav-tabs > li > a:not(.dropdown-item) { display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 9px 16px !important; border: 0 !important; border-radius: 10px !important; background: none !important; box-shadow: none !important; color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 80%, #fff) !important; font-size: 14px !important; font-weight: 800 !important; white-space: nowrap; text-decoration: none; }
.page-wrapper .nav.nav-tabs > li > a:not(.dropdown-item):hover { color: var(--site_color_g) !important; background: color-mix(in srgb, var(--site_color_g) 6%, #fff) !important; }
.page-wrapper .nav.nav-tabs > li.active > a, .page-wrapper .nav.nav-tabs > li > a.active { color: #fff !important; background: linear-gradient(135deg, var(--site_color_g), color-mix(in srgb, var(--site_color_g) 55%, #b9a8ff)) !important; box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--site_color_g) 90%, transparent) !important; }

/* a tab's dropdown: a plain menu, its items never drawn as filled tabs */
.page-wrapper .nav.nav-tabs .dropdown-menu { padding: 6px !important; border: 1px solid rgba(8,15,84,.09); border-radius: 12px; background: #fff; box-shadow: 0 18px 36px -14px rgba(8,15,84,.35); }
.page-wrapper .nav.nav-tabs .dropdown-menu ul.submenu { margin: 0; padding: 0; list-style: none; }
.page-wrapper .nav.nav-tabs .dropdown-menu .nav-item { display: block; margin: 0 !important; }
body .page-wrapper .nav.nav-tabs .dropdown-menu .nav-link, body .page-wrapper .nav.nav-tabs .dropdown-menu a { display: block; width: 100%; padding: 9px 12px !important; border-radius: 8px !important; background: none !important; box-shadow: none !important; color: var(--site_font_color_g, #0b1a4a) !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap; }
body .page-wrapper .nav.nav-tabs .dropdown-menu .nav-link:hover, body .page-wrapper .nav.nav-tabs .dropdown-menu a:hover { background: color-mix(in srgb, var(--site_color_g) 6%, #fff) !important; color: var(--site_color_g) !important; }
body .page-wrapper .nav.nav-tabs .dropdown-menu .nav-link.active, body .page-wrapper .nav.nav-tabs .dropdown-menu .active > a { background: color-mix(in srgb, var(--site_color_g) 10%, #fff) !important; color: var(--site_color_g) !important; }

/* ---------- page titles ----------------------------------------------
   The dashboard pages' own titles (My Activity, Live Community Feed, Activity
   Reports & Analytics, Global Activity Overview) read as page titles. */
.page-wrapper .grouth_section > h4.mb-3,
.page-wrapper .ovflow_container2 > .container > h4.mb-3 {
    margin: 0 0 18px !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--site_font_color_g, #0b1a4a);
}
@media (max-width: 767.98px) {
    .page-wrapper .grouth_section > h4.mb-3,
    .page-wrapper .ovflow_container2 > .container > h4.mb-3 { font-size: 22px !important; }
}

/* ---------- list search boxes (#search_feed: services, programs...) ---------- */
.page-wrapper #search_feed > .d-flex { align-items: center; min-height: 46px; border: 1px solid rgba(8,15,84,.12) !important; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(8,15,84,.05), 0 12px 28px -20px rgba(8,15,84,.45); transition: border-color .2s, box-shadow .2s; }
.page-wrapper #search_feed > .d-flex:focus-within { border-color: var(--site_color_g) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--site_color_g) 12%, transparent); }
.page-wrapper #search_feed input[type=search] { flex: 1; min-width: 0; height: 44px; padding: 0 16px !important; border: 0 !important; outline: 0; background: none; font-size: 15px; color: var(--site_font_color_g, #0b1a4a); }
.page-wrapper #search_feed .search_icon_new { display: grid; place-items: center; width: 40px; height: 40px; margin: 3px; border-radius: 9px; background: var(--site_color_g) !important; color: #fff; cursor: pointer; }
.page-wrapper #search_feed .search_icon_new svg { width: 18px; height: 18px; stroke: #fff !important; color: #fff; }
.page-wrapper #search_feed .search_icon_new:hover { filter: brightness(1.1); }
.page-wrapper #search_feed { width: 360px; max-width: 100%; }
@media (max-width: 767.98px) { .page-wrapper #search_feed { width: 100%; } }

/* ---------- forms and buttons (every backend page) -----------------------
   Labels bold, fields rounded and lightly tinted with an accent focus ring,
   buttons in the design's solid / outlined styles. Editors (TinyMCE, CKEditor),
   select2 and custom switches keep their own look. */
.page-wrapper .form-group > label, .page-wrapper label.control-label, .page-wrapper .form-label, .page-wrapper form label:not(.custom-control-label):not(.nt-item):not(.form-check-label):not(.tq-tog):not(.btn) { font-size: 14px; font-weight: 700; color: var(--site_font_color_g, #0b1a4a); margin-bottom: 6px; }
.page-wrapper .form-control:not(textarea):not([type=file]):not([type=color]) { min-height: 44px; }
.page-wrapper .form-control { padding: 10px 14px; border: 1px solid rgba(8,15,84,.14); border-radius: 10px; background-color: #f8f9ff; font-size: 15px; color: var(--site_font_color_g, #0b1a4a); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.page-wrapper .form-control:focus { border-color: var(--site_color_g); background-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--site_color_g) 12%, transparent); outline: 0; }
.page-wrapper .form-control::placeholder { color: color-mix(in srgb, var(--site_font_color_g, #0b1a4a) 40%, #fff); }
.page-wrapper .form-control[disabled], .page-wrapper .form-control[readonly] { background-color: #eef0f6; }
.page-wrapper input[type=file].form-control { padding: 8px 10px; }
.page-wrapper .btn-primary { border-color: var(--site_color_g) !important; background: var(--site_color_g) !important; color: #fff !important; border-radius: 10px; font-weight: 700; box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--site_color_g) 90%, transparent); }
.page-wrapper .btn-primary:hover, .page-wrapper .btn-primary:focus { filter: brightness(1.08); color: #fff !important; }
.page-wrapper .btn-primary:not(.btn-sm):not(.btn-xs) { padding: 10px 20px; font-size: 15px; }
.page-wrapper .btn-outline-primary { border: 1.5px solid color-mix(in srgb, var(--site_color_g) 35%, transparent) !important; background: #fff !important; color: var(--site_color_g) !important; border-radius: 10px; font-weight: 700; }
.page-wrapper .btn-outline-primary:hover, .page-wrapper .btn-outline-primary:focus { background: var(--site_color_g) !important; border-color: var(--site_color_g) !important; color: #fff !important; }
.page-wrapper .btn-sm { border-radius: 9px; font-size: 14px; }