/**
 * Unified buttons – loads last. Fixes unreadable text and inconsistent colors.
 */

.btn,
a.btn,
button.btn,
input.btn[type="submit"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.65rem 1.15rem !important;
    border-radius: 8px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s !important;
    box-shadow: none !important;
    width: auto !important;
}

.btn-block,
a.btn-block,
button.btn-block,
input.btn-block[type="submit"] {
    width: 100% !important;
    max-width: 100% !important;
}

body.auth-page .auth-form-panel .btn,
body.auth-page .auth-form-panel .btn-primary,
body.auth-page .auth-form-panel .btn-secondary,
body.auth-page .auth-form-panel .btn-google,
body.auth-page .auth-form-panel .btn-facebook {
    width: 100% !important;
    max-width: 100% !important;
}

.btn i,
a.btn i {
    color: inherit !important;
}

/* Primary – green, white text */
.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary[type="submit"],
button[type="submit"].btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
    background: var(--primary-dark) !important;
    border-color: var(--primary-dark) !important;
    color: #ffffff !important;
    transform: none !important;
}

.btn-primary:disabled,
.btn-primary[disabled] {
    background: #9cb8b0 !important;
    border-color: #9cb8b0 !important;
    color: #ffffff !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
}

/* Secondary – light surface, dark text */
.btn-secondary,
a.btn-secondary,
button.btn-secondary {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

.btn-secondary:hover,
a.btn-secondary:hover,
button.btn-secondary:hover {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary-dark) !important;
    transform: none !important;
}

/* Outline */
.btn-outline,
a.btn-outline {
    background: transparent !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}

.btn-outline:hover,
a.btn-outline:hover {
    background: var(--primary-soft) !important;
    color: var(--primary-dark) !important;
}

/* Status buttons */
.btn-success,
a.btn-success,
button.btn-success {
    background: var(--success) !important;
    border-color: var(--success) !important;
    color: #ffffff !important;
}

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

.btn-warning,
a.btn-warning,
button.btn-warning {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}

.btn-small,
a.btn-small {
    padding: 0.4rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

/* Lesson/exam category filter chips */
.category-btn {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

.category-btn:hover,
.category-btn.active {
    background: var(--primary-soft) !important;
    border-color: var(--primary) !important;
    color: var(--primary-dark) !important;
}

/* OAuth login — Google outline (zichtbaar op witte panel) + Facebook filled */
.btn-google,
a.btn-google,
span.btn-google {
    background: #ffffff !important;
    color: #1a2e28 !important;
    border: 1px solid #b8c9c3 !important;
    box-shadow: 0 1px 2px rgba(15, 42, 32, 0.08) !important;
}

.btn-google:hover,
a.btn-google:hover {
    background: #f4f8f6 !important;
    border-color: #7fa396 !important;
    color: #1a2e28 !important;
    box-shadow: 0 2px 6px rgba(15, 42, 32, 0.1) !important;
}

.btn-google--disabled,
span.btn-google.btn-google--disabled {
    background: #f8faf9 !important;
    border-color: #d8e2df !important;
    color: #6b7f78 !important;
}

.btn-facebook,
a.btn-facebook,
span.btn-facebook {
    background: #1877f2 !important;
    border: 1px solid #1877f2 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(24, 119, 242, 0.28) !important;
}

.btn-facebook:hover,
a.btn-facebook:hover {
    background: #166fe5 !important;
    border-color: #166fe5 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(24, 119, 242, 0.35) !important;
}

.btn-facebook--disabled,
span.btn-facebook.btn-facebook--disabled {
    background: #8bb8f5 !important;
    border-color: #8bb8f5 !important;
    color: #ffffff !important;
}

body.auth-page .auth-oauth-buttons .btn-google,
body.auth-page .auth-oauth-buttons .btn-facebook {
    min-height: 2.75rem !important;
}

/* Generic button without .btn class */
button[type="submit"]:not(.btn) {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
    padding: 0.65rem 1.15rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}