body { font-family:Helvetica, sans-serif;scroll-behavior:smooth;} .formMain { max-width:1300px;margin:0 auto 30px auto;background-color:#fff;padding:25px 10px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1);} h1 { color:#333;font-size:28px;margin-bottom:25px;text-align:center;} .table-controls { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;} .table-controls-left { display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .table-controls-right { display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .table-controls select, .table-controls input, .table-controls button { padding:8px 10px;font-size:14px;border-radius:5px;border:1px solid #ccc;} .table-controls input { flex-grow:1;min-width:220px;max-width:300px;} #refreshBtn { background:transparent;border:none;cursor:pointer;padding:0;display:flex;align-items:center;} #refreshBtn svg:hover { transform:rotate(90deg);transition:transform 0.3s ease;} .table-responsive { overflow-x:auto;overflow-y:visible;max-height:510px;position:relative;scrollbar-width:none;-ms-overflow-style:none;} .table-responsive::-webkit-scrollbar { display:none;} table { width:100%;border-collapse:collapse;min-width:600px;} table th, table td { padding:12px 15px;text-align:left;border-bottom:1px solid #eee;} table th { background-color:#f8f8f8;color:#555;font-weight:700;cursor:pointer;position:sticky;top:0;z-index:2;} table th:hover { background-color:#f1f1f1;} table th .sort-icon { display:inline-block;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-left:8px;vertical-align:middle;} table th.asc .sort-icon { border-bottom:5px solid #007bff;} table th.desc .sort-icon { border-top:5px solid #007bff;} table tbody tr:nth-child(even) { background-color:#fdfdfd;} table tbody tr:hover { background-color:#f5f5f5;} #pagination { margin-top:15px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;} #pagination button { padding:6px 12px;border:none;border-radius:5px;background-color:#e4e4e4;cursor:pointer;transition:background-color 0.25s ease, transform 0.2s ease;} #pagination button.active, #pagination button:disabled { background-color:#007bff;color:white;cursor:default;} #pagination button:hover { transform:scale(1.05);background-color:#d0e4ff;} @media (max-width:768px) { .table-controls { flex-direction:column;align-items:flex-start;} .table-controls-left { padding-bottom:10px;} }