/* Additional Theme Updates for AI Interface Components */

/* Data Table Container Updates */
.data-table-container {
    background: var(--bg-glass);
    color: var(--text-primary);
}

.table-header {
    border-bottom: 2px solid var(--border-accent);
}

.table-title {
    color: var(--text-primary);
}

.table-title i {
    color: var(--accent-primary);
}

.table-filter {
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
}

.table-filter:hover {
    background: var(--bg-glass-active);
    border-color: var(--border-accent-hover);
}

.table-filter:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px var(--shadow-accent);
}

.refresh-btn {
    background: var(--border-accent);
    border: 1px solid var(--border-accent-hover);
    color: var(--accent-primary);
}

.refresh-btn:hover {
    background: var(--border-accent-hover);
    border-color: var(--border-accent-active);
}

/* Table Wrapper */
.table-wrapper {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-primary);
}

.sortable-table thead {
    background: var(--bg-panel);
}

.sortable-table th {
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-accent);
}

.sortable-table th.sortable:hover {
    background: var(--border-accent);
}

.sortable-table th i {
    color: var(--text-disabled);
}

.sortable-table th.sorting-asc i::before,
.sortable-table th.sorting-desc i::before {
    color: var(--accent-primary);
}

.sortable-table tbody tr {
    border-bottom: 1px solid var(--border-primary);
}

.sortable-table tbody tr:hover {
    background: var(--bg-glass-hover);
}

.sortable-table td {
    color: var(--text-tertiary);
}

/* Action Buttons */
.action-btn {
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
}

.action-btn:hover {
    background: var(--border-accent);
    border-color: var(--border-accent-hover);
    color: var(--accent-primary);
}

/* Table Footer */
.table-footer {
    border-top: 1px solid var(--border-primary);
}

.table-info {
    color: var(--text-disabled);
}

.pagination-btn {
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-secondary);
    color: var(--text-tertiary);
}

.pagination-btn:hover:not(:disabled) {
    background: var(--border-accent);
    border-color: var(--border-accent-hover);
    color: var(--accent-primary);
}

.page-info {
    color: var(--text-disabled);
}

/* Profile Section Updates */
.profile-container {
    background: var(--bg-glass);
}

.profile-header {
    border-bottom: 2px solid var(--border-accent-hover);
}

.profile-title {
    color: var(--text-primary);
}

.profile-title i {
    color: var(--accent-primary);
}

.profile-info-card,
.profile-membership-card,
.profile-upload-card {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-primary);
}

.profile-info-card:hover,
.profile-membership-card:hover,
.profile-upload-card:hover {
    background: var(--bg-glass);
    border-color: var(--border-accent-hover);
}

.profile-card-header {
    border-bottom: 1px solid var(--border-accent);
}

.profile-card-header i {
    color: var(--accent-primary);
}

.profile-card-title {
    color: var(--text-primary);
}

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

.profile-label i {
    color: var(--accent-primary);
}

.profile-value {
    color: var(--text-primary);
    background: var(--bg-glass);
    border: 1px solid var(--border-secondary);
}

.profile-value:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-accent-hover);
}

.profile-display-name {
    color: var(--text-primary);
}

.profile-display-username {
    color: var(--accent-primary);
}

/* Membership Information */
.membership-metric {
    background: var(--bg-glass-hover);
    border-left: 3px solid var(--accent-primary);
}

.membership-metric:hover {
    background: var(--border-accent);
}

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

.membership-value {
    color: var(--text-primary);
}

/* Accounts Section */
.accounts-container {
    background: var(--bg-glass);
}

.accounts-header {
    border-bottom: 2px solid var(--border-accent-hover);
}

.accounts-title {
    color: var(--text-primary);
}

.accounts-title i {
    color: var(--accent-primary);
}

.add-account-btn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
}

.exchange-card {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-primary);
}

.exchange-card:hover {
    background: var(--bg-glass);
    border-color: var(--border-accent-hover);
}

.exchange-title {
    color: var(--text-primary);
}

.exchange-login {
    color: var(--text-primary);
}

.exchange-login i {
    color: var(--accent-primary);
}

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

.password-toggle {
    color: var(--accent-primary);
}

.password-toggle:hover {
    color: var(--accent-secondary);
}

.exchange-date {
    color: var(--text-subtle);
}

.exchange-date i {
    color: var(--accent-primary);
}

.exchange-card-actions {
    border-top: 1px solid var(--border-primary);
}

.exchange-action-btn {
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-accent-hover);
    color: var(--accent-primary);
}

.exchange-action-btn:hover {
    background: var(--border-accent);
    border-color: var(--accent-primary);
}

/* Mobile Trigger Buttons */
.mobile-trigger-btn {
    background: var(--bg-panel);
    border: 1px solid var(--border-accent-hover);
    color: var(--accent-primary);
    box-shadow: 0 8px 25px var(--shadow-light);
}

.mobile-trigger-btn:hover {
    background: var(--bg-glass-hover);
    border-color: var(--border-accent-active);
    box-shadow: 0 12px 35px var(--shadow-medium);
}

.mobile-close-btn {
    background: var(--bg-glass-hover);
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
}

.mobile-close-btn:hover {
    background: var(--bg-glass-active);
    border-color: var(--border-accent);
}

/* Trigger Tooltip */
.trigger-tooltip {
    background: var(--bg-panel);
    color: var(--text-primary);
}

/* Light Mode Body Background Override */
.light-mode {
    background: var(--bg-primary) !important;
}

.light-mode .page {
    background: var(--bg-primary) !important;
}

.light-mode .full-panel {
    background: #e1e1e1 !important;
}

/* Light Mode Left Section Override */
.light-mode .left-section {
    background: var(--bg-panel) !important;
    border-right: 1px solid var(--border-primary) !important;
}

/* Light Mode Right Section Override */
.light-mode .right-section {
    background: var(--bg-panel) !important;
    border-left: 1px solid var(--border-primary) !important;
}

/* Light Mode Center Section Override */
.light-mode .center-section {
    background: var(--bg-primary) !important;
}

/* Light Mode Mobile Overlays */
.light-mode .left-section.mobile-active,
.light-mode .right-section.mobile-active {
    background: var(--bg-panel) !important;
}

/* Upgrade Section Styling for Light Mode */
.light-mode .upgrade-container {
    background: var(--bg-glass);
}

.light-mode .upgrade-title {
    color: var(--text-primary);
}

.light-mode .upgrade-subtitle {
    color: var(--text-muted);
}

.light-mode .plan-status-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-primary);
}

.light-mode .plan-status-info h4 {
    color: var(--text-primary);
}

.light-mode .plan-status-info p {
    color: var(--text-disabled);
}

.light-mode .upgrade-panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
}

.light-mode .plan-card-name {
    color: var(--text-primary);
}

.light-mode .plan-period {
    color: var(--text-muted);
}

.light-mode .feature-item {
    color: var(--text-tertiary);
    border-bottom: 1px solid var(--border-primary);
}

.light-mode .feature-item i {
    color: var(--accent-primary);
}

.light-mode .coupon-section {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-primary);
}

.light-mode .coupon-header {
    color: var(--text-muted);
}

.light-mode .coupon-input {
    background: var(--bg-panel-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.light-mode .coupon-input::placeholder {
    color: var(--text-subtle);
}