Support Ticket System Html Template Free Now

.action-icons i:hover color: #3b82f6;

/* status badges */ .status-badge display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: #1e40af; padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; width: fit-content;

.ticket-table tr:hover td background-color: #fafcff;

/* modal overlay (new ticket) */ .modal display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 1000; support ticket system html template free

.close-modal background: #eef2ff; border: none; padding: 8px 18px; border-radius: 40px; cursor: pointer;

.btn-primary:hover background: #2563eb; transform: translateY(-1px);

// Helper: update stats (open, in-progress, resolved, total) function updateStats() const total = tickets.length; const open = tickets.filter(t => t.status === "open").length; const inProgress = tickets.filter(t => t.status === "in-progress").length; const resolved = tickets.filter(t => t.status === "resolved").length; statsGrid.innerHTML = ` <div class="stat-card"><div class="stat-info"><h3>Total tickets</h3><div class="stat-number">$total</div></div><div class="stat-icon"><i class="fas fa-ticket"></i></div></div> <div class="stat-card"><div class="stat-info"><h3>Open</h3><div class="stat-number">$open</div></div><div class="stat-icon"><i class="fas fa-inbox"></i></div></div> <div class="stat-card"><div class="stat-info"><h3>In progress</h3><div class="stat-number">$inProgress</div></div><div class="stat-icon"><i class="fas fa-spinner"></i></div></div> <div class="stat-card"><div class="stat-info"><h3>Resolved</h3><div class="stat-number">$resolved</div></div><div class="stat-icon"><i class="fas fa-check-circle"></i></div></div> `; .action-icons i:hover color: #3b82f6

.form-group input, .form-group select, .form-group textarea width: 100%; padding: 10px 14px; border-radius: 16px; border: 1px solid #cbd5e1; font-family: inherit; outline: none;

.priority.medium background: #fff3e3; color: #c2410c;

/* filter bar */ .filter-bar background: white; border-radius: 20px; padding: 0.8rem 1.5rem; margin-bottom: 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid #e2e8f0; padding: 4px 12px

/* header area */ .header display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 2rem; gap: 1rem;

.modal-card background: white; max-width: 500px; width: 90%; border-radius: 32px; padding: 1.8rem; box-shadow: 0 25px 40px rgba(0,0,0,0.2); animation: fadeUp 0.2s ease;

.stat-info h3 font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: #64748b;