/*
 * Ingenewit theme overrides.
 *
 * Material Dashboard 2 ships #e91e63 (pink) as its $primary, but this app's
 * identity is the blue gradient already used by .bg-gradient-primary on every
 * card header and on the active sidebar item. Anything that fell back to the
 * stock solid primary - buttons on the detail screens, the active pagination
 * page - rendered pink and read as off-theme. Map those surfaces onto the same
 * blue so the whole admin is one theme.
 *
 * Loaded after material-dashboard.css in components/layouts/base.blade.php.
 */

:root {
    --ing-primary: #1a73e8;
    --ing-primary-light: #49a3f1;
    --ing-primary-dark: #1462c8;
    --ing-primary-gradient: linear-gradient(195deg, var(--ing-primary-light) 0%, var(--ing-primary) 100%);
}

/* ---------------------------------------------------------------- buttons */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled) {
    background-image: var(--ing-primary-gradient);
    background-color: var(--ing-primary);
    border-color: transparent;
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):focus {
    background-image: var(--ing-primary-gradient);
    background-color: var(--ing-primary-dark);
    border-color: transparent;
    color: #fff;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-image: var(--ing-primary-gradient);
    background-color: var(--ing-primary);
    border-color: transparent;
    color: #fff;
}

.btn-outline-primary {
    color: var(--ing-primary);
    border-color: var(--ing-primary);
    background-image: none;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--ing-primary);
    border-color: var(--ing-primary);
    color: #fff;
}

/* ----------------------------------------------------------------- shadows
 * Material Dashboard tints every primary shadow with #e91e63, so even the blue
 * .bg-gradient-primary headers and buttons sat inside a red glow.
 */
.btn-primary,
.btn.bg-gradient-primary {
    box-shadow: 0 3px 3px 0 rgba(26, 115, 232, 0.15),
                0 3px 1px -2px rgba(26, 115, 232, 0.2),
                0 1px 5px 0 rgba(26, 115, 232, 0.15);
}

.btn-primary:hover,
.btn.bg-gradient-primary:hover {
    /* the stock rule repaints the background pink on hover as well */
    background-color: var(--ing-primary-dark);
    border-color: transparent;
    box-shadow: 0 14px 26px -12px rgba(26, 115, 232, 0.4),
                0 4px 23px 0 rgba(26, 115, 232, 0.15),
                0 8px 10px -5px rgba(26, 115, 232, 0.2);
}

.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn.bg-gradient-primary:focus {
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.5);
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.5);
}

.btn-primary .btn.bg-outline-primary,
.btn.bg-gradient-primary .btn.bg-outline-primary {
    border-color: var(--ing-primary);
}

/* Used on every card header alongside .bg-gradient-primary */
.shadow-primary {
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14),
                0 7px 10px -5px rgba(26, 115, 232, 0.4) !important;
}

.btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
}

/* ------------------------------------------------------------- pagination */
.pagination .page-item.active .page-link,
.pagination .page-item.active > .page-link {
    background-image: var(--ing-primary-gradient);
    background-color: var(--ing-primary);
    border-color: transparent;
    color: #fff;
}

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

.pagination .page-link:hover,
.pagination .page-link:focus {
    color: var(--ing-primary-dark);
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
}

.pagination .page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(26, 115, 232, 0.25);
}

/* ------------------------------------------------- Livewire request feedback
 * A Livewire round trip on this app can take many seconds (remote DB). While
 * one is in flight the response will morph the DOM, which silently closes any
 * native <select> popup or Bootstrap dropdown the user has opened - the list
 * appears to "open and immediately close". Show that the page is busy and stop
 * clicks landing on the controls that are about to be replaced.
 */
body.lw-busy::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 20000;
    background: linear-gradient(90deg, transparent 0%, var(--ing-primary-light) 50%, transparent 100%);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: lw-busy-bar 1.1s linear infinite;
}

@keyframes lw-busy-bar {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

body.lw-busy select,
body.lw-busy [data-bs-toggle="dropdown"] {
    pointer-events: none;
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    body.lw-busy::before { animation: none; background-position: 0 0; background-size: 100% 100%; }
}

/* ------------------------------------------------- checkboxes and radios
 * The theme sets a blue gradient on :checked early on, then repaints it
 * #e91e63 further down the file (see .form-check:not(.form-switch) rules), so
 * every ticked checkbox rendered pink. Put the checked state back on the blue.
 */
.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked,
.form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
    border-color: var(--ing-primary);
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"]:checked {
    background-color: var(--ing-primary);
    background-image: var(--ing-primary-gradient);
}

/* Tri-state "select all" boxes were hard-coded pink too */
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--ing-primary);
    border-color: var(--ing-primary);
}

.form-check-input:focus {
    border-color: var(--ing-primary);
}

/* --------------------------------------------------------------- utilities */
.text-primary {
    color: var(--ing-primary) !important;
}

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

.badge.bg-primary {
    background-image: var(--ing-primary-gradient);
}

/* Form controls focus to the theme blue rather than the stock pink */
.form-control:focus,
.form-select:focus {
    border-color: var(--ing-primary);
}