/* ================================================================== */
/* IT Tickets — additive overlay on top of dialer.css.                  */
/* Shell, KPIs, panes, queue rows and modal styling come from           */
/* dialer.css. This file only adds the ticket-specific pieces.          */
/* ================================================================== */

/* ── Priority pill ────────────────────────────────────────────────── */
.ticket-priority,
.ticket-status {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--text-muted, #8aa0c0);
  border: 1px solid transparent;
}
.ticket-priority[data-priority="LOW"]    { background: rgba(255,255,255,.05); color: var(--text-muted, #8aa0c0); }
.ticket-priority[data-priority="MEDIUM"] { background: rgba(96,158,255,.16);  color: #9ec1ff; border-color: rgba(96,158,255,.35); }
.ticket-priority[data-priority="HIGH"]   { background: rgba(246,193,75,.16);  color: #f6c14b; border-color: rgba(246,193,75,.4); }
.ticket-priority[data-priority="URGENT"] {
  background: linear-gradient(135deg, rgba(255,98,118,.32), rgba(255,98,118,.16));
  color: #ff8896;
  border-color: rgba(255,98,118,.55);
  animation: ticket-urgent-pulse 1.8s ease-in-out infinite;
}
@keyframes ticket-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,98,118,.35); }
  50%      { box-shadow: 0 0 0 4px rgba(255,98,118,0); }
}

/* ── Status pill ──────────────────────────────────────────────────── */
.ticket-status[data-status="OPEN"]                 { background: rgba(96,158,255,.18); color: #9ec1ff; }
.ticket-status[data-status="IN_PROGRESS"]          { background: rgba(246,193,75,.18); color: #f6c14b; }
.ticket-status[data-status="WAITING_ON_REQUESTER"] { background: rgba(178,140,255,.18); color: #c9b3ff; }
.ticket-status[data-status="RESOLVED"]             { background: rgba(96,220,160,.18); color: #74e3a9; }
.ticket-status[data-status="CLOSED"]               { background: rgba(255,255,255,.05); color: var(--text-muted, #8aa0c0); }

/* ── Category icon chip ───────────────────────────────────────────── */
.ticket-category-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  background: rgba(255,255,255,.06);
  color: var(--text, #e6edfa);
}
.ticket-category-icon[data-category="HARDWARE"] { background: rgba(246,193,75,.18); color: #f6c14b; }
.ticket-category-icon[data-category="SOFTWARE"] { background: rgba(96,158,255,.18); color: #9ec1ff; }
.ticket-category-icon[data-category="DIALER"]   { background: rgba(178,140,255,.18); color: #c9b3ff; }
.ticket-category-icon[data-category="NETWORK"]  { background: rgba(96,220,160,.18); color: #74e3a9; }
.ticket-category-icon[data-category="EMAIL"]    { background: rgba(255,178,120,.18); color: #ffb478; }
.ticket-category-icon[data-category="ACCESS"]   { background: rgba(255,98,118,.18); color: #ff8896; }
.ticket-category-icon[data-category="OTHER"]    { background: rgba(255,255,255,.06); color: var(--text-muted, #8aa0c0); }

/* ── Tab strip ────────────────────────────────────────────────────── */
.ticket-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ticket-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #8aa0c0);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  transition: color .12s ease, border-color .12s ease;
}
.ticket-tab:hover { color: var(--text, #e6edfa); }
.ticket-tab.is-active { color: var(--text, #e6edfa); border-bottom-color: #9ec1ff; }
.ticket-tab-count {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: var(--text-muted, #8aa0c0);
  font-weight: 700;
}
.ticket-tab.is-active .ticket-tab-count { background: rgba(96,158,255,.22); color: #9ec1ff; }

/* ── Comment list (inside modal) ──────────────────────────────────── */
.ticket-detail-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 2px;
}
.ticket-comment {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  border-left: 2px solid rgba(255,255,255,.08);
}
.ticket-comment-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5a7dff, #3454e0);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ticket-comment-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ticket-comment-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ticket-comment-name { font-size: 13px; font-weight: 700; color: var(--text, #e6edfa); }
.ticket-comment-when { font-size: 10px; letter-spacing: .06em; color: var(--text-muted, #8aa0c0); }
.ticket-comment-text {
  font-size: 13px;
  color: var(--text, #e6edfa);
  white-space: pre-wrap;
  line-height: 1.45;
  word-break: break-word;
}
.ticket-comment--internal {
  background: rgba(246,193,75,.08);
  border-left-color: rgba(246,193,75,.5);
}
.ticket-comment--internal .ticket-comment-avatar {
  background: linear-gradient(135deg, #f6c14b, #c98a1a);
}
.ticket-comment-internal-flag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(246,193,75,.22);
  color: #f6c14b;
}

/* ── Detail actions row (modal footer) ────────────────────────────── */
.ticket-detail-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,.08));
  padding-top: 12px;
  margin-top: 4px;
}
.ticket-detail-status-row { display: flex; gap: 6px; flex-wrap: wrap; }
.ticket-detail-status-btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text, #e6edfa);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.ticket-detail-status-btn:hover { background: rgba(255,255,255,.08); }
.ticket-detail-status-btn.is-active {
  background: rgba(96,158,255,.22);
  border-color: #9ec1ff;
}
.ticket-detail-reply {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text, #e6edfa);
  font-size: 13px;
  font-family: inherit;
  min-height: 76px;
  resize: vertical;
  width: 100%;
}
.ticket-detail-send-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ticket-detail-internal-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted, #8aa0c0);
  cursor: pointer;
}
.ticket-detail-internal-toggle input { accent-color: #f6c14b; }
.ticket-detail-send-btn {
  background: linear-gradient(135deg, #5a7dff, #3454e0);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ticket-detail-send-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Empty state ──────────────────────────────────────────────────── */
.ticket-empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-muted, #8aa0c0);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ticket-empty-state-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(96,220,160,.14);
  color: #74e3a9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.ticket-empty-state-title { font-size: 15px; font-weight: 700; color: var(--text, #e6edfa); }
.ticket-empty-state-hint { max-width: 320px; line-height: 1.5; }