/*
 * Frontoffice brand theme.
 * This file is intentionally loaded after each page stylesheet so legacy
 * green controls consistently use the blue found in the Higoltec logo.
 */
.frontoffice-shell {
    --frontoffice-blue: #38bdf8;
    --frontoffice-blue-dark: #0284c7;
    --frontoffice-blue-hover: #0369a1;
    --frontoffice-blue-soft: #eff8ff;
    --brand-blue: var(--frontoffice-blue);
    --brand-blue-dark: var(--frontoffice-blue-dark);
    --brand-blue-soft: var(--frontoffice-blue-soft);
    --main-color: var(--frontoffice-blue-dark);
    --secondary-green: var(--frontoffice-blue);
    --light-green: var(--frontoffice-blue-soft);
}

/* Use a clearly blue spectrum in the customer-facing headers. */
.frontoffice-shell .app-topbar__surface,
.frontoffice-shell .higoltec-navbar > .container,
.frontoffice-shell .container-bar {
    background: linear-gradient(115deg, #075985 0%, #0284c7 55%, #38bdf8 100%) !important;
}

.frontoffice-shell .app-brand-word,
.frontoffice-shell .app-nav .caret,
.frontoffice-shell .higoltec-navbar .navbar-nav > li > a .caret {
    color: #bae6fd !important;
}

.frontoffice-shell .app-avatar {
    color: #075985 !important;
    background: #e0f2fe !important;
}

.frontoffice-shell .btn-primary,
.frontoffice-shell .btn-success,
.frontoffice-shell .btn-add,
.frontoffice-shell .btn-edit,
.frontoffice-shell .btn-del,
.frontoffice-shell .btn-history,
.frontoffice-shell .btn-insert,
.frontoffice-shell .btn-validar,
.frontoffice-shell .btn-Val,
.frontoffice-shell .btn-oilVal,
.frontoffice-shell .btn-oilRecord,
.frontoffice-shell .btn-oilRecord2,
.frontoffice-shell .btn-oilRecord3,
.frontoffice-shell .btn-oilRecord4,
.frontoffice-shell .btn-oilRecord5,
.frontoffice-shell .btn-recordHygiene,
.frontoffice-shell .btn-conforme,
.frontoffice-shell .btn-conformities,
.frontoffice-shell #btn-success {
    border-color: var(--frontoffice-blue-dark) !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--frontoffice-blue-dark), var(--frontoffice-blue)) !important;
}

.frontoffice-shell .btn-primary:hover,
.frontoffice-shell .btn-primary:focus,
.frontoffice-shell .btn-success:hover,
.frontoffice-shell .btn-success:focus,
.frontoffice-shell .btn-add:hover,
.frontoffice-shell .btn-add:focus,
.frontoffice-shell .btn-edit:hover,
.frontoffice-shell .btn-edit:focus,
.frontoffice-shell .btn-del:hover,
.frontoffice-shell .btn-del:focus,
.frontoffice-shell .btn-history:hover,
.frontoffice-shell .btn-history:focus,
.frontoffice-shell .btn-insert:hover,
.frontoffice-shell .btn-insert:focus,
.frontoffice-shell .btn-validar:hover,
.frontoffice-shell .btn-validar:focus,
.frontoffice-shell .btn-Val:hover,
.frontoffice-shell .btn-Val:focus,
.frontoffice-shell .btn-oilVal:hover,
.frontoffice-shell .btn-oilVal:focus,
.frontoffice-shell .btn-oilRecord:hover,
.frontoffice-shell .btn-oilRecord:focus,
.frontoffice-shell .btn-oilRecord2:hover,
.frontoffice-shell .btn-oilRecord2:focus,
.frontoffice-shell .btn-oilRecord3:hover,
.frontoffice-shell .btn-oilRecord3:focus,
.frontoffice-shell .btn-oilRecord4:hover,
.frontoffice-shell .btn-oilRecord4:focus,
.frontoffice-shell .btn-oilRecord5:hover,
.frontoffice-shell .btn-oilRecord5:focus,
.frontoffice-shell .btn-recordHygiene:hover,
.frontoffice-shell .btn-recordHygiene:focus,
.frontoffice-shell .btn-conforme:hover,
.frontoffice-shell .btn-conforme:focus,
.frontoffice-shell .btn-conformities:hover,
.frontoffice-shell .btn-conformities:focus,
.frontoffice-shell #btn-success:hover,
.frontoffice-shell #btn-success:focus {
    border-color: var(--frontoffice-blue-hover) !important;
    color: #fff !important;
    background: var(--frontoffice-blue-hover) !important;
}

/* Tabs, selections and pagination that still use the old green accent. */
.frontoffice-shell .tab button:hover,
.frontoffice-shell .tab button.active,
.frontoffice-shell .pagination > .active > a,
.frontoffice-shell .pagination > .active > a:hover,
.frontoffice-shell .pagination > .active > span,
.frontoffice-shell .pagination > .active > span:hover,
.frontoffice-shell ul.ks-cboxtags li input[type="checkbox"]:checked + label {
    border-color: var(--frontoffice-blue-dark) !important;
    color: #fff !important;
    background: var(--frontoffice-blue-dark) !important;
}

.frontoffice-shell ul.ks-cboxtags li label,
.frontoffice-shell ul.ks-cboxtags li input[type="checkbox"]:focus + label {
    border-color: var(--frontoffice-blue-dark) !important;
}

.frontoffice-shell .alert-success,
.frontoffice-shell .bg-success,
.frontoffice-shell .label-success,
.frontoffice-shell .progress-bar-success,
.frontoffice-shell .table > thead > tr.success > th,
.frontoffice-shell .table > thead > tr.success > td,
.frontoffice-shell .table > tbody > tr.success > th,
.frontoffice-shell .table > tbody > tr.success > td,
.frontoffice-shell .table > tfoot > tr.success > th,
.frontoffice-shell .table > tfoot > tr.success > td,
.frontoffice-shell .table > tbody > tr > td.success,
.frontoffice-shell .table > tbody > tr > th.success {
    border-color: #bae6fd !important;
    color: #075985 !important;
    background-color: var(--frontoffice-blue-soft) !important;
}

.frontoffice-shell .text-success,
.frontoffice-shell [style*="color: green"],
.frontoffice-shell [style*="color:green"] {
    color: var(--frontoffice-blue-dark) !important;
}

.frontoffice-shell [style*="background-color: green"],
.frontoffice-shell [style*="background-color:green"],
.frontoffice-shell [style*="background: green"],
.frontoffice-shell [style*="background:green"],
.frontoffice-shell .aWasPersonalized,
.frontoffice-shell .aNotPersonalized,
.frontoffice-shell .conformeBar {
    border-color: var(--frontoffice-blue-dark) !important;
    background: var(--frontoffice-blue) !important;
}

.frontoffice-shell hr.line {
    border-color: var(--frontoffice-blue-dark) !important;
}

/* Catalogue pages: replace the remaining teal/green surfaces and accents. */
.frontoffice-shell .category-hero,
.frontoffice-shell .shop-hero {
    background: linear-gradient(125deg, #075985 0%, #0284c7 62%, #7dd3fc 100%) !important;
}

.frontoffice-shell .catalog-search__input:focus-within,
.frontoffice-shell .product-search-wrap:focus-within {
    border-color: var(--frontoffice-blue) !important;
    box-shadow: 0 0 0 4px rgba(56, 189, 248, .16) !important;
}

.frontoffice-shell .catalog-search__input > span:first-child,
.frontoffice-shell .catalog-result b,
.frontoffice-shell .category-section__heading a,
.frontoffice-shell .category-card em,
.frontoffice-shell .product-footer a {
    color: var(--frontoffice-blue-dark) !important;
}

.frontoffice-shell .category-card__icon {
    background: linear-gradient(135deg, #0369a1, #38bdf8) !important;
}

.frontoffice-shell .category-card:after {
    background: rgba(56, 189, 248, .10) !important;
}

.frontoffice-shell .category-card--new {
    background: linear-gradient(145deg, #eff8ff, #fff) !important;
}

.frontoffice-shell .category-card--new .category-card__icon {
    color: #075985 !important;
    background: #bae6fd !important;
}

.frontoffice-shell .category-card--campaign {
    background: linear-gradient(145deg, #9b5622, #d99b42) !important;
}

.frontoffice-shell .category-card--campaign .category-card__icon {
    color: #9b5622 !important;
    background: #fff !important;
}

.frontoffice-shell .category-favourites img {
    filter: hue-rotate(65deg) saturate(1.35);
}