/* ==========================================================================
   SQU Visual Identity — Applied Brand Layer
   Sultan Qaboos University · Research Management System

   This file consumes tokens from squ-tokens.css and overrides the Metronic
   defaults to express the SQU brand with restraint and formality.

   Load order matters: this file MUST be linked AFTER all Metronic, plugin,
   and legacy CustomStyle CSS so it wins specificity through cascade.

   Sections
     0.  Font loading (IBM Plex Sans Arabic — brand-approved free face)
     1.  Base — body, scrollbar, links, focus rings, selection
     2.  Type scale
     3.  Layout chrome — header, brand, aside, topbar, content
     4.  Sidebar (.sidebar nav-links)
     5.  Buttons
     6.  Forms — inputs, selects, validation
     7.  Cards & page-header-bar
     8.  Tables (DataTables included)
     9.  Modals & dialog headers
    10.  Alerts, badges, labels, status colors
    11.  Tabs, dropdowns, pagination
    12.  Home dashboard (counters, quick links, announcements)
    13.  Loader
    14.  Page-back button, topbar icon buttons
    15.  Legacy color map — translates hard-coded hex from prior stylesheets
    16.  RTL refinements
   ========================================================================== */


/* ==========================================================================
   0.  FONT LOADING
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap");


/* ==========================================================================
   1.  BASE
   ========================================================================== */
html,
body {
    font-family: var(--squ-font) !important;
    font-size: var(--squ-fs-base) !important;
    line-height: var(--squ-lh-base);
    color: var(--squ-ink);
    background: var(--squ-surface-2) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--squ-blue-100);
    color: var(--squ-blue-900);
}

/* Native scrollbar — slim, brand-tinted */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--squ-blue-200) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--squ-blue-200);
    border-radius: var(--squ-radius-pill);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--squ-blue-300);
}

/* Default link color and focus ring */
a {
    color: var(--squ-primary);
    text-decoration: none;
    transition: color var(--squ-dur) var(--squ-ease);
}

a:hover {
    color: var(--squ-primary-hover);
    text-decoration: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--squ-shadow-focus);
    border-radius: var(--squ-radius-sm);
}


/* ==========================================================================
   2.  TYPE SCALE
   ========================================================================== */
body,
html,
.font-family-base,
.btn,
.form-control,
.card,
.card-title,
.card-header,
.table,
.modal,
.dropdown-menu,
.nav-link,
label,
input,
select,
textarea,
p, span, a, div,
h1, h2, h3, h4, h5, h6 {
    font-family: var(--squ-font) !important;
}

h1 { font-size: var(--squ-fs-xl) !important;  font-weight: var(--squ-fw-semibold); letter-spacing: var(--squ-letter-tight); color: var(--squ-ink); }
h2 { font-size: var(--squ-fs-lg) !important;  font-weight: var(--squ-fw-semibold); letter-spacing: var(--squ-letter-tight); color: var(--squ-ink); }
h3 { font-size: var(--squ-fs-md) !important;  font-weight: var(--squ-fw-semibold); color: var(--squ-ink); }
h4 { font-size: 14px !important;              font-weight: var(--squ-fw-semibold); color: var(--squ-ink); }
h5 { font-size: var(--squ-fs-base) !important;font-weight: var(--squ-fw-semibold); color: var(--squ-ink); }
h6 { font-size: var(--squ-fs-sm) !important;  font-weight: var(--squ-fw-semibold); color: var(--squ-ink-2); text-transform: uppercase; letter-spacing: var(--squ-letter-wide); }

.text-muted,
.text-gray,
.text-slate-gray {
    color: var(--squ-ink-3) !important;
}

.text-dark,
.text-default {
    color: var(--squ-ink) !important;
}

.w-33 {
    width: 33% !important;
}

.w-52 {
    width: 52% !important;
}

.w-36 {
    width: 36% !important;
}

.w-7 {
    width: 7% !important;
}

.w-8 {
    width: 8% !important;
}

.w-10 {
    width: 10% !important;
}

.w-9 {
    width: 9% !important;
}

.w-5 {
    width: 5% !important;
}

.w-6 {
    width: 6% !important;
}

.w-13 {
    width: 13% !important;
}

.w-15 {
    width: 15% !important;
}

.w-20 {
    width: 20% !important;
}

.w-50px {
    width: 50px !important;
}

.w-38 {
    width: 38% !important;
}

.w-40 {
    width: 40% !important;
}

.w-32 {
    width: 32% !important;
}
.w-0 {
    width: 0px !important;
}
.w-16 {
    width: 16% !important;
}
.w-29 {
    width: 29% !important;
}
.w-11 {
    width: 11% !important;
}
.w-44 {
    width: 44% !important;
}
/* ==========================================================================
   3.  LAYOUT CHROME — header, brand, content
   ========================================================================== */
.header.header-fixed {
    height: var(--squ-header-h);
    min-height: var(--squ-header-h);
    background: var(--squ-surface) !important;
    border-bottom: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-xs);
}

#kt_header_mobile {
    height: var(--squ-header-h);
    background: var(--squ-surface) !important;
    border-bottom: 1px solid var(--squ-line);
}

/* ----- Brand box — holds BOTH logos side by side.
   First logo column is locked to sidebar width (so first logo stays centered
   over the sidebar rail, same place as before). Second logo sits in a
   flexible slot immediately to its right inside the same container. ----- */
.brand,
.brand.flex-column-auto,
.squ-brand-slot,
#kt_brand {
    height: var(--squ-header-h);
    padding: 4px !important;
    background: var(--squ-surface) !important;
    border: none !important;
    border-bottom: 1px solid var(--squ-line);
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 0 auto;
    gap: 6px;
    /* Total width = sidebar slot + secondary logo + gap; no fixed cap so the
       secondary logo can grow as needed without squashing the first one. */
    min-width: var(--squ-aside-w);
    width: auto !important;
    max-width: none !important;
}

/* First logo — locked to sidebar width so it stays exactly where it was. */
.brand .brand-logo,
.squ-brand-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(var(--squ-aside-w) - 8px); /* sidebar width minus parent padding */
    height: 100%;
    padding: 0;
    margin: 0;
    flex: 0 0 calc(var(--squ-aside-w) - 8px);
}

.brand-logo .squ-brand-img,
.squ-brand-img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Legacy logo classes kept in some pages — same behaviour */
.brand-logo .logo-width,
.brand-logo .logoWidth,
.logo-mobile .logoWidth {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Second logo — vertically centered, sits in the same brand box as the first */
.squ-brand-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--squ-header-h) - 14px);
    margin: 0;
    border: none !important;
    text-decoration: none !important;
    flex: 0 0 auto;
}

.squ-brand-secondary-img {
    width: auto;
    height: 100%;
    max-height: 100%;
    max-width: 160px;             /* prevents oversize logo from blowing out */
    object-fit: contain;
    display: block;
}

/* Pull the header row tight against the brand slot — no extra left padding
   so the secondary logo sits right next to the first one. */
.squ-header-row,
.container-fluid.squ-header-row {
    border-inline-start: none !important;
    padding-inline-start: 0 !important;
}

#kt_header_menu_wrapper,
.header-menu-wrapper {
    border: none !important;
    box-shadow: none !important;
}

/* The university name in the header — restrained, dark ink + brand stripe */
.header-menu-wrapper {
    display: flex !important;
    align-items: center !important;
    height: var(--squ-header-h) !important;
}

.header-menu-text {
    color: var(--squ-ink) !important;
    display: flex !important;
    align-items: center !important;
    height: var(--squ-header-h) !important;
    padding-inline-start: 0 !important;
    border: none !important;
    margin-inline-start: 0;
}

.header-menu-text h2 {
    font-size: 14px !important;
    font-weight: var(--squ-fw-semibold) !important;
    margin: 0 !important;
    color: var(--squ-ink) !important;
    letter-spacing: var(--squ-letter-tight);
    line-height: 1 !important;
}

.header-menu-color {
    color: var(--squ-ink) !important;
}

/* Content padding */
.container.containerHome {
    padding: var(--squ-space-4) var(--squ-space-5) !important;
    max-width: 100% !important;
}

/* Normalize per-page root wrappers.
   The layout already provides a consistent gutter via .container.containerHome.
   Some pages add their own .container / .container-fluid as a root wrapper,
   which reapplies Bootstrap's max-width + horizontal padding and creates an
   uneven gutter between content and the sidebar across pages. Neutralize them
   so every page lines up to the same edge. */
.container.containerHome > .container,
.container.containerHome > .container-fluid,
.container.containerHome > .d-flex.flex-column-fluid > .container,
.container.containerHome > .d-flex.flex-column-fluid > .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 992px) {
    .header-fixed.subheader-fixed.subheader-enabled .wrapper {
        padding-top: calc(var(--squ-header-h) + 8px) !important;
    }

    .header-fixed .wrapper {
        padding-top: calc(var(--squ-header-h) + 4px) !important;
    }

    /* Reserve space for the fixed sidebar so content doesn't slide underneath.
       LTR — sidebar on the left, push content right. RTL — opposite. */
    .aside-fixed .wrapper,
    .aside-enabled .wrapper {
        padding-left: var(--squ-aside-w) !important;
        padding-right: 0 !important;
    }

    [dir="rtl"] .aside-fixed .wrapper,
    [dir="rtl"] .aside-enabled .wrapper {
        padding-left: 0 !important;
        padding-right: var(--squ-aside-w) !important;
    }
}

/* ----- Mobile (<992px) — only #kt_header_mobile should show.
   The desktop header + brand box are styled at all widths above, which made
   them render as a SECOND bar (with duplicated logos) under the mobile header.
   Below the Metronic mobile breakpoint we hide the desktop brand box and
   collapse the desktop header chrome. The topbar stays usable because on
   mobile it's positioned/offcanvas (out of flow), not display:none'd here. */
@media (max-width: 991.98px) {
    #kt_brand,
    .brand.squ-brand-slot,
    .squ-brand-slot {
        display: none !important;
    }

    .header.header-fixed {
        height: auto;
        min-height: 0;
        background: transparent !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }

    /* Mobile header logo — give it a deterministic size. The brand-box rule
       (width:100%/height:100%) is meant for the fixed-size desktop slot and
       blows the logo up inside the bare .logo-mobile anchor. */
    .logo-mobile {
        display: inline-flex !important;
        align-items: center;
        height: 100%;
    }

    .logo-mobile .logoWidth {
        width: auto !important;
        height: 34px !important;
        max-width: 140px !important;
        max-height: 80% !important;
        object-fit: contain;
    }

    /* ----- Mobile header toolbar — unify the toggle buttons.
       Defaults render mismatched: two grey burgers (the 2nd only opens the
       header-menu offcanvas, which holds just the page title here) plus a
       larger black user icon. We hide the redundant burger, normalize the
       nav burger's uneven 50%/75% lines into a clean even hamburger, match
       sizes, and colour both on-brand. */
    #kt_header_mobile_toggle {
        display: none !important;
    }

    #kt_header_mobile .burger-icon {
        width: 22px;
        height: 22px;
    }

    #kt_header_mobile .burger-icon span,
    #kt_header_mobile .burger-icon span::before,
    #kt_header_mobile .burger-icon span::after {
        background-color: var(--squ-primary) !important;
        width: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    #kt_header_mobile_topbar_toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    #kt_header_mobile_topbar_toggle .svg-icon.svg-icon-xl svg {
        width: 22px !important;
        height: 22px !important;
    }

    #kt_header_mobile_topbar_toggle .svg-icon svg path {
        fill: var(--squ-primary) !important;
    }
}

/* Footer kept hidden as before */
#kt_footer {
    display: none !important;
}


/* ==========================================================================
   4.  SIDEBAR — formal, white surface, brand-blue rail
   ========================================================================== */
.sidebar {
    position: fixed;
    top: var(--squ-header-h);
    height: 100%;
    width: var(--squ-aside-w);
    background: var(--squ-surface) !important;
    z-index: 100;
    transition: width var(--squ-dur) var(--squ-ease);
    box-shadow: var(--squ-shadow-xs);
    border-inline-end: 1px solid var(--squ-line);
}

.sidebar.close {
    width: var(--squ-aside-w);
}

.sidebar .nav-links {
    height: calc(100vh - var(--squ-header-h));
    padding: var(--squ-space-2) 0 120px 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .nav-links li {
    padding: 2px 0;
}

/* Icons — calm grey-blue at rest, brand blue on hover */
.sidebar .nav-links li i {
    min-width: 50px;
    text-align: center;
    line-height: 22px !important;
    color: var(--squ-ink-3) !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-shadow: none !important;
    transition: color var(--squ-dur) var(--squ-ease);
}

span.menu-text {
    font-size: 10.5px !important;
    display: block;
    margin-top: 2px;
    font-weight: var(--squ-fw-medium) !important;
    color: var(--squ-ink-3) !important;
    text-shadow: none !important;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.sidebar .nav-links li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: var(--squ-ink-2) !important;
    padding: 6px 0;
    border-radius: var(--squ-radius-sm);
    margin: 0 var(--squ-space-1);
    position: relative;
    transition: background var(--squ-dur) var(--squ-ease);
}

.sidebar .nav-links li a:hover {
    background: var(--squ-primary-soft);
}

.sidebar .nav-links li a:hover i,
.sidebar .nav-links li a:hover .menu-text,
.menu-item:hover .iconCustom,
.menu-item:hover .menu-text,
.iocn-link:hover .iconCustom,
.iocn-link:hover .menu-text {
    color: var(--squ-primary) !important;
}

/* Active — gold accent rail, subtle blue wash */
.sidebar .nav-links li a.active,
.sidebar .nav-links li a[is-active="true"] {
    background: var(--squ-primary-soft);
    border-left: none;
    border-right: none;
}

.sidebar .nav-links li a.active::before,
.sidebar .nav-links li a[is-active="true"]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 var(--squ-radius-sm) var(--squ-radius-sm) 0;
    background: var(--squ-accent);
}

.sidebar .nav-links li [is-active="true"] span,
.sidebar .nav-links li [is-active="true"] i,
.sidebar .nav-links li a.active i,
.sidebar .nav-links li a.active .menu-text {
    color: var(--squ-primary) !important;
}

hr.hr {
    width: 70%;
    margin: var(--squ-space-1) auto;
    border: none;
    border-top: 1px solid var(--squ-line-2);
}

/* Submenu flyout — clean white panel, brand accents */
.sidebar .nav-links li .sub-menu {
    padding: var(--squ-space-2) 0;
    background: var(--squ-surface);
    min-width: 220px;
    border-radius: var(--squ-radius);
    box-shadow: var(--squ-shadow-md);
    border: 1px solid var(--squ-line);
}

.sidebar.close .nav-links li .sub-menu {
    border-radius: var(--squ-radius);
    box-shadow: var(--squ-shadow-md);
    border: 1px solid var(--squ-line);
}

.sidebar .nav-links li .sub-menu a {
    color: var(--squ-ink-2) !important;
    font-size: var(--squ-fs-sm);
    padding: 7px 16px;
    text-decoration: none !important;
    transition: background var(--squ-dur) var(--squ-ease), color var(--squ-dur) var(--squ-ease);
}

.sidebar .nav-links li .sub-menu a:hover {
    background-color: var(--squ-primary-soft) !important;
    color: var(--squ-primary) !important;
}

.sidebar .nav-links li .sub-menu a i {
    font-size: 13px !important;
    color: var(--squ-ink-3) !important;
    min-width: 22px;
}

.sidebar .nav-links li .sub-menu a:hover i {
    color: var(--squ-primary) !important;
}

.sidebar .nav-links li .sub-menu .link_name {
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold);
    font-size: var(--squ-fs-sm);
    padding: 6px 16px;
    border-bottom: 1px solid var(--squ-line-2);
    margin-bottom: var(--squ-space-1);
    letter-spacing: var(--squ-letter-tight);
}


/* ==========================================================================
   5.  BUTTONS
   ========================================================================== */
.btn {
    font-family: var(--squ-font) !important;
    font-size: var(--squ-fs-sm) !important;
    font-weight: var(--squ-fw-medium) !important;
    border-radius: var(--squ-radius) !important;
    min-height: var(--squ-btn-h);
    /*padding: 0 var(--squ-space-4) !important;*/
    /*line-height: calc(var(--squ-btn-h) - 2px);*/
    box-shadow: none !important;
    border: 1px solid transparent;
    transition: background var(--squ-dur) var(--squ-ease),
                border-color var(--squ-dur) var(--squ-ease),
                color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
}

.lineHight {
    line-height: calc(var(--squ-btn-h) - 2px) !important
}

.btn-sm {
    font-size: var(--squ-fs-xs) !important;
    min-height: var(--squ-btn-h-sm);
    padding: 0 var(--squ-space-3) !important;
    line-height: calc(var(--squ-btn-h-sm) - 2px);
}

.btn-lg {
    font-size: var(--squ-fs-base) !important;
    min-height: var(--squ-btn-h-lg);
    padding: 0 var(--squ-space-5) !important;
    line-height: calc(var(--squ-btn-h-lg) - 2px);
}

.btn-icon {
    padding: 0 !important;
    width: var(--squ-btn-h);
    height: var(--squ-btn-h);
    min-height: var(--squ-btn-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-icon.btn-sm {
    width: var(--squ-btn-h-sm);
    height: var(--squ-btn-h-sm);
    min-height: var(--squ-btn-h-sm);
}

.btn:focus,
.btn:focus-visible {
    box-shadow: var(--squ-shadow-focus) !important;
}

/* Primary — solid SQU blue */
.btn.btn-primary,
.btn-primary {
    color: #ffffff !important;
    background-color: var(--squ-primary) !important;
    border-color: var(--squ-primary) !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:focus {
    background-color: var(--squ-primary-hover) !important;
    border-color: var(--squ-primary-hover) !important;
    color: #ffffff !important;
}

.btn.btn-primary:active,
.btn-primary:active,
.btn.btn-primary.active {
    background-color: var(--squ-primary-active) !important;
    border-color: var(--squ-primary-active) !important;
}

/* Secondary — outline blue */
.btn.btn-secondary,
.btn-secondary {
    color: var(--squ-primary) !important;
    background-color: var(--squ-surface) !important;
    border-color: var(--squ-line) !important;
}

.btn.btn-secondary:hover,
.btn-secondary:hover {
    background-color: var(--squ-primary-soft) !important;
    border-color: var(--squ-primary-soft-border) !important;
    color: var(--squ-primary-hover) !important;
}

/* Outline primary */
.btn.btn-outline-primary {
    color: var(--squ-primary) !important;
    background: transparent !important;
    border-color: var(--squ-primary) !important;
}

.btn.btn-outline-primary:hover {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
}

/* Light / clean */
.btn.btn-light,
.btn.btn-clean {
    color: var(--squ-ink-2) !important;
    background: var(--squ-surface-3) !important;
    border-color: transparent !important;
}

.btn.btn-light:hover,
.btn.btn-clean:hover {
    background: var(--squ-line) !important;
    color: var(--squ-ink) !important;
}

/* Submit-style action — gold accent, used for the single primary action on a page */
.btn-submit,
.submitBt,
.awardBt {
    background-color: var(--squ-accent) !important;
    border-color: var(--squ-accent) !important;
    color: #ffffff !important;
}

.btn-submit:hover,
.submitBt:hover,
.awardBt:hover {
    background-color: var(--squ-accent-hover) !important;
    border-color: var(--squ-accent-hover) !important;
    color: #ffffff !important;
}

.btn-submit:focus,
.submitBt:focus,
.awardBt:focus {
    box-shadow: var(--squ-shadow-focus-gold) !important;
}

/* Success / Excel export — green semantic */
.btn.btn-success,
.btn-success,
.excelBt {
    background-color: var(--squ-success) !important;
    border-color: var(--squ-success) !important;
    color: #ffffff !important;
}

.btn.btn-success:hover,
.btn-success:hover,
.excelBt:hover {
    background-color: #145a17 !important;
    border-color: #145a17 !important;
    color: #ffffff !important;
}

/* Danger */
.btn.btn-danger,
.btn-danger {
    background-color: var(--squ-danger) !important;
    border-color: var(--squ-danger) !important;
    color: #ffffff !important;
}

.btn.btn-danger:hover,
.btn-danger:hover {
    background-color: #5e1c1c !important;
    border-color: #5e1c1c !important;
}

/* Info */
.btn.btn-info,
.btn-info {
    background-color: var(--squ-info) !important;
    border-color: var(--squ-info) !important;
    color: #ffffff !important;
}

.btn.btn-info:hover,
.btn-info:hover {
    background-color: #007599 !important;
    border-color: #007599 !important;
}

/* Card-header action buttons stay neutral so they don't compete with the title.
   Covers .card-header (Bootstrap default) AND the legacy variants
   .card-headerPrize / .prizeManagementKT used by older Prize pages. */
.card-header .btn.btn-primary,
.card-header .btn.btn-success,
.card-header .btn.btn-submit,
.card-header .btn.btn-danger,
.card-header .btn.btn-info,
.card-header .btn.excelBt,
.card-headerPrize .btn.btn-primary,
.card-headerPrize .btn.btn-success,
.card-headerPrize .btn.btn-submit,
.card-headerPrize .btn.btn-danger,
.card-headerPrize .btn.btn-info,
.card-headerPrize .btn.excelBt,
.prizeManagementKT .btn.btn-primary,
.prizeManagementKT .btn.btn-success,
.prizeManagementKT .btn.btn-submit,
.prizeManagementKT .btn.btn-danger,
.prizeManagementKT .btn.btn-info,
.prizeManagementKT .btn.excelBt {
    background-color: var(--squ-surface-3) !important;
    border-color: var(--squ-line) !important;
    color: var(--squ-ink-2) !important;
}

.card-header .btn.btn-primary i,
.card-header .btn.btn-success i,
.card-header .btn.btn-submit i,
.card-header .btn.btn-danger i,
.card-header .btn.btn-info i,
.card-header .btn.excelBt i,
.card-headerPrize .btn.btn-primary i,
.card-headerPrize .btn.btn-success i,
.card-headerPrize .btn.btn-submit i,
.card-headerPrize .btn.btn-danger i,
.card-headerPrize .btn.btn-info i,
.card-headerPrize .btn.excelBt i,
.prizeManagementKT .btn.btn-primary i,
.prizeManagementKT .btn.btn-success i,
.prizeManagementKT .btn.btn-submit i,
.prizeManagementKT .btn.btn-danger i,
.prizeManagementKT .btn.btn-info i,
.prizeManagementKT .btn.excelBt i {
    color: var(--squ-ink-2) !important;
}

.card-header .btn.btn-primary:hover,
.card-header .btn.btn-success:hover,
.card-header .btn.btn-submit:hover,
.card-header .btn.btn-danger:hover,
.card-header .btn.btn-info:hover,
.card-header .btn.excelBt:hover,
.card-headerPrize .btn.btn-primary:hover,
.card-headerPrize .btn.btn-success:hover,
.card-headerPrize .btn.btn-submit:hover,
.card-headerPrize .btn.btn-danger:hover,
.card-headerPrize .btn.btn-info:hover,
.card-headerPrize .btn.excelBt:hover,
.prizeManagementKT .btn.btn-primary:hover,
.prizeManagementKT .btn.btn-success:hover,
.prizeManagementKT .btn.btn-submit:hover,
.prizeManagementKT .btn.btn-danger:hover,
.prizeManagementKT .btn.btn-info:hover,
.prizeManagementKT .btn.excelBt:hover {
    background-color: var(--squ-primary-soft) !important;
    border-color: var(--squ-primary-soft-border) !important;
    color: var(--squ-primary) !important;
}

.card-header .btn.btn-primary:hover i,
.card-header .btn.btn-success:hover i,
.card-header .btn.btn-submit:hover i,
.card-header .btn.btn-danger:hover i,
.card-header .btn.btn-info:hover i,
.card-header .btn.excelBt:hover i,
.card-headerPrize .btn.btn-primary:hover i,
.card-headerPrize .btn.btn-success:hover i,
.card-headerPrize .btn.btn-submit:hover i,
.card-headerPrize .btn.btn-danger:hover i,
.card-headerPrize .btn.btn-info:hover i,
.card-headerPrize .btn.excelBt:hover i,
.prizeManagementKT .btn.btn-primary:hover i,
.prizeManagementKT .btn.btn-success:hover i,
.prizeManagementKT .btn.btn-submit:hover i,
.prizeManagementKT .btn.btn-danger:hover i,
.prizeManagementKT .btn.btn-info:hover i,
.prizeManagementKT .btn.excelBt:hover i {
    color: var(--squ-primary) !important;
}


/* ==========================================================================
   6.  FORMS — inputs, selects, validation
   ========================================================================== */
.form-control {
    font-family: var(--squ-font) !important;
    font-size: var(--squ-fs-sm) !important;
    color: var(--squ-ink);
    height: var(--squ-input-h) !important;
    /*padding: 0 var(--squ-space-3) !important;*/
    border-radius: var(--squ-radius) !important;
    border: 1px solid var(--squ-line) !important;
    background-color: var(--squ-surface) !important;
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
}

textarea.form-control {
    height: auto !important;
    min-height: 80px;
    padding: var(--squ-space-2) var(--squ-space-3) !important;
    line-height: var(--squ-lh-base);
}

.form-control:focus {
    border-color: var(--squ-primary) !important;
    box-shadow: var(--squ-shadow-focus) !important;
    background-color: var(--squ-surface) !important;
}

.form-control::placeholder {
    color: var(--squ-ink-4);
    font-weight: var(--squ-fw-regular);
}

/* Disabled / readonly form inputs — exclude checkboxes/radios/buttons so
   we don't override workflow-timeline checkboxes that use their own pulse
   background for the current-status indicator. */
.form-control:disabled,
.form-control[readonly],
textarea:read-only,
input[type="text"]:read-only,
input[type="email"]:read-only,
input[type="tel"]:read-only,
input[type="url"]:read-only,
input[type="number"]:read-only,
input[type="search"]:read-only,
input[type="password"]:read-only,
input[type="date"]:read-only,
input[type="datetime-local"]:read-only,
input[type="time"]:read-only,
input[type="month"]:read-only,
input[type="week"]:read-only {
    background-color: var(--squ-surface-3) !important;
    color: var(--squ-ink-3);
    cursor: not-allowed;
}

.form-group label,
.form-group requiredLabel,
requiredLabel {
    font-size: var(--squ-fs-sm) !important;
    font-weight: var(--squ-fw-medium);
    color: var(--squ-ink-2);
    margin-bottom: 4px;
    letter-spacing: 0;
}

requiredLabel::after {
    content: " *";
    color: var(--squ-danger);
    font-weight: var(--squ-fw-bold);
}

.inputStyle {
    background-color: var(--squ-surface) !important;
    border-color: var(--squ-line) !important;
    border-radius: var(--squ-radius) !important;
}

/* File upload button */
::-webkit-file-upload-button {
    color: #ffffff;
    background-color: var(--squ-primary);
    border: 0;
    border-radius: var(--squ-radius-sm);
    padding: 4px 10px;
    font-family: var(--squ-font);
    font-weight: var(--squ-fw-medium);
    cursor: pointer;
    margin-right: var(--squ-space-2);
}

::-webkit-file-upload-button:hover {
    background-color: var(--squ-primary-hover);
}

input[type="radio"],
input[type="checkbox"],
.form-check-input {
    accent-color: var(--squ-primary);
    cursor: pointer;
}

.form-check-input[type="radio"],
input[type="radio"].form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
}

.form-check-input:focus,
.form-check-input:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--squ-shadow-focus);
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled,
.form-check-input:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Custom select, telephone input, datetime picker — unify borders */
.custom-select,
.vue-tel-input,
.vdatetime input {
    height: var(--squ-input-h) !important;
    border: 1px solid var(--squ-line) !important;
    border-radius: var(--squ-radius) !important;
}

.vue-tel-input:focus-within,
.vdatetime input:focus {
    border-color: var(--squ-primary) !important;
    box-shadow: var(--squ-shadow-focus);
}

/* Multiselect (Vue) */
.multiselect__tags {
    border: 1px solid var(--squ-line) !important;
    border-radius: var(--squ-radius) !important;
    min-height: var(--squ-input-h);
    font-size: var(--squ-fs-sm);
    padding: 5px var(--squ-space-3);
}

.multiselect--active .multiselect__tags {
    border-color: var(--squ-primary) !important;
    box-shadow: var(--squ-shadow-focus);
}

.multiselect__option--highlight {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
}

.multiselect__option--selected {
    background: var(--squ-primary-soft) !important;
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-medium);
}

.multiselect__tag {
    background: var(--squ-primary-soft) !important;
    color: var(--squ-primary) !important;
    border-radius: var(--squ-radius-sm);
    font-weight: var(--squ-fw-medium);
}

.multiselect__tag-icon::after {
    color: var(--squ-primary) !important;
}

.multiselect__select {
    background: transparent !important;
    height: calc(var(--squ-input-h) - 2px) !important;
    width: 34px !important;
}

.multiselect__select::before {
    border-color: var(--squ-ink-3) transparent transparent !important;
}

.multiselect--active .multiselect__select::before {
    border-color: var(--squ-primary) transparent transparent !important;
}

.multiselect__placeholder {
    color: var(--squ-ink-4) !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    font-size: var(--squ-fs-sm) !important;
}

.multiselect__single {
    background: transparent !important;
    color: var(--squ-ink) !important;
    font-size: var(--squ-fs-sm) !important;
    padding-left: 5px !important;
    margin-bottom: 0 !important;
    line-height: var(--squ-lh-base) !important;
}

.multiselect__input {
    background: transparent !important;
    font-size: var(--squ-fs-sm) !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   7.  CARDS & PAGE-HEADER-BAR
   ========================================================================== */
.card,
.card.card-custom {
    background: var(--squ-surface);
    /*border: 1px solid var(--squ-line);*/
    border-radius: var(--squ-radius) !important;
    box-shadow: var(--squ-shadow-xs) !important;
    transition: box-shadow var(--squ-dur) var(--squ-ease);
}

.card:hover {
    box-shadow: var(--squ-shadow-sm) !important;
}

.card.card-custom > .card-header {
    border-radius: var(--squ-radius) var(--squ-radius) 0 0 !important;
    min-height: 48px;
    padding: var(--squ-space-2) var(--squ-space-4);
    border-bottom: 1px solid var(--squ-line);
    background: var(--squ-surface);
}

.card-title {
    font-size: var(--squ-fs-md) !important;
    font-weight: var(--squ-fw-semibold) !important;
    color: var(--squ-ink) !important;
    letter-spacing: var(--squ-letter-tight);
}

.card-body,
.card.card-custom > .card-body {
    padding: var(--squ-space-4);
}

/* Page-header-bar — formal navy strip + gold underline */
.page-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--squ-space-4);
    background: var(--squ-primary) !important;
    color: #ffffff;
    padding: 14px 20px;
    border-radius: var(--squ-radius);
    margin-bottom: var(--squ-space-4);
    box-shadow: var(--squ-shadow-xs);
    position: relative;
    overflow: hidden;
}

.page-header-bar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--squ-accent);
}

.page-header-bar h2,
.page-header-bar .page-header-title {
    display: flex;
    align-items: center;
    gap: var(--squ-space-3);
    font-size: var(--squ-fs-md);
    font-weight: var(--squ-fw-semibold);
    margin: 0;
    color: #ffffff !important;
    letter-spacing: var(--squ-letter-tight);
}

.page-header-bar h2 i,
.page-header-bar .page-header-title i {
    font-size: 16px;
    color: #ffffff;
}

.page-header-bar .page-header-actions {
    display: flex;
    gap: var(--squ-space-2);
    flex-wrap: wrap;
}

.page-header-bar .page-header-actions .page-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: var(--squ-fs-sm);
    font-weight: var(--squ-fw-medium);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--squ-radius-sm);
    text-decoration: none;
    transition: background var(--squ-dur) var(--squ-ease), color var(--squ-dur) var(--squ-ease);
}

.page-header-bar .page-header-actions .page-header-btn:hover {
    background: #ffffff;
    color: var(--squ-primary);
    text-decoration: none;
}

.page-header-bar .page-header-actions .page-header-btn i {
    font-size: 12px;
}


/* ==========================================================================
   8.  TABLES — DataTables included
   ========================================================================== */
.table {
    background: var(--squ-surface);
    color: var(--squ-ink-2);
}

.table thead,
thead {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
}

.table thead th,
.tablefoot {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
    font-size: var(--squ-fs-sm) !important;
    font-weight: var(--squ-fw-semibold) !important;
    padding: 10px 12px !important;
    letter-spacing: 0.02em;
    text-transform: none;
    border-color: rgba(255, 255, 255, 0.10);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.table thead th:last-child {
    border-right: none;
}

thead tr th:first-child { border-radius: var(--squ-radius) 0 0 0; }
thead tr th:last-child  { border-radius: 0 var(--squ-radius) 0 0; }

[dir="rtl"] thead tr th:first-child { border-radius: 0 var(--squ-radius) 0 0; }
[dir="rtl"] thead tr th:last-child  { border-radius: var(--squ-radius) 0 0 0; }

.table td,
.table th {
    font-size: var(--squ-fs-sm) !important;
    padding: 9px 12px !important;
    vertical-align: middle;
    border-right: 1px solid var(--squ-line-2);
    border-top-color: var(--squ-line-2);
    color: var(--squ-ink-2);
}

.table td:last-child {
    border-right: none;
}

.table tbody tr {
    transition: background var(--squ-dur-fast) var(--squ-ease);
}

.table tbody tr:hover {
    background-color: var(--squ-primary-soft) !important;
}

.table tbody tr:hover td {
    color: var(--squ-ink);
}

/* Datepicker thead reset (calendar should be neutral) */
.datepicker thead,
.datepicker .table thead,
.datepicker .table thead th {
    background: var(--squ-surface) !important;
    color: var(--squ-ink) !important;
}

/* DataTables wrapper */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--squ-radius) !important;
    border: 1px solid var(--squ-line) !important;
    font-size: var(--squ-fs-sm);
    height: var(--squ-btn-h-sm);
    padding: 0 var(--squ-space-3);
    background: var(--squ-surface);
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--squ-primary) !important;
    box-shadow: var(--squ-shadow-focus);
    outline: none;
}

.dataTables_info,
.dataTables_length,
.dataTables_filter,
.dataTables_paginate {
    font-size: var(--squ-fs-sm) !important;
    color: var(--squ-ink-3);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: var(--squ-radius-sm) !important;
    font-size: var(--squ-fs-sm) !important;
    padding: 4px 10px !important;
    min-width: 30px;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--squ-ink-2) !important;
    margin: 0 2px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--squ-primary-soft) !important;
    color: var(--squ-primary) !important;
    border-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
    border-color: var(--squ-primary) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    color: var(--squ-ink-4) !important;
    opacity: 0.6;
}

.dataTables_wrapper .dataTables_paginate {
    margin-top: 6px !important;
    padding-top: 0 !important;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
    margin: 0 1px !important;
    min-width: 24px;
    padding: 3px 8px !important;
}

.dataTables_wrapper .dataTables_paginate span .paginate_button {
    margin: 0 1px !important;
}

.dataTables_wrapper .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 6px !important;
}

.pagination {
    margin-bottom: 0;
}

.pagination .page-item + .page-item {
    margin-left: -5px !important;
}

.pagination .page-link {
    margin: 0 1px !important;
}

/* Clickable first column */
table.dataTable tbody tr td:first-child {
    cursor: pointer;
    color: var(--squ-primary);
    /*font-weight: var(--squ-fw-semibold);*/
    transition: color var(--squ-dur-fast) var(--squ-ease);
}

table.dataTable tbody tr:hover td:first-child {
    color: var(--squ-accent-hover);
    text-decoration: underline;
}

.table-link-cell {
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold) !important;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--squ-dur) var(--squ-ease);
}

.table-link-cell:hover {
    color: var(--squ-accent-hover) !important;
    text-decoration: underline;
}


/* ==========================================================================
   9.  MODALS & DIALOG HEADERS
   ========================================================================== */
.modal-content {
    border-radius: var(--squ-radius) !important;
    border: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-lg) !important;
    overflow: hidden;
}

.modal-header,
.dialogHeader {
    background-color: var(--squ-primary) !important;
    color: #ffffff;
    min-height: 48px;
    padding: 12px 18px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    position: relative;
}

.modal-header::after,
.dialogHeader::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--squ-accent);
}

.modal-title,
.dialogHeaderText,
.home-modal-title {
    color: #ffffff !important;
    font-size: var(--squ-fs-md) !important;
    font-weight: var(--squ-fw-semibold) !important;
    margin: 0;
    letter-spacing: var(--squ-letter-tight);
}

.modal-header .close {
    color: #ffffff;
    opacity: 0.8;
    text-shadow: none;
    font-size: 22px;
    margin: -8px -8px -8px auto;
    padding: 8px;
}

.modal-header .close:hover {
    opacity: 1;
    color: #ffffff;
}

/* Explicit close button for modal headers — replaces the Bootstrap .close
   pattern which renders &times; that can disappear on coloured headers. */
.modal-close-btn {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
    width: 30px;
    height: 30px;
    min-height: 30px !important;
    border-radius: var(--squ-radius-sm) !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: background var(--squ-dur) var(--squ-ease);
    flex-shrink: 0;
}

.modal-close-btn i {
    font-size: 14px;
    color: #ffffff !important;
    line-height: 1;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.30) !important;
    color: #ffffff !important;
}

.modal-footer {
    border-top: 1px solid var(--squ-line);
    padding: var(--squ-space-3) var(--squ-space-4);
    background: var(--squ-surface);
}

.swal2-popup {
    border-radius: var(--squ-radius) !important;
    font-family: var(--squ-font) !important;
}

.swal2-title {
    color: var(--squ-ink) !important;
    font-weight: var(--squ-fw-semibold) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--squ-primary) !important;
    border-radius: var(--squ-radius) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--squ-surface-3) !important;
    color: var(--squ-ink) !important;
    border-radius: var(--squ-radius) !important;
}


/* ==========================================================================
   10.  ALERTS, BADGES, LABELS, STATUS
   ========================================================================== */
.alert {
    border-radius: var(--squ-radius) !important;
    border: 1px solid transparent;
    padding: var(--squ-space-3) var(--squ-space-4);
    font-size: var(--squ-fs-sm);
}

.alert-primary {
    background: var(--squ-primary-soft);
    border-color: var(--squ-primary-soft-border);
    color: var(--squ-primary-active);
}

.alert-success {
    background: var(--squ-success-soft);
    border-color: #cbe3cc;
    color: var(--squ-success);
}

.alert-danger {
    background: var(--squ-danger-soft);
    border-color: #e7c7c7;
    color: var(--squ-danger);
}

.alert-warning {
    background: var(--squ-warning-soft);
    border-color: var(--squ-gold-200);
    color: var(--squ-gold-800);
}

.alert-info {
    background: var(--squ-info-soft);
    border-color: #b9e0eb;
    color: #005a76;
}

/* Labels / badges */
.label,
.badge {
    font-size: var(--squ-fs-xs) !important;
    font-weight: var(--squ-fw-semibold) !important;
    padding: 4px 8px !important;
    border-radius: var(--squ-radius-sm) !important;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.label-light-primary,
.badge-light-primary { background: var(--squ-primary-soft) !important; color: var(--squ-primary) !important; }
.label-primary,
.badge-primary       { background: var(--squ-primary) !important; color: #fff !important; }

.label-light-success,
.badge-light-success { background: var(--squ-success-soft) !important; color: var(--squ-success) !important; }
.label-success,
.badge-success       { background: var(--squ-success) !important; color: #fff !important; }

.label-light-danger,
.badge-light-danger  { background: var(--squ-danger-soft) !important; color: var(--squ-danger) !important; }
.label-danger,
.badge-danger        { background: var(--squ-danger) !important; color: #fff !important; }

.label-light-warning,
.badge-light-warning { background: var(--squ-warning-soft) !important; color: var(--squ-gold-800) !important; }
.label-warning,
.badge-warning       { background: var(--squ-warning) !important; color: #fff !important; }

.label-light-info,
.badge-light-info    { background: var(--squ-info-soft) !important; color: #005a76 !important; }
.label-info,
.badge-info          { background: var(--squ-info) !important; color: #fff !important; }

/* Legacy status pills used across the app */
.green-color    { color: var(--squ-success) !important; background-color: var(--squ-success-soft) !important; }
.red-color      { color: var(--squ-danger) !important;  background-color: var(--squ-danger-soft) !important; }
.blue-color     { color: var(--squ-primary) !important; }
.gray-color     { color: #ffffff; background-color: var(--squ-ink-4); }

.SubmittedByPIColor { background: var(--squ-info) !important; color: #fff !important; }
.ApprovedColor      { background: var(--squ-success) !important; color: #fff !important; }
.RejectedColor      { background: var(--squ-danger) !important; color: #fff !important; }
.pending            { background-color: var(--squ-warning-soft) !important; color: var(--squ-gold-800) !important; }


/* ==========================================================================
   11.  TABS, DROPDOWNS, PAGINATION
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--squ-line);
}

.nav-tabs .nav-link {
    font-size: var(--squ-fs-base) !important;
    padding: 8px 16px !important;
    font-weight: var(--squ-fw-medium);
    color: var(--squ-ink-3);
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: color var(--squ-dur) var(--squ-ease), border-color var(--squ-dur) var(--squ-ease);
}

.nav-tabs .nav-link:hover {
    color: var(--squ-primary);
    border-bottom-color: var(--squ-primary-soft-border) !important;
}

.nav-tabs .nav-link.active {
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold) !important;
    border-bottom-color: var(--squ-primary) !important;
    background: transparent !important;
}
    .nav-tabs .memberInfoTab {
        color: var(--squ-primary) !important;
        font-weight: var(--squ-fw-semibold) !important;
        border-bottom-color: var(--squ-primary) !important;
        background: transparent !important;
    }

.dropdown-menu {
    border-radius: var(--squ-radius) !important;
    border: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-md) !important;
    padding: var(--squ-space-1) 0;
}

.dropdown-item {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-2);
    padding: 7px 14px;
    transition: background var(--squ-dur) var(--squ-ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--squ-primary-soft);
    color: var(--squ-primary);
}

.dropdown-divider {
    border-color: var(--squ-line-2);
    margin: var(--squ-space-1) 0;
}

/* Bootstrap pagination */
.pagination .page-link {
    color: var(--squ-ink-2);
    border-color: var(--squ-line);
    border-radius: var(--squ-radius-sm) !important;
    margin: 0 2px;
}

.pagination .page-link:hover {
    background: var(--squ-primary-soft);
    color: var(--squ-primary);
    border-color: var(--squ-primary-soft-border);
}

.pagination .page-item.active .page-link {
    background: var(--squ-primary);
    border-color: var(--squ-primary);
    color: #ffffff;
}


/* ==========================================================================
   12.  HOME DASHBOARD — counters, quick links, announcements
   ========================================================================== */
.home-section-title {
    font-size: var(--squ-fs-lg);
    font-weight: var(--squ-fw-semibold);
    color: var(--squ-ink);
    letter-spacing: var(--squ-letter-tight);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: var(--squ-space-2);
}

.home-section-desc {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-3);
    margin: 0;
    line-height: var(--squ-lh-loose);
    max-width: 720px;
}

/* Counter cards — single calm scheme; the value is the accent, not the icon background */
.home-counter-card {
    background: var(--squ-surface);
    border-radius: var(--squ-radius);
    padding: 18px var(--squ-space-5);
    display: flex;
    align-items: center;
    gap: var(--squ-space-4);
    text-decoration: none !important;
    min-height: 88px;
    border: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-xs);
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease),
                transform var(--squ-dur) var(--squ-ease);
    position: relative;
    overflow: hidden;
}

.home-counter-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--squ-primary);
    opacity: 0;
    transition: opacity var(--squ-dur) var(--squ-ease);
}

.home-counter-card:hover {
    border-color: var(--squ-primary-soft-border);
    box-shadow: var(--squ-shadow-sm);
}

.home-counter-card:hover::before {
    opacity: 1;
}

/* Override inline icon backgrounds set in legacy Home/Index — pull them into brand */
.home-counter-icon,
.home-counter-icon[style] {
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--squ-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--squ-primary-soft) !important;
    color: var(--squ-primary);
}

/* Alternate icon tile every 2nd card → uses gold-soft for a calm rhythm without confetti */
.home-counters-row > .home-counter-card:nth-child(2n) .home-counter-icon,
.home-counters-row > .home-counter-card:nth-child(2n) .home-counter-icon[style] {
    background: var(--squ-accent-soft) !important;
    color: var(--squ-accent-hover);
}

.home-counter-icon i {
    font-size: 18px;
    color: inherit !important;
}

.home-counter-value {
    font-size: var(--squ-fs-2xl);
    font-weight: var(--squ-fw-bold);
    color: var(--squ-ink);
    line-height: 1.1;
    letter-spacing: var(--squ-letter-tight);
}

.home-counter-label {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-3);
    font-weight: var(--squ-fw-medium);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

/* Section label above announcements */
.section-label {
    font-size: var(--squ-fs-sm);
    font-weight: var(--squ-fw-semibold);
    color: var(--squ-ink-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--squ-space-3);
    display: flex;
    align-items: center;
    gap: var(--squ-space-2);
}

.section-label i {
    color: var(--squ-accent);
    font-size: 13px;
}

/* Announcements */
.announcement-carousel-wrapper {
    border-radius: var(--squ-radius);
    background: var(--squ-surface);
    border: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-xs);
}

.announcement-title {
    font-size: var(--squ-fs-md);
    font-weight: var(--squ-fw-semibold);
    color: var(--squ-ink);
    margin-bottom: var(--squ-space-3);
    display: flex;
    align-items: center;
    gap: var(--squ-space-3);
    letter-spacing: var(--squ-letter-tight);
}

.announcement-desc {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-3);
    line-height: var(--squ-lh-loose);
}

.announcement-readmore {
    font-size: var(--squ-fs-sm);
    font-weight: var(--squ-fw-medium);
    color: var(--squ-primary);
}

.announcement-readmore:hover {
    color: var(--squ-primary-hover);
}

.announcement-nav .nav-btn {
    background: var(--squ-primary);
    border: 1px solid var(--squ-primary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.announcement-nav .nav-btn:hover {
    background: var(--squ-primary-hover);
    border-color: var(--squ-primary-hover);
}

/* Quick links */
.quick-link-card {
    background: var(--squ-surface);
    border-radius: var(--squ-radius);
    border: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-xs);
    transition: box-shadow var(--squ-dur) var(--squ-ease),
                border-color var(--squ-dur) var(--squ-ease);
}

.quick-link-card:hover {
    box-shadow: var(--squ-shadow-sm);
    border-color: var(--squ-primary-soft-border);
}

.quick-link-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--squ-line-2);
    gap: var(--squ-space-3);
}

.quick-link-header-icon {
    background: var(--squ-primary) !important;
    border-radius: var(--squ-radius-sm);
}

.quick-link-header-icon i { color: #ffffff !important; }

.quick-link-header h3 {
    font-size: var(--squ-fs-base);
    font-weight: var(--squ-fw-semibold);
    color: var(--squ-ink);
    margin: 0;
    letter-spacing: var(--squ-letter-tight);
}

.quick-link-body ul li a {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-2);
    padding: 9px 0;
    border-bottom: 1px solid var(--squ-line-2);
}

.quick-link-body ul li a:hover {
    color: var(--squ-primary);
    padding-left: 4px;
}

.quick-link-body ul li a i {
    color: var(--squ-ink-4);
}

.quick-link-body ul li a:hover i {
    color: var(--squ-accent);
}


/* ==========================================================================
   13.  LOADER
   ========================================================================== */
#SQULoader {
    background: rgba(15, 25, 60, 0.45);
}

.cm-spinner,
.cm-spinner:after {
    border-radius: 50%;
    width: 5em;
    height: 5em;
}

.cm-spinner {
    font-size: 10px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -2.5em;
    margin-top: -2.5em;
    text-indent: -9999em;
    border-top:    0.4em solid rgba(255, 255, 255, 0.20);
    border-right:  0.4em solid rgba(255, 255, 255, 0.20);
    border-bottom: 0.4em solid rgba(255, 255, 255, 0.20);
    border-left:   0.4em solid var(--squ-accent);
    transform: translateZ(0);
    animation: squ-load 0.9s infinite linear;
}

@keyframes squ-load {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ==========================================================================
   14.  PAGE-BACK BUTTON & TOPBAR ICON BUTTONS
   ========================================================================== */
.page-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-height: 28px !important;
    border-radius: var(--squ-radius-sm);
    background: var(--squ-surface-3);
    color: var(--squ-primary);
    cursor: pointer;
    transition: background var(--squ-dur) var(--squ-ease),
                color var(--squ-dur) var(--squ-ease);
    border: 1px solid var(--squ-line);
    font-size: 13px !important;
    text-decoration: none;
    margin-right: 8px;
    padding: 0 !important;
    flex-shrink: 0;
}

.page-back-btn:hover {
    background: var(--squ-primary-soft);
    border-color: var(--squ-primary-soft-border);
    color: var(--squ-primary-hover);
    text-decoration: none;
}

.page-back-btn i {
    font-size: 13px !important;
    color: inherit !important;
    min-width: auto !important;
}

.back-title-group {
    display: flex;
    align-items: center;
    gap: var(--squ-space-2);
}

.back-title-group .card-title {
    margin: 0 !important;
}

/* Topbar */
.topbar {
    display: flex !important;
    align-items: center !important;
    gap: var(--squ-space-1) !important;
}

.topbar-icon {
    font-size: 17px !important;
    color: var(--squ-ink-2) !important;
    line-height: 1 !important;
}

.topbar-icon-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: var(--squ-radius-sm) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    transition: background var(--squ-dur) var(--squ-ease),
                border-color var(--squ-dur) var(--squ-ease);
    text-decoration: none !important;
}

.topbar-icon-btn:hover {
    background: var(--squ-primary-soft) !important;
    border-color: var(--squ-primary-soft-border) !important;
    text-decoration: none !important;
}

.topbar-icon-btn:hover .topbar-icon {
    color: var(--squ-primary) !important;
}

/* TopBar regular icons — keep FA6 Pro on every page (CV page styles used to break these). */
#kt_header .topbar i.fa-regular,
#kt_header .topbar i.fa-regular::before {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}


/* ==========================================================================
   15.  LEGACY COLOR MAP
   Translates colors hard-coded in older stylesheets / inline styles into the
   brand. Specificity / !important is intentional here — these are catching
   long-tail legacy references that we don't want to touch one-by-one.
   ========================================================================== */

/* Legacy navy → brand blue */
.dark-blue-bg                                                       { background-color: var(--squ-primary) !important; }
.color-icon,
.header-menu-color,
.budgetIcons,
.budgetDateIconColor,
.ResearchLoadIcons,
.PrizeManagement_popupCol1,
.PrizeManagement_popupTitles,
.PrizeManagement_popupIcon,
.card-title-budget,
.tree-name,
.corner-square-badge                                                 { color: var(--squ-primary) !important; }

.tree-name                                                          { background: var(--squ-primary) !important; color: #fff !important; }

/* Card counters inherited from budget pages */
.budget-year-card-counter .count-numbers,
.budget-year-card-counter .startDate,
.budget-year-card-counter .endDate                                  { color: var(--squ-primary) !important; }

.budget-year-card-counter:hover {
    border: 1px solid var(--squ-primary-soft-border) !important;
    box-shadow: var(--squ-shadow-sm);
}

/* Legacy gold/orange → brand gold */
.click-here                                                         { color: var(--squ-accent-hover); font-weight: var(--squ-fw-semibold); }
.click-here:hover                                                   { color: var(--squ-accent); text-decoration: underline; }

.repeatedTableHeader {
    background-color: var(--squ-surface-3);
    border-bottom: 2px solid var(--squ-accent) !important;
}

.repeatedTableHeader:hover { background-color: var(--squ-primary-soft); }

.LoadrepeatedTableHeader {
    background-color: var(--squ-surface-3);
    /*border-bottom: 2px solid var(--squ-accent) !important;*/
}

    .LoadrepeatedTableHeader:hover {
        background-color: var(--squ-primary-soft);
    }

.TotalRow {
    background-color: var(--squ-accent-soft) !important;
    border-top: 2px solid var(--squ-accent) !important;
    color: var(--squ-ink) !important;
    font-weight: var(--squ-fw-semibold) !important;
}

.GoldBg { background-color: var(--squ-accent-soft) !important; }

.TotalRowAvg {
    background-color: var(--squ-primary-soft) !important;
    border-top: 2px solid var(--squ-primary) !important;
    color: var(--squ-ink) !important;
    font-weight: var(--squ-fw-semibold) !important;
}

.PrizeManagement_TotalRow {
    background-color: var(--squ-primary-soft) !important;
    border-top: 2px solid var(--squ-primary) !important;
}

.PrizeManagement_th,
.table .PrizeManagement_th {
    background-color: var(--squ-primary-soft) !important;
    color: var(--squ-primary) !important;
}

.PrizeManagement_ApprovedCard { color: var(--squ-success) !important; }
.PrizeManagement_RejectedCard { color: var(--squ-danger) !important; }
.PrizeManagement_SubmittedCard { color: var(--squ-info) !important; }
.PrizeManagement_ScoreCard    { color: var(--squ-primary) !important; }

.PrizeManagement_ViewBtn {
    background-color: var(--squ-primary) !important;
    border-color: var(--squ-primary) !important;
    color: #ffffff !important;
}

.PrizeManagement_ViewBtn i { color: #ffffff !important; }

/* Legacy teal profile button → brand light blue */
.profileBtn {
    background-color: var(--squ-info) !important;
    border-color: var(--squ-info) !important;
    color: #ffffff !important;
}

.profileBtn:hover {
    background-color: #007599 !important;
    border-color: #007599 !important;
    box-shadow: 0 4px 12px rgba(0, 143, 186, 0.25);
}

/* Transaction colors */
.Transaction-INColor { color: var(--squ-success) !important; }
.Transaction-OUTColor { color: var(--squ-danger) !important; }

/* Hero gradients (artifact-hero, engineHeaderBg, prizeHeaderBg) → flat brand */
.artifact-hero {
    background: var(--squ-primary);
    color: #ffffff;
    padding: 24px 24px;
    border-radius: var(--squ-radius);
    margin-bottom: 22px;
    text-align: center;
    box-shadow: var(--squ-shadow-sm);
    position: relative;
    overflow: hidden;
}

.artifact-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--squ-accent);
}

.artifact-hero h1 {
    color: #ffffff;
    font-size: var(--squ-fs-xl);
    font-weight: var(--squ-fw-semibold);
    margin-bottom: 6px;
    letter-spacing: var(--squ-letter-tight);
}

.artifact-hero p {
    color: #ffffff;
    font-size: var(--squ-fs-base);
    opacity: 0.9;
}

.artifact-card {
    background: var(--squ-surface);
    border-radius: var(--squ-radius);
    padding: 24px 22px;
    text-align: center;
    transition: transform var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease),
                border-color var(--squ-dur) var(--squ-ease);
    cursor: pointer;
    box-shadow: var(--squ-shadow-xs);
    height: 100%;
    border: 1px solid var(--squ-line);
}

.artifact-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--squ-shadow-md);
    border-color: var(--squ-primary-soft-border);
}

.artifact-card i {
    font-size: 32px;
    margin-bottom: 14px;
    color: var(--squ-primary);
}

.artifact-card h3 {
    font-size: var(--squ-fs-md);
    font-weight: var(--squ-fw-semibold);
    margin-bottom: 6px;
    color: var(--squ-ink);
}

.artifact-card p {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-3);
}

.engineHeaderBg,
.prizeHeaderBg {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
    border-radius: var(--squ-radius);
    position: relative;
    overflow: hidden;
}

.engineHeaderBg::after,
.prizeHeaderBg::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--squ-accent);
}

/* Ribbons */
.ribbon .ribbon-targett {
    background-color: var(--squ-accent) !important;
}

.calculatedcolums,
.calculatedBG,
.table .popupBG {
    background-color: var(--squ-accent-soft) !important;
    color: var(--squ-ink) !important;
    border-color: var(--squ-gold-200) !important;
}

/* LoadCalc / disabled buttons */
.btnLoadCalc:disabled,
.btnLoadCalc:disabled i {
    background-color: var(--squ-surface-3) !important;
    color: var(--squ-primary) !important;
    border-color: var(--squ-line) !important;
}

.loadcolor-white,
.ResearchLoadIcons,
.loadAttachIcon {
    color: var(--squ-primary) !important;
}

.btn.btn-hover-primary.loadAttachIcon:hover:not(.btn-text):not(:disabled):not(.disabled),
.btn.btn-hover-primary.loadAttachIcon:hover:not(.btn-text):not(:disabled):not(.disabled) i {
    color: var(--squ-primary) !important;
    background-color: var(--squ-primary-soft) !important;
    border-color: var(--squ-primary-soft-border) !important;
}


/* ==========================================================================
   16.  RTL refinements
   ========================================================================== */
[dir="rtl"] .header-menu-text {
    border: none !important;
}

[dir="rtl"] .page-back-btn { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .page-back-btn i { transform: rotate(180deg); }

[dir="rtl"] .sidebar { left: auto; right: 0; border-right: none; border-left: 1px solid var(--squ-line); }

[dir="rtl"] .sidebar .nav-links li a.active::before,
[dir="rtl"] .sidebar .nav-links li a[is-active="true"]::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
    border-radius: var(--squ-radius-sm) 0 0 var(--squ-radius-sm);
}

[dir="rtl"] .home-counter-card::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

[dir="rtl"] .quick-link-body ul li a:hover {
    padding-left: 0;
    padding-right: 4px;
}

[dir="rtl"] .quick-link-body ul li a:hover i {
    transform: translateX(-2px);
}

[dir="rtl"] .table thead th {
    border-right: none;
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}

[dir="rtl"] .table thead th:last-child { border-left: none; }

[dir="rtl"] .table td {
    border-right: none;
    border-left: 1px solid var(--squ-line-2);
}

[dir="rtl"] .table td:last-child { border-left: none; }


/* ==========================================================================
   16b.  RTL — broad text-align + chevron flip sweep
   The app uses LTR/RTL via dir="rtl" on <html>. Many legacy classes use
   text-align: left/right hardcoded; this block forces them to "start" so
   they follow direction. Right-pointing chevrons are flipped 180° for RTL.
   ========================================================================== */

/* Force start-alignment on common page text containers — fixes descriptive
   text that looked left-aligned in RTL pages. */
[dir="rtl"] .home-section-title,
[dir="rtl"] .home-section-desc,
[dir="rtl"] .page-header-bar h2,
[dir="rtl"] .page-header-bar .page-header-title,
[dir="rtl"] .sp-section-title,
[dir="rtl"] .sp-prize-title,
[dir="rtl"] .sp-prize-desc,
[dir="rtl"] .sp-deadline,
[dir="rtl"] .quick-link-header h3,
[dir="rtl"] .quick-link-body ul li a,
[dir="rtl"] .squ-profile-stat-info,
[dir="rtl"] .squ-shortcut-header,
[dir="rtl"] .squ-shortcut-item,
[dir="rtl"] .squ-timeline-status,
[dir="rtl"] .squ-timeline-stage,
[dir="rtl"] .settings-group-title,
[dir="rtl"] .settings-group-list li,
[dir="rtl"] .settings-group-list li a,
[dir="rtl"] .custom-card-title,
[dir="rtl"] .home-counter-value,
[dir="rtl"] .home-counter-label,
[dir="rtl"] .home-card-counter .count-numbers,
[dir="rtl"] .home-card-counter .count-name,
[dir="rtl"] .home-card-counter .count-namee,
[dir="rtl"] .home-card-counter > .text-end,
[dir="rtl"] .modal-title,
[dir="rtl"] .dialogHeaderText,
[dir="rtl"] .home-modal-title,
[dir="rtl"] .announcement-title,
[dir="rtl"] .announcement-desc,
[dir="rtl"] .card-title,
[dir="rtl"] .card-title-budget,
[dir="rtl"] .dashboard-group-label {
    text-align: start !important;
}

/* Hide text-align: left/right from legacy utility classes inside RTL */
[dir="rtl"] .text-left,
[dir="rtl"] .text-start { text-align: start !important; }
[dir="rtl"] .text-right,
[dir="rtl"] .text-end   { text-align: end !important; }

/* Section label icons + quick-link chevrons: when they point ">" (right),
   flip in RTL so they point "<" toward the start. */
[dir="rtl"] .quick-link-body ul li a > i.fa-chevron-right,
[dir="rtl"] .quick-link-body ul li a > i.fa-chevron-left,
[dir="rtl"] .settings-group-list li a > i.fa-chevron-right,
[dir="rtl"] .announcement-readmore > i.fa-arrow-right,
[dir="rtl"] .sp-deadline > i.fa-arrow-right,
[dir="rtl"] .home-section-title > i.fa-arrow-right,
[dir="rtl"] .squ-shortcut-item:hover > i,
[dir="rtl"] .squ-section-arrow,
[dir="rtl"] a > i.fa-arrow-right,
[dir="rtl"] a > i.fa-long-arrow-right,
[dir="rtl"] button > i.fa-arrow-right,
[dir="rtl"] button > i.fa-long-arrow-right {
    transform: scaleX(-1);
}

/* "Read more" arrow shift on hover — flip translate direction in RTL */
[dir="rtl"] .announcement-readmore:hover i {
    transform: translateX(-4px) scaleX(-1);
}

/* Padding-left → padding-inline-start swap for quick-link hover indent */
[dir="rtl"] .quick-link-body ul li a:hover {
    padding-left: 0;
    padding-inline-start: 4px;
}

/* Profile change-pic / small-action icons that use me-1 / mr-1 from Bootstrap.
   Bootstrap's `me-*` is already logical (margin-inline-end), but legacy `mr-*`
   is not. Force inline-end semantics on common icon margins inside our buttons. */
[dir="rtl"] .btn > i.mr-1,
[dir="rtl"] .btn > i.mr-2,
[dir="rtl"] .btn > i.mr-3 {
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-inline-end: 6px !important;
}

[dir="rtl"] .btn > i.ml-1,
[dir="rtl"] .btn > i.ml-2,
[dir="rtl"] .btn > i.ml-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline-start: 6px !important;
}

/* Inputs and labels: form-group label naturally aligns to start; reinforce */
[dir="rtl"] .form-group > label,
[dir="rtl"] .form-group > requiredlabel,
[dir="rtl"] .form-group > RequiredLabel,
[dir="rtl"] requiredLabel,
[dir="rtl"] .control-label {
    text-align: start !important;
    display: block;
}

/* Search form in Prize Management — already direction-aware but force start */
[dir="rtl"] .SearchForm .input-search-text {
    text-align: start;
}

/* Section labels with leading icon + uppercase letter spacing */
[dir="rtl"] .section-label {
    text-align: start;
}

/* ==========================================================================
   16c.  RTL — Bootstrap physical margin/padding utility flips
   Bootstrap 4 .mr-* / .ml-* / .pr-* / .pl-* are PHYSICAL (always left/right,
   never start/end). In RTL pages they put gaps on the wrong side. Force the
   common ones to behave as logical (inline-end/inline-start).
   ========================================================================== */
[dir="rtl"] .mr-1 { margin-right: 0 !important; margin-inline-end: 0.25rem !important; }
[dir="rtl"] .mr-2 { margin-right: 0 !important; margin-inline-end: 0.5rem  !important; }
[dir="rtl"] .mr-3 { margin-right: 0 !important; margin-inline-end: 1rem    !important; }
[dir="rtl"] .mr-4 { margin-right: 0 !important; margin-inline-end: 1.5rem  !important; }
[dir="rtl"] .mr-5 { margin-right: 0 !important; margin-inline-end: 3rem    !important; }
[dir="rtl"] .mr-6 { margin-right: 0 !important; margin-inline-end: 4rem    !important; }
[dir="rtl"] .mr-7 { margin-right: 0 !important; margin-inline-end: 5rem    !important; }

[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-inline-start: 0.25rem !important; }
[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-inline-start: 0.5rem  !important; }
[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-inline-start: 1rem    !important; }
[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-inline-start: 1.5rem  !important; }
[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-inline-start: 3rem    !important; }
[dir="rtl"] .ml-6 { margin-left: 0 !important; margin-inline-start: 4rem    !important; }
[dir="rtl"] .ml-7 { margin-left: 0 !important; margin-inline-start: 5rem    !important; }

[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-inline-end: 0.25rem !important; }
[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-inline-end: 0.5rem  !important; }
[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-inline-end: 1rem    !important; }
[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-inline-end: 1.5rem  !important; }
[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-inline-end: 3rem    !important; }
[dir="rtl"] .pr-6 { padding-right: 0 !important; padding-inline-end: 4rem    !important; }
[dir="rtl"] .pr-7 { padding-right: 0 !important; padding-inline-end: 5rem    !important; }

[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-inline-start: 0.25rem !important; }
[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-inline-start: 0.5rem  !important; }
[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-inline-start: 1rem    !important; }
[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-inline-start: 1.5rem  !important; }
[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-inline-start: 3rem    !important; }
[dir="rtl"] .pl-6 { padding-left: 0 !important; padding-inline-start: 4rem    !important; }
[dir="rtl"] .pl-7 { padding-left: 0 !important; padding-inline-start: 5rem    !important; }

/* .float-inline-end / .float-inline-start — Bootstrap's float-right/left work
   physically. Custom .float-inline-end was supposed to be logical but it
   breaks the counter-card layout in RTL. Inside a flex column where it sits
   beside a title, drop the float and align to start so number sits with title. */
[dir="rtl"] .d-flex.flex-column > .float-inline-end,
[dir="rtl"] .d-flex.flex-column > .float-inline-start {
    float: none !important;
    text-align: start !important;
    align-self: flex-start;
}

[dir="rtl"] .float-right { float: none !important; float: inline-end !important; }
[dir="rtl"] .float-left  { float: none !important; float: inline-start !important; }

/* RefereeTask / generic stat-widget counter cards — align title and value
   to the start so both read from the right edge in RTL */
[dir="rtl"] .card.card-stretch .card-body.d-flex .card-title,
[dir="rtl"] .card.card-stretch .card-body.d-flex .text-warning,
[dir="rtl"] .card.card-stretch .card-body.d-flex .text-success,
[dir="rtl"] .card.card-stretch .card-body.d-flex .text-muted,
[dir="rtl"] .card.card-stretch .card-body.d-flex .text-dark-50 {
    text-align: start !important;
}


/* ==========================================================================
   PROFILE EDIT — pill tab design (single-active, perf-optimised)
   Removed: `.show` selector (Bootstrap uses it on tab PANES, not on tab
   links — including it lit up multiple tabs). Removed: universal `*` child
   selectors (caused re-style of every descendant on hover → frame drops).
   ========================================================================== */

.squ-profile-tabs {
    border-bottom: 1px solid var(--squ-line);
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: stretch;
}

.squ-profile-tabs > .nav-item {
    margin: 0 0 -1px 0;
    padding: 0;
}

/* Base tab — inactive (bare, matches Application/Edit) */
.squ-profile-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    margin: 0;
    background: transparent;
    color: var(--squ-ink-2);
    border: 1px solid transparent;
    border-radius: 0;
    font-weight: var(--squ-fw-semibold);
    font-size: var(--squ-fs-base);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    text-align: start;
    transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}

.squ-profile-tabs .nav-link .nav-icon,
.squ-profile-tabs .nav-link .nav-icon i,
.squ-profile-tabs .nav-link .nav-text,
.squ-profile-tabs .nav-link > i {
    color: inherit;
    font-size: var(--squ-fs-base);
    line-height: 1;
}

/* Override Metronic's forced `.nav .nav-link .nav-icon { width: 2rem }`
   (style.bundle.css ~L54220). That fixed 32px box leaves visible whitespace
   around the icon glyph and makes the icon look detached from the tab text.
   Applied to both branded tab contexts so they match. */
.squ-profile-tabs .nav-link .nav-icon,
.app-edit-page .nav-tabs .nav-link .nav-icon {
    width: auto !important;
    min-width: 0 !important;
    line-height: 1;
}

/* Pair the width override with an explicit icon-to-text gap so the two
   contexts render identically. (squ-profile-tabs already sets gap on the
   nav-link; Application/Edit relies on the bundle's 2rem icon width to
   create spacing, so it needs an explicit gap once that width is removed.) */
.app-edit-page .nav-tabs .nav-link {
    gap: 8px;
}
.app-edit-page .nav-tabs .memberInfoTab {
    gap: 8px;
}
/* Hover — subtle border hint, only on inactive tabs */
.squ-profile-tabs .nav-link:not(.active):hover {
    color: var(--squ-primary);
    border-color: var(--squ-line-2) var(--squ-line-2) var(--squ-line);
}

/* ACTIVE — solid blue (matches Application/Edit; no gold accent) */
.squ-profile-tabs .nav-link.active,
[dir="rtl"] .squ-profile-tabs .nav-link.active {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
    border-color: var(--squ-primary) !important;
    border-radius: var(--squ-radius) !important;
}

/* Active children — explicit, NOT a universal selector */
.squ-profile-tabs .nav-link.active .nav-icon,
.squ-profile-tabs .nav-link.active .nav-icon i,
.squ-profile-tabs .nav-link.active .nav-text,
.squ-profile-tabs .nav-link.active > i,
.squ-profile-tabs .nav-link.active > span {
    color: #ffffff !important;
}

/* Container — sit flush, no dividing line under */
.squ-profile-tabs-header {
    padding-bottom: 0;
    border-bottom: none;
    background: var(--squ-surface);
}

/* Import Papers — must beat the legacy CustomStyleEn.css:1934 rule
   which uses `:not(.btn-text):not(:disabled):not(.disabled)` to grey out
   any card-header button. Match that pattern + add more classes to win. */
button.btn.squ-profile-import-papers,
button.btn.btn-primary.squ-profile-import-papers,
button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled),
.squ-profile-tabs-header button.btn.squ-profile-import-papers,
.squ-profile-tabs-header button.btn.btn-primary.squ-profile-import-papers,
.squ-profile-tabs-header button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled),
.card-header button.btn.squ-profile-import-papers,
.card-header button.btn.btn-primary.squ-profile-import-papers,
.card-header button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled),
[dir="rtl"] button.btn.btn-primary.squ-profile-import-papers,
[dir="rtl"] .card-header button.btn.btn-primary.squ-profile-import-papers,
[dir="rtl"] .card-header button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled) {
    background: var(--squ-primary) !important;
    background-color: var(--squ-primary) !important;
    border: 1px solid var(--squ-primary) !important;
    border-color: var(--squ-primary) !important;
    color: #ffffff !important;
}

button.btn.squ-profile-import-papers i,
button.btn.squ-profile-import-papers span,
button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled) i,
button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled) span,
.squ-profile-tabs-header button.btn.squ-profile-import-papers i,
.squ-profile-tabs-header button.btn.squ-profile-import-papers span,
.card-header button.btn.squ-profile-import-papers i,
.card-header button.btn.squ-profile-import-papers span,
.card-header button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled) i,
.card-header button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled) span,
[dir="rtl"] button.btn.squ-profile-import-papers i,
[dir="rtl"] button.btn.squ-profile-import-papers span {
    color: #ffffff !important;
}

button.btn.squ-profile-import-papers:hover,
button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled):hover,
.squ-profile-tabs-header button.btn.squ-profile-import-papers:hover,
.card-header button.btn.squ-profile-import-papers:hover,
.card-header button.btn.btn-primary.squ-profile-import-papers:not(.btn-text):not(:disabled):not(.disabled):hover,
[dir="rtl"] button.btn.squ-profile-import-papers:hover {
    background: var(--squ-primary-hover) !important;
    background-color: var(--squ-primary-hover) !important;
    border-color: var(--squ-primary-hover) !important;
    color: #ffffff !important;
}

button.btn.squ-profile-import-papers:hover i,
button.btn.squ-profile-import-papers:hover span {
    color: #ffffff !important;
}

/* ==========================================================================
   Legacy teal/cyan search input wash + DataTable filter — brand it
   Some tables (the search row in MostActive Award Management page) use a
   cyan/teal background that's off-brand. Force brand-blue treatment.
   ========================================================================== */
.dataTables_wrapper .row > .col-sm-12 > .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input,
input[type="search"].form-control {
    background-color: var(--squ-surface) !important;
    color: var(--squ-ink) !important;
    border: 1px solid var(--squ-line) !important;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* If any element in MostActive page uses bg-info / cyan inline,
   override it to brand light-blue tint */
.kt-section--first [class*="bg-info"]:not(.label):not(.badge),
.tab-pane [class*="bg-info"]:not(.label):not(.badge),
[style*="background-color:#1bc5bd" i],
[style*="background-color: #1bc5bd" i],
[style*="background:#1bc5bd" i],
[style*="background: #1bc5bd" i] {
    background-color: var(--squ-blue-light-t10) !important;
}

[style*="color:#1bc5bd" i],
[style*="color: #1bc5bd" i] {
    color: var(--squ-blue-light) !important;
}


/* ==========================================================================
   BUDGET ACCORDION (FundDistribution / similar) — brand the legacy
   accordion2 / innertotalcost / label2 styles and make them RTL-safe.
   ========================================================================== */
ul.accordion2 li .label2,
ul.accordion2 li > .label2 {
    background-color: var(--squ-blue-t10) !important;
    color: var(--squ-ink) !important;
    border-bottom: 1px solid var(--squ-blue-t30) !important;
    border-radius: var(--squ-radius) !important;
    padding: 14px 18px !important;
    padding-inline-end: 56px !important; /* reserve room for the absolute chevron */
    font-size: var(--squ-fs-md) !important;
    font-weight: var(--squ-fw-semibold) !important;
    position: relative;
    /* Make label a flex row so title sits at start and badge auto-pushed to end */
    display: flex !important;
    align-items: center;
    gap: 12px;
}

ul.accordion2 li .label2:after {
    float: none !important;
    position: absolute;
    top: 50%;
    inset-inline-end: 18px;
    transform: translateY(-50%);
    color: var(--squ-primary);
    font-size: 13px;
}

[dir="rtl"] ul.accordion2 li .label2:after {
    /* fa-chevron-right "\f054" → flip to chevron-left in RTL */
    transform: translateY(-50%) scaleX(-1);
}

ul.accordion2 input[type=checkbox]:checked ~ .label2:after {
    transform: translateY(-50%) rotate(90deg) !important;
}

[dir="rtl"] ul.accordion2 input[type=checkbox]:checked ~ .label2:after {
    transform: translateY(-50%) rotate(90deg) scaleX(-1) !important;
}

/* Total-cost badge — brand-blue, safe inline-flow by default.
   The .accordion2 .label2 rule below adds absolute positioning ONLY where
   the parent is a positioned container we control. Inside Bootstrap's
   .card-header > .card-title (inner accordions), the badge stays inline so
   it doesn't overlap the title. */
.innertotalcost,
.badge.innertotalcost,
.badge.badge-info.innertotalcost,
span.font-weight-bold.badge.innertotalcost {
    background-color: var(--squ-primary) !important;
    color: #ffffff !important;
    padding: 5px 10px !important;
    border-radius: var(--squ-radius-sm) !important;
    font-size: var(--squ-fs-sm) !important;
    font-weight: var(--squ-fw-semibold) !important;
    display: inline-block;
    margin-inline-start: 12px;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.4;
}

.innertotalcost .currency-label,
.badge.innertotalcost .currency-label {
    color: var(--squ-gold-t30) !important;
    font-weight: var(--squ-fw-semibold);
    font-size: var(--squ-fs-xs) !important;
    margin-inline-start: 4px;
}

/* Inner Bootstrap accordion (.card-header > .card-title) — title on the
   start, badge pushed to the END side via margin-inline-start: auto. */
.card-header .card-title .innertotalcost,
.card-header .card-title .badge.innertotalcost,
.card-header .card-title Label .innertotalcost,
.card-header .card-title Label .badge.innertotalcost {
    position: static !important;
    transform: none !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    display: inline-block;
    margin: 0 !important;
    margin-inline-start: auto !important;   /* pushes badge to the END */
    vertical-align: middle;
    max-width: 220px;
}

.card-header .card-title Label,
.card-header .card-title > span > Label {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

/* Make the whole card-title a flex row so margin-inline-start:auto on the
   badge actually pushes it to the END of the available space */
.card-header .card-title.collapsed,
.card-header .card-title:not(.collapsed) {
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.card-header .card-title > span {
    display: inline-flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.card-header .card-title > span:empty {
    flex: 0 0 auto;
}


/* ==========================================================================
   PRIZESANDAWARDS — first sp-prize-card in RTL: text-align start
   ========================================================================== */
[dir="rtl"] .sp-prize-card,
[dir="rtl"] .sp-prize-card h3,
[dir="rtl"] .sp-prize-card p,
[dir="rtl"] .sp-prize-card .sp-prize-title,
[dir="rtl"] .sp-prize-card .sp-prize-desc,
[dir="rtl"] .sp-prize-card .sp-deadline,
[dir="rtl"] .sp-prize-card .sp-prize-meta {
    text-align: start !important;
}

[dir="rtl"] .sp-prize-card .sp-prize-title,
[dir="rtl"] .sp-prize-card .sp-prize-desc {
    direction: rtl;
}

/* Inline icon inside the title — naturally appears at the start in RTL */
[dir="rtl"] .sp-prize-title > i {
    margin-inline-start: 0;
    margin-inline-end: 6px;
}


/* ==========================================================================
   HOME ANNOUNCEMENTS — flex layout reverse + gradient flip in RTL
   In RTL: image should be on the LEFT, text on the RIGHT.
   ========================================================================== */
[dir="rtl"] .announcement-slide {
    display: flex !important;
    flex-direction: row-reverse !important;
}

[dir="rtl"] .announcement-content,
[dir="rtl"] .announcement-content .announcement-title,
[dir="rtl"] .announcement-content .announcement-desc,
[dir="rtl"] .announcement-content .announcement-readmore,
[dir="rtl"] .carousel-item .announcement-content,
[dir="rtl"] .carousel-item .announcement-title,
[dir="rtl"] .carousel-item .announcement-desc,
[dir="rtl"] .carousel-item .announcement-readmore,
[dir="rtl"] .carousel-item .announcement-content > * {
    text-align: start !important;
    direction: rtl;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

[dir="rtl"] .announcement-readmore,
[dir="rtl"] .carousel-item .announcement-readmore {
    direction: rtl;
    align-self: flex-start;
}

[dir="rtl"] .announcement-image::before {
    left: auto !important;
    right: 0 !important;
    background: linear-gradient(to left, var(--squ-surface), transparent) !important;
}

/* Carousel nav buttons (prev/next) — flip arrow icons in RTL since LTR
   "next" arrow becomes "previous" in RTL reading direction */
[dir="rtl"] .announcement-nav .nav-btn i.fa-chevron-left,
[dir="rtl"] .announcement-nav .nav-btn i.fa-chevron-right {
    transform: scaleX(-1);
}


/* ==========================================================================
   DATATABLES sort indicators — flip to the END side in RTL
   DataTables core positions the up/down arrows with `right: 1em` and
   `right: 0.5em` and reserves space with `padding-right: 30px` on
   sortable cells. In RTL pages this leaves the icons on the START side
   (right in Arabic), making them sit next to the title text instead of
   at the far end of the cell. Flip them.
   ========================================================================== */
[dir="rtl"] table.dataTable thead > tr > th.sorting,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc,
[dir="rtl"] table.dataTable thead > tr > th.sorting_asc_disabled,
[dir="rtl"] table.dataTable thead > tr > th.sorting_desc_disabled,
[dir="rtl"] table.dataTable thead > tr > td.sorting,
[dir="rtl"] table.dataTable thead > tr > td.sorting_asc,
[dir="rtl"] table.dataTable thead > tr > td.sorting_desc {
    padding-right: 12px !important;
    padding-left: 30px !important;
}

[dir="rtl"] table.dataTable thead .sorting:before,
[dir="rtl"] table.dataTable thead .sorting_asc:before,
[dir="rtl"] table.dataTable thead .sorting_desc:before,
[dir="rtl"] table.dataTable thead .sorting_asc_disabled:before,
[dir="rtl"] table.dataTable thead .sorting_desc_disabled:before {
    right: auto !important;
    left: 1em !important;
}

[dir="rtl"] table.dataTable thead .sorting:after,
[dir="rtl"] table.dataTable thead .sorting_asc:after,
[dir="rtl"] table.dataTable thead .sorting_desc:after,
[dir="rtl"] table.dataTable thead .sorting_asc_disabled:after,
[dir="rtl"] table.dataTable thead .sorting_desc_disabled:after {
    right: auto !important;
    left: 0.5em !important;
}


/* ==========================================================================
   FUNDDISTRIBUTION accordion badge — don't overlap the title
   Previous fix used inset-inline-end: 56px which still collided with the
   "Summary of Budget Requested (OMR)" / "Total" title text. Move the badge
   to inline-start side (so it doesn't sit over the table area), and reserve
   start-padding on the title so the badge can never collide.
   ========================================================================== */
/* Badge sits at the END side of the label (left in RTL, right in LTR)
   via flex auto-margin — works reliably without position juggling and
   without conflicting with the absolute chevron. */
ul.accordion2 li .label2 .innertotalcost,
ul.accordion2 li .label2 .badge.innertotalcost,
ul.accordion2 li .label2 .badge.badge-info.innertotalcost {
    position: static !important;
    top: auto !important;
    transform: none !important;
    right: auto !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    margin: 0 !important;
    margin-inline-start: auto !important;  /* pushes badge to the END of the flex row */
    margin-inline-end: 14px !important;    /* gap from the absolute chevron at the very end */
    padding: 6px 12px !important;
    border-radius: var(--squ-radius-sm) !important;
    background-color: var(--squ-primary) !important;
    color: #ffffff !important;
    font-size: var(--squ-fs-sm) !important;
    font-weight: var(--squ-fw-semibold) !important;
    white-space: nowrap;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    line-height: 1.4;
    z-index: 2;
    flex-shrink: 0;
}

/* On narrow screens, allow badge to wrap below the title */
@media (max-width: 768px) {
    ul.accordion2 li .label2 {
        flex-wrap: wrap;
    }

    ul.accordion2 li .label2 .innertotalcost,
    ul.accordion2 li .label2 .badge.innertotalcost {
        margin-inline-start: 0 !important;
        margin-top: 8px !important;
    }
}


/* ==========================================================================
   17.  INLINE-STYLE HEX SUBSTITUTION
   Catches hard-coded legacy color hex codes that appear in inline `style="..."`
   attributes across .cshtml views, without having to edit every view file.
   The [i] flag makes matching case-insensitive (#1B1E4B == #1b1e4b).
   ========================================================================== */

/* Legacy navy #1b1e4b → SQU brand blue */
[style*="background:#1b1e4b" i],
[style*="background: #1b1e4b" i],
[style*="background-color:#1b1e4b" i],
[style*="background-color: #1b1e4b" i] {
    background-color: var(--squ-primary) !important;
}

[style*="color:#1b1e4b" i],
[style*="color: #1b1e4b" i] {
    color: var(--squ-primary) !important;
}

[style*="border-left:3px solid #1b1e4b" i],
[style*="border-left: 3px solid #1b1e4b" i],
[style*="border-right:3px solid #1b1e4b" i],
[style*="border-right: 3px solid #1b1e4b" i],
[style*="border-color:#1b1e4b" i],
[style*="border-color: #1b1e4b" i],
[style*="border-top:2px solid #1b1e4b" i],
[style*="border-top: 2px solid #1b1e4b" i] {
    border-color: var(--squ-primary) !important;
}

/* Legacy burnt orange #c7800b → SQU gold accent */
[style*="background:#c7800b" i],
[style*="background: #c7800b" i],
[style*="background-color:#c7800b" i],
[style*="background-color: #c7800b" i] {
    background-color: var(--squ-accent) !important;
}

[style*="color:#c7800b" i],
[style*="color: #c7800b" i] {
    color: var(--squ-accent-hover) !important;
}

[style*="border-color:#c7800b" i],
[style*="border-color: #c7800b" i] {
    border-color: var(--squ-accent) !important;
}

/* Legacy gold #cb994c → SQU gold accent */
[style*="background:#cb994c" i],
[style*="background: #cb994c" i],
[style*="background-color:#cb994c" i],
[style*="background-color: #cb994c" i] {
    background-color: var(--squ-accent) !important;
}

[style*="color:#cb994c" i],
[style*="color: #cb994c" i] {
    color: var(--squ-accent-hover) !important;
}

/* Legacy amber #e8a221 → SQU gold accent */
[style*="background:#e8a221" i],
[style*="background: #e8a221" i],
[style*="background-color:#e8a221" i],
[style*="background-color: #e8a221" i] {
    background-color: var(--squ-accent) !important;
}

[style*="color:#e8a221" i],
[style*="color: #e8a221" i] {
    color: var(--squ-accent-hover) !important;
}

/* Legacy loader navy #1b364d → SQU brand blue */
[style*="background:#1b364d" i],
[style*="background-color:#1b364d" i] {
    background-color: var(--squ-primary) !important;
}

[style*="color:#1b364d" i] {
    color: var(--squ-primary) !important;
}

/* ==========================================================================
   26.  LEGACY PAGE SUPPORT
   Catches old class names used by views like
   SQUPublicationAndPatentPrizeManagement, MostActive*Management, etc.
   that pre-date the brand layer. Brands them in-place so the markup
   doesn't need to be rewritten.
   ========================================================================== */

/* ----- Counter tile (.home-card-counter) — match homepage .home-counter-card
   Layout: icon-tile on the start side, info stack on the end side with
   value + label, hairline border + small shadow, hover lift with left rail.
   overflow: hidden was clipping the corner-square-badge; switched to
   clip-path on the hover rail only. */
.home-card-counter {
    background: var(--squ-surface);
    border: 1px solid var(--squ-line);
    border-radius: var(--squ-radius);
    padding: 18px 20px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px;
    min-height: 88px;
    box-shadow: var(--squ-shadow-xs);
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
    position: relative;
    overflow: visible;
}

/* Brand-blue rail on hover, same as homepage cards */
.home-card-counter::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--squ-primary);
    opacity: 0;
    transition: opacity var(--squ-dur) var(--squ-ease);
}

.home-card-counter:hover {
    border-color: var(--squ-blue-t30);
    box-shadow: var(--squ-shadow-sm);
}

.home-card-counter:hover::before {
    opacity: 1;
}

a > .home-card-counter,
a:hover > .home-card-counter {
    text-decoration: none !important;
}

/* Icon-tile wrapper: the <div class="d-flex justify-content-start"> that
   wraps the icon becomes a 44px brand-tinted square */
.home-card-counter > .d-flex.justify-content-start.align-items-center,
.home-card-counter > div:first-child:not(.corner-square-badge):not(.delta-fly-large):not(.text-end) {
    width: 44px;
    height: 44px;
    border-radius: var(--squ-radius-sm);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    background: var(--squ-blue-t10);
}

/* Icon inside the tile = just an icon now, not its own tile */
.home-card-counter i,
.home-card-counter .img-befor-vertical-line {
    font-size: 20px;
    width: auto;
    height: auto;
    line-height: 1;
    background: transparent !important;
    color: var(--squ-primary) !important;
    padding: 0;
}

.home-card-counter img.img-befor-vertical-line {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Info wrapper: override the .text-end so info aligns to the start, stacked.
   Matches homepage .home-counter-info pattern.
   Exclusions keep the corner badge and delta overlay out of the flex-stretch
   so they retain their absolute positioning instead of being treated as the
   main info column. */
.home-card-counter > .text-end,
.home-card-counter > div:last-child:not(.corner-square-badge):not(.delta-fly-large):not(.d-flex.justify-content-start) {
    text-align: start !important;
    display: flex !important;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
}

.home-card-counter .count-numbers {
    display: block;
    font-size: 26px;
    font-weight: var(--squ-fw-bold);
    color: var(--squ-ink);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.home-card-counter .count-name,
.home-card-counter .count-namee {
    display: block;
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-3);
    font-weight: var(--squ-fw-medium);
    margin-top: 4px;
}

/* Semantic icon-tile colors per status — keeps meaning while matching shape */
.home-card-counter:has(.PrizeManagement_SubmittedCard) > .d-flex.justify-content-start,
.home-card-counter:has(.PrizeManagement_SubmittedCard) > div:first-child {
    background: var(--squ-blue-light-t10);
}
.home-card-counter .PrizeManagement_SubmittedCard { color: var(--squ-blue-light) !important; }

.home-card-counter:has(.PrizeManagement_ApprovedCard) > .d-flex.justify-content-start,
.home-card-counter:has(.PrizeManagement_ApprovedCard) > div:first-child {
    background: var(--squ-green-t10);
}
.home-card-counter .PrizeManagement_ApprovedCard  { color: var(--squ-success) !important; }

.home-card-counter:has(.PrizeManagement_RejectedCard) > .d-flex.justify-content-start,
.home-card-counter:has(.PrizeManagement_RejectedCard) > div:first-child {
    background: var(--squ-red-t10);
}
.home-card-counter .PrizeManagement_RejectedCard  { color: var(--squ-danger) !important; }

.home-card-counter:has(.PrizeManagement_ScoreCard) > .d-flex.justify-content-start,
.home-card-counter:has(.PrizeManagement_ScoreCard) > div:first-child {
    background: var(--squ-purple-t10);
}
.home-card-counter .PrizeManagement_ScoreCard     { color: var(--squ-purple) !important; }

/* Prize-amount card (uses img instead of <i>) — gold tile */
.home-card-counter:has(img.img-befor-vertical-line) > .d-flex.justify-content-start,
.home-card-counter:has(img.img-befor-vertical-line) > div:first-child {
    background: var(--squ-gold-t10);
}

/* RTL — flip the hover rail to the right edge */
[dir="rtl"] .home-card-counter::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

/* ----- Semantic icon-tile colors for Referee stat cards ----- */
.home-counter-card.squ-stat-pending .home-counter-icon {
    background: var(--squ-gold-t10);
    color: var(--squ-accent-hover);
}

.home-counter-card.squ-stat-completed .home-counter-icon {
    background: var(--squ-green-t10);
    color: var(--squ-success);
}

.home-counter-card.squ-stat-total .home-counter-icon {
    background: var(--squ-blue-t10);
    color: var(--squ-primary);
}

/* When using these semantic variants, don't apply the alternating 2-tone
   default rhythm (which would override the semantic color) */
.home-counters-row > .home-counter-card.squ-stat-pending:nth-child(2n) .home-counter-icon,
.home-counters-row > .home-counter-card.squ-stat-completed:nth-child(2n) .home-counter-icon,
.home-counters-row > .home-counter-card.squ-stat-total:nth-child(2n) .home-counter-icon {
    background: inherit;
    color: inherit;
}

.home-counters-row > .home-counter-card.squ-stat-pending:nth-child(2n) .home-counter-icon {
    background: var(--squ-gold-t10);
    color: var(--squ-accent-hover);
}

.home-counters-row > .home-counter-card.squ-stat-completed:nth-child(2n) .home-counter-icon {
    background: var(--squ-green-t10);
    color: var(--squ-success);
}

.home-counters-row > .home-counter-card.squ-stat-total:nth-child(2n) .home-counter-icon {
    background: var(--squ-blue-t10);
    color: var(--squ-primary);
}

/* Force the label color inside .home-card-counter to brand ink even when
   the legacy markup tags it with .text-success / .text-warning (which used
   to be teal/cyan/gold from Metronic). Keeps the counter card calm. */
.home-card-counter .count-namee.text-success,
.home-card-counter .count-namee.text-warning,
.home-card-counter .count-namee.text-info,
.home-card-counter .count-name.text-success,
.home-card-counter .count-name.text-warning,
.home-card-counter .count-name.text-info {
    color: var(--squ-ink-2) !important;
}

/* ResearchLoad/Edit — total points bar scrolls with the page and sticks below
   the layout header. Parent overflow must stay visible for sticky to work. */
#ResearchLoadApp #nav-home .tab-content,
#ResearchLoadApp #nav-home .accordion,
#ResearchLoadApp #nav-home .accordion .card,
#ResearchLoadApp #nav-home .card.card-transparent,
#collapse7,
#collapse7 > .card-body.research-load-evaluation-body,
#collapse7 .card.mb-0,
#collapse7 .card.mb-0 > .card-body {
    overflow: visible !important;
}

.total-points-bar {
    position: -webkit-sticky;
    position: sticky;
    top: var(--squ-header-h, 54px);
    z-index: 95;
    background: var(--squ-surface);
    margin-bottom: var(--squ-space-3, 12px);
}

.total-points-bar .table {
    margin-bottom: 0;
}

.total-points-bar .TotalRowAvg {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
}

/* Hours chip used by ResearchLoad/Edit "Evaluation Components" cards.
   Sits as a normal flex item at the inline-end of the card — opposite the
   icon, with the %/title column in the middle pushing it to the edge.
   Pill shape so it reads as a chip, not as a stretched corner bar. */
.home-card-counter .corner-square-badge,
.corner-square-badge {
    position: static;
    width: auto !important;
    height: auto;
    min-height: 26px;
    padding: 4px 10px !important;
    background-color: var(--squ-primary) !important;
    color: #ffffff !important;
    font-size: var(--squ-fs-sm);
    font-weight: var(--squ-fw-semibold);
    border-radius: 999px;
    white-space: nowrap;
    /* Stay sized to content as a single-row inline chip — defensive so a
       stray flex/last-child selector can't stretch or stack it. */
    display: inline-flex !important;
    flex-direction: row !important;
    flex: 0 0 auto !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    line-height: 1.1;
    align-self: center;
    box-shadow: none;
    z-index: auto;
}

.corner-square-badge .small-label,
.corner-square-badge span {
    margin-inline-start: 4px;
    color: #ffffff !important;
    font-size: var(--squ-fs-xs);
    font-weight: var(--squ-fw-medium);
}

.corner-square-badge i {
    color: inherit !important;
    font-size: 11px;
    margin-inline-end: 3px;
}

/* Allow the counter card to host the corner badge cleanly — keep overflow
   visible (was already set above) and ensure the badge is visible above. */
.home-card-counter.position-relative,
.home-card-counter {
    overflow: visible;
}

/* ----- Search form (legacy ".SearchForm" — circular old layout) ----- */
/* Reset the wonky absolute positioning and make a normal branded search box */
.SearchForm,
form.SearchForm {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 280px !important;
    max-width: 100%;
    height: var(--squ-input-h) !important;
    background: var(--squ-surface) !important;
    border: 1px solid var(--squ-line) !important;
    border-radius: var(--squ-radius) !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
}

.SearchForm:hover,
.SearchForm:focus-within {
    width: 280px !important;
    border-color: var(--squ-primary) !important;
    box-shadow: var(--squ-shadow-focus);
}

.SearchForm .input-search-text,
input.input-search-text {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 12px !important;
    font-family: var(--squ-font) !important;
    font-size: var(--squ-fs-sm) !important;
    color: var(--squ-ink);
    border-radius: 0 !important;
}

.SearchForm .input-search-text::placeholder {
    color: var(--squ-ink-4);
}

.SearchForm .input-search-inpex,
.SearchForm > i.fa-search,
.SearchForm i.input-search-inpex {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: var(--squ-input-h) !important;
    height: var(--squ-input-h) !important;
    line-height: var(--squ-input-h) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    text-align: center;
    background: var(--squ-primary);
    color: #ffffff !important;
    font-size: 13px !important;
    transition: background var(--squ-dur) var(--squ-ease);
    flex-shrink: 0;
}

.SearchForm:focus-within .input-search-inpex {
    background: var(--squ-primary-hover);
}

.div-all-input-search {
    margin: 0 !important;
}

.padding-input-search {
    padding: 0 !important;
    background: transparent !important;
}

/* ----- Prize Management tables ----- */
.Custom-department-table,
table.Custom-department-table {
    border-collapse: separate;
    border-spacing: 0;
    background: var(--squ-surface);
    border: 1px solid var(--squ-line);
    /*border-radius: var(--squ-radius);*/
    overflow: hidden;
    width: 100%;
    height: 47px
}

.Custom-department-table thead,
table.Custom-department-table thead {
    background: var(--squ-primary) !important;
}

.Custom-department-table thead th,
.Custom-department-table .PrizeManagement_th,
table.Custom-department-table thead th {
    background: var(--squ-primary) !important;
    color: #ffffff !important;
    font-size: var(--squ-fs-sm) !important;
    font-weight: var(--squ-fw-semibold) !important;
    padding: 10px 12px !important;
    border: none !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
    text-transform: none;
    letter-spacing: 0;
}

.Custom-department-table thead th:last-child { border-right: none !important; }

.Custom-department-table td,
.Custom-department-table .PrizeManagement_td {
    padding: 9px 12px !important;
    font-size: var(--squ-fs-sm) !important;
    color: var(--squ-ink-2) !important;
    border-bottom: 1px solid var(--squ-line-2) !important;
    vertical-align: middle !important;
}

/* Legacy classes used in the inner Prize tables */
.prizeTable_tr,
.table .prizeTable_tr {
    background-color: var(--squ-primary) !important;
}

.prizeTabletd,
.table .prizeTabletd,
.table th.prizeTabletd {
    color: #ffffff !important;
    font-weight: var(--squ-fw-semibold) !important;
    padding: 10px 12px !important;
    font-size: var(--squ-fs-sm) !important;
    background-color: var(--squ-primary) !important;
    border-right: 1px solid rgba(255,255,255,0.10) !important;
}

/* CompetetionTabletd is used in BOTH thead (on brand-blue bg) and tbody (on white bg).
   Split the rule so header text is white, body text is dark ink. */
.table thead .CompetetionTabletd,
thead .CompetetionTabletd,
.table thead th.CompetetionTabletd {
    color: #ffffff !important;
    font-weight: var(--squ-fw-semibold) !important;
    font-size: var(--squ-fs-sm) !important;
    background: var(--squ-primary) !important;
}

.table tbody .CompetetionTabletd,
tbody .CompetetionTabletd,
.table tbody td.CompetetionTabletd {
    color: var(--squ-ink-2) !important;
    font-size: var(--squ-fs-sm) !important;
}

/* ----- card-headerPrize / prizeManagementKT (legacy card-header variants) ----- */
.card-headerPrize,
.prizeManagementKT,
.card-header.card-headerPrize {
    background: var(--squ-surface) !important;
    border-bottom: 1px solid var(--squ-line) !important;
    padding: 10px 16px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 12px;
    border-radius: var(--squ-radius) var(--squ-radius) 0 0 !important;
}

/* Prize popup col / title styles already mapped — augment a touch */
.PrizeManagement_popupCol1 {
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold);
}

.PrizeManagement_popupTitles {
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold);
    font-size: var(--squ-fs-md);
}

.PrizeManagement_popupIcon {
    color: var(--squ-primary) !important;
}

/* ----- Tab strip used on the prize page (.alignment + .card-header-tabs-line) ----- */
.card-header-tabs-line .nav-tabs.alignment {
    border-bottom: 1px solid var(--squ-line);
}

/* Custom card title used in the prize page header */
.custom-card-title {
    font-size: var(--squ-fs-lg);
    font-weight: var(--squ-fw-bold);
    color: var(--squ-ink);
    letter-spacing: var(--squ-letter-tight);
}

/* Force-fix the extreme nested negative margins in the prize view by capping
   them so they don't break the brand layout (mb-n13, mb-n7, mt-n9 etc.) */
.modal-body .mb-n13 { margin-bottom: -1rem !important; }
.modal-body .mt-n9  { margin-top:    -0.5rem !important; }
.modal-body .mb-n7  { margin-bottom: -0.5rem !important; }
.modal-body .mb-n5  { margin-bottom: -0.25rem !important; }
.modal-body .mb-n60 { margin-bottom:  0 !important; }

/* The badge under the "Submitted/Approved/Rejected" tiles uses .OMR small text */
.text-success.font-size-sm.font-weight-bold {
    color: var(--squ-success) !important;
}

/* ==========================================================================
   RESEARCHER PROFILE EDIT  — hero / avatar / change-picture / stats
   Used on /ResearcherProfiles/Edit/{id} and similar profile views.
   ========================================================================== */

/* Hero row — avatar on the start, info column on the end, generous padding */
.squ-profile-hero {
    align-items: flex-start;
    padding: 6px 0 4px;
}

/* Avatar wrapper — centered column, gives the avatar room to breathe */
.squ-profile-avatar-wrap {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 140px;
}

/* Outer avatar = NOT overflow:hidden, so the floating camera button can
   extend past the circle edge without being clipped. The image inside is
   clipped to a circle by its own border-radius. */
.squ-profile-avatar {
    position: relative;
    width: 120px !important;
    height: 120px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* The actual circular face — image / initial — clipped here */
.squ-profile-avatar img,
.squ-profile-avatar .symbol-label {
    width: 120px !important;
    height: 120px !important;
    border-radius: 50% !important;
    object-fit: cover;
    color: var(--squ-primary);
    background: var(--squ-blue-t10) !important;
    border: 2px solid var(--squ-line);
    box-shadow: var(--squ-shadow-sm);
    font-size: 44px !important;
    font-weight: var(--squ-fw-bold) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
}

.squ-profile-avatar:hover img,
.squ-profile-avatar:hover .symbol-label {
    border-color: var(--squ-primary);
    box-shadow: var(--squ-shadow-md);
}

/* Floating camera button — bigger, sits OUTSIDE the avatar edge so it
   doesn't get clipped by the circle. White ring for separation. */
.squ-profile-avatar-edit {
    position: absolute;
    bottom: -4px;
    inset-inline-end: -4px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--squ-primary);
    color: #ffffff;
    border: 3px solid #ffffff;
    box-shadow: var(--squ-shadow-md), 0 0 0 1px var(--squ-line);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    padding: 0;
    transition: background var(--squ-dur) var(--squ-ease),
                transform var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
}

.squ-profile-avatar-edit:hover {
    background: var(--squ-primary-hover);
    transform: scale(1.05);
    color: #ffffff;
    box-shadow: var(--squ-shadow-lg), 0 0 0 1px var(--squ-line);
}

.squ-profile-avatar-edit i {
    font-size: 17px;
    color: inherit !important;
    line-height: 1;
}

/* Stats tiles row — homepage-card rhythm, compact */
.squ-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 12px;
}

@media (max-width: 640px) {
    .squ-profile-stats { grid-template-columns: 1fr; }
}

.squ-profile-stat {
    background: var(--squ-surface);
    border: 1px solid var(--squ-line);
    border-radius: var(--squ-radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    box-shadow: var(--squ-shadow-xs);
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease);
    position: relative;
    overflow: hidden;
}

.squ-profile-stat:hover {
    border-color: var(--squ-blue-t30);
    box-shadow: var(--squ-shadow-sm);
}

.squ-profile-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--squ-radius-sm);
    background: var(--squ-blue-t10);
    color: var(--squ-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.squ-profile-stat-icon i { font-size: 16px; color: inherit !important; }

/* Alternate every 2nd stat tile in soft gold for 2-tone rhythm */
.squ-profile-stats > .squ-profile-stat:nth-child(2n) .squ-profile-stat-icon {
    background: var(--squ-gold-t10);
    color: var(--squ-accent-hover);
}

.squ-profile-stat-info {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.squ-profile-stat-value {
    font-size: 22px;
    font-weight: var(--squ-fw-bold);
    color: var(--squ-ink);
    letter-spacing: -0.01em;
}

.squ-profile-stat-label {
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-3);
    font-weight: var(--squ-fw-medium);
    margin-top: 2px;
}

/* (Legacy duplicate nav-tabs rules removed — all profile-tab styling now
   lives in a single block above on .squ-profile-tabs.) */

/* (Duplicate Import Papers rules removed — the single authoritative block
   lives earlier in the file under squ-profile-import-papers.) */

/* Tab row layout: tabs grow on the start, Import Papers pinned to the end */
.squ-profile-tabs-header .card-toolbar {
    align-items: center !important;
}

/* (orphan stub removed) */

/* ==========================================================================
   COMPETITION LIST — card style
   #kt_table_2 in SQUPublicationAndPatentPrizeViewAll and
   MostActiveResearchGroupAwardViewAll renders one competition per row.
   Style each row to look like a homepage quick-link card instead of a
   classic table row, while keeping the DataTable plumbing intact.
   ========================================================================== */
#kt_table_2 {
    border: none !important;
    background: transparent !important;
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
    width: 100%;
}

#kt_table_2 thead {
    /* Each row is its own card now — header label not needed */
    /*display: none !important;*/
}

.my-toast {
    width: 500px !important;
    min-height: 60px !important;
    font-size: 16px !important;
    color: red !important;
    height: 10vh;
    top: -80% !important;
}
#kt_table_2 tbody tr {
    background: var(--squ-surface) !important;
    border: 1px solid var(--squ-line);
    border-radius: var(--squ-radius);
    box-shadow: var(--squ-shadow-xs);
    transition: border-color var(--squ-dur) var(--squ-ease),
                box-shadow var(--squ-dur) var(--squ-ease),
                transform var(--squ-dur) var(--squ-ease);
    position: relative;
}

#kt_table_2 tbody tr:hover {
    border-color: var(--squ-blue-t30);
    box-shadow: var(--squ-shadow-sm);
    transform: translateY(-1px);
}

#kt_table_2 tbody tr td {
    background: var(--squ-surface) !important;
    border: none !important;
    padding: 18px 22px !important;
    /*font-size: var(--squ-fs-md) !important;*/
    /*color: var(--squ-ink) !important;*/
    vertical-align: middle !important;
}

#kt_table_2 tbody tr td:first-child {
    border-top-left-radius: var(--squ-radius);
    border-bottom-left-radius: var(--squ-radius);
    padding-inline-start: 22px !important;
    position: relative;
}

#kt_table_2 tbody tr td:last-child {
    border-top-right-radius: var(--squ-radius);
    border-bottom-right-radius: var(--squ-radius);
    /*text-align: end !important;*/
}

#kt_table_2 tbody tr td.competition-view-details {
    text-align: end !important;
    white-space: nowrap;
}

[dir="rtl"] #kt_table_2 tbody tr td:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--squ-radius);
    border-bottom-right-radius: var(--squ-radius);
}

[dir="rtl"] #kt_table_2 tbody tr td:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: var(--squ-radius);
    border-bottom-left-radius: var(--squ-radius);
}

/* Competition name styling — the prominent card title */
#kt_table_2 tbody tr td.competitionRow,
#kt_table_2 tbody tr td.competitionRow.details-control {
    font-size: var(--squ-fs-md) !important;
    font-weight: var(--squ-fw-semibold) !important;
    color: var(--squ-primary) !important;
    cursor: pointer;
    letter-spacing: var(--squ-letter-tight);
}

#kt_table_2 tbody tr:hover td.competitionRow {
    color: var(--squ-primary-hover) !important;
}

/* DataTables responsive details-control arrow — make it a brand-blue chevron */
#kt_table_2 tbody tr td.details-control {
    cursor: pointer;
    position: relative;
}

#kt_table_2 tbody tr td.details-control::before {
    content: "\f105";                       /* fa-chevron-right */
    font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro", "FontAwesome", sans-serif;
    font-weight: 900;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: var(--squ-radius-sm);
    background: var(--squ-blue-t10);
    color: var(--squ-primary);
    margin-inline-end: 12px;
    transition: transform var(--squ-dur) var(--squ-ease),
                background var(--squ-dur) var(--squ-ease);
    vertical-align: middle;
}

[dir="rtl"] #kt_table_2 tbody tr td.details-control::before {
    content: "\f104";                       /* fa-chevron-left for RTL */
}

#kt_table_2 tbody tr.shown td.details-control::before {
    transform: rotate(90deg);
    background: var(--squ-primary);
    color: #ffffff;
}

#kt_table_2 tbody tr:hover td.details-control::before {
    background: var(--squ-primary);
    color: #ffffff;
}

/* When a competition row is expanded, the next sibling holds the child
   sub-table. Style it as an extension of the card, not a separate table. */
#kt_table_2 tbody tr.child td,
#kt_table_2 tbody tr + tr td.child {
    background: var(--squ-surface-2) !important;
    padding: 12px 18px !important;
}

#kt_table_2 tbody .prizeCompetitionRow {
    color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold) !important;
    background: var(--squ-blue-t10) !important;
    font-size: var(--squ-fs-sm) !important;
    padding: 8px 10px !important;
    border: none !important;
    border-bottom: 1px solid var(--squ-blue-t30) !important;
}

#kt_table_2 tbody tr.child .table {
    background: var(--squ-surface);
    border: 1px solid var(--squ-line);
    border-radius: var(--squ-radius);
    overflow: hidden;
    margin: 8px 0 4px 0;
}

/* ----- Any title/text on a primary-blue surface must be white -----
   Catches collapse / accordion headers, hero strips, custom .bg-primary,
   and the same patterns when the bg is set inline. */
.bg-primary,
.bg-primary *,
.dark-blue-bg,
.dark-blue-bg *,
[style*="background:#1f4ac2" i],
[style*="background: #1f4ac2" i],
[style*="background-color:#1f4ac2" i],
[style*="background-color: #1f4ac2" i],
[style*="background:#1b1e4b" i],
[style*="background: #1b1e4b" i],
[style*="background-color:#1b1e4b" i],
[style*="background-color: #1b1e4b" i] {
    color: #ffffff !important;
}

/* Make sure the inline-icon and link text inside those surfaces also goes white */
.bg-primary i,
.bg-primary a,
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5, .bg-primary h6,
.bg-primary span,
.dark-blue-bg i,
.dark-blue-bg a,
.dark-blue-bg h1, .dark-blue-bg h2, .dark-blue-bg h3, .dark-blue-bg h4, .dark-blue-bg h5, .dark-blue-bg h6,
.dark-blue-bg span {
    color: #ffffff !important;
}


/* ==========================================================================
   25.  TABLE-ROW SHORTCUT DROPDOWN  (used in Application list etc.)
   3-dot button per row → branded dropdown with Pre-Award shortcuts.
   ========================================================================== */
.squ-shortcut-col,
.table thead .squ-shortcut-col {
    white-space: nowrap !important;
    width: 1%;        /* shrink to content width */
}

.squ-shortcut-dd {
    display: flex;
    align-items: center;
    justify-content: center;   /* centers the 3-dot button inside the cell */
}

/* Also center the cell content itself, in case DataTables wraps differently */
td:has(> .squ-shortcut-dd),
.table tbody td:has(.squ-shortcut-dd) {
    text-align: center;
    vertical-align: middle;
}

.squ-shortcut-btn {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 !important;
    background: var(--squ-blue-t10) !important;
    border: 1px solid var(--squ-blue-t30) !important;
    color: var(--squ-primary) !important;
    border-radius: var(--squ-radius-sm) !important;
    transition: background var(--squ-dur) var(--squ-ease),
                border-color var(--squ-dur) var(--squ-ease),
                color var(--squ-dur) var(--squ-ease);
}

.squ-shortcut-btn:hover,
.squ-shortcut-btn:focus,
.squ-shortcut-btn[aria-expanded="true"] {
    background: var(--squ-primary) !important;
    border-color: var(--squ-primary) !important;
    color: #ffffff !important;
}

.squ-shortcut-btn i {
    font-size: 13px;
    color: inherit !important;
    line-height: 1;
}

/* The menu */
.squ-shortcut-menu {
    min-width: 260px;
    padding: 0;
    border-radius: var(--squ-radius) !important;
    border: 1px solid var(--squ-line);
    box-shadow: var(--squ-shadow-md) !important;
    overflow: hidden;
}

.squ-shortcut-header {
    display: block;
    background: var(--squ-blue-t10);
    color: var(--squ-primary);
    font-weight: var(--squ-fw-bold);
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 9px 14px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--squ-blue-t30);
    line-height: 1.2;
    pointer-events: none;
}

.squ-shortcut-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 9px 14px !important;
    font-size: var(--squ-fs-sm);
    color: var(--squ-ink-2) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--squ-line-2);
    transition: background var(--squ-dur) var(--squ-ease),
                color var(--squ-dur) var(--squ-ease),
                padding-left var(--squ-dur) var(--squ-ease);
}

.squ-shortcut-item:last-child {
    border-bottom: none;
}

.squ-shortcut-item i {
    color: var(--squ-primary);
    font-size: 14px;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: transform var(--squ-dur) var(--squ-ease);
}

.squ-shortcut-item span {
    flex: 1;
    line-height: 1.3;
}

.squ-shortcut-item:hover {
    background: var(--squ-blue-t10) !important;
    color: var(--squ-primary) !important;
    padding-left: 18px !important;
}

.squ-shortcut-item:hover i {
    transform: translateX(2px);
}

[dir="rtl"] .squ-shortcut-item:hover {
    padding-left: 14px !important;
    padding-right: 18px !important;
}

[dir="rtl"] .squ-shortcut-item:hover i {
    transform: translateX(-2px);
}


/* Table heads — force white text even when the view hardcodes
   style="color:black" on the <tr> or <th>. Brand thead is always blue/white. */
table thead tr[style*="color:black" i],
table thead tr[style*="color: black" i],
table thead th[style*="color:black" i],
table thead th[style*="color: black" i],
.table thead tr[style*="color:black" i] th,
.table thead th[style*="color:black" i] {
    color: #ffffff !important;
}

table thead tr[style*="background-color:white" i],
table thead tr[style*="background-color: white" i],
table thead tr[style*="background:white" i],
table thead tr[style*="background: white" i] {
    background-color: var(--squ-primary) !important;
}

/* SVG fill — illustrations drawn in legacy colors */
[style*="fill:#1b1e4b" i],
[style*="fill: #1b1e4b" i] {
    fill: var(--squ-primary) !important;
}

[style*="fill:#c7800b" i],
[style*="fill: #c7800b" i],
[style*="fill:#cb994c" i],
[style*="fill: #cb994c" i],
[style*="fill:#e8a221" i],
[style*="fill: #e8a221" i] {
    fill: var(--squ-accent) !important;
}


/* ==========================================================================
   18.  BRAND UTILITY CLASSES
   Apply brand colors anywhere without inline hex. Naming is consistent:
     .squ-bg-<color>       — solid background
     .squ-bg-<color>-t10   — tint background (10/30/50/70/90)
     .squ-text-<color>     — text color
     .squ-text-<color>-t90 — tinted text color
     .squ-border-<color>   — 1px solid border
     .squ-fill-<color>     — SVG fill
   The 10 brand colors:
     blue, gold, blue-light, purple, black,
     red, green, sand, building, gold-2
   ========================================================================== */

/* ------- BACKGROUNDS ------- */
.squ-bg-blue        { background-color: var(--squ-blue) !important; color: #fff; }
.squ-bg-gold        { background-color: var(--squ-gold) !important; color: #fff; }
.squ-bg-blue-light  { background-color: var(--squ-blue-light) !important; color: #fff; }
.squ-bg-purple      { background-color: var(--squ-purple) !important; color: #fff; }
.squ-bg-black       { background-color: var(--squ-black) !important; color: #fff; }
.squ-bg-red         { background-color: var(--squ-red) !important; color: #fff; }
.squ-bg-green       { background-color: var(--squ-green) !important; color: #fff; }
.squ-bg-sand        { background-color: var(--squ-sand) !important; color: var(--squ-ink); }
.squ-bg-building    { background-color: var(--squ-building) !important; color: #fff; }
.squ-bg-gold-2      { background-color: var(--squ-gold-2) !important; color: #fff; }

/* Tinted backgrounds — softer, calm */
.squ-bg-blue-t10        { background-color: var(--squ-blue-t10) !important; color: var(--squ-blue); }
.squ-bg-blue-t30        { background-color: var(--squ-blue-t30) !important; color: var(--squ-blue); }
.squ-bg-blue-t50        { background-color: var(--squ-blue-t50) !important; color: #fff; }
.squ-bg-blue-t70        { background-color: var(--squ-blue-t70) !important; color: #fff; }
.squ-bg-blue-t90        { background-color: var(--squ-blue-t90) !important; color: #fff; }

.squ-bg-gold-t10        { background-color: var(--squ-gold-t10) !important; color: var(--squ-gold-800); }
.squ-bg-gold-t30        { background-color: var(--squ-gold-t30) !important; color: var(--squ-gold-800); }
.squ-bg-gold-t50        { background-color: var(--squ-gold-t50) !important; color: var(--squ-ink); }
.squ-bg-gold-t70        { background-color: var(--squ-gold-t70) !important; color: var(--squ-ink); }
.squ-bg-gold-t90        { background-color: var(--squ-gold-t90) !important; color: #fff; }

.squ-bg-blue-light-t10  { background-color: var(--squ-blue-light-t10) !important; color: var(--squ-blue-light); }
.squ-bg-blue-light-t30  { background-color: var(--squ-blue-light-t30) !important; color: var(--squ-blue-light); }
.squ-bg-blue-light-t50  { background-color: var(--squ-blue-light-t50) !important; color: #fff; }
.squ-bg-blue-light-t70  { background-color: var(--squ-blue-light-t70) !important; color: #fff; }
.squ-bg-blue-light-t90  { background-color: var(--squ-blue-light-t90) !important; color: #fff; }

.squ-bg-purple-t10      { background-color: var(--squ-purple-t10) !important; color: var(--squ-purple); }
.squ-bg-purple-t30      { background-color: var(--squ-purple-t30) !important; color: var(--squ-purple); }
.squ-bg-purple-t50      { background-color: var(--squ-purple-t50) !important; color: #fff; }
.squ-bg-purple-t70      { background-color: var(--squ-purple-t70) !important; color: #fff; }
.squ-bg-purple-t90      { background-color: var(--squ-purple-t90) !important; color: #fff; }

.squ-bg-red-t10         { background-color: var(--squ-red-t10) !important; color: var(--squ-red); }
.squ-bg-red-t30         { background-color: var(--squ-red-t30) !important; color: var(--squ-red); }
.squ-bg-red-t50         { background-color: var(--squ-red-t50) !important; color: #fff; }
.squ-bg-red-t70         { background-color: var(--squ-red-t70) !important; color: #fff; }
.squ-bg-red-t90         { background-color: var(--squ-red-t90) !important; color: #fff; }

.squ-bg-green-t10       { background-color: var(--squ-green-t10) !important; color: var(--squ-green); }
.squ-bg-green-t30       { background-color: var(--squ-green-t30) !important; color: var(--squ-green); }
.squ-bg-green-t50       { background-color: var(--squ-green-t50) !important; color: #fff; }
.squ-bg-green-t70       { background-color: var(--squ-green-t70) !important; color: #fff; }
.squ-bg-green-t90       { background-color: var(--squ-green-t90) !important; color: #fff; }

.squ-bg-sand-t10        { background-color: var(--squ-sand-t10) !important; color: var(--squ-ink); }
.squ-bg-sand-t30        { background-color: var(--squ-sand-t30) !important; color: var(--squ-ink); }
.squ-bg-sand-t50        { background-color: var(--squ-sand-t50) !important; color: var(--squ-ink); }
.squ-bg-sand-t70        { background-color: var(--squ-sand-t70) !important; color: var(--squ-ink); }
.squ-bg-sand-t90        { background-color: var(--squ-sand-t90) !important; color: var(--squ-ink); }

.squ-bg-building-t10    { background-color: var(--squ-building-t10) !important; color: var(--squ-ink); }
.squ-bg-building-t30    { background-color: var(--squ-building-t30) !important; color: var(--squ-ink); }
.squ-bg-building-t50    { background-color: var(--squ-building-t50) !important; color: var(--squ-ink); }
.squ-bg-building-t70    { background-color: var(--squ-building-t70) !important; color: #fff; }
.squ-bg-building-t90    { background-color: var(--squ-building-t90) !important; color: #fff; }

.squ-bg-gold-2-t10      { background-color: var(--squ-gold-2-t10) !important; color: var(--squ-gold-800); }
.squ-bg-gold-2-t30      { background-color: var(--squ-gold-2-t30) !important; color: var(--squ-gold-800); }
.squ-bg-gold-2-t50      { background-color: var(--squ-gold-2-t50) !important; color: var(--squ-ink); }
.squ-bg-gold-2-t70      { background-color: var(--squ-gold-2-t70) !important; color: var(--squ-ink); }
.squ-bg-gold-2-t90      { background-color: var(--squ-gold-2-t90) !important; color: #fff; }

/* ------- TEXT COLORS ------- */
.squ-text-blue        { color: var(--squ-blue) !important; }
.squ-text-gold        { color: var(--squ-gold) !important; }
.squ-text-blue-light  { color: var(--squ-blue-light) !important; }
.squ-text-purple      { color: var(--squ-purple) !important; }
.squ-text-black       { color: var(--squ-black) !important; }
.squ-text-red         { color: var(--squ-red) !important; }
.squ-text-green       { color: var(--squ-green) !important; }
.squ-text-sand        { color: var(--squ-sand) !important; }
.squ-text-building    { color: var(--squ-building) !important; }
.squ-text-gold-2      { color: var(--squ-gold-2) !important; }
.squ-text-ink         { color: var(--squ-ink) !important; }
.squ-text-ink-2       { color: var(--squ-ink-2) !important; }
.squ-text-ink-3       { color: var(--squ-ink-3) !important; }

/* ------- BORDERS ------- */
.squ-border             { border: 1px solid var(--squ-line) !important; }
.squ-border-blue        { border: 1px solid var(--squ-blue) !important; }
.squ-border-gold        { border: 1px solid var(--squ-gold) !important; }
.squ-border-blue-light  { border: 1px solid var(--squ-blue-light) !important; }
.squ-border-purple      { border: 1px solid var(--squ-purple) !important; }
.squ-border-red         { border: 1px solid var(--squ-red) !important; }
.squ-border-green       { border: 1px solid var(--squ-green) !important; }

.squ-border-start-blue   { border-inline-start: 3px solid var(--squ-blue) !important; }
.squ-border-start-gold   { border-inline-start: 3px solid var(--squ-gold) !important; }
.squ-border-start-purple { border-inline-start: 3px solid var(--squ-purple) !important; }
.squ-border-start-red    { border-inline-start: 3px solid var(--squ-red) !important; }
.squ-border-start-green  { border-inline-start: 3px solid var(--squ-green) !important; }

/* ------- SVG FILL ------- */
.squ-fill-blue          { fill: var(--squ-blue) !important; }
.squ-fill-gold          { fill: var(--squ-gold) !important; }
.squ-fill-blue-light    { fill: var(--squ-blue-light) !important; }
.squ-fill-purple        { fill: var(--squ-purple) !important; }

/* ------- BRAND "PATTERN" — the 45° square motif from the brand sheet ------- */
/* Subtle micro-pattern that can wash any surface in brand blue diamonds.    */
/* Use sparingly: hero / empty-state / login panel only.                     */
.squ-pattern-diamond {
    background-image:
        linear-gradient(45deg, var(--squ-blue) 25%, transparent 25%),
        linear-gradient(-45deg, var(--squ-blue) 25%, transparent 25%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px;
    background-color: transparent;
    opacity: 0.06;
}

/* Solid surface with the diamond pattern at very low opacity baked in */
.squ-pattern-surface {
    position: relative;
    isolation: isolate;
}

.squ-pattern-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(45deg, var(--squ-blue) 25%, transparent 25%),
        linear-gradient(-45deg, var(--squ-blue) 25%, transparent 25%);
    background-size: 14px 14px;
    background-position: 0 0, 0 7px;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}


/* ==========================================================================
   19.  TIMELINE COMPONENT  — "Current Status" header
   Used on every workflow-driven page (Application/Edit, Approval, etc.).
   ========================================================================== */
.squ-timeline-header,
.timeline-collapsible-header {
    background: var(--squ-blue-t10) !important;
    border: 1px solid var(--squ-blue-t30);
    border-inline-start: 3px solid var(--squ-primary) !important;
    border-radius: var(--squ-radius);
    cursor: pointer;
    transition: background var(--squ-dur) var(--squ-ease);
}

.squ-timeline-header:hover,
.timeline-collapsible-header:hover {
    background: var(--squ-blue-t30) !important;
}

.squ-timeline-status {
    font-size: 13.5px;
    font-weight: var(--squ-fw-semibold);
    color: var(--squ-primary);
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: var(--squ-letter-tight);
}

.squ-timeline-status-icon,
.squ-timeline-chevron {
    color: var(--squ-primary) !important;
    font-size: 14px;
}

.squ-timeline-stage {
    color: var(--squ-ink-2);
    font-weight: var(--squ-fw-medium);
    margin-inline-start: 4px;
}


/* ==========================================================================
   20.  APPLICATION-TYPE RIBBON  ("External Grants (EG)" tag etc.)
   The ribbon-target overlay uses the legacy gold/orange treatment. Map it
   to brand gold accent so it reads as a deliberate brand element.
   ========================================================================== */
.ribbon.ribbon-Custom .ribbon-target,
.ribbon-Custom .ribbon-target.flipribbon {
    background-color: var(--squ-accent) !important;
    color: #ffffff !important;
    font-weight: var(--squ-fw-semibold) !important;
    font-size: var(--squ-fs-sm);
    border-radius: 0 var(--squ-radius-sm) var(--squ-radius-sm) 0;
    padding-inline: 14px;
    box-shadow: var(--squ-shadow-xs);
    letter-spacing: var(--squ-letter-tight);
}

.ribbon-Custom .ribbon-target .ribbon-inner,
.ribbon-Custom .ribbon-target .ribbon-inner.flipinner {
    border-top-color: var(--squ-accent-hover) !important;
    border-bottom-color: var(--squ-accent-hover) !important;
}

/* The .btn-submit class on the ribbon-inner is just a color carrier — strip
   it of button-y styling so the ribbon reads as a label, not a button. */
.ribbon-Custom .ribbon-inner.btn-submit {
    background: transparent !important;
    border: none !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   21.  WIZARD / NAV-TABS — when used as primary "step" indicators
   The Application/Edit page (and similar) uses .nav-tabs as a wizard stage
   indicator. Make active stage = brand blue fill, inactive = subtle.
   ========================================================================== */
.nav.nav-tabs.justify-content-end .nav-link,
.nav.nav-tabs.justify-content-start .nav-link {
    color: var(--squ-ink-3) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-bottom: none !important;
    padding: 10px 18px !important;
    border-radius: var(--squ-radius) var(--squ-radius) 0 0 !important;
    font-weight: var(--squ-fw-medium) !important;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color var(--squ-dur) var(--squ-ease),
                background var(--squ-dur) var(--squ-ease);
}

.nav.nav-tabs.justify-content-end .nav-link:hover,
.nav.nav-tabs.justify-content-start .nav-link:hover {
    color: var(--squ-primary) !important;
    background: var(--squ-blue-t10) !important;
    border-color: transparent !important;
    border-bottom: none !important;
}

.nav.nav-tabs.justify-content-end .nav-link.active,
.nav.nav-tabs.justify-content-start .nav-link.active {
    color: #ffffff !important;
    background: var(--squ-primary) !important;
    border-color: var(--squ-primary) !important;
    border-bottom-color: var(--squ-primary) !important;
    font-weight: var(--squ-fw-semibold) !important;
    position: relative;
}

/* Inner spans inherit the active link's white text. The Metronic bundle sets
   an explicit dark color on .nav-text / .nav-icon i that wins by specificity,
   so force them white on the active wizard tab — otherwise the title is
   unreadable on the blue background. */
.nav.nav-tabs.justify-content-end .nav-link.active .nav-text,
.nav.nav-tabs.justify-content-start .nav-link.active .nav-text,
.nav.nav-tabs.justify-content-end .nav-link.active .nav-icon i,
.nav.nav-tabs.justify-content-start .nav-link.active .nav-icon i,
.nav.nav-tabs.justify-content-end .nav-link.active > i,
.nav.nav-tabs.justify-content-start .nav-link.active > i,
.nav.nav-tabs.justify-content-end .nav-link.active > span,
.nav.nav-tabs.justify-content-start .nav-link.active > span {
    color: #ffffff !important;
}

/* A 2px gold accent under the active wizard tab to echo the brand sheet */
.nav.nav-tabs.justify-content-end .nav-link.active::after,
.nav.nav-tabs.justify-content-start .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--squ-accent);
    border-radius: 0 0 var(--squ-radius-sm) var(--squ-radius-sm);
}


.nav.nav-tabs:not(.squ-profile-tabs):not(.justify-content-end):not(.justify-content-start) .nav-link .nav-icon i,
.nav.nav-tabs:not(.squ-profile-tabs):not(.justify-content-end):not(.justify-content-start) .nav-link .nav-text {
    color: inherit !important;
}


.nav.nav-tabs:not(.squ-profile-tabs):not(.justify-content-end):not(.justify-content-start) .nav-link.active .nav-icon i,
.nav.nav-tabs:not(.squ-profile-tabs):not(.justify-content-end):not(.justify-content-start) .nav-link.active .nav-text {
    color: var(--squ-primary) !important;
}


/* ==========================================================================
   22.  CARD-HEADER as section title (used on Edit pages)
   ========================================================================== */
.card.card-custom > .card-header.header-inline-elements {
    border-bottom: 1px solid var(--squ-line);
    background: var(--squ-surface);
}

.card.card-custom > .card-header .card-title {
    color: var(--squ-ink);
    font-size: var(--squ-fs-md);
    font-weight: var(--squ-fw-semibold);
    letter-spacing: var(--squ-letter-tight);
}

/* "Submission" / form section header style */
.app-edit-page .form-group > label,
.app-edit-page .form-group > requiredlabel,
.app-edit-page .form-group > RequiredLabel,
.form-group > label {
    color: var(--squ-ink-2);
    font-weight: var(--squ-fw-medium);
    font-size: var(--squ-fs-sm);
}


/* ==========================================================================
   23.  SECTION TITLES — generic .sp-section-title across views
   ========================================================================== */
.sp-section-title {
    font-size: var(--squ-fs-base) !important;
    font-weight: var(--squ-fw-semibold) !important;
    color: var(--squ-ink) !important;
    padding: 10px 16px;
    background: var(--squ-blue-t10);
    border-radius: var(--squ-radius);
    margin-bottom: 12px;
    border-inline-start: 3px solid var(--squ-accent);
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: var(--squ-letter-tight);
}

.sp-section-title i {
    color: var(--squ-primary);
    font-size: 14px;
}


/* ==========================================================================
   24.  FIELDSET / FORM-SECTION ("Submission" wrapper)
   The Edit pages wrap field groups in a fieldset/box with a small title
   ("Submission", "Research Team Members" …). Make the box subtle, the
   title brand-blue.
   ========================================================================== */
fieldset.form-section,
.form-section {
    border: 1px solid var(--squ-line);
    border-radius: var(--squ-radius);
    padding: 18px 20px;
    margin-bottom: 18px;
    background: var(--squ-surface);
}

fieldset.form-section > legend,
.form-section > legend,
.form-section-title {
    font-size: var(--squ-fs-md);
    font-weight: var(--squ-fw-semibold);
    color: var(--squ-primary);
    padding: 0 8px;
    margin: 0;
    width: auto;
    letter-spacing: var(--squ-letter-tight);
    border-bottom: none;
}