/*!
 * DAMSY vendor overrides - loaded LAST, after every vendor stylesheet.
 *
 * The vendor files (bootstrap, colors.css, dataTable, jQuery UI, datepicker,
 * select2) are never edited. Their accents are re-pointed at the tokens here,
 * which is why this file must come after them in the cascade.
 *
 * Depends on app-assets/css/damsy-tokens.css being loaded first.
 */
/* =====================================================================
   VENDOR OVERRIDES
   The vendor stylesheets themselves are never edited. Bootstrap's
   .btn-primary is #967ADC (purple) in this build and appears in 220 views;
   only a handful of ids were overridden before, so any other primary button
   rendered purple. These rules close that and the other vendor accents.
   ===================================================================== */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--card);
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.open > .btn-primary.dropdown-toggle {
    background-color: var(--primary-active);
    border-color: var(--primary-active);
    color: var(--card);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: var(--focus-ring);
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-fg);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--primary);
        border-color: var(--primary);
        color: var(--card);
    }

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

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

.badge-primary,
.label-primary {
    background-color: var(--primary);
    color: var(--card);
}

.alert-primary,
.alert-info {
    background-color: var(--primary-soft);
    border-color: var(--primary-border-soft);
    color: var(--primary-dark);
}

a {
    color: var(--primary);
}

    a:hover,
    a:focus {
        color: var(--primary-hover);
    }

/* Bootstrap pagination / nav-pills */
.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

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

.nav-pills .nav-link.active,
.nav-pills > li > a.active {
    background-color: var(--primary);
    color: var(--card);
}

/* DataTables */
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--card) !important;
}

.dataTables_wrapper .paginate_button:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary-border-soft) !important;
    color: var(--primary-dark) !important;
}

table.dataTable tbody tr.selected,
table.dataTable tbody td.selected {
    background-color: var(--primary-tint-strong);
    color: var(--navy);
}

/* jQuery UI (datepickers) */
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

.ui-state-highlight,
.ui-widget-content .ui-state-highlight {
    background: var(--primary-soft);
    border-color: var(--primary-border-soft);
    color: var(--primary-dark);
}

/* Bootstrap datepicker */
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.active,
.datepicker table tr td span.active {
    background-color: var(--primary) !important;
    background-image: none !important;
    border-color: var(--primary) !important;
    color: var(--card) !important;
}

.datepicker table tr td.today {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}

/* Select2 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

/* Form controls: focus uses the brand ring, boundaries use --border-control */
.form-control:focus,
.custom-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
    outline: none;
}

/* Keyboard focus stays visible everywhere, not just on form controls. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Token names that Bootstrap 4 also defines on :root (--primary #007bff,
   --success #28a745, --warning #ffc107). On pages that load bootstrap.min.css
   after the tokens, its values won and every var(--primary) rendered in
   Bootstrap blue. This file loads last, so these win on every page. */
:root {
    --primary: var(--damsy-primary);
    --success: var(--damsy-success);
    --warning: var(--damsy-warning);
}

/* Fonts: the vendor app.css sets the module top nav (#content nav, its
   notification and profile menus, .categories-menu, #sidebar) to
   var(--lato), which beat our Inter declarations. Re-pointing the variable
   puts the whole nav on Inter without editing the vendor file. */
:root {
    --lato: var(--font-sans);
    --poppins: var(--font-sans);
}

/* Placeholder text is text: --muted (5.34:1), never --muted-light (2.56:1).
   opacity:1 because Firefox dims placeholders by default. */
::placeholder {
    color: var(--muted);
    opacity: 1;
}

:disabled::placeholder {
    color: var(--muted-light);
}

/* Status badges with white text: the bright status colours fail 4.5:1 under
   white text, so the badge takes the -text token as its fill. */
.badge-success,
.label-success {
    background-color: var(--success-text);
    color: var(--card);
}

.badge-warning,
.label-warning {
    background-color: var(--warning-text);
    color: var(--card);
}

.badge-danger,
.label-danger {
    background-color: var(--error-text);
    color: var(--card);
}

/* The rest of the vendor purple (#967ADC). Each selector below matches a
   vendor rule at the same or higher specificity, so none can win back. */
.btn-primary.disabled:hover,
.btn-primary:disabled:hover,
.btn-primary.disabled:focus,
.btn-primary.disabled.focus,
.btn-primary:disabled:focus,
.btn-primary:disabled.focus {
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border);
    color: var(--disabled-fg);
}

.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.focus,
.open > .btn-outline-primary.dropdown-toggle {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover,
.btn-primary ~ .dropdown-menu .dropdown-item.active,
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--card);
}

.card-primary,
.tag-primary {
    background-color: var(--primary);
    border-color: var(--primary);
}

.tag-primary.tag-glow,
.bg-primary.tag-glow,
.border-primary.tag-glow,
input:focus ~ .bg-primary {
    box-shadow: 0 0 10px rgba(var(--primary-rgb), .5);
}

.card-outline-primary,
.border-primary {
    border-color: var(--primary) !important;
}

.border-top-primary { border-top-color: var(--primary) !important; }
.border-bottom-primary { border-bottom-color: var(--primary) !important; }
.border-left-primary { border-left-color: var(--primary) !important; }
.border-right-primary { border-right-color: var(--primary) !important; }

.primary,
.floating-label-form-group-with-focus label,
.floating-label-form-group-with-value label {
    color: var(--primary) !important;
}

.overlay-primary {
    background: rgba(var(--primary-rgb), .6);
}

.progress-primary .progress-bar,
.progress-primary[value]::-webkit-progress-value {
    background-color: var(--primary);
}

.progress-primary[value]::-moz-progress-bar {
    background-color: var(--primary);
}

.fonticon-container > .fonticon-wrap {
    border-color: var(--primary);
}

    .fonticon-container > .fonticon-wrap:hover {
        background: var(--primary);
    }

/* The vendor bootstrap.css sets .text-muted, and colors.css .grey.darken-2,
   to white !important. On the light footer (white background) that made the
   copyright line invisible (1:1), e.g. on Operations. */
footer.footer-light .text-muted,
footer.footer-light .grey.darken-2 {
    color: var(--muted) !important;
}

/* Vendor placeholders are more specific than ::placeholder above:
   bootstrap.css .form-control::placeholder #999 (2.85:1), bootstrap-extended
   form .form-control::-webkit-input-placeholder silver (1.8:1), and select2
   #999. Each gets its own rule so a browser that does not know one prefixed
   pseudo-element does not drop the rest. */
.form-control::placeholder,
form .form-control::placeholder {
    color: var(--muted);
    opacity: 1;
}

form .form-control::-webkit-input-placeholder {
    color: var(--muted);
}

.form-control:disabled::placeholder {
    color: var(--muted-light);
}

.select2-container--default .select2-selection--single .select2-selection__placeholder,
.select2-container--default .select2-selection--multiple .select2-selection__placeholder,
.select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: var(--muted);
}