/* ===== ALGEMEEN ===== */

:root {
  --primary-color: #0066CC;
  --secondary-color: #004A99;
}

body, h1, h2, h3, p {
  font-family: 'Segoe UI', Arial, sans-serif !important;
}

body {
  background-color: #F5F7FA !important;
}


/* ===== HEADER ===== */

.portal-header {
  background-color: #0066CC !important;
}

.portal-logo img {
  max-height: 50px;
}


/* ===== KNOPPEN ===== */

.btn-primary {
  background-color: #0066CC !important;
  border-color: #004A99 !important;
  border-radius: 4px !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #004A99 !important;
}


/* ===== TICKET LIJST ===== */

.tickets-list {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Individuele ticketrij */
.ticket-list-item,
.tickets-list .ticket-row,
.ticket-item {
  background-color: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Zebra striping */
.ticket-list-item:nth-child(even),
.tickets-list .ticket-row:nth-child(even),
.ticket-item:nth-child(even) {
  background-color: #F7FAFC !important;
}

/* Hover effect */
.ticket-list-item:hover,
.tickets-list .ticket-row:hover,
.ticket-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: #4299E1 !important;
  cursor: pointer !important;
}

/* Accentlijn links per status */
.ticket-list-item.open,
.ticket-row.open {
  border-left: 4px solid #4299E1 !important;
}

.ticket-list-item.pending,
.ticket-row.pending {
  border-left: 4px solid #ED8936 !important;
}

.ticket-list-item.closed,
.ticket-row.closed {
  border-left: 4px solid #68D391 !important;
  opacity: 0.8 !important;
}

/* Ticket onderwerp */
.ticket-subject,
.ticket-list-item .ticket-subject {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #2D3748 !important;
}

/* Ticket nummer */
.ticket-id,
.ticket-list-item .ticket-number {
  font-size: 12px !important;
  color: #A0AEC0 !important;
  margin-bottom: 4px !important;
}

/* Datum / meta info */
.ticket-date,
.ticket-list-item .ticket-meta {
  font-size: 12px !important;
  color: #718096 !important;
  margin-top: 6px !important;
}


/* ===== STATUS BADGES ===== */

.ticket-status {
  display: inline-block !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.status-open {
  background-color: #EBF8FF !important;
  color: #2B6CB0 !important;
}

.status-closed {
  background-color: #F0FFF4 !important;
  color: #276749 !important;
}

.status-pending {
  background-color: #FFFAF0 !important;
  color: #C05621 !important;
}


/* ===== TICKET DETAILPAGINA ===== */

.ticket-detail-header {
  background-color: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 20px !important;
}

.ticket-detail-header h1,
.ticket-title {
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #1A202C !important;
  margin-bottom: 12px !important;
}

/* Prioriteit labels */
.ticket-priority-high {
  color: #C53030 !important;
  font-weight: 600 !important;
}

.ticket-priority-medium {
  color: #C05621 !important;
  font-weight: 600 !important;
}

.ticket-priority-low {
  color: #276749 !important;
  font-weight: 600 !important;
}

/* Meta info rijen */
.ticket-meta-row {
  display: flex !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
  margin-top: 12px !important;
  font-size: 13px !important;
  color: #718096 !important;
}

.ticket-meta-row span {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}


/* ===== BERICHTENTHREAD ===== */

.thread-message {
  background-color: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.thread-message.customer-reply {
  border-left: 4px solid #4299E1 !important;
}

.thread-message.agent-reply {
  border-left: 4px solid #48BB78 !important;
  background-color: #F7FAFC !important;
}

.message-sender {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #2D3748 !important;
}

.message-timestamp {
  font-size: 12px !important;
  color: #A0AEC0 !important;
  margin-left: 8px !important;
}

.message-body {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: #4A5568 !important;
  margin-top: 8px !important;
}

.thread-divider {
  border: none !important;
  border-top: 1px dashed #E2E8F0 !important;
  margin: 16px 0 !important;
}