.filter-popover { position: absolute; z-index: 50; min-width: 280px; max-width: 400px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-sm); overflow: hidden; }
.filter-popover.hidden { display: none; }
.filter-popover header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-xs) var(--space-sm); margin: calc(var(--space-sm) * -1) calc(var(--space-sm) * -1) var(--space-sm); border-bottom: 1px solid var(--color-border); }
.filter-popover header h5 { font-size: var(--text-sm); font-weight: 600; }
.filter-popover .filter-close { padding: var(--space-xs); color: var(--color-text-muted); }
.filter-popover .filter-close:hover { color: var(--color-text); }
.filter-tabs { display: flex; gap: var(--space-xs); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-xs); overflow-x: auto; }
.filter-tab { padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); font-weight: 500; color: var(--color-text-secondary); border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; white-space: nowrap; transition: all var(--transition-fast); }
.filter-tab:hover { color: var(--color-primary); background: var(--color-surface-hover); }
.filter-tab.active { color: var(--color-primary); background: rgba(30,58,95,0.1); }
.filter-content { max-height: 300px; overflow-y: auto; }
.filter-section { margin-bottom: var(--space-md); }
.filter-section:last-child { margin-bottom: 0; }
.filter-section label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-xs); }
.filter-options { display: flex; flex-direction: column; gap: var(--space-xs); max-height: 200px; overflow-y: auto; }
.filter-option { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--transition-fast); }
.filter-option:hover { background: var(--color-surface-hover); }
.filter-option input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }
.filter-option span { font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filter-input-row { display: flex; gap: var(--space-xs); margin-top: var(--space-sm); }
.filter-input-row input { flex: 1; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-sm); }
.filter-input-row input:focus { outline: none; border-color: var(--color-border-focus); }
.filter-actions { display: flex; gap: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); margin-top: var(--space-sm); }
.filter-actions .btn { flex: 1; justify-content: center; }

.autocomplete-dropdown { position: absolute; z-index: 50; width: 100%; max-height: 200px; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); margin-top: 2px; }
.autocomplete-dropdown.hidden { display: none; }
.autocomplete-item { padding: var(--space-sm) var(--space-md); cursor: pointer; font-size: var(--text-sm); color: var(--color-text); transition: background var(--transition-fast); }
.autocomplete-item:hover, .autocomplete-item.selected { background: var(--color-surface-hover); color: var(--color-primary); }
.autocomplete-item.create-new { color: var(--color-primary); font-weight: 500; border-top: 1px solid var(--color-border); }
.autocomplete-item kbd { font-family: var(--font-mono); font-size: var(--text-xs); background: var(--color-bg); padding: 1px 4px; border-radius: var(--radius-sm); margin-left: var(--space-sm); color: var(--color-text-muted); }

.datepicker-enhanced { position: relative; }
.datepicker-enhanced .flatpickr-calendar { font-family: var(--font-sans) !important; }
.datepicker-enhanced .flatpickr-day { border-radius: var(--radius-sm) !important; }
.datepicker-enhanced .flatpickr-day.selected, .datepicker-enhanced .flatpickr-day.startRange, .datepicker-enhanced .flatpickr-day.endRange { background: var(--color-primary) !important; border-color: var(--color-primary) !important; }
.datepicker-enhanced .flatpickr-day.inRange { background: rgba(30,58,95,0.1) !important; border-color: rgba(30,58,95,0.1) !important; }

.column-resize-handle { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 30; touch-action: none; }
.column-resize-handle::after { content: ''; position: absolute; top: 50%; right: 2px; width: 1px; height: 60%; background: var(--color-border); transform: translateY(-50%); }
.column-resize-handle:hover::after, .column-resize-handle.dragging::after { background: var(--color-primary); height: 80%; }

.table-header-drag { cursor: grab; }
.table-header-drag.dragging { cursor: grabbing; opacity: 0.5; }
.table-header-drag-over { border-top: 2px solid var(--color-primary); }

.sort-indicator { display: inline-flex; margin-left: var(--space-xs); width: 12px; height: 12px; color: var(--color-text-muted); vertical-align: middle; }
.sort-indicator.active { color: var(--color-primary); }

.status-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.status-filter-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); cursor: pointer; transition: all var(--transition-fast); }
.status-filter-chip input { width: 14px; height: 14px; accent-color: var(--color-primary); }
.status-filter-chip.active { border-color: var(--color-primary); background: rgba(30,58,95,0.1); }
.status-filter-chip .status-dot { width: 8px; height: 8px; border-radius: 50%; }

.highlight-match { background: rgba(196,120,0,0.3); padding: 0 2px; border-radius: 2px; }

.credential-row .password-cell { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.5ch; }
.credential-row .role-badge { display: inline-block; padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; text-transform: capitalize; }
.credential-row .role-badge.user { background: rgba(21,101,192,0.15); color: var(--color-info); }
.credential-row .role-badge.admin { background: rgba(42,127,142,0.15); color: var(--color-secondary); }
.credential-row .role-badge.super_admin { background: rgba(183,28,28,0.15); color: var(--color-danger); }
.credential-row .status-badge { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 500; }
.credential-row .status-badge.active { color: var(--color-success); }
.credential-row .status-badge.inactive { color: var(--color-text-muted); }

.audit-row .action-badge { display: inline-block; padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; }
.audit-row .action-badge.insert { background: rgba(45,125,50,0.15); color: var(--color-success); }
.audit-row .action-badge.update { background: rgba(21,101,192,0.15); color: var(--color-info); }
.audit-row .action-badge.delete { background: rgba(183,28,28,0.15); color: var(--color-danger); }
.audit-row .action-badge.status_change { background: rgba(196,120,0,0.15); color: var(--color-warning); }
.audit-row .action-badge.bulk_update { background: rgba(42,127,142,0.15); color: var(--color-secondary); }
.audit-row .action-badge.rollback { background: rgba(128,128,128,0.15); color: var(--color-text-muted); }
.audit-row .diff-cell { font-family: var(--font-mono); font-size: var(--text-xs); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-row .diff-old { color: var(--color-danger); }
.audit-row .diff-new { color: var(--color-success); }
.audit-row .rollback-btn { padding: var(--space-xs); color: var(--color-text-muted); opacity: 0.6; }
.audit-row .rollback-btn:hover { color: var(--color-primary); opacity: 1; }

.loading-skeleton { background: linear-gradient(90deg, var(--color-border) 25%, var(--color-surface-hover) 50%, var(--color-border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.table-skeleton td { padding: var(--space-sm) var(--space-md); }
.table-skeleton .skeleton-cell { height: 12px; width: 100%; }

.sds-link-btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--color-primary); color: white; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; }
.sds-link-btn:hover { background: var(--color-primary-light); color: white; text-decoration: none; }
.sds-link-btn svg { width: 14px; height: 14px; }

.reorder-row .overdue { color: var(--color-danger); font-weight: 600; }
.reorder-row .days-overdue { font-family: var(--font-mono); font-size: var(--text-sm); }
.reorder-row .suggested-qty { color: var(--color-success); font-weight: 500; }

.columns-table .drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--color-text-muted); border-radius: var(--radius-sm); }
.columns-table .drag-handle:hover { background: var(--color-surface-hover); color: var(--color-primary); }
.columns-table .field-name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.columns-table .system-badge { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; background: var(--color-bg); color: var(--color-text-secondary); }
.columns-table .action-btns { display: flex; gap: var(--space-xs); }
.columns-table .action-btns .icon-btn { width: 28px; height: 28px; }
.columns-table .action-btns .icon-btn.delete:hover { color: var(--color-danger); }

.add-column-form .form-group { margin-bottom: var(--space-md); }
.add-column-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 480px) { .add-column-form .form-row { grid-template-columns: 1fr; } }

.credential-form .password-wrapper { position: relative; }
.credential-form .password-wrapper .toggle-visibility { position: absolute; right: var(--space-sm); top: 50%; transform: translateY(-50%); }

.bulk-status-form .form-group { margin-bottom: var(--space-lg); }