/* ===== Bootstrap Variable & Component Overrides ===== */
/* Loaded after bootstrap.rtl.min.css and colors.css */

/* ----- Body ----- */
:root {
    --bs-body-bg: var(--km-body-cream);
    --bs-body-color: var(--km-text-body);
    --bs-body-font-family: var(--km-font-primary);
}

body {
    background-color: var(--km-section-caramel);
}

/* ----- Buttons ----- */
.btn-km-gold {
    background: var(--km-gold-button);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    font-family: var(--km-font-primary);
    font-weight: 400;
    padding: 10px 55px;
    box-shadow: var(--km-gold-shadow);
    transition: opacity 0.2s ease;
}

.btn-km-gold:hover {
    opacity: 0.9;
    color: #1A1A1A;
}

.btn-km-green {
    background: var(--km-green-button);
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    font-family: var(--km-font-primary);
    font-weight: 400;
    padding: 5px 50px;
    box-shadow: var(--km-green-shadow);
    transition: opacity 0.2s ease;
}

.btn-km-green:hover {
    opacity: 0.9;
    color: #FFFFFF;
}

/* ----- Cards ----- */
.card.km-card {
    background: var(--km-card-bg);
    border: 1px solid var(--km-card-border);
    border-radius: var(--km-card-radius);
    box-shadow: var(--km-card-shadow);
    overflow: hidden;
}

/* ----- Tables (Leaderboard) ----- */
.table.km-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--km-text-light);
    border-collapse: separate;
    border-spacing: 0 4px;
}

.table.km-table thead th {
    background-color: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--km-gold-text);
    font-weight: 400;
    padding: 12px 16px;
}

.table.km-table tbody tr {
    background-color: rgba(255, 255, 255, 0.05);
}

.table.km-table tbody td {
    border: none;
    padding: 12px 16px;
    vertical-align: middle;
}

/* ----- Pagination ----- */
.pagination.km-pagination .page-link {
    background-color: transparent;
    border: 1px solid var(--km-card-border);
    color: var(--km-text-body);
    border-radius: var(--km-border-radius-sm);
    margin: 0 2px;
    font-family: var(--km-font-primary);
}

.pagination.km-pagination .page-item.active .page-link {
    background: var(--km-gold-button);
    border-color: var(--km-gold-primary);
    color: #1A1A1A;
}

/* ----- Form Controls ----- */
.form-control.km-input {
    border: 1px solid var(--km-input-border);
    border-radius: var(--km-border-radius-sm);
    padding: 10px 16px;
    font-family: var(--km-font-primary);
    background-color: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control.km-input:focus {
    border-color: var(--km-gold-primary);
    box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.15);
}

/* ----- Utility: Section backgrounds ----- */
.bg-km-cream {
    background-color: var(--km-body-cream);
}

.bg-km-dark {
    background-color: var(--km-section-dark);
}

.bg-km-light {
    background-color: var(--km-section-light);
}

.text-km-gold {
    color: var(--km-gold-text);
}

.text-km-heading {
    color: var(--km-text-heading);
}

.text-km-muted {
    color: var(--km-text-muted);
}