/* ========================================
   EasyFile Bootstrap Compatibility Layer
   Overrides Bootstrap 5.3 components to
   use EasyFile Design System tokens.
   Load AFTER bootstrap.min.css.
   ======================================== */

/* ----------------------------------------
   Modals
   ---------------------------------------- */
.modal-content {
    background-color: var(--ef-surface);
    border: 1px solid var(--ef-border);
    border-radius: var(--ef-radius-14);
    box-shadow: var(--ef-shadow-2);
    color: var(--ef-text);
}

.modal-header {
    border-bottom: 1px solid var(--ef-border);
    color: var(--ef-text);
    padding: var(--ef-space-16) var(--ef-space-24);
}

.modal-header .modal-title {
    font-weight: 600;
    color: var(--ef-text);
}

.modal-body {
    padding: var(--ef-space-24);
    color: var(--ef-text);
}

.modal-footer {
    border-top: 1px solid var(--ef-border);
    padding: var(--ef-space-12) var(--ef-space-24);
}

.modal-backdrop {
    background-color: rgba(0,0,0,0.4);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ----------------------------------------
   Buttons
   ---------------------------------------- */
.btn-secondary {
    background-color: var(--ef-surface);
    border-color: var(--ef-border);
    color: var(--ef-text);
}

.btn-secondary:hover {
    background-color: var(--ef-surface-2);
    border-color: var(--ef-border-strong);
    color: var(--ef-text);
}

.btn-danger {
    background-color: var(--ef-color-danger);
    border-color: var(--ef-color-danger);
    color: var(--ef-text-on-primary);
}

.btn-danger:hover {
    background-color: var(--ef-color-danger-hover);
    border-color: var(--ef-color-danger-hover);
    color: var(--ef-text-on-primary);
}

/* ----------------------------------------
   Form Controls
   ---------------------------------------- */
.form-control,
.form-select {
    background-color: var(--ef-surface);
    border-color: var(--ef-border);
    color: var(--ef-text);
    border-radius: var(--ef-radius-6);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--ef-surface);
    border-color: var(--ef-color-primary);
    box-shadow: 0 0 0 2px var(--ef-color-focus);
    color: var(--ef-text);
}

.form-control::placeholder {
    color: var(--ef-text-placeholder);
}

.form-check-input {
    border-color: var(--ef-border-strong);
    background-color: var(--ef-surface);
}

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

.form-check-input:focus {
    border-color: var(--ef-color-primary);
    box-shadow: 0 0 0 2px var(--ef-color-focus);
}

.form-check-label {
    color: var(--ef-text);
}

.form-label {
    color: var(--ef-text);
    font-weight: 600;
    font-size: var(--ef-text-12);
}

/* ----------------------------------------
   Alerts
   ---------------------------------------- */
.alert-danger {
    background-color: var(--ef-error-bg);
    border-color: var(--ef-error-border);
    color: var(--ef-error-text);
}

.alert-success {
    background-color: var(--ef-progress-bg);
    border-color: var(--ef-progress-border);
    color: var(--ef-progress-text);
}

.alert-warning {
    background-color: var(--ef-yellow-bg);
    border-color: var(--ef-yellow);
    color: var(--ef-yellow-text);
}

.alert-info {
    background-color: var(--ef-blue-bg);
    border-color: var(--ef-blue);
    color: var(--ef-blue-text);
}

/* ----------------------------------------
   List Group
   ---------------------------------------- */
.list-group-item {
    background-color: var(--ef-surface);
    border-color: var(--ef-border);
    color: var(--ef-text);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--ef-surface-2);
    color: var(--ef-text);
}

/* ----------------------------------------
   Badges
   ---------------------------------------- */
.badge.bg-secondary {
    background-color: var(--ef-surface-3) !important;
    color: var(--ef-text) !important;
}

.badge.bg-primary {
    background-color: var(--ef-color-primary) !important;
}

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

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

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

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

/* ----------------------------------------
   Links
   ---------------------------------------- */
a {
    color: var(--ef-text-link);
}

a:hover {
    color: var(--ef-color-primary-hover);
}

/* ----------------------------------------
   Cards (Bootstrap)
   ---------------------------------------- */
.card {
    background-color: var(--ef-surface);
    border-color: var(--ef-border);
    border-radius: var(--ef-radius-10);
    box-shadow: var(--ef-shadow-1);
}

/* ----------------------------------------
   Table
   ---------------------------------------- */
.table {
    color: var(--ef-text);
}

.table > thead {
    background-color: var(--ef-surface-2);
}

.table > :not(caption) > * > * {
    border-bottom-color: var(--ef-border);
    background-color: transparent;
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--ef-surface-2);
}

/* ----------------------------------------
   Accordion / Collapse
   ---------------------------------------- */
.accordion-item {
    background-color: var(--ef-surface);
    border-color: var(--ef-border);
    color: var(--ef-text);
}

.accordion-button {
    background-color: var(--ef-surface);
    color: var(--ef-text);
}

.accordion-button:not(.collapsed) {
    background-color: var(--ef-color-primary-bg);
    color: var(--ef-color-primary);
}