/* Agreed branding for the recently updated pages. Loaded by route in _HeadContent.
   Important layer overrides legacy inline-view styles and later AJAX styles without
   modifying layout, behaviour, semantic status colours or icon font families. */
@layer recent-ui-brand {
    :root {
        --fontHeader: "Open Sans", sans-serif !important;
        --fontregular: 400 !important;
        --fontsemibold: 600 !important;
        --fontbold: 700 !important;
        --primarycolor: #102684 !important;
        --secondary: #FFFFFF !important;
        --secondaryAccentcolour: linear-gradient(90deg, #5156F1, #F0BFEC) !important;
        --btnPrimary: #102684 !important;
        --topBottomColorbg: #352671 !important;
    }
    .employee-workspace { --employee-accent: #102684 !important; }
    .purchases-module { --purchase-accent: #102684 !important; }
    .sales-module { --sales-accent: #102684 !important; }
    .bg-transparent .navbar-collapse.justify-content-end.collapse.show,
    .fixed-top .navbar-collapse.justify-content-end.collapse.show,
    .countCardWrap, .RM_Panel {
        background: linear-gradient(90deg, #5156F1, #F0BFEC) !important;
    }
    .employee-header-label, .employee-help, .employee-save-status { font-weight: 400 !important; }
    .employee-group-heading { font-family: "Open Sans", sans-serif !important; font-weight: 700 !important; color: #102684 !important; }
    body, .k-widget, .k-grid, .k-tabstrip, input, select, textarea, .k-input-inner, .k-input-value-text {
        font-family: "Open Sans", sans-serif !important;
        font-weight: 400 !important;
    }
    h1,h2,h3,h4,h5,h6,.employee-section-title,.userProfileName {
        font-family: "Open Sans", sans-serif !important;
        font-weight: 700 !important;
        color: #102684 !important;
    }
    /* The signed-in user's name in the side menu is an h3 on the purple menu background; the
       heading colour above made it dark blue on purple. Weight override keeps recent-ui pages
       showing the username at Bootstrap's default h3 weight so it matches Company/Dashboard. */
    #cbp-spmenu-s1 #user-identity,
    #cbp-spmenu-s1 #user-identity .UserName {
        color: #FFFFFF !important;
        font-weight: 500 !important;
    }
    label, summary, .nav-link, .k-tabstrip-items .k-link, .employee-navigation button,
    .btn:not(.fa):not([class*="fa-"]), .employee-add-record {
        font-family: "Open Sans", sans-serif !important;
        font-weight: 600 !important;
    }
    .btn-primary, .employee-save-button, .employee-dock-save, .form-bottom button[type="submit"] {
        background: #102684 !important;
        border-color: #102684 !important;
        color: #FFFFFF !important;
    }
    .btn-outline-primary { color: #102684 !important; border-color: #102684 !important; }
    .btn-outline-primary:is(:hover,:active), .page-item.active .page-link {
        background: #102684 !important; color: #FFFFFF !important; border-color: #102684 !important;
    }
    table:not(.k-calendar-table) > thead > tr > :is(th,td),
    .k-grid .k-table-thead > .k-table-row > .k-table-th,
    .card-header, .form-card-header, .accordion-header, .accordion-button,
    .NewAccordion .card-header, .employee-tax-category,
    .nav-link.active, .nav-tabs .nav-item.show > .nav-link,
    .k-tabstrip-items :is(.k-active,.k-state-active) .k-link,
    .employee-navigation button.is-active {
        background: #352671 !important;
        color: #FFFFFF !important;
        border-color: #352671 !important;
        font-family: "Open Sans", sans-serif !important;
        font-weight: 600 !important;
    }
    table:not(.k-calendar-table) > thead > tr > :is(th,td) :is(a,label,.th-inner,.k-link,.k-column-title,.k-cell-inner,.k-icon,.k-svg-icon),
    :is(.card-header,.form-card-header,.accordion-header,.accordion-button,.employee-tax-category,.nav-link.active)
        :is(h1,h2,h3,h4,h5,h6,a,.card-link,.form-card-title,.k-icon,.k-svg-icon,i),
    .employee-tax-category button,
    .k-tabstrip-items :is(.k-active,.k-state-active) :is(.k-icon,.k-svg-icon) {
        color: #FFFFFF !important;
    }
    .employee-nav-section > summary { color: #102684 !important; }
    :is(a,button,input,select,textarea,summary):not(.k-input-inner):focus-visible {
        outline: 2px solid #5156F1 !important; outline-offset: 2px;
    }
    /* Kendo inputs sit inside a wrapper with chips, clear and arrow buttons. Outlining the inner
       input drew a box around the gap between them (MultiSelect search box, list filters), so the
       ring goes on the whole control instead. */
    :is(.k-input,.k-picker,.k-searchbox):has(> .k-input-inner:focus-visible, > .k-input-values > .k-input-inner:focus-visible) {
        outline: 2px solid #5156F1 !important; outline-offset: 2px;
    }
    :is(.card-header,.accordion-header,.nav-link.active) :is(a,button):focus-visible {
        outline-color: #FFFFFF !important;
    }
}