/*
 * Helix Technologies - Theme-Aware Component Overrides
 * Place: resources/css/helix-theme-overrides.css
 *
 * Overrides Tabler/Bootstrap components using --hx-* semantic tokens
 * from helix-erp-palette.css. Works with both light and dark modes
 * via Backpack's data-bs-theme switcher.
 */

/* =========================================================================
   BADGES
   ========================================================================= */

.badge { font-size: 0.7rem; font-weight: 600; padding: 0.35em 0.7em; letter-spacing: 0.03em; }
.badge.bg-success { background: var(--hx-badge-success-bg) !important; color: var(--hx-badge-success-text) !important; border: 1px solid var(--hx-badge-success-border); }
.badge.bg-danger { background: var(--hx-badge-danger-bg) !important; color: var(--hx-badge-danger-text) !important; border: 1px solid var(--hx-badge-danger-border); }
.badge.bg-warning { background: var(--hx-badge-warning-bg) !important; color: var(--hx-badge-warning-text) !important; border: 1px solid var(--hx-badge-warning-border); }
.badge.bg-info { background: var(--hx-badge-info-bg) !important; color: var(--hx-badge-info-text) !important; border: 1px solid var(--hx-badge-info-border); }
.badge.bg-primary { background: var(--hx-badge-primary-bg) !important; color: var(--hx-badge-primary-text) !important; border: 1px solid var(--hx-badge-primary-border); }
.badge.bg-secondary { background: var(--hx-badge-secondary-bg) !important; color: var(--hx-badge-secondary-text) !important; border: 1px solid var(--hx-badge-secondary-border); }

/* =========================================================================
   CARDS
   ========================================================================= */

.card { border: 1px solid var(--hx-border); border-radius: 10px; background: var(--hx-surface); }
.card-header { border-bottom: 1px solid var(--hx-border); background: transparent; }
.card-header strong { color: var(--hx-text-muted) !important; }

/* =========================================================================
   TABLES
   ========================================================================= */

.table th { font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--hx-text-muted); }
.table td { color: var(--hx-text); }
.table .text-muted { color: var(--hx-text-muted) !important; }

/* =========================================================================
   DROPDOWNS (page-level, not navbar)
   ========================================================================= */

.page-body .dropdown-menu { background: var(--hx-dropdown-bg); border: 1px solid var(--hx-border-strong); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.page-body .dropdown-item { color: var(--hx-dropdown-text); border-radius: 4px; }
.page-body .dropdown-item:hover { background: var(--hx-surface-hover); color: var(--hx-text); }
.page-body .dropdown-item.active { background: rgba(var(--helix-morado-rgb), 0.15); color: var(--helix-morado); }
.page-body .dropdown-divider { border-color: var(--hx-border); }

/* =========================================================================
   BUTTONS
   ========================================================================= */

.btn-primary { background: var(--helix-morado); border-color: var(--helix-morado); }
.btn-primary:hover { background: var(--helix-morado-hover); border-color: var(--helix-morado-hover); box-shadow: 0 4px 12px rgba(var(--helix-morado-rgb), 0.3); }
.btn-outline-primary { color: var(--helix-morado); border-color: var(--helix-morado); }
.btn-outline-primary:hover { background: var(--helix-morado); border-color: var(--helix-morado); }

/* =========================================================================
   LINKS
   ========================================================================= */

a { color: var(--helix-morado); }
a:hover { color: var(--helix-morado-hover); }

/* =========================================================================
   ALERTS
   ========================================================================= */

.alert-success { background: var(--hx-alert-success-bg); border-color: var(--hx-alert-success-border); color: var(--hx-verde-text); }
.alert-danger { background: var(--hx-alert-danger-bg); border-color: var(--hx-alert-danger-border); color: var(--hx-rosa-text); }
.alert-warning { background: var(--hx-alert-warning-bg); border-color: var(--hx-alert-warning-border); color: var(--helix-naranja); }
.alert a { color: inherit; text-decoration: underline; }

/* =========================================================================
   FORMS
   ========================================================================= */

.form-control, .form-select { color: var(--hx-input-text); background-color: var(--hx-input-bg); border-color: var(--hx-border-strong); }
.form-control:focus, .form-select:focus { background-color: var(--hx-input-bg); color: var(--hx-input-text); border-color: var(--helix-morado); box-shadow: 0 0 0 0.25rem rgba(var(--helix-morado-rgb), 0.15); }
.form-control::placeholder { color: var(--hx-input-placeholder); }
.input-group-text { background-color: var(--hx-surface-hover); border-color: var(--hx-border-strong); color: var(--hx-text-muted); }

input[readonly], select[disabled], .form-control[readonly], .form-select:disabled {
    background-color: var(--hx-input-disabled) !important;
    color: var(--hx-input-disabled-text) !important;
    cursor: not-allowed;
    opacity: 1 !important;
    border-color: var(--hx-border) !important;
}

/* =========================================================================
   TEXT UTILITIES
   ========================================================================= */

.text-muted { color: var(--hx-text-muted) !important; }
.form-label { color: var(--hx-text); }
.page-body { color: var(--hx-text); }

/* =========================================================================
   PRE / CODE
   ========================================================================= */

pre { color: var(--hx-pre-text); background: var(--hx-pre-bg) !important; }
.bg-light { background: var(--hx-pre-bg) !important; color: var(--hx-pre-text) !important; }

/* =========================================================================
   TOM SELECT (theme-aware)
   ========================================================================= */

.ts-wrapper .ts-control { background: var(--hx-input-bg) !important; border-color: var(--hx-border-strong) !important; color: var(--hx-input-text) !important; }
.ts-wrapper .ts-control input { color: var(--hx-input-text) !important; }
.ts-wrapper .ts-control .item { color: var(--hx-input-text); }
.ts-wrapper.focus .ts-control { border-color: var(--helix-morado) !important; box-shadow: 0 0 0 0.25rem rgba(var(--helix-morado-rgb), 0.15) !important; }
.ts-dropdown { background: var(--hx-dropdown-bg) !important; border-color: rgba(var(--helix-morado-rgb), 0.25) !important; color: var(--hx-text); }
.ts-dropdown .option { color: var(--hx-text); }
.ts-dropdown .option:hover, .ts-dropdown .active { background: rgba(var(--helix-morado-rgb), 0.12) !important; }
.ts-dropdown .option.selected { background: rgba(var(--helix-morado-rgb), 0.2) !important; }

/* =========================================================================
   FOOTER
   ========================================================================= */

footer a { color: var(--helix-morado); }