/* --------------------------------------------------
GLOBAL FORM STYLING (THEME‑AWARE)
-------------------------------------------------- */

/* Labels */
.form-label {
    color: var(--text-dark);
    font-weight: 500;
}

/* Muted text */
.text-muted {
    color: var(--text-muted) !important;
}

/* --------------------------------------------------
INPUTS
-------------------------------------------------- */

/* Base input */
.form-control {
    border: 1px solid var(--border-light);
    color: var(--text-dark);
    background: #fff;
}

/* Hover */
.form-control:hover {
    border-color: var(--brand-primary-light);
}

/* Focus */
.form-control:focus {
    border-color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    box-shadow: none;
    color: var(--text-dark);
}

/* Disabled */
.form-control:disabled {
    background: var(--background-light);
    color: var(--text-muted);
}

/* Base invalid state */
.form-control.is-invalid,
.form-check-input.is-invalid {
    border-color: var(--bs-danger) !important;
}

/* Invalid + focused → red outline */
.form-control.is-invalid:focus,
.form-check-input.is-invalid:focus {
    border-color: var(--bs-danger) !important;
    outline: 2px solid var(--bs-danger) !important;
    box-shadow: none !important;
}

/* INVALID CHECKBOX (red outline only on the box) */
.form-check-input.is-invalid {
    border-color: var(--bs-danger) !important;
    outline: 2px solid var(--bs-danger) !important;
    box-shadow: none !important;
}

/* VALID CHECKBOX (green outline only on the box) */
.form-check-input.is-valid {
    border-color: var(--bs-success) !important;
    outline: 2px solid var(--bs-success) !important;
    box-shadow: none !important;
}

/* Prevent Bootstrap from turning the label red when checkbox is invalid */
.form-check-input.is-invalid ~ .form-check-label {
    color: var(--text-dark) !important;
}

/* Prevent Bootstrap from turning the label green when checkbox is valid */
.form-check-input.is-valid ~ .form-check-label {
    color: var(--text-dark) !important;
}




/* --------------------------------------------------
BUTTONS
-------------------------------------------------- */

.btn-primary {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: #fff;

    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.btn-primary:hover {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.btn-primary:active {
    background: var(--brand-active);
    border-color: var(--brand-active);
}

button.btn:disabled,
button.btn[disabled] {
    pointer-events: auto !important;   /* restore cursor behaviour */
    cursor: not-allowed !important;    /* now works */
}

.btn-outline-danger {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}


/* --------------------------------------------------
DANGER BUTTONS (THEME‑AWARE)
-------------------------------------------------- */

button.btn.btn-danger,
a.btn.btn-danger,
input.btn.btn-danger {
    background: var(--brand-accent) !important;
    border-color: var(--brand-accent) !important;
    color: #fff !important;
}

/* Hover */
button.btn.btn-danger:hover,
a.btn.btn-danger:hover,
input.btn.btn-danger:hover {
    background: var(--brand-accent-dark) !important;
    border-color: var(--brand-accent-dark) !important;
}

/* Active / pressed */
button.btn.btn-danger:active,
a.btn.btn-danger:active,
input.btn.btn-danger:active {
    background: var(--brand-active) !important;
    border-color: var(--brand-active) !important;
}

/* Disabled */
button.btn.btn-danger:disabled,
a.btn.btn-danger:disabled,
input.btn.btn-danger:disabled {
    background: var(--brand-accent-light) !important;
    border-color: var(--brand-accent-light) !important;
    opacity: 0.7 !important;
}

/* Spinner inside danger buttons */
button.btn.btn-danger .spinner-border,
a.btn.btn-danger .spinner-border,
input.btn.btn-danger .spinner-border {
    color: #fff !important;
}


/* --------------------------------------------------
LINKS
-------------------------------------------------- */

.form-link,
a.form-link {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}

.form-link:hover,
a.form-link:hover {
    color: var(--brand-primary-dark);
    text-decoration: underline;
}

/* --------------------------------------------------
CHECKBOXES & RADIOS
-------------------------------------------------- */

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-check-input:focus {
    border-color: var(--brand-primary);
    outline: 2px solid var(--brand-primary);
    box-shadow: none;
}

/* --------------------------------------------------
TOASTS
-------------------------------------------------- */

.toast {
    border-left: 4px solid var(--brand-primary);
    border-radius: 6px;
}

/* Success toast */
.toast-success {
    background: var(--brand-primary-light);
    color: var(--text-dark);
    border-left-color: var(--brand-primary);
}

/* Error toast */
.toast-danger {
    background: var(--brand-accent-light);
    color: var(--text-dark);
    border-left-color: var(--brand-accent);
}

/* Override Bootstrap bg-success/bg-danger if used */
.bg-success {
    background: var(--brand-primary) !important;
}

.bg-danger {
    background: var(--brand-accent) !important;
}

/* --------------------------------------------------
SPINNER INSIDE BUTTONS
-------------------------------------------------- */

button .spinner-border {
    color: #fff;
}

/* --------------------------------------------------
FORM CARD WRAPPERS (OPTIONAL)
-------------------------------------------------- */

.form-card {
    border: 1px solid var(--border-light);
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
}

.form-card h3 {
    color: var(--text-dark);
}


/* Force theme colours on all primary buttons, including spinner state */
button.btn.btn-primary,
#loginBtn {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

button.btn.btn-primary *,
#loginBtn * {
    color: #fff !important;
}


/* Hover */
button.btn.btn-primary:hover,
#loginBtn:hover {
    background: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}

/* Active */
button.btn.btn-primary:active,
#loginBtn:active {
    background: var(--brand-active) !important;
    border-color: var(--brand-active) !important;
}


/* --------------------------------------------------
THEME OVERRIDES FOR ALL TOASTS
-------------------------------------------------- */

/* Base toast container */
.toast {
    background: var(--background-light) !important;
    border: 1px solid var(--border-light) !important;
    border-left: 4px solid var(--brand-primary) !important;
    color: var(--text-dark) !important;
}

/* Toast header */
.toast-header {
    background: var(--background-light) !important;
    color: var(--text-dark) !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* Remove Bootstrap blue icon/text */
.toast .me-auto,
.toast strong,
.toast .toast-body {
    color: var(--text-dark) !important;
}

/* --------------------------------------------------
SOLID THEME TOAST (NO BORDER)
-------------------------------------------------- */

.toast,
.toast-success,
.toast-danger,
.toast-header {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Body text */
.toast .toast-body {
    color: #fff !important;
}

/* Remove Bootstrap blue classes */
.bg-primary,
.text-primary {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* Success and error variants both use solid primary */
.toast-success,
.toast-danger {
    background: var(--brand-primary) !important;
}


/* Edge/Chrome autofill override */
input.form-control:-webkit-autofill,
input.form-control:-webkit-autofill:hover,
input.form-control:-webkit-autofill:focus,
textarea.form-control:-webkit-autofill,
select.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--background-light) inset !important;
    box-shadow: 0 0 0 1000px var(--background-light) inset !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    caret-color: var(--text-dark) !important;
    border-color: var(--brand-primary) !important;
}