/* =============================================================================
   Phagenomics Brand Colors
   =============================================================================
   Primary Blue:  #2258ae
   Core Gray:     #8f949c
   Dusty Blue:    #7b9aa6
   Light Blue:    #c6d9e1
   ============================================================================= */

.btn-primary {
    background-color: #2258ae;
    border: none;
}

.bg-primary {
    background-color: #2258ae !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #1a4280;
}

.btn-primary:disabled {
    background-color: #7b9aa6;
    border: none;
}

.btn-outline-primary {
    background-color: #ffffff;
    border-color: #2258ae;
    color: #2258ae;
}

.btn-outline-primary:hover {
    background-color: #2258ae;
    border-color: #1a4280;
    color: #fff;
}

.card-header {
    /* background: #f8f4ff; */
    background-color: rgba(0, 0, 0, 0);
    /* justify content vertically centered */
    display: flex;
    align-items: center;
}


.card-inner {
    border-radius: 10px !important;
    box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.1);
}


.h4,
h4 {
    font-size: 1.3125rem;
    color: #2258ae !important;
    font-weight: normal;
    line-height: 2.0;
}

dd {
    font-weight: bold !important;
}

.subtext {
    font-size: 14px;
    color: #8f949c;
    /* font-family: 'Inter', regular; */
    padding-bottom: 20px;
}

.subtext-light {
    font-size: 14px;
    color: #a8adb5;
    font-family: 'Inter', regular;
    padding-bottom: 20px;
}

.nav-tabs-custom .nav-item .nav-link::after {
    content: "";
    background: #2258ae;
    height: 2px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -2px;
    -webkit-transition: all 250ms ease 0s;
    transition: all 250ms ease 0s;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.nav-tabs-custom .nav-item .nav-link.active {
    color: #2258ae;
}

.badge-phagenomics-primary {
    background-color: #c6d9e1 !important;
    color: #2258ae !important;
}

.navbar-brand-box {
    padding: 0 -0.5rem !important;
    width: 240px;
}

.btn-shiny {
    background: linear-gradient(135deg, #7b9aa6 0%, #2258ae 100%);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 0;
    outline: none;
    font-weight: bold;
    box-shadow: 0 10px 10px -1px rgba(34, 88, 174, 0.3);
    transition: all 0.3s ease-in-out;
}

.btn-shiny:hover {
    background: linear-gradient(135deg, #8fadb8 0%, #2d6bc4 100%);
    box-shadow: 0 5px 5px -2px rgba(34, 88, 174, 0.4);
    /* size is reduced to give a 'pushed' effect */
    transform: scale(0.98);
    /* size is slightly decreased */
}

:root {
    /* Brand Colors */
    --bs-primary-blue: #2258ae;
    --bs-core-gray: #8f949c;
    --bs-dusty-blue: #7b9aa6;
    --bs-light-blue: #c6d9e1;

    /* Bootstrap overrides */
    --bs-blue: #2258ae;
    --bs-indigo: #4a5568;
    --bs-purple: #7b9aa6;
    --bs-light-purple: #c6d9e1;
    --bs-light2-purple: #c6d9e1;
    --bs-superlight-purple: #e8f0f4;
    --bs-dark-purple: #1a4280;
    --bs-pink: #e83e8c;
    --bs-red: #f56e50;
    --bs-orange: #f1734f;
    --bs-yellow: #f5bd58;
    --bs-green: #2cb57e;
    --bs-teal: #050505;
    --bs-cyan: #47bce8;
    --bs-white: #fff;
    --bs-gray: #8f949c;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #eff2f7;
    --bs-gray-300: #e9ebec;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #8f949c;
    --bs-gray-600: #8f949c;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #2258ae;
    --bs-secondary: #8f949c;
    --bs-success: #2cb57e;
    --bs-info: #7b9aa6;
    --bs-warning: #f5bd58;
    --bs-danger: #f56e50;
    --bs-pink: #e83e8c;
    --bs-light: #eff2f7;
    --bs-dark: #343a40;
    --bs-primary-rgb: 34, 88, 174;
    --bs-secondary-rgb: 143, 148, 156;
    --bs-success-rgb: 44, 181, 126;
    --bs-info-rgb: 123, 154, 166;
    --bs-warning-rgb: 245, 189, 88;
    --bs-danger-rgb: 245, 110, 80;
    --bs-pink-rgb: 232, 62, 140;
    --bs-light-rgb: 239, 242, 247;
    --bs-dark-rgb: 52, 58, 64;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-body-color-rgb: 73, 80, 87;
    --bs-body-bg-rgb: 248, 248, 248;
    --bs-font-sans-serif: "Open Sans", sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 0.875rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #495057;
    --bs-body-bg: #f8f8f8;

    /* Smart Wizard colors - updated to brand */
    --sw-border-color: #e8f0f4;
    --sw-toolbar-btn-color: #ffffff;
    --sw-toolbar-btn-background-color: #2258ae;
    --sw-anchor-default-primary-color: #f8f9fa;
    --sw-anchor-default-secondary-color: #8f949c;
    --sw-anchor-active-primary-color: #2258ae;
    --sw-anchor-active-secondary-color: #ffffff;
    --sw-anchor-done-primary-color: #7b9aa6;
    --sw-anchor-done-secondary-color: #fefefe;
    --sw-anchor-disabled-primary-color: #f8f9fa;
    --sw-anchor-disabled-secondary-color: #c6d9e1;
    --sw-anchor-error-primary-color: #dc3545;
    --sw-anchor-error-secondary-color: #ffffff;
    --sw-anchor-warning-primary-color: #ffc107;
    --sw-anchor-warning-secondary-color: #ffffff;
    --sw-progress-color: #2258ae;
    --sw-progress-background-color: #c6d9e1;
    --sw-loader-color: #2258ae;
    --sw-loader-background-color: #c6d9e1;
    --sw-loader-background-wrapper-color: rgba(255, 255, 255, 0.7);
}

/* Additional brand color utilities */
.text-primary {
    color: #2258ae !important;
}

.text-muted {
    color: #8f949c !important;
}

.border-primary {
    border-color: #2258ae !important;
}

.bg-light-blue {
    background-color: #c6d9e1 !important;
}

.bg-dusty-blue {
    background-color: #7b9aa6 !important;
}

.bg-core-gray {
    background-color: #8f949c !important;
}

/* Brand gradient backgrounds */
.bg-gradient-brand {
    background: linear-gradient(135deg, #8f949c 0%, #c6d9e1 100%) !important;
}

.bg-gradient-brand-primary {
    background: linear-gradient(135deg, #2258ae 0%, #7b9aa6 100%) !important;
}

/* Link colors */
a {
    color: #2258ae;
}

a:hover {
    color: #1a4280;
}