/* ===============================
   CraftElevators — Bootstrap Overrides
   =============================== */

/* --- Color Utilities --- */
.text-primary,
a.text-primary,
.text-primary:visited {
    color: var(--color-primary) !important;
}

.text-secondary,
a.text-secondary,
.text-secondary:visited {
    color: var(--color-accent) !important;
}

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

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

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

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

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

.text-muted {
    color: var(--color-gray);
    opacity: 0.7;
}

/* --- Background Utilities --- */
.bg-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.bg-secondary {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
}

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

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

.bg-dark {
    background-color: var(--color-charcoal) !important;
    color: var(--color-white) !important;
}

.bg-light {
    background-color: var(--color-white) !important;
    color: var(--color-charcoal) !important;
}

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

/* --- Borders (optional, for subtle theming) --- */
.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-accent) !important;
}

.border-success {
    border-color: var(--color-success) !important;
}

.border-danger {
    border-color: var(--color-danger) !important;
}

.border-dark {
    border-color: var(--color-charcoal) !important;
}

/* --- Buttons --- */
.btn,
.rts-btn {
    font-family: var(--font-primary);
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    padding: 10px 24px;
    border: none;
    box-shadow: none;
    transition: background 0.15s, color 0.15s, border 0.15s;
}

    .btn-primary,
    .rts-btn.btn-primary {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
        border: none;
    }

        .btn-primary:hover,
        .btn-primary:focus,
        .rts-btn.btn-primary:hover,
        .rts-btn.btn-primary:focus {
            background-color: var(--color-accent) !important;
            color: var(--color-white) !important;
        }

.btn-secondary {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    border: none;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
    }

.btn-outline-primary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary) !important;
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
    }

.btn-outline-secondary {
    background: transparent !important;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-accent) !important;
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus {
        background-color: var(--color-accent) !important;
        color: var(--color-white) !important;
    }

/* --- Card --- */
.card {
    background: var(--color-card-bg);
    border-radius: var(--border-radius-lg);
    border: none;
    box-shadow: var(--box-shadow-card);
    color: var(--color-gray);
}

.card-title, .card-header, .card-footer {
    color: var(--color-charcoal);
    font-family: var(--font-primary);
}

.card:hover {
    box-shadow: var(--box-shadow-card-hover);
}

/* --- Alerts --- */
.alert-primary {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
}

.alert-secondary {
    background: var(--color-accent);
    color: var(--color-white);
    border: none;
}

.alert-success {
    background: var(--color-success);
    color: var(--color-white);
    border: none;
}

.alert-danger {
    background: var(--color-danger);
    color: var(--color-white);
    border: none;
}

.alert-info {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
}

.alert-dark {
    background: var(--color-charcoal);
    color: var(--color-white);
    border: none;
}

.alert-light {
    background: var(--color-white);
    color: var(--color-charcoal);
    border: 1px solid var(--color-border);
}

/* --- Navs / Pagination --- */
.nav-link,
.page-link {
    color: var(--color-primary);
    font-family: var(--font-primary);
}

    .nav-link.active,
    .page-item.active .page-link,
    .nav-link:focus,
    .page-link:focus {
        color: var(--color-accent);
        background: var(--color-primary);
        border-radius: var(--border-radius-sm);
    }

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

.pagination .active .page-link {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* --- Progress, Badges, and Misc --- */
.progress-bar {
    background-color: var(--color-primary);
}

.badge-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.badge-secondary {
    background: var(--color-accent);
    color: var(--color-white);
}

/* --- Forms --- */
.form-control:focus, select:focus, textarea:focus, input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0,168,157,0.10);
}

input[type="email"], input[type="text"], textarea, select {
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-border);
    background: #fafbfc;
    color: var(--color-gray);
    font-size: 1rem;
    padding: 12px;
    transition: border 0.2s;
}

/* --- Table --- */
.table-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.table-secondary {
    background: var(--color-accent);
    color: var(--color-white);
}

.table thead th {
    color: var(--color-charcoal);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8f9fa;
}

/* --- Overwrite Bootstrap's .btn:focus visible outline for a11y --- */
.btn:focus, .rts-btn:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* --- Misc Utilities --- */
hr {
    border-top: 1.5px solid var(--color-border);
}

::-webkit-input-placeholder {
    color: var(--color-gray);
    opacity: 0.88;
}

::-moz-placeholder {
    color: var(--color-gray);
    opacity: 0.88;
}

:-ms-input-placeholder {
    color: var(--color-gray);
    opacity: 0.88;
}

::placeholder {
    color: var(--color-gray);
    opacity: 0.88;
}