.controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:15px;max-width:1200px;flex:1;width:100%}.data-grid-controls{display:flex;justify-content:space-between;align-items:center;padding:20px;background:#fff;margin:0 20px;border-radius:8px;box-shadow:0 2px 8px #0000001a;flex-wrap:wrap;gap:15px}.search-container{position:relative;display:flex;align-items:center}.search-input{padding:10px 40px 10px 15px;border:2px solid #e0e0e0;border-radius:6px;font-size:14px;min-width:250px;transition:all .3s ease}.search-input:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.clear-search-btn{position:absolute;right:8px;background:none;border:none;font-size:18px;cursor:pointer;color:#666;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .3s ease}.clear-search-btn:hover{background:#f0f0f0;color:#333}.grid-actions{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.action-btn{background:#667eea;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:14px;cursor:pointer;transition:all .3s ease;font-weight:500}.action-btn:hover{background:#5a67d8;transform:translateY(-1px);box-shadow:0 4px 12px #667eea4d}.record-count{font-size:14px;color:#666;font-weight:500}.data-grid-container{margin:20px;background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden;flex:1;min-height:400px}.table-wrapper{overflow:auto;max-height:calc(100vh - 300px);min-height:400px}.data-grid-table{width:100%;border-collapse:collapse;font-size:14px}.data-grid-table thead{position:sticky;top:0;z-index:10}.data-grid-table th{background:#f8f9fa;padding:12px 16px;text-align:left;border-bottom:2px solid #e0e0e0;font-weight:600;color:#333;white-space:nowrap;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;transition:all .3s ease}.data-grid-table th:hover{background:#e9ecef}.data-grid-table th.sortable:after{content:"⇅";position:absolute;right:8px;color:#999;font-size:12px}.data-grid-table th.sort-asc:after{content:"↑";color:#667eea}.data-grid-table th.sort-desc:after{content:"↓";color:#667eea}.data-grid-table td{padding:12px 16px;border-bottom:1px solid #f0f0f0;color:#555;transition:all .3s ease}.data-grid-table tbody tr{transition:all .3s ease;cursor:pointer}.data-grid-table tbody tr:hover{background:#f8f9fa}.data-grid-table tbody tr:nth-child(2n){background:#fafafa}.data-grid-table tbody tr:nth-child(2n):hover{background:#f0f0f0}.search-highlight{background:#fff3cd;font-weight:600;padding:1px 3px;border-radius:2px}.data-grid-table tbody tr.selected{background:#e3f2fd!important;border-left:4px solid #2196f3}.data-grid-table tbody tr.selected:hover{background:#bbdefb!important}.pagination-container{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#fff;margin:0 20px 20px;border-radius:8px;box-shadow:0 2px 8px #0000001a;flex-wrap:wrap;gap:15px}.pagination-info{display:flex;align-items:center;gap:10px}.rows-per-page{padding:6px 10px;border:1px solid #e0e0e0;border-radius:4px;font-size:14px;background:#fff;cursor:pointer}.pagination-controls{display:flex;align-items:center;gap:8px}.pagination-btn{background:#f8f9fa;border:1px solid #e0e0e0;color:#333;padding:8px 12px;border-radius:4px;font-size:14px;cursor:pointer;transition:all .3s ease;min-width:40px}.pagination-btn:hover:not(:disabled){background:#e9ecef;border-color:#667eea}.pagination-btn:disabled{background:#f5f5f5;color:#ccc;cursor:not-allowed}.page-info{font-size:14px;color:#666;font-weight:500;margin:0 10px}.data-grid-table th{resize:horizontal;overflow:hidden}.loading{text-align:center;padding:40px;color:#666;font-size:16px}.loading:after{content:"";display:inline-block;width:20px;height:20px;border:2px solid #e0e0e0;border-top:2px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dark-mode .data-grid-controls{background:#2d3748;color:#e0e0e0}.dark-mode .search-input{background:#1a202c;border-color:#4a5568;color:#e0e0e0}.dark-mode .search-input:focus{border-color:#667eea}.dark-mode .clear-search-btn{color:#b0b0b0}.dark-mode .clear-search-btn:hover{background:#4a5568;color:#e0e0e0}.dark-mode .action-btn{background:#4c51bf}.dark-mode .action-btn:hover{background:#553c9a}.dark-mode .record-count{color:#b0b0b0}.dark-mode .data-grid-container{background:#2d3748}.dark-mode .data-grid-table th{background:#1a202c;color:#e0e0e0;border-bottom-color:#4a5568}.dark-mode .data-grid-table th:hover{background:#2d3748}.dark-mode .data-grid-table td{color:#b0b0b0;border-bottom-color:#4a5568}.dark-mode .data-grid-table tbody tr:hover{background:#4a5568}.dark-mode .data-grid-table tbody tr:nth-child(2n){background:#374151}.dark-mode .data-grid-table tbody tr:nth-child(2n):hover{background:#4a5568}.dark-mode .search-highlight{background:#744210;color:#fbbf24}.dark-mode .data-grid-table tbody tr.selected{background:#1e3a8a!important;border-left-color:#60a5fa}.dark-mode .data-grid-table tbody tr.selected:hover{background:#1e40af!important}.dark-mode .pagination-container{background:#2d3748;color:#e0e0e0}.dark-mode .rows-per-page,.dark-mode .pagination-btn{background:#1a202c;border-color:#4a5568;color:#e0e0e0}.dark-mode .pagination-btn:hover:not(:disabled){background:#4a5568;border-color:#667eea}.dark-mode .pagination-btn:disabled{background:#374151;color:#6b7280}.dark-mode .page-info{color:#b0b0b0}@media (max-width: 768px){.data-grid-controls{flex-direction:column;align-items:stretch;margin:10px}.search-container{order:1}.grid-actions{order:2;justify-content:space-between}.search-input{min-width:auto;width:100%}.data-grid-container{margin:10px}.table-wrapper{max-height:calc(100vh - 400px)}.pagination-container{flex-direction:column;margin:0 10px 10px}.pagination-info{order:2}.pagination-controls{order:1}}@media (max-width: 480px){.data-grid-table th,.data-grid-table td{padding:8px 12px;font-size:13px}.action-btn{padding:6px 12px;font-size:13px}.pagination-btn{padding:6px 8px;font-size:13px;min-width:32px}}