body { font-family:Helvetica, sans-serif;scroll-behavior:smooth;} .Mainboard { 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);} h2, h1 { color:#333 !important;font-size:28px !important;margin-bottom:25px;text-align:center;} h2 { background-image:none !important;padding:0 !important;box-shadow:none !important;border-radius:0 !important;} .table-controls { display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;flex-wrap:wrap;} .table-controls-left, .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 { width:100%;position:relative;} table { width:100%;border-collapse:collapse;} table td { padding:12px 10px;font-size:14px;color:#333;text-align:left;border-bottom:1px solid #eee;vertical-align:middle;word-wrap:break-word;} table th { background-color:#f4f7f9;color:#1a202c;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;padding:12px 10px;text-align:left;cursor:pointer;position:sticky;top:0;z-index:10;border-bottom:2px solid #e2e8f0;box-shadow:0 2px 4px rgba(0,0,0,0.05);} table th:hover { background-color:#e2e8f0;} table th .sort-icon { display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #888;margin-left:5px;vertical-align:middle;} table th.asc .sort-icon { border-top:none;border-bottom:5px solid #007bff;} table th.desc .sort-icon { border-bottom:none;border-top:5px solid #007bff;} table tbody tr:nth-child(odd) td { background-color:#ffffff;} table tbody tr:nth-child(even) td { background-color:#f4f7f9;} table tbody tr:hover td { background-color:#e2e8f0;transition:background-color 0.2s ease;} #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;} .table-responsive { overflow-x:auto;} } .status-bar { display:flex;gap:10px;flex-wrap:wrap;align-items:center;} .status-bar .tag { padding:6px 12px;border-radius:4px;font-size:13px;cursor:pointer;border:1px solid transparent;transition:all 0.2s ease;color:#333;} .status-bar .tag.upcoming { background-color:#fff9c4;border-color:#fff9c4;color:#5c5c00;} .status-bar .tag.open { background-color:#d4edda;border-color:#d4edda;color:#155724;} .status-bar .tag.closed { background-color:#cce5ff;border-color:#cce5ff;color:#004085;} .status-bar .tag.listing { background-color:#f8d7da;border-color:#f8d7da;color:#721c24;} .status-bar .tag.listed { background-color:#ffffff;border:1px solid #ced4da;} .status-bar .tag:hover { filter:brightness(0.95);} .status-bar .tag.active-filter { box-shadow:0 0 0 2px #333;font-weight:bold;} .clear-filter-btn { cursor:pointer;padding:5px 10px;margin-left:10px;transition:all 0.3s ease;} .clear-filter-btn:hover { color:#cc0000 !important;text-decoration:underline;} .company-name-wrapper { display:flex;align-items:center;gap:8px;} .status-badge { display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#ffffff;font-size:11px;font-weight:700;line-height:1;text-transform:uppercase;box-shadow:0 2px 5px rgba(0,0,0,0.15);border:1px solid rgba(255,255,255,0.3);flex-shrink:0;cursor:pointer;} .badge-upcoming { background-color:#ffc107;color:#000;} .badge-open { background-color:#157347;} .badge-ct { background-color:#fd7e14;} .badge-ap { background-color:#dc3545;} .badge-al { background-color:#6f42c1;} .badge-lt { background-color:#0dcaf0;color:#000;} .custom-badge-tooltip { position:absolute;z-index:9999;background:#fff;border:1px solid #e0e0e0;border-radius:8px;box-shadow:0 4px 15px rgba(0,0,0,0.15);width:max-content;max-width:260px;font-family:Helvetica, sans-serif;color:#333;opacity:0;visibility:hidden;transform:translateY(5px);transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;pointer-events:none;} .custom-badge-tooltip.show-tooltip { opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;} .tooltip-header { display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background-color:#f5f6f8;border-bottom:1px solid #e0e0e0;border-radius:8px 8px 0 0;font-weight:bold;font-size:14px;} .tooltip-close { cursor:pointer;font-size:20px;line-height:1;color:#666;transition:color 0.2s;padding-left:10px;} .tooltip-close:hover { color:#000;} .tooltip-body { padding:10px 12px;font-size:13px;line-height:1.4;color:#555;word-wrap:break-word;} .custom-badge-tooltip::before { content:"";position:absolute;top:15px;left:-7px;border-width:7px 7px 7px 0;border-style:solid;border-color:transparent #e0e0e0 transparent transparent;} .custom-badge-tooltip::after { content:"";position:absolute;top:16px;left:-5px;border-width:6px 6px 6px 0;border-style:solid;border-color:transparent #fff transparent transparent;} .custom-badge-tooltip.arrow-right::before { left:auto;right:-7px;border-width:7px 0 7px 7px;border-color:transparent transparent transparent #e0e0e0;} .custom-badge-tooltip.arrow-right::after { left:auto;right:-5px;border-width:6px 0 6px 6px;border-color:transparent transparent transparent #fff;}