:root {
    /* Brand */
    --business-primary: #355c7d;
    --business-primary-hover: #2d4f6c;
    --business-primary-active: #25425a;
    --business-secondary: #64748b;
    --business-secondary-hover: #526174;
    --business-secondary-active: #475569;
    --business-success: #2f855a;
    --business-success-hover: #276749;
    --business-success-active: #22543d;
    --business-danger: #b54a4a;
    --business-danger-hover: #9e3f3f;
    --business-danger-active: #873636;
    --business-warning: #c68a2b;
    --business-warning-hover: #ad7725;
    --business-warning-active: #95661f;
    --business-info: #4e738a;
    --business-info-hover: #426477;
    --business-info-active: #385565;
    /* Surfaces */
    --business-page-bg: #f5f7f8;
    --business-surface: #ffffff;
    --business-surface-alt: #f1f4f5;
    /* Text */
    --business-text: #273238;
    --business-text-muted: #6b7780;
    /* Borders */
    --business-border: #d9e0e3;
    --business-border-dark: #c4ced2;
    /* Controls */
    --business-control-height: 36px;
    --business-radius: 6px;
    /* Focus */
    --business-focus: rgba(53, 92, 125, 0.2);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn {
    border-radius: var(--business-radius);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.btn-primary {
    --bs-btn-bg: var(--business-primary);
    --bs-btn-border-color: var(--business-primary);
    --bs-btn-hover-bg: var(--business-primary-hover);
    --bs-btn-hover-border-color: var(--business-primary-hover);
    --bs-btn-active-bg: var(--business-primary-active);
    --bs-btn-active-border-color: var(--business-primary-active);
    --bs-btn-disabled-bg: var(--business-primary);
    --bs-btn-disabled-border-color: var(--business-primary);
}

.btn-secondary {
    --bs-btn-bg: var(--business-secondary);
    --bs-btn-border-color: var(--business-secondary);
    --bs-btn-hover-bg: var(--business-secondary-hover);
    --bs-btn-hover-border-color: var(--business-secondary-hover);
    --bs-btn-active-bg: var(--business-secondary-active);
    --bs-btn-active-border-color: var(--business-secondary-active);
}

.btn-success {
    --bs-btn-bg: var(--business-success);
    --bs-btn-border-color: var(--business-success);
    --bs-btn-hover-bg: var(--business-success-hover);
    --bs-btn-hover-border-color: var(--business-success-hover);
    --bs-btn-active-bg: var(--business-success-active);
    --bs-btn-active-border-color: var(--business-success-active);
}

.btn-danger {
    --bs-btn-bg: var(--business-danger);
    --bs-btn-border-color: var(--business-danger);
    --bs-btn-hover-bg: var(--business-danger-hover);
    --bs-btn-hover-border-color: var(--business-danger-hover);
    --bs-btn-active-bg: var(--business-danger-active);
    --bs-btn-active-border-color: var(--business-danger-active);
}

.btn-warning {
    --bs-btn-bg: var(--business-warning);
    --bs-btn-border-color: var(--business-warning);
    --bs-btn-hover-bg: var(--business-warning-hover);
    --bs-btn-hover-border-color: var(--business-warning-hover);
    --bs-btn-active-bg: var(--business-warning-active);
    --bs-btn-active-border-color: var(--business-warning-active);
}

.btn-info {
    --bs-btn-bg: var(--business-info);
    --bs-btn-border-color: var(--business-info);
    --bs-btn-hover-bg: var(--business-info-hover);
    --bs-btn-hover-border-color: var(--business-info-hover);
    --bs-btn-active-bg: var(--business-info-active);
    --bs-btn-active-border-color: var(--business-info-active);
}


/* =========================================================
   OUTLINE BUTTONS
   ========================================================= */

.btn-outline-primary {
    --bs-btn-color: var(--business-primary);
    --bs-btn-border-color: var(--business-primary);
    --bs-btn-hover-bg: var(--business-primary);
    --bs-btn-hover-border-color: var(--business-primary);
    --bs-btn-active-bg: var(--business-primary-active);
    --bs-btn-active-border-color: var(--business-primary-active);
}

.btn-outline-secondary {
    --bs-btn-color: var(--business-secondary);
    --bs-btn-border-color: var(--business-secondary);
    --bs-btn-hover-bg: var(--business-secondary);
    --bs-btn-hover-border-color: var(--business-secondary);
}


/* =========================================================
   FORMS
   ========================================================= */

.form-control,
.form-select {
    min-height: var(--business-control-height);
    border: 1px solid var(--business-border);
    border-radius: var(--business-radius);
    background-color: var(--business-surface);
    color: var(--business-text);
    box-shadow: none;
}

    .form-control:hover,
    .form-select:hover {
        border-color: var(--business-border-dark);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--business-primary);
        box-shadow: 0 0 0 .2rem var(--business-focus);
    }

    .form-control:disabled,
    .form-select:disabled,
    .form-control[readonly] {
        background-color: var(--business-surface-alt);
        color: var(--business-text-muted);
        opacity: 1;
    }

    .form-control::placeholder {
        color: var(--business-text-muted);
        opacity: .7;
    }

.form-control-sm,
.form-select-sm {
    min-height: 32px;
    padding-top: .25rem;
    padding-bottom: .25rem;
    font-size: .875rem;
    border-radius: 5px;
}


/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

.form-check-input {
    border-color: var(--business-border-dark);
}

    .form-check-input:checked {
        background-color: var(--business-primary);
        border-color: var(--business-primary);
    }

    .form-check-input:focus {
        border-color: var(--business-primary);
        box-shadow: 0 0 0 .2rem var(--business-focus);
    }


/* =========================================================
   CARDS
   ========================================================= */

.card {
    border: 1px solid var(--business-border);
    border-radius: 8px;
    background-color: var(--business-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

.card-header {
    border-bottom: 1px solid var(--business-border);
    background-color: var(--business-surface-alt);
    color: var(--business-text);
    font-weight: 600;
}


/* =========================================================
   TABLES
   ========================================================= */

.table {
    --bs-table-color: var(--business-text);
    --bs-table-bg: var(--business-surface);
    --bs-table-border-color: var(--business-border);
}

    .table > thead {
        font-weight: 600;
    }

.table-dark {
    --bs-table-bg: #34454c;
    --bs-table-border-color: #43575f;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-bg-type: rgba(0, 0, 0, .018);
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(53, 92, 125, .06);
}


/* =========================================================
   BADGES
   ========================================================= */

.badge {
    font-weight: 500;
    border-radius: 4px;
    padding: .35em .6em;
}

    .badge.bg-primary {
        background-color: var(--business-primary) !important;
    }

    .badge.bg-secondary {
        background-color: var(--business-secondary) !important;
    }

    .badge.bg-success {
        background-color: var(--business-success) !important;
    }

    .badge.bg-danger {
        background-color: var(--business-danger) !important;
    }

    .badge.bg-warning {
        background-color: var(--business-warning) !important;
    }

    .badge.bg-info {
        background-color: var(--business-info) !important;
    }


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.dropdown-menu {
    border: 1px solid var(--business-border);
    border-radius: var(--business-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.dropdown-item {
    color: var(--business-text);
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--business-surface-alt);
        color: var(--business-text);
    }

    .dropdown-item.active,
    .dropdown-item:active {
        background-color: var(--business-primary);
        color: #fff;
    }


/* =========================================================
   NAV / TABS
   ========================================================= */

.nav-link {
    color: var(--business-primary);
}

    .nav-link:hover {
        color: var(--business-primary-hover);
    }

.nav-tabs .nav-link.active {
    color: var(--business-primary-active);
    font-weight: 600;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.page-link {
    color: var(--business-primary);
    border-color: var(--business-border);
}

    .page-link:hover {
        color: var(--business-primary-hover);
        background-color: var(--business-surface-alt);
        border-color: var(--business-border-dark);
    }

    .active > .page-link,
    .page-link.active {
        background-color: var(--business-primary);
        border-color: var(--business-primary);
    }


/* =========================================================
   MODAL
   ========================================================= */

.blazored-modal {
    border: 0;
    border-radius: 10px;
    background-color: var(--business-surface);
    box-shadow: 0 12px 35px rgba(0, 0, 0, .18);
}

.blazored-modal-header {
    border-bottom: 1px solid var(--business-border);
}