/*
 * TripManga Brand Color Overrides
 * Replaces Bootstrap blue (#0d6efd) and all system blues
 * with brand green (var(--tm-green)) throughout the application.
 * Palette primitives now live in design-tokens.css — this file maps them onto
 * Bootstrap. Change the brand in design-tokens.css, not here.
 *
 * 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:                          var(--tm-green, #038a52);
    --bs-primary:                       var(--tm-green, #038a52);
    --bs-primary-rgb:                   var(--tm-green-rgb, 3, 138, 82);
    --bs-primary-text-emphasis:         var(--tm-green-2, #025c35);
    --bs-primary-bg-subtle:             var(--tm-green-soft, #e6f5ef);
    --bs-primary-border-subtle:         var(--tm-green-border, #a8d9be);

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

    /* Focus ring */
    --bs-focus-ring-color:              rgba(var(--tm-green-rgb, 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: var(--tm-green, #038a52); }
a:hover                  { color: var(--tm-green-ink, #026b3f); }
a:focus-visible          { outline-color: var(--tm-green, #038a52); }

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

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

/* ════════════════════════════════════════════════════════════════
   4. Form controls - focus state
   No border/glow/outline on focus, on any form field, anywhere.
   ════════════════════════════════════════════════════════════════ */
.form-control:focus,
.form-select:focus,
input:not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
textarea:focus,
select:focus,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: none !important;
    outline:    none !important;
}

/* Checkbox / radio / switch */
.form-check-input:checked {
    background-color: var(--tm-green, #038a52) !important;
    border-color:     var(--tm-green, #038a52) !important;
}

.form-check-input:focus {
    box-shadow: none !important;
    outline:    none !important;
}

/* Range slider */
input[type="range"] { accent-color: var(--tm-green, #038a52); }

/* Time / date pickers */
input[type="time"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    accent-color: var(--tm-green, #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: var(--tm-green, #038a52) !important; }
.text-primary        { color:            var(--tm-green, #038a52) !important; }
.border-primary      { border-color:     var(--tm-green, #038a52) !important; }
.badge.bg-primary    { background-color: var(--tm-green, #038a52) !important; }

/* ════════════════════════════════════════════════════════════════
   6. Alerts
   ════════════════════════════════════════════════════════════════ */
.alert-primary {
    --bs-alert-color:        var(--tm-green-2, #025c35);
    --bs-alert-bg:           var(--tm-green-soft, #e6f5ef);
    --bs-alert-border-color: var(--tm-green-border, #a8d9be);
    --bs-alert-link-color:   var(--tm-green-2, #025c35);
}

/* ════════════════════════════════════════════════════════════════
   7. Navigation
   ════════════════════════════════════════════════════════════════ */
.nav-link               { color: var(--tm-green, #038a52); }
.nav-link:hover         { color: var(--tm-green-ink, #026b3f); }
.nav-link.active        { color: var(--tm-green, #038a52) !important; }
.nav-link:focus-visible { outline-color: var(--tm-green, #038a52); }

.nav-tabs .nav-link.active {
    color:        var(--tm-green, #038a52) !important;
    border-color: #dee2e6 #dee2e6 #fff;
}
.nav-tabs .nav-link:hover { border-color: #e9ecef #e9ecef #dee2e6; color: var(--tm-green, #038a52); }

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

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

/* ════════════════════════════════════════════════════════════════
   9. Progress bars
   ════════════════════════════════════════════════════════════════ */
.progress-bar                          { background-color: var(--tm-green, #038a52) !important; }

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

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

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

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

/* ════════════════════════════════════════════════════════════════
   14. Modals - header accent
   ════════════════════════════════════════════════════════════════ */
.modal-header { border-bottom-color: var(--tm-green-border, #a8d9be); }

/* ════════════════════════════════════════════════════════════════
   15. Input groups
   ════════════════════════════════════════════════════════════════ */
.input-group:focus-within .input-group-text {
    border-color: var(--tm-green, #038a52);
}

/* ════════════════════════════════════════════════════════════════
   16. Breadcrumbs
   ════════════════════════════════════════════════════════════════ */
.breadcrumb-item a          { color: var(--tm-green, #038a52); }
.breadcrumb-item.active     { color: var(--tm-green-ink, #026b3f); }

/* ════════════════════════════════════════════════════════════════
   17. Bootstrap table hover / striped accents
   ════════════════════════════════════════════════════════════════ */
.table-primary { --bs-table-color: var(--tm-green-2, #025c35); --bs-table-bg: var(--tm-green-soft, #e6f5ef); --bs-table-border-color: var(--tm-green-border, #a8d9be); }

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