/* ITX Service Desk — Custom Styles */

/* ── Animations ───────────────────────────────────────────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes pulse-sla {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.animate-pulse-sla {
    animation: pulse-sla 2s ease-in-out infinite;
}

/* ── Card hover ───────────────────────────────────────────────────────── */
.card-hover {
    transition: all 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

/* ── SLA indicators ──────────────────────────────────────────────────── */
.sla-breached { border-left: 4px solid #ef4444; }
.sla-at-risk  { border-left: 4px solid #f59e0b; }
.sla-on-track { border-left: 4px solid #22c55e; }
.sla-met      { border-left: 4px solid #3b82f6; }

/* ── Scrollbar ────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }

/* ── Status badges ────────────────────────────────────────────────────── */
.status-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 10px; border-radius: 9999px;
    font-size: 0.75rem; font-weight: 600;
}

/* ── Priority badges ──────────────────────────────────────────────────── */
.priority-critical { background: #fef2f2; color: #dc2626; }
.priority-high     { background: #fff7ed; color: #ea580c; }
.priority-medium   { background: #fefce8; color: #ca8a04; }
.priority-low      { background: #f0fdf4; color: #16a34a; }

/* ── Category icons ───────────────────────────────────────────────────── */
.cat-hardware    { color: #dc2626; }
.cat-software     { color: #2563eb; }
.cat-fulfillment { color: #9333ea; }
.cat-network     { color: #059669; }
.cat-others      { color: #6b7280; }

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar-active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    font-weight: 600;
}

/* ── Markdown-like content ────────────────────────────────────────────── */
.update-content p { margin-bottom: 0.5rem; }
.update-content strong { font-weight: 600; }

/* ── Drop zone ────────────────────────────────────────────────────────── */
.drop-zone {
    border: 2px dashed #d1d5db;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
}
.drop-zone:hover, .drop-zone.dragover {
    border-color: #3b82f6;
    background: #eff6ff;
}