/* helpdesk.css — sql102 help desk release: user chips, SLA badges, record
   timeline tabs, process-settings modal, summary dashboard, shared dialogs
   (HelpdeskUI) and the active-call popup extras. Loaded globally. */

/* ── user (assignee) chips ─────────────────────────────────────────────── */
.cf-user-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--tertiary, #f3f4f6); border: 1px solid var(--border, #e5e7eb); border-radius: 20px; padding: 2px 10px 2px 3px; font-size: 12px; margin: 2px 4px 2px 0; max-width: 100%; white-space: nowrap; }
.cf-user-avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--accent, #2563eb); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .3px; }

/* ── SLA badges + bar ──────────────────────────────────────────────────── */
.cf-sla { display: inline-block; padding: 2px 9px; border-radius: 12px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.cf-sla-ok { background: rgba(16,185,129,.14); color: #059669; }
.cf-sla-met { background: rgba(16,185,129,.18); color: #047857; }
.cf-sla-risk { background: rgba(245,158,11,.16); color: #b45309; }
.cf-sla-breached { background: rgba(239,68,68,.14); color: #dc2626; }
.cf-sla-paused { background: rgba(107,114,128,.16); color: #4b5563; }
.cf-sla-none { background: rgba(107,114,128,.1); color: #6b7280; }
.cf-slab { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 10px 14px; margin: 0 0 14px; border: 1px solid var(--border, #e5e7eb); border-radius: 10px; background: var(--secondary, #f9fafb); }
.cf-slab-item { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cf-slab-item .k { font-size: 11px; color: var(--text-muted, #6b7280); text-transform: uppercase; letter-spacing: .3px; }
.cf-slab-item .v { font-weight: 600; }
.cf-slab-item .v small { font-weight: 400; color: var(--text-muted, #6b7280); }
.cf-late { color: #dc2626 !important; }
.cf-ok { color: #059669 !important; }
.cf-row-breached td:first-child { box-shadow: inset 3px 0 0 #ef4444; }
.cf-row-risk td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ── duplicates warning in the record modal ────────────────────────────── */
.cf-dup-warn { border: 1px solid rgba(245,158,11,.5); background: rgba(245,158,11,.1); border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 13px; }
.cf-dup-warn b { display: block; margin-bottom: 4px; }
.cf-dup-warn a { color: var(--accent, #2563eb); margin-right: 12px; }

/* ── timeline tabs ─────────────────────────────────────────────────────── */
.cf-tl-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.cf-tl-list { list-style: none; padding: 0; margin: 0; }
.cf-tl-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.cf-tl-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--tertiary, #f3f4f6); color: var(--text-muted, #6b7280); display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; }
.cf-tl-ic-inbound { background: rgba(37,99,235,.12); color: #2563eb; }
.cf-tl-ic-outbound { background: rgba(16,185,129,.12); color: #059669; }
.cf-tl-status .cf-tl-ic, .cf-tl-resolved .cf-tl-ic { background: rgba(16,185,129,.12); color: #059669; }
.cf-tl-sla .cf-tl-ic, .cf-tl-escalated .cf-tl-ic { background: rgba(239,68,68,.12); color: #dc2626; }
.cf-tl-assigned .cf-tl-ic { background: rgba(139,92,246,.12); color: #7c3aed; }
.cf-tl-main { flex: 1; min-width: 0; }
.cf-tl-top { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; color: var(--text-muted, #6b7280); }
.cf-tl-act { font-weight: 600; color: var(--text, #111827); }
.cf-tl-when { margin-left: auto; }
.cf-tl-body { font-size: 13px; margin-top: 3px; word-break: break-word; }
.cf-tl-body s { color: var(--text-muted, #9ca3af); }
.cf-tl-field { color: var(--text-muted, #6b7280); }
.cf-tl-foot { font-size: 12px; margin-top: 4px; }
.cf-tl-linked { color: #059669; }

/* ── process settings modal ────────────────────────────────────────────── */
.cfp-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--border, #e5e7eb); padding-bottom: 8px; }
.cfp-tab { border: 1px solid var(--border, #e5e7eb); background: var(--secondary, #f9fafb); color: var(--text, #111827); border-radius: 8px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.cfp-tab.on { background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb); }
.cfp-section .cf-help-text { margin-top: 4px; }
.cfp-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 16px; margin-top: 10px; }
.cfp-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cfp-checks .cf-checkbox-inline { margin: 0; }
.cfp-table input { width: 100px; }
.cfp-rule { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--secondary, #fafafa); }
.cfp-rule-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cfp-rule-head input[type="text"], .cfp-rule-head select { padding: 6px 8px; }
.cfp-rule-when { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--text-muted, #6b7280); }
.cfp-rule-when select, .cfp-rule-when input { padding: 5px 8px; font-size: 13px; }
.cfp-actions { margin-top: 8px; display: grid; gap: 8px; }
.cfp-action { border: 1px dashed var(--border, #d1d5db); border-radius: 8px; padding: 8px 10px; background: var(--primary, #fff); }
.cfp-action-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 6px; }
.cfp-action-body { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.cfp-action-body input[type="text"], .cfp-action-body textarea { flex: 1 1 260px; padding: 6px 8px; font-size: 13px; }
.cfp-action-body select, .cfp-action-body input[type="number"] { padding: 6px 8px; font-size: 13px; }
.cfp-users { flex-basis: 100%; }
.cfp-users .cfp-checks { max-height: 120px; overflow: auto; }
.cfp-rule-add { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cfp-rule-add select { padding: 5px 8px; font-size: 13px; }

/* ── summary dashboard ─────────────────────────────────────────────────── */
.cf-sum-modal .cf-modal-header { flex-wrap: wrap; gap: 10px; }
.cf-sum-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; margin-right: 10px; }
.cf-sum-tools input[type="date"] { padding: 5px 6px; font-size: 12px; }
.cf-sum-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.cf-sum-period { font-size: 13px; color: var(--text-muted, #6b7280); margin-bottom: 10px; }
.cf-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.cf-kpi { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 10px 12px; background: var(--secondary, #f9fafb); }
.cf-kpi-v { font-size: 22px; font-weight: 700; line-height: 1.2; }
.cf-kpi-l { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 2px; }
.cf-kpi-s { font-size: 11px; color: var(--text-muted, #9ca3af); }
.cf-kpi-ok .cf-kpi-v { color: #059669; } .cf-kpi-bad .cf-kpi-v { color: #dc2626; } .cf-kpi-warn .cf-kpi-v { color: #b45309; } .cf-kpi-info .cf-kpi-v { color: #2563eb; }
.cf-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; margin-bottom: 14px; }
.cf-sum-card { border: 1px solid var(--border, #e5e7eb); border-radius: 10px; padding: 12px; background: var(--primary, #fff); }
.cf-sum-card h4 { margin: 0 0 8px; font-size: 14px; }
.cf-sum-table { font-size: 12px; margin-top: 8px; }
.cf-sum-table td, .cf-sum-table th { padding: 4px 6px; }
.cf-sum-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* ── shared HelpdeskUI dialogs ─────────────────────────────────────────── */
.hd-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10050; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(3px); padding: 16px; }
.hd-modal { background: var(--primary, #fff); color: var(--text, #111827); border-radius: 14px; width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.hd-modal-wide { max-width: 720px; }
.hd-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border, #e5e7eb); }
.hd-head h3 { margin: 0; font-size: 16px; }
.hd-close { border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--text-muted, #6b7280); }
.hd-body { padding: 16px 18px; overflow: auto; }
.hd-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border, #e5e7eb); }
.hd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.hd-span2 { grid-column: 1 / -1; }
.hd-field label { display: block; font-size: 12px; color: var(--text-muted, #6b7280); margin-bottom: 4px; }
.hd-field input, .hd-field select, .hd-field textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: var(--primary, #fff); color: var(--text, #111827); font: inherit; font-size: 14px; }
.hd-check { font-size: 13px; display: flex; gap: 6px; align-items: center; }
.hd-users { display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.hd-user { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border, #d1d5db); border-radius: 20px; padding: 3px 10px 3px 4px; font-size: 13px; cursor: pointer; user-select: none; }
.hd-user input { display: none; }
.hd-user.on { background: rgba(37,99,235,.1); border-color: var(--accent, #2563eb); }
.hd-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #2563eb); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { .hd-grid { grid-template-columns: 1fr; } }

/* ── active call popup extras ──────────────────────────────────────────── */
.acp-hd-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.acp-hd-row .acp-btn { flex: 1 1 auto; }
.acp-ai-summary { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 6px; line-height: 1.4; max-height: 80px; overflow: auto; }

/* ── calls page: manual entries ────────────────────────────────────────── */
.calls-manual-badge { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 8px; background: rgba(139,92,246,.14); color: #7c3aed; margin-left: 4px; vertical-align: middle; }

/* ── settings: help desk card ──────────────────────────────────────────── */
.hd-set-users { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* ── sql104: tasks inside the record modal + adaptive list ────────────── */
.cf-tl-block { margin-bottom: 18px; }
.cf-tl-block-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; margin: 6px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border, #e5e7eb); }
.cf-tl-block-head i { color: var(--accent, #6366f1); }
.cf-tl-count { font-weight: 500; font-size: 12px; color: var(--text-muted, #6b7280); }
.cf-tl-toggle { margin-left: auto; font-weight: 400; font-size: 12px; color: var(--text-muted, #6b7280); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.cf-tl-toggle input { margin: 0; width: auto; }
.cf-tk-title { font-weight: 600; color: var(--text, #111827); text-decoration: none; }
.cf-tk-title:hover { color: var(--accent, #6366f1); text-decoration: underline; }
.cf-tk-badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap; }
.cf-tk-st-pending { background: rgba(245,158,11,.14); color: #b45309; }
.cf-tk-st-in_progress { background: rgba(37,99,235,.12); color: #2563eb; }
.cf-tk-st-completed { background: rgba(16,185,129,.14); color: #059669; }
.cf-tk-st-cancelled, .cf-tk-st-rejected { background: rgba(107,114,128,.14); color: #4b5563; }
.cf-tk-pr-low { background: rgba(107,114,128,.12); color: #4b5563; }
.cf-tk-pr-medium { background: rgba(37,99,235,.1); color: #2563eb; }
.cf-tk-pr-high { background: rgba(245,158,11,.16); color: #b45309; }
.cf-tk-pr-urgent { background: rgba(239,68,68,.14); color: #dc2626; }
.cf-tk-completed .cf-tl-ic, .cf-tk-cancelled .cf-tl-ic, .cf-tk-rejected .cf-tl-ic { background: rgba(16,185,129,.12); color: #059669; }
.cf-tk-in_progress .cf-tl-ic { background: rgba(37,99,235,.12); color: #2563eb; }
.cf-tk-completed .cf-tk-title { color: var(--text-muted, #6b7280); text-decoration: line-through; }

/* ── sql105: delivery channels in the task modal ─────────────────────── */
.hd-channels { display: flex; gap: 14px; flex-wrap: wrap; }
.hd-channels .hd-check { margin: 0; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hd-channels .hd-check input[type="checkbox"] { width: auto; margin: 0; padding: 0; flex: none; }
.hd-channels .hd-check i { color: var(--accent, #6366f1); margin-right: 2px; }
.hd-hint { font-size: 12px; color: var(--text-muted, #6b7280); margin-top: 4px; }
/* bell panel: sound toggle */
.notif-sound-toggle { margin-right: 4px; }
.notif-sound-toggle.off { opacity: .55; }