/* Vendor-widget color overrides. Bootstrap's own contextual colors
   (btn-primary, panel-primary, navbar-default, labels, alerts...) are now
   red-themed natively via resources/bootstrap/theme.scss (see
   `npm run build:bootstrap` -> public/css/bootstrap.css), so this file only
   covers the jQuery widgets that ship their own hardcoded BS3-blue/yellow
   CSS independent of Bootstrap's version: bootstrap-datepicker,
   bootstrap-datetimepicker, chosen.js, and the nprogress loading bar.

   MetaGridController enqueues datepicker/datetimepicker/chosen CSS *after*
   this file (see app/Http/Controllers/MetaGridController.php), so these
   rules need !important to win the cascade regardless of load order. */

/* --brand-red / --brand-red-dark / --brand-red-light come from style.css's
   :root, loaded earlier — intentionally not redeclared here to avoid the
   two files' palettes drifting apart (this file loads after style.css, so
   a redeclaration here would silently win and shadow style.css's values). */

/* bootstrap-datepicker: "today" (was yellow) and "active" (was blue) */
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover {
    background-image: none !important;
    background-color: var(--brand-red-light) !important;
    border-color: #f3cdd3 !important;
    color: #333333 !important;
}

.datepicker table tr td.range.today,
.datepicker table tr td.range.today:hover,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover {
    background-image: none !important;
    background-color: var(--brand-red-light) !important;
    border-color: #f3cdd3 !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover {
    background-image: none !important;
    background-color: var(--brand-red) !important;
    border-color: var(--brand-red-dark) !important;
    color: #fff !important;
}

/* bootstrap-datetimepicker */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
    background-color: var(--brand-red) !important;
    text-shadow: none;
}

/* nprogress loading bar */
#nprogress .bar {
    background: var(--brand-red);
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--brand-red), 0 0 5px var(--brand-red);
}

#nprogress .spinner-icon {
    border-top-color: var(--brand-red);
    border-left-color: var(--brand-red);
}

/* chosen.js dropdown (used by #kassa selects) */
.chosen-container .chosen-results li.highlighted {
    background-color: var(--brand-red) !important;
    background-image: none !important;
    color: #fff !important;
}

.chosen-container-active .chosen-single,
.chosen-container-active .chosen-choices {
    border-color: var(--brand-red) !important;
    box-shadow: 0 0 5px rgba(221, 21, 51, 0.3) !important;
}

/* remove underline from all link text app-wide */
a,
a:hover,
a:focus {
    text-decoration: none;
}

/* space out grid row action icons (show/edit/delete) so they don't touch */
.grid-action-btn + .grid-action-btn {
    margin-left: .35rem;
}