/**
 * Element Plus system upgrade layer.
 * Loaded after page-specific CSS to align legacy static pages with Element Plus tokens.
 */

:where(button, input, select, textarea) {
    font-family: var(--font-family);
}

:where(input, select, textarea, .filter-input, .filter-select, .date-select, .compact-input, .page-input) {
    border-color: var(--el-border-color, #DCDFE6) !important;
    border-radius: var(--radius-md, 4px) !important;
    background-color: var(--color-surface, #FFFFFF) !important;
    color: var(--color-text, #303133) !important;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

:where(input, select, textarea, .filter-input, .filter-select, .date-select, .compact-input, .page-input):hover {
    border-color: var(--el-text-color-placeholder, #A8ABB2) !important;
}

:where(input, select, textarea, .filter-input, .filter-select, .date-select, .compact-input, .page-input):focus {
    border-color: var(--color-accent, #409EFF) !important;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.12) !important;
    outline: none !important;
}

:where(.btn, .btn-primary, .btn-accent, .btn-secondary, .btn-dark, .run-button, .logout-btn, .btn-sm, .btn-sm-primary) {
    border-radius: var(--radius-md, 4px) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition) !important;
}

:where(.btn-primary, .btn-accent, .btn-sm-primary, .run-button) {
    border: 1px solid var(--color-accent, #409EFF) !important;
    background: var(--color-accent, #409EFF) !important;
    color: #fff !important;
    box-shadow: none !important;
}

:where(.btn-primary, .btn-accent, .btn-sm-primary, .run-button):hover:not(:disabled) {
    border-color: var(--el-color-primary-light-3, #79BBFF) !important;
    background: var(--el-color-primary-light-3, #79BBFF) !important;
    color: #fff !important;
}

:where(.btn-secondary, .btn-dark, .logout-btn, .btn-sm) {
    border: 1px solid var(--el-border-color, #DCDFE6) !important;
    background: var(--color-surface, #FFFFFF) !important;
    color: var(--color-text-secondary, #606266) !important;
    box-shadow: none !important;
}

:where(.btn-secondary, .btn-dark, .logout-btn, .btn-sm):hover:not(:disabled) {
    border-color: var(--el-color-primary-light-7, #C6E2FF) !important;
    background: var(--color-accent-light, #ECF5FF) !important;
    color: var(--color-accent, #409EFF) !important;
}

:where(button:disabled, .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-sm:disabled, .btn-sm-primary:disabled) {
    cursor: not-allowed !important;
    opacity: 0.55 !important;
}

:where(.card, .stat-card, .profile-list, .editor-section, .preview-panel, .asset-card, .metric-card, .panel, .table-panel) {
    border-color: var(--color-border, #E4E7ED) !important;
    border-radius: var(--radius-lg, 8px) !important;
    background: var(--color-surface, #FFFFFF) !important;
    box-shadow: var(--shadow-sm, 0 0 6px rgba(0, 0, 0, 0.06)) !important;
}

:where(.data-table, table) th {
    border-bottom-color: var(--color-border, #E4E7ED) !important;
    background: var(--el-fill-color-light, #F5F7FA) !important;
    color: var(--color-text-secondary, #606266) !important;
    letter-spacing: 0 !important;
}

:where(.data-table, table) td {
    border-bottom-color: var(--color-border, #E4E7ED) !important;
}

:where(.tab, .cs-tabs button, .tab-nav button, .replay-mode-tabs button, .dimension-tabs button, .segmented button, .platform-tabs button, .recon-tabs button, .material-tabs button, .module-rail button, .collection-bar button) {
    border-radius: var(--radius-md, 4px) !important;
    letter-spacing: 0 !important;
}

:where(.tab.active, .cs-tabs button.active, .tab-nav button.active, .replay-mode-tabs button.active, .dimension-tabs button.active, .segmented button.active, .platform-tabs button.active, .recon-tabs button.active, .material-tabs button.active, .module-rail button.active, .collection-bar button.active) {
    border-color: var(--color-accent, #409EFF) !important;
    background: var(--color-accent-light, #ECF5FF) !important;
    color: var(--color-accent, #409EFF) !important;
}

:where(.badge, .tag, .status-pill, .match-tag, .body-type-tag) {
    border-radius: var(--radius-sm, 4px) !important;
}

:where(.header, .admin-header) {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom-color: var(--color-border, #E4E7ED) !important;
}