/*
 * TripManga Brand Color Overrides
 * Replaces Bootstrap blue (#0d6efd) and all system blues
 * with brand green (#038a52) throughout the application.
 *
 * Include in every layout that loads Bootstrap.
 */

/* ════════════════════════════════════════════════════════════════
   1. Bootstrap CSS custom-property overrides
   These cascade into every Bootstrap component automatically.
   ════════════════════════════════════════════════════════════════ */
:root {
    /* Primary (was blue #0d6efd) */
    --bs-blue:                          #038a52;
    --bs-primary:                       #038a52;
    --bs-primary-rgb:                   3, 138, 82;
    --bs-primary-text-emphasis:         #025c35;
    --bs-primary-bg-subtle:             #e6f5ef;
    --bs-primary-border-subtle:         #a8d9be;

    /* Links */
    --bs-link-color:                    #038a52;
    --bs-link-color-rgb:                3, 138, 82;
    --bs-link-hover-color:              #026b3f;
    --bs-link-hover-color-rgb:          2, 107, 63;
    --bs-link-decoration:               none;

    /* Focus ring */
    --bs-focus-ring-color:              rgba(3, 138, 82, 0.25);
    --bs-focus-ring-width:              0.2rem;

    /* Form switch/check active color */
    --bs-form-check-bg:                 #fff;
}

/* ════════════════════════════════════════════════════════════════
   2. Links
   ════════════════════════════════════════════════════════════════ */
a                        { color: #038a52; }
a:hover                  { color: #026b3f; }
a:focus-visible          { outline-color: #038a52; }

/* ════════════════════════════════════════════════════════════════
   3. Buttons — primary & outline-primary
   ════════════════════════════════════════════════════════════════ */
.btn-primary {
    --bs-btn-color:               #fff;
    --bs-btn-bg:                  #038a52;
    --bs-btn-border-color:        #038a52;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #026b3f;
    --bs-btn-hover-border-color:  #026b3f;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #025c35;
    --bs-btn-active-border-color: #025c35;
    --bs-btn-focus-shadow-rgb:    3, 138, 82;
    --bs-btn-disabled-bg:         #038a52;
    --bs-btn-disabled-border-color: #038a52;
}

.btn-outline-primary {
    --bs-btn-color:               #038a52;
    --bs-btn-border-color:        #038a52;
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            #038a52;
    --bs-btn-hover-border-color:  #038a52;
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           #038a52;
    --bs-btn-active-border-color: #038a52;
    --bs-btn-focus-shadow-rgb:    3, 138, 82;
}

/* ════════════════════════════════════════════════════════════════
   4. Form controls — focus state
   ════════════════════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus,
input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
textarea:focus,
select:focus {
    border-color:  #038a52 !important;
    box-shadow:    0 0 0 0.2rem rgba(3, 138, 82, 0.25) !important;
    outline:       none !important;
}

.form-control:focus-visible,
.form-select:focus-visible {
    outline: none !important;
}

/* Checkbox / radio / switch */
.form-check-input:checked {
    background-color: #038a52 !important;
    border-color:     #038a52 !important;
}

.form-check-input:focus {
    border-color: #038a52 !important;
    box-shadow:   0 0 0 0.2rem rgba(3, 138, 82, 0.25) !important;
}

/* Range slider */
input[type="range"] { accent-color: #038a52; }

/* Time / date pickers */
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    accent-color: #038a52;
}
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(35%) sepia(80%) saturate(600%) hue-rotate(118deg) brightness(90%);
}

/* ════════════════════════════════════════════════════════════════
   5. Badges, text helpers, backgrounds
   ════════════════════════════════════════════════════════════════ */
.bg-primary          { background-color: #038a52 !important; }
.text-primary        { color:            #038a52 !important; }
.border-primary      { border-color:     #038a52 !important; }
.badge.bg-primary    { background-color: #038a52 !important; }

/* ════════════════════════════════════════════════════════════════
   6. Alerts
   ════════════════════════════════════════════════════════════════ */
.alert-primary {
    --bs-alert-color:        #025c35;
    --bs-alert-bg:           #e6f5ef;
    --bs-alert-border-color: #a8d9be;
    --bs-alert-link-color:   #025c35;
}

/* ════════════════════════════════════════════════════════════════
   7. Navigation
   ════════════════════════════════════════════════════════════════ */
.nav-link               { color: #038a52; }
.nav-link:hover         { color: #026b3f; }
.nav-link.active        { color: #038a52 !important; }
.nav-link:focus-visible { outline-color: #038a52; }

.nav-tabs .nav-link.active {
    color:        #038a52 !important;
    border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #dee2e6; color: #038a52; }

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: #038a52 !important;
}

/* ════════════════════════════════════════════════════════════════
   8. Pagination
   ════════════════════════════════════════════════════════════════ */
.page-link              { color: #038a52; }
.page-link:hover        { color: #026b3f; }
.page-link:focus        { box-shadow: 0 0 0 0.2rem rgba(3, 138, 82, 0.25); outline: none; }
.page-item.active .page-link {
    background-color: #038a52 !important;
    border-color:     #038a52 !important;
    color:            #fff    !important;
}

/* ════════════════════════════════════════════════════════════════
   9. Progress bars
   ════════════════════════════════════════════════════════════════ */
.progress-bar                          { background-color: #038a52 !important; }

/* ════════════════════════════════════════════════════════════════
   10. Dropdowns
   ════════════════════════════════════════════════════════════════ */
.dropdown-item.active,
.dropdown-item:active   { background-color: #038a52 !important; color: #fff !important; }
.dropdown-item:focus    { background-color: #e6f5ef !important; color: #038a52 !important; outline: none; }

/* ════════════════════════════════════════════════════════════════
   11. List groups
   ════════════════════════════════════════════════════════════════ */
.list-group-item.active {
    background-color: #038a52 !important;
    border-color:     #038a52 !important;
}
.list-group-item-action:hover,
.list-group-item-action:focus { color: #038a52; }

/* ════════════════════════════════════════════════════════════════
   12. Spinners & loaders
   ════════════════════════════════════════════════════════════════ */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #038a52 !important; }

/* ════════════════════════════════════════════════════════════════
   13. Tooltips & popovers
   ════════════════════════════════════════════════════════════════ */
.bs-tooltip-auto .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before    { border-top-color:    #038a52; }
.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #038a52; }
.tooltip .tooltip-inner                   { background-color:    #038a52; }

/* ════════════════════════════════════════════════════════════════
   14. Modals — header accent
   ════════════════════════════════════════════════════════════════ */
.modal-header { border-bottom-color: #a8d9be; }

/* ════════════════════════════════════════════════════════════════
   15. Input groups
   ════════════════════════════════════════════════════════════════ */
.input-group:focus-within .input-group-text {
    border-color: #038a52;
}

/* ════════════════════════════════════════════════════════════════
   16. Breadcrumbs
   ════════════════════════════════════════════════════════════════ */
.breadcrumb-item a          { color: #038a52; }
.breadcrumb-item.active     { color: #026b3f; }

/* ════════════════════════════════════════════════════════════════
   17. Bootstrap table hover / striped accents
   ════════════════════════════════════════════════════════════════ */
.table-primary { --bs-table-color: #025c35; --bs-table-bg: #e6f5ef; --bs-table-border-color: #a8d9be; }

/* ════════════════════════════════════════════════════════════════
   18. Accordion active state
   ════════════════════════════════════════════════════════════════ */
.accordion-button:not(.collapsed) {
    color:            #025c35 !important;
    background-color: #e6f5ef !important;
    box-shadow:       inset 0 -1px 0 rgba(3, 138, 82, 0.15) !important;
}
.accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(3, 138, 82, 0.25) !important;
    outline: none !important;
}