/* ==========================================
   Clean Data v2.1 — Custom Overrides
   ========================================== */

/* Form validation error text */
.error {
    color: var(--cd-danger, #ef4444);
    font-size: 0.8125rem;
}

/* Badge for status */
.badge-active {
    background-color: var(--cd-success, #10b981);
    color: #fff;
}

.badge-inactive {
    background-color: var(--cd-danger, #ef4444);
    color: #fff;
}

.toggle-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
}

.toggle-status.badge-active,
.toggle-status.badge-active:hover,
.toggle-status.badge-active:focus {
    background-color: var(--cd-success, #10b981) !important;
    color: #fff !important;
}

.toggle-status.badge-inactive,
.toggle-status.badge-inactive:hover,
.toggle-status.badge-inactive:focus {
    background-color: var(--cd-danger, #ef4444) !important;
    color: #fff !important;
}

/* Button variants matching theme */
.btn-edit {
    background-color: var(--cd-accent, #3b82f6);
    color: #fff;
    border: none;
}

.btn-edit:hover {
    background-color: var(--cd-accent-hover, #2563eb);
    color: #fff;
}

.btn-custom {
    background-color: var(--cd-primary-light, #2d5a8e);
    color: #fff;
    border: none;
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--cd-radius-sm, 0.5rem);
}

.btn-custom:hover {
    background-color: var(--cd-primary, #1e3a5f);
    color: #fff;
}

/* Table header banner */
.table-header {
    background: var(--cd-primary, #1e3a5f);
    color: #fff;
    padding: 10px 16px;
    border-radius: var(--cd-radius-sm, 0.5rem) var(--cd-radius-sm, 0.5rem) 0 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

/* Items per page selector */
.items-per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

/* ==========================================
   Phase 4 — Global Polish
   ========================================== */

/* Pagination theming */
.pagination .page-link {
    color: var(--cd-primary, #1e3a5f);
    border-color: var(--cd-border, #e2e8f0);
    font-size: 0.875rem;
}

.pagination .page-link:hover {
    background-color: var(--cd-bg, #f1f5f9);
    color: var(--cd-accent, #3b82f6);
}

.pagination .page-item.active .page-link {
    background-color: var(--cd-accent, #3b82f6);
    border-color: var(--cd-accent, #3b82f6);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--cd-text-light, #94a3b8);
}

/* Modal consistency */
.modal-header {
    background-color: var(--cd-bg, #f1f5f9);
    border-bottom: 1px solid var(--cd-border, #e2e8f0);
}

.modal-header .modal-title {
    font-weight: 600;
    color: var(--cd-primary, #1e3a5f);
}

.modal-footer {
    border-top: 1px solid var(--cd-border, #e2e8f0);
}

/* Card refinements */
.card {
    border-color: var(--cd-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-footer {
    background-color: var(--cd-bg, #f1f5f9);
    border-top: 1px solid var(--cd-border, #e2e8f0);
}

/* Empty state pattern */
.cd-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--cd-text-light, #94a3b8);
}

.cd-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

/* Nav tabs theme */
.nav-tabs .nav-link {
    color: var(--cd-text-light, #94a3b8);
    font-weight: 500;
}

.nav-tabs .nav-link.active {
    color: var(--cd-primary, #1e3a5f);
    font-weight: 600;
    border-color: var(--cd-border, #e2e8f0) var(--cd-border, #e2e8f0) #fff;
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    color: var(--cd-accent, #3b82f6);
}

/* DataTables overrides */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--cd-border, #e2e8f0);
    border-radius: var(--cd-radius-sm, 0.5rem);
    padding: 0.375rem 0.75rem;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--cd-border, #e2e8f0);
    border-radius: var(--cd-radius-sm, 0.5rem);
    padding: 0.25rem 0.5rem;
}

/* Form check inputs theme */
.form-check-input:checked {
    background-color: var(--cd-accent, #3b82f6);
    border-color: var(--cd-accent, #3b82f6);
}

/* Alert refinements */
.alert {
    border-radius: var(--cd-radius-sm, 0.5rem);
    font-size: 0.9rem;
}