/* =========================================================
   NERSAPP DEFAULT THEME
   BOOTSTRAP COMPONENT NORMALIZATION
   ========================================================= */

/*
 * Bootstrap is used for structure and utilities.
 * NERSAPP controls the visual language.
 *
 * This section intentionally uses the existing NERSAPP
 * design tokens instead of creating a second theme.
 */


/* =========================================================
   BOOTSTRAP THEME VARIABLES
   ========================================================= */

:root {
    --bs-primary: var(--nersapp-blue);
    --bs-primary-rgb: 33, 152, 243;

    --bs-secondary: var(--nersapp-muted);
    --bs-secondary-rgb: 102, 112, 133;

    --bs-success: var(--nersapp-success);
    --bs-success-rgb: 82, 191, 17;

    --bs-dark: var(--nersapp-dark);
    --bs-dark-rgb: 13, 23, 38;

    --bs-light: var(--nersapp-bg);
    --bs-light-rgb: 248, 250, 252;

    --bs-body-bg: var(--nersapp-white);
    --bs-body-color: var(--nersapp-text);
    --bs-secondary-color: var(--nersapp-muted);

    --bs-border-color: var(--nersapp-border);

    --bs-link-color: var(--nersapp-blue);
    --bs-link-hover-color: var(--nersapp-blue-dark);

    --bs-border-radius: 10px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 14px;
    --bs-border-radius-xl: var(--nersapp-radius);

    --bs-box-shadow: var(--nersapp-shadow);
    --bs-box-shadow-sm: 0 5px 18px rgba(15, 23, 42, .06);
    --bs-box-shadow-lg: var(--nersapp-shadow-lg);

    --bs-focus-ring-color: rgba(33, 152, 243, .18);
}


/* =========================================================
   GLOBAL BOOTSTRAP RESET
   ========================================================= */

body {
    color: var(--nersapp-text);
    background: var(--nersapp-white);
}

.text-primary {
    color: var(--nersapp-blue) !important;
}

.text-secondary {
    color: var(--nersapp-muted) !important;
}

.text-dark {
    color: var(--nersapp-dark) !important;
}

.text-body {
    color: var(--nersapp-text) !important;
}

.text-muted {
    color: var(--nersapp-muted) !important;
}

.bg-primary {
    background-color: var(--nersapp-blue) !important;
}

.bg-secondary {
    background-color: var(--nersapp-muted) !important;
}

.bg-dark {
    background-color: var(--nersapp-dark) !important;
}

.bg-light {
    background-color: var(--nersapp-bg) !important;
}

.border {
    border-color: var(--nersapp-border) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--nersapp-blue);
}

a:hover {
    color: var(--nersapp-blue-dark);
}

.btn-link {
    color: var(--nersapp-blue);
}

.btn-link:hover,
.btn-link:focus {
    color: var(--nersapp-blue-dark);
}


/* =========================================================
   BUTTON BASE
   ========================================================= */

.btn {
    --bs-btn-font-family: inherit;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.4;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;
    padding: 9px 18px;

    border-width: 1px;
    border-radius: 10px;

    font-size: .84rem;
    font-weight: 700;

    box-shadow: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .16);
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    transform: none;
    opacity: .55;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.btn.btn-primary {
    --bs-btn-color: var(--nersapp-white);
    --bs-btn-bg: var(--nersapp-blue);
    --bs-btn-border-color: var(--nersapp-blue);

    --bs-btn-hover-color: var(--nersapp-white);
    --bs-btn-hover-bg: var(--nersapp-blue-dark);
    --bs-btn-hover-border-color: var(--nersapp-blue-dark);

    --bs-btn-active-color: var(--nersapp-white);
    --bs-btn-active-bg: var(--nersapp-blue-dark);
    --bs-btn-active-border-color: var(--nersapp-blue-dark);

    --bs-btn-disabled-color: var(--nersapp-white);
    --bs-btn-disabled-bg: var(--nersapp-blue);
    --bs-btn-disabled-border-color: var(--nersapp-blue);

    background-color: var(--nersapp-blue);
    border-color: var(--nersapp-blue);
    color: var(--nersapp-white);
    box-shadow: 0 8px 22px rgba(33, 152, 243, .16);
}

.btn.btn-primary:hover {
    background-color: var(--nersapp-blue-dark);
    border-color: var(--nersapp-blue-dark);
    color: var(--nersapp-white);
    box-shadow: 0 10px 27px rgba(33, 152, 243, .21);
}

.btn.btn-primary:focus-visible {
    background-color: var(--nersapp-blue);
    border-color: var(--nersapp-blue);
}


/* =========================================================
   OUTLINE PRIMARY
   ========================================================= */

.btn.btn-outline-primary {
    --bs-btn-color: var(--nersapp-blue);
    --bs-btn-border-color: var(--nersapp-blue);

    --bs-btn-hover-color: var(--nersapp-white);
    --bs-btn-hover-bg: var(--nersapp-blue);
    --bs-btn-hover-border-color: var(--nersapp-blue);

    --bs-btn-active-color: var(--nersapp-white);
    --bs-btn-active-bg: var(--nersapp-blue-dark);
    --bs-btn-active-border-color: var(--nersapp-blue-dark);

    color: var(--nersapp-blue);
    border-color: var(--nersapp-blue);
}

.btn.btn-outline-primary:hover {
    color: var(--nersapp-white);
    background-color: var(--nersapp-blue);
    border-color: var(--nersapp-blue);
}


/* =========================================================
   SECONDARY BUTTON
   ========================================================= */

.btn.btn-secondary {
    --bs-btn-color: var(--nersapp-white);
    --bs-btn-bg: var(--nersapp-muted);
    --bs-btn-border-color: var(--nersapp-muted);

    --bs-btn-hover-color: var(--nersapp-white);
    --bs-btn-hover-bg: var(--nersapp-text);
    --bs-btn-hover-border-color: var(--nersapp-text);

    --bs-btn-active-color: var(--nersapp-white);
    --bs-btn-active-bg: var(--nersapp-text);
    --bs-btn-active-border-color: var(--nersapp-text);

    background-color: var(--nersapp-muted);
    border-color: var(--nersapp-muted);
    color: var(--nersapp-white);
}


/* =========================================================
   OUTLINE SECONDARY
   ========================================================= */

.btn.btn-outline-secondary {
    --bs-btn-color: var(--nersapp-muted);
    --bs-btn-border-color: var(--nersapp-border);

    --bs-btn-hover-color: var(--nersapp-text);
    --bs-btn-hover-bg: var(--nersapp-bg);
    --bs-btn-hover-border-color: var(--nersapp-border);

    --bs-btn-active-color: var(--nersapp-text);
    --bs-btn-active-bg: var(--nersapp-bg);
    --bs-btn-active-border-color: var(--nersapp-border);

    color: var(--nersapp-muted);
    border-color: var(--nersapp-border);
}

.btn.btn-outline-secondary:hover {
    color: var(--nersapp-text);
    background-color: var(--nersapp-bg);
    border-color: var(--nersapp-border);
}


/* =========================================================
   SUCCESS BUTTON
   ========================================================= */

.btn.btn-success {
    --bs-btn-color: var(--nersapp-white);
    --bs-btn-bg: var(--nersapp-success);
    --bs-btn-border-color: var(--nersapp-success);

    --bs-btn-hover-color: var(--nersapp-white);
    --bs-btn-hover-bg: var(--nersapp-success);
    --bs-btn-hover-border-color: var(--nersapp-success);

    --bs-btn-active-color: var(--nersapp-white);
    --bs-btn-active-bg: var(--nersapp-success);
    --bs-btn-active-border-color: var(--nersapp-success);

    background-color: var(--nersapp-success);
    border-color: var(--nersapp-success);
    color: var(--nersapp-white);
}


/* =========================================================
   DARK BUTTON
   ========================================================= */

.btn.btn-dark {
    --bs-btn-color: var(--nersapp-white);
    --bs-btn-bg: var(--nersapp-dark);
    --bs-btn-border-color: var(--nersapp-dark);

    --bs-btn-hover-color: var(--nersapp-white);
    --bs-btn-hover-bg: var(--nersapp-dark-2);
    --bs-btn-hover-border-color: var(--nersapp-dark-2);

    --bs-btn-active-color: var(--nersapp-white);
    --bs-btn-active-bg: var(--nersapp-dark-2);
    --bs-btn-active-border-color: var(--nersapp-dark-2);

    background-color: var(--nersapp-dark);
    border-color: var(--nersapp-dark);
    color: var(--nersapp-white);
}


/* =========================================================
   LIGHT BUTTON
   ========================================================= */

.btn.btn-light {
    --bs-btn-color: var(--nersapp-text);
    --bs-btn-bg: var(--nersapp-bg);
    --bs-btn-border-color: var(--nersapp-border);

    --bs-btn-hover-color: var(--nersapp-text);
    --bs-btn-hover-bg: var(--nersapp-blue-soft);
    --bs-btn-hover-border-color: var(--nersapp-border);

    --bs-btn-active-color: var(--nersapp-text);
    --bs-btn-active-bg: var(--nersapp-blue-soft);
    --bs-btn-active-border-color: var(--nersapp-border);

    background-color: var(--nersapp-bg);
    border-color: var(--nersapp-border);
    color: var(--nersapp-text);
}


/* =========================================================
   OUTLINE DARK
   ========================================================= */

.btn.btn-outline-dark {
    --bs-btn-color: var(--nersapp-dark);
    --bs-btn-border-color: var(--nersapp-dark);

    --bs-btn-hover-color: var(--nersapp-white);
    --bs-btn-hover-bg: var(--nersapp-dark);
    --bs-btn-hover-border-color: var(--nersapp-dark);

    --bs-btn-active-color: var(--nersapp-white);
    --bs-btn-active-bg: var(--nersapp-dark);
    --bs-btn-active-border-color: var(--nersapp-dark);

    color: var(--nersapp-dark);
    border-color: var(--nersapp-dark);
}


/* =========================================================
   BUTTON SIZES
   ========================================================= */

.btn-sm {
    min-height: 36px;
    padding: 6px 13px;
    border-radius: 8px;
    font-size: .76rem;
}

.btn-lg {
    min-height: 52px;
    padding: 11px 23px;
    border-radius: 11px;
    font-size: .9rem;
}


/* =========================================================
   FORM CONTROLS
   ========================================================= */

.form-label {
    margin-bottom: 7px;
    color: var(--nersapp-text);
    font-size: .82rem;
    font-weight: 650;
}

.form-text {
    color: var(--nersapp-muted);
    font-size: .76rem;
}

.form-control,
.form-select {
    min-height: 44px;

    padding: 9px 13px;

    border: 1px solid var(--nersapp-border);
    border-radius: 9px;

    background-color: var(--nersapp-white);
    color: var(--nersapp-text);

    font-size: .86rem;

    box-shadow: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.form-control::placeholder {
    color: var(--nersapp-muted);
    opacity: .72;
}

.form-control:hover,
.form-select:hover {
    border-color: #d5dee8;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--nersapp-blue);
    background-color: var(--nersapp-white);
    color: var(--nersapp-text);
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .12);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--nersapp-bg);
    color: var(--nersapp-muted);
}

textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.form-control-sm,
.form-select-sm {
    min-height: 36px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: .78rem;
}

.form-control-lg,
.form-select-lg {
    min-height: 52px;
    padding: 11px 15px;
    border-radius: 11px;
    font-size: .9rem;
}


/* =========================================================
   INPUT GROUP
   ========================================================= */

.input-group-text {
    min-height: 44px;
    padding: 9px 13px;

    border-color: var(--nersapp-border);
    background-color: var(--nersapp-bg);
    color: var(--nersapp-muted);

    font-size: .84rem;
}

.input-group>.form-control:focus,
.input-group>.form-select:focus {
    z-index: 3;
}

.input-group-lg>.form-control,
.input-group-lg>.form-select,
.input-group-lg>.input-group-text,
.input-group-lg>.btn {
    min-height: 52px;
}

.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text,
.input-group-sm>.btn {
    min-height: 36px;
}


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

.form-check {
    min-height: 1.35rem;
}

.form-check-input {
    width: 1.05em;
    height: 1.05em;

    margin-top: .18em;

    border-color: var(--nersapp-border);
    box-shadow: none;
}

.form-check-input:focus {
    border-color: var(--nersapp-blue);
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .12);
}

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

.form-check-label {
    color: var(--nersapp-text);
    font-size: .82rem;
}


/* =========================================================
   SWITCH
   ========================================================= */

.form-switch .form-check-input {
    width: 2.15em;
    height: 1.15em;
}

.form-switch .form-check-input:checked {
    background-color: var(--nersapp-blue);
    border-color: var(--nersapp-blue);
}


/* =========================================================
   VALIDATION
   ========================================================= */

.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--nersapp-success);
}

.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--nersapp-success);
    box-shadow: 0 0 0 .2rem rgba(82, 191, 17, .12);
}

.valid-feedback {
    color: var(--nersapp-success);
    font-size: .76rem;
}

.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .1);
}

.invalid-feedback {
    font-size: .76rem;
}


/* =========================================================
   DROPDOWNS
   ========================================================= */

.dropdown-menu {
    min-width: 180px;

    padding: 7px;

    border: 1px solid var(--nersapp-border);
    border-radius: 12px;

    background: var(--nersapp-white);

    box-shadow: var(--nersapp-shadow);

    font-size: .82rem;
}

.dropdown-item {
    padding: 9px 11px;
    border-radius: 8px;

    color: var(--nersapp-text);
    font-size: .82rem;

    transition:
        color .15s ease,
        background-color .15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--nersapp-blue-dark);
    background-color: var(--nersapp-blue-soft);
}

.dropdown-item.active,
.dropdown-item:active {
    color: var(--nersapp-white);
    background-color: var(--nersapp-blue);
}

.dropdown-divider {
    border-top-color: var(--nersapp-border);
}


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

.nav-tabs {
    border-bottom-color: var(--nersapp-border);
}

.nav-tabs .nav-link {
    padding: 10px 15px;

    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;

    color: var(--nersapp-muted);

    font-size: .84rem;
    font-weight: 650;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.nav-tabs .nav-link:hover {
    color: var(--nersapp-blue);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--nersapp-blue);
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--nersapp-blue);
}

.nav-pills .nav-link {
    border-radius: 9px;
    color: var(--nersapp-muted);
    font-size: .84rem;
    font-weight: 650;
}

.nav-pills .nav-link:hover {
    color: var(--nersapp-blue);
    background-color: var(--nersapp-blue-soft);
}

.nav-pills .nav-link.active {
    color: var(--nersapp-white);
    background-color: var(--nersapp-blue);
}


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

.card {
    border: 1px solid var(--nersapp-border);
    border-radius: var(--nersapp-radius);
    background-color: var(--nersapp-white);
    box-shadow: none;
}

.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--nersapp-border);
    background-color: var(--nersapp-white);
    color: var(--nersapp-text);
    font-weight: 700;
}

.card-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--nersapp-border);
    background-color: var(--nersapp-white);
}

.card-title {
    color: var(--nersapp-dark);
    font-weight: 750;
}

.card-text {
    color: var(--nersapp-muted);
}


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

.table {
    --bs-table-color: var(--nersapp-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--nersapp-border);

    margin-bottom: 0;

    color: var(--nersapp-text);
    font-size: .84rem;
}

.table> :not(caption)>*>* {
    padding: 11px 13px;
    border-bottom-color: var(--nersapp-border);
}

.table>thead {
    vertical-align: middle;
}

.table>thead>tr>th {
    color: var(--nersapp-muted);
    background-color: var(--nersapp-bg);
    font-size: .73rem;
    font-weight: 750;
    letter-spacing: .02em;
}

.table-hover>tbody>tr:hover>* {
    --bs-table-accent-bg: var(--nersapp-bg);
    color: var(--nersapp-text);
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-accent-bg: var(--nersapp-bg);
}


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

.badge {
    padding: .42em .68em;
    border-radius: 7px;

    font-size: .68rem;
    font-weight: 700;
}

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

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

.badge.bg-dark {
    background-color: var(--nersapp-dark) !important;
}

.badge.bg-light {
    color: var(--nersapp-text) !important;
    background-color: var(--nersapp-bg) !important;
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    padding: 13px 15px;

    border-radius: 10px;

    font-size: .82rem;
}

.alert-primary {
    --bs-alert-color: var(--nersapp-blue-dark);
    --bs-alert-bg: var(--nersapp-blue-soft);
    --bs-alert-border-color: var(--nersapp-border);
}

.alert-success {
    --bs-alert-color: var(--nersapp-success);
    --bs-alert-bg: var(--nersapp-white);
    --bs-alert-border-color: rgba(82, 191, 17, .25);
}

.alert-dark {
    --bs-alert-color: var(--nersapp-white);
    --bs-alert-bg: var(--nersapp-dark);
    --bs-alert-border-color: var(--nersapp-dark);
}


/* =========================================================
   PROGRESS
   ========================================================= */

.progress {
    height: 7px;

    overflow: hidden;

    border-radius: 100px;

    background-color: var(--nersapp-border);
}

.progress-bar {
    background-color: var(--nersapp-blue);
    border-radius: inherit;
}


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

.pagination {
    gap: 5px;
}

.page-link {
    min-width: 36px;
    min-height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 10px;

    border: 1px solid var(--nersapp-border);
    border-radius: 8px !important;

    background-color: var(--nersapp-white);
    color: var(--nersapp-text);

    font-size: .78rem;
    font-weight: 650;

    box-shadow: none;
}

.page-link:hover {
    color: var(--nersapp-blue-dark);
    background-color: var(--nersapp-blue-soft);
    border-color: var(--nersapp-border);
}

.page-item.active .page-link {
    color: var(--nersapp-white);
    background-color: var(--nersapp-blue);
    border-color: var(--nersapp-blue);
}

.page-item.disabled .page-link {
    color: var(--nersapp-muted);
    background-color: var(--nersapp-bg);
    border-color: var(--nersapp-border);
}


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

.modal-content {
    overflow: hidden;

    border: 1px solid var(--nersapp-border);
    border-radius: var(--nersapp-radius);

    background-color: var(--nersapp-white);

    box-shadow: var(--nersapp-shadow-lg);
}

.modal-header {
    padding: 18px 22px;
    border-bottom-color: var(--nersapp-border);
}

.modal-title {
    color: var(--nersapp-dark);
    font-size: 1rem;
    font-weight: 750;
}

.modal-body {
    padding: 22px;
    color: var(--nersapp-text);
}

.modal-footer {
    padding: 15px 22px;
    border-top-color: var(--nersapp-border);
}

.modal-backdrop {
    --bs-backdrop-bg: var(--nersapp-dark);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.btn-close {
    width: 34px;
    height: 34px;

    padding: 0;

    border-radius: 8px;

    background-color: var(--nersapp-bg);

    opacity: 1;

    transition:
        background-color .2s ease,
        opacity .2s ease;
}

.btn-close:hover {
    background-color: var(--nersapp-blue-soft);
    opacity: 1;
}


/* =========================================================
   ACCORDION
   ========================================================= */

.accordion {
    --bs-accordion-border-color: var(--nersapp-border);
    --bs-accordion-border-radius: var(--nersapp-radius);
    --bs-accordion-inner-border-radius: var(--nersapp-radius);

    --bs-accordion-btn-color: var(--nersapp-text);
    --bs-accordion-btn-bg: var(--nersapp-white);

    --bs-accordion-active-color: var(--nersapp-blue-dark);
    --bs-accordion-active-bg: var(--nersapp-blue-soft);

    --bs-accordion-body-padding-x: 20px;
    --bs-accordion-body-padding-y: 18px;
}

.accordion-item {
    border-color: var(--nersapp-border);
}

.accordion-button {
    padding: 16px 20px;

    color: var(--nersapp-text);

    font-size: .86rem;
    font-weight: 700;

    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    color: var(--nersapp-blue-dark);
    background-color: var(--nersapp-blue-soft);
}

.accordion-button:focus {
    box-shadow: none;
}


/* =========================================================
   LIST GROUP
   ========================================================= */

.list-group {
    --bs-list-group-border-color: var(--nersapp-border);
    --bs-list-group-border-radius: var(--nersapp-radius);
}

.list-group-item {
    padding: 12px 15px;
    color: var(--nersapp-text);
    background-color: var(--nersapp-white);
    font-size: .82rem;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    color: var(--nersapp-blue-dark);
    background-color: var(--nersapp-blue-soft);
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    border: 1px solid var(--nersapp-border);
    border-radius: 12px;
    background-color: var(--nersapp-white);
    box-shadow: var(--nersapp-shadow);
}

.toast-header {
    border-bottom-color: var(--nersapp-border);
    background-color: var(--nersapp-white);
    color: var(--nersapp-text);
}

.toast-body {
    color: var(--nersapp-muted);
    font-size: .82rem;
}


/* =========================================================
   OFFCANVAS
   ========================================================= */

.offcanvas {
    background-color: var(--nersapp-white);
}

.offcanvas-header {
    border-bottom: 1px solid var(--nersapp-border);
}

.offcanvas-title {
    color: var(--nersapp-dark);
    font-weight: 750;
}

.offcanvas-body {
    color: var(--nersapp-text);
}


/* =========================================================
   SPINNER
   ========================================================= */

.spinner-border {
    color: var(--nersapp-blue);
}


/* =========================================================
   TOOLTIPS / POPOVERS
   ========================================================= */

.tooltip {
    --bs-tooltip-bg: var(--nersapp-dark);
    --bs-tooltip-color: var(--nersapp-white);
}

.tooltip-inner {
    padding: 7px 10px;
    border-radius: 7px;
    font-size: .7rem;
    font-weight: 600;
}

.popover {
    border: 1px solid var(--nersapp-border);
    border-radius: 12px;
    box-shadow: var(--nersapp-shadow);
}

.popover-header {
    border-bottom-color: var(--nersapp-border);
    background-color: var(--nersapp-bg);
    color: var(--nersapp-text);
    font-weight: 700;
}

.popover-body {
    color: var(--nersapp-muted);
    font-size: .8rem;
}


/* =========================================================
   BLOCKQUOTES / MARK / CODE
   ========================================================= */

mark,
.mark {
    padding: .15em .35em;
    border-radius: 4px;
    background-color: var(--nersapp-blue-soft);
    color: var(--nersapp-blue-dark);
}

blockquote {
    border-left: 3px solid var(--nersapp-blue);
    padding-left: 15px;
    color: var(--nersapp-muted);
}


/* =========================================================
   BOOTSTRAP FORM RANGE
   ========================================================= */

.form-range::-webkit-slider-thumb {
    background-color: var(--nersapp-blue);
}

.form-range::-moz-range-thumb {
    background-color: var(--nersapp-blue);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .16);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .16);
}


/* =========================================================
   BOOTSTRAP NAVBAR DEFAULTS
   ========================================================= */

.navbar-brand {
    color: var(--nersapp-dark);
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--nersapp-dark);
}

.navbar-toggler {
    border-color: var(--nersapp-border);
    border-radius: 9px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .12);
}


/* =========================================================
   BOOTSTRAP BREADCRUMBS
   ========================================================= */

.breadcrumb {
    margin-bottom: 0;
    font-size: .78rem;
}

.breadcrumb-item {
    color: var(--nersapp-muted);
}

.breadcrumb-item a {
    color: var(--nersapp-blue);
}

.breadcrumb-item.active {
    color: var(--nersapp-text);
}


/* =========================================================
   BOOTSTRAP HR
   ========================================================= */

hr {
    border-color: var(--nersapp-border);
    opacity: 1;
}


/* =========================================================
   BOOTSTRAP UTILITIES — NERSAPP COLORS
   ========================================================= */

.border-primary {
    border-color: var(--nersapp-blue) !important;
}

.border-secondary {
    border-color: var(--nersapp-border) !important;
}

.border-success {
    border-color: var(--nersapp-success) !important;
}

.border-dark {
    border-color: var(--nersapp-dark) !important;
}


/* =========================================================
   NERSAPP GENERIC COMPONENT HELPERS
   ========================================================= */

.nersapp-card {
    border: 1px solid var(--nersapp-border);
    border-radius: var(--nersapp-radius);
    background: var(--nersapp-white);
    box-shadow: none;
}

.nersapp-card-elevated {
    box-shadow: var(--nersapp-shadow);
}

.nersapp-card-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--nersapp-border);
}

.nersapp-card-body {
    padding: 20px;
}

.nersapp-card-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--nersapp-border);
}


/* =========================================================
   NERSAPP ICON BUTTON
   ========================================================= */

.nersapp-icon-btn {
    width: 40px;
    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--nersapp-border);
    border-radius: 9px;

    background-color: var(--nersapp-white);
    color: var(--nersapp-muted);

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.nersapp-icon-btn:hover {
    color: var(--nersapp-blue);
    background-color: var(--nersapp-blue-soft);
    border-color: var(--nersapp-border);
    transform: translateY(-1px);
}

.nersapp-icon-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(33, 152, 243, .12);
}


/* =========================================================
   NERSAPP DIVIDER
   ========================================================= */

.nersapp-divider {
    width: 100%;
    height: 1px;
    background-color: var(--nersapp-border);
}


/* =========================================================
   NERSAPP SOFT SURFACE
   ========================================================= */

.nersapp-soft {
    background-color: var(--nersapp-bg);
}

.nersapp-soft-blue {
    background-color: var(--nersapp-blue-soft);
}


/* =========================================================
   NERSAPP PRIMARY TEXT
   ========================================================= */

.nersapp-primary {
    color: var(--nersapp-blue) !important;
}

.nersapp-primary-dark {
    color: var(--nersapp-blue-dark) !important;
}

.nersapp-muted {
    color: var(--nersapp-muted) !important;
}

.nersapp-dark {
    color: var(--nersapp-dark) !important;
}

@media (max-width: 767.98px) {

    .container,
    .container-fluid {
        padding-left: 20px;
        padding-right: 20px;
    }
}