/* ==========================================================================
   Phase 4 — Tickets, SLA, KB
   ========================================================================== */

/* Priority left bars */
.priority-bar-critical { border-left: 4px solid var(--c-red);   }
.priority-bar-high     { border-left: 4px solid var(--c-amber); }
.priority-bar-medium   { border-left: 4px solid var(--c-blue);  }
.priority-bar-low      { border-left: 4px solid var(--c-border-strong); }

.priority-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  margin-right: 4px;
}
.priority-dot.priority-critical { background: var(--c-red); }
.priority-dot.priority-high     { background: var(--c-amber); }
.priority-dot.priority-medium   { background: var(--c-blue); }
.priority-dot.priority-low      { background: var(--c-border-strong); }

.priority-badge.priority-critical { background: var(--c-red-light); color: var(--c-red); border:1px solid #f5c2c2; }
.priority-badge.priority-high     { background: var(--c-amber-light); color: var(--c-amber); border:1px solid #f5d6a3; }
.priority-badge.priority-medium   { background: var(--c-blue-light); color: var(--c-blue); border:1px solid #c8dcfe; }
.priority-badge.priority-low      { background: var(--c-bg-hover); color: var(--c-text-secondary); border:1px solid var(--c-border); }

/* Ticket status badges */
.status-open                { background: #eff6ff;  color: #2563eb; border:1px solid #bfdbfe; }
.status-in_progress         { background: #f5f3ff;  color: #7c3aed; border:1px solid #ddd6fe; }
.status-waiting_customer    { background: #fef3e2;  color: #d97706; border:1px solid #fde68a; }
.status-waiting_third_party { background: #fef3e2;  color: #d97706; border:1px solid #fde68a; }
.status-resolved            { background: #e8f5e9;  color: #2e7d32; border:1px solid #a5d6a7; }
.status-closed              { background: #f3f4f6;  color: #6b7280; border:1px solid #e5e7eb; }

/* SLA indicators */
.sla-ok       { color: var(--c-green); }
.sla-warning  { color: var(--c-amber); font-weight: 500; }
.sla-breached { color: var(--c-red);   font-weight: 600; }
.sla-met      { color: var(--c-green); }
.sla-none     { color: var(--c-text-muted); }

.sla-progress {
  height: 6px; border-radius: 999px; background: var(--c-border);
  overflow: hidden; margin-top: 8px;
}
.sla-progress-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.sla-progress-fill.ok       { background: var(--c-green); }
.sla-progress-fill.warning  { background: var(--c-amber); }
.sla-progress-fill.breached { background: var(--c-red); }
.sla-progress-fill.met      { background: var(--c-green); }

/* Tabs above ticket queue */
.ticket-tabs {
  display: flex; gap: 0; margin-bottom: 14px;
  border-bottom: 1px solid var(--c-border);
}
.ticket-tab {
  padding: 8px 14px; font-size: 13px; color: var(--c-text-secondary);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.ticket-tab:hover { color: var(--c-text-primary); text-decoration: none; }
.ticket-tab.active { color: var(--c-navy); border-bottom-color: var(--c-navy); font-weight: 500; }

.tickets-table tbody td { vertical-align: middle; }
.tickets-table .agent-initials-circle { width: 26px; height: 26px; font-size: 10px; }

/* Stats chips above queue */
.stats-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 500;
  border: 1px solid;
}

/* Ticket detail layout */
.ticket-grid {
  display: grid; grid-template-columns: 63fr 37fr; gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) { .ticket-grid { grid-template-columns: 1fr; } }
.ticket-thread { display: flex; flex-direction: column; gap: 12px; }
.ticket-side { position: sticky; top: 16px; display: flex; flex-direction: column; }
@media (max-width: 1100px) { .ticket-side { position: static; } }

.ticket-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ticket-header .badge { margin-left: 4px; }

/* Reply cards */
.reply-card {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--r-md); border-left-width: 3px; border-left-color: var(--c-blue);
  padding: 14px 16px;
}
.reply-card.internal-note {
  background: var(--c-amber-light); border-left-color: var(--c-amber);
}
.reply-card.system-event {
  background: transparent; border: none; padding: 4px 0; text-align: center;
}
.reply-meta {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 12px; color: var(--c-text-secondary); flex-wrap: wrap;
}
.reply-meta .agent-initials-circle { width: 26px; height: 26px; font-size: 10px; }
.reply-author { font-weight: 500; color: var(--c-text-primary); }
.reply-body { font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.internal-note-label {
  background: var(--c-amber); color: #fff; font-size: 10px;
  padding: 2px 8px; border-radius: 999px; font-weight: 500;
}
.system-event-text { font-size: 12px; color: var(--c-text-muted); font-style: italic; }
.reply-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.attachment-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-bg-hover); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: 4px 10px; font-size: 12px;
  color: var(--c-text-secondary); text-decoration: none;
}
.attachment-chip:hover { background: var(--c-navy-light); color: var(--c-navy); text-decoration: none; }

/* Reply composer */
.reply-composer {
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg-card); padding: 16px; margin-top: 6px;
}
.reply-composer.is-note { background: var(--c-amber-light); }
.reply-type-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--c-border);
  margin-bottom: 12px;
}
.reply-tab {
  padding: 8px 16px; font-size: 13px; cursor: pointer;
  border-bottom: 2px solid transparent; color: var(--c-text-secondary);
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.reply-tab.active { color: var(--c-navy); border-bottom-color: var(--c-navy); font-weight: 500; }
.composer-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
}
.composer-time { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-text-secondary); }
.time-input { width: 80px; }

/* Sidebar cards */
.sidebar-card {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 12px;
}
.sidebar-card .card-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-muted); margin-bottom: 10px;
}
.detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 0; font-size: 13px; border-bottom: 1px dashed var(--c-border);
}
.detail-row:last-child { border: none; }
.detail-label { color: var(--c-text-secondary); }
.detail-value { font-weight: 500; text-align: right; }

/* KB */
.kb-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px; margin-top: 8px;
}
.kb-card {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 14px 16px;
}
.kb-card-title { font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.kb-card-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.kb-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.kb-tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--c-bg-hover); color: var(--c-text-secondary);
}
.kb-body { white-space: pre-wrap; line-height: 1.6; margin: 14px 0; font-size: 14px; }
.kb-vote { padding: 14px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); margin: 14px 0; }
.kb-vote .muted { display: inline-block; margin-right: 12px; }
.kb-suggest-link {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 6px; text-decoration: none;
  color: var(--c-text-primary); font-size: 13px;
}
.kb-suggest-link:hover { background: var(--c-bg-hover); text-decoration: none; }
.kb-suggest-label { font-size: 11px; color: var(--c-text-muted); margin-bottom: 4px; }

/* Dashboard KPIs */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.kpi-card {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); border-left: 4px solid var(--c-border-strong);
  padding: 16px 20px; display: flex; flex-direction: column; gap: 2px;
}
.kpi-card.kpi-green { border-left-color: var(--c-green); }
.kpi-card.kpi-amber { border-left-color: var(--c-amber); }
.kpi-card.kpi-red   { border-left-color: var(--c-red); }
.kpi-value { font-size: 28px; font-weight: 600; color: var(--c-navy); }
.kpi-label { font-size: 12px; color: var(--c-text-secondary); text-transform: uppercase; letter-spacing: .05em; }
.kpi-sub   { font-size: 11px; color: var(--c-text-muted); margin-top: 2px; }
.stat-flash { animation: stat-flash 0.5s ease; }
@keyframes stat-flash { 0% { background: var(--c-amber-light); } 100% {} }

.dashboard-three-col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px;
}
@media (max-width: 1100px) { .dashboard-three-col { grid-template-columns: 1fr; } }

.my-tickets-list { list-style: none; padding: 0; margin: 0; }
.my-ticket-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; text-decoration: none; color: var(--c-text-primary);
  border-bottom: 1px solid var(--c-border); border-left-width: 4px;
}
.my-ticket-row:hover { background: var(--c-bg-hover); text-decoration: none; }
.my-ticket-title { flex: 1; font-weight: 500; }

/* Categories tree (admin) */
.cat-tree { list-style: none; padding: 0; margin: 0; }
.cat-tree li { padding: 6px 0; border-bottom: 1px dashed var(--c-border); }
.cat-tree li:last-child { border: none; }

/* ==========================================================================
   Phase 5 — Assets, time tracking, scheduling
   ========================================================================== */

/* Asset status badges */
.asset-status-active        { background:#e8f5e9;  color:#2e7d32; border:1px solid #a5d6a7; }
.asset-status-decommissioned{ background:#f3f4f6;  color:#6b7280; border:1px solid #e5e7eb; }
.asset-status-in_storage    { background:#eff6ff;  color:#2563eb; border:1px solid #bfdbfe; }
.asset-status-loaned_out    { background:#fef3e2;  color:#d97706; border:1px solid #fde68a; }
.asset-status-awaiting_repair{ background:#fdeaea; color:#e24b4a; border:1px solid #fca5a5; }

.warranty-ok       { color: var(--c-green); }
.warranty-expiring { color: var(--c-amber); font-weight: 500; }
.warranty-expired  { color: var(--c-red);   font-weight: 500; }
.warranty-none     { color: var(--c-text-muted); }

.warranty-alert-strip {
  background: var(--c-amber-light); border: 1px solid #f5d6a3;
  border-radius: var(--r-md); padding: 10px 16px; font-size: 13px;
  display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  color: var(--c-amber);
}
.warranty-alert-strip strong { color: var(--c-text-primary); }
.warranty-alert-strip a { margin-left: auto; font-size: 12px; color: var(--c-amber); text-decoration: underline; }

.asset-link-chip, .asset-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-md);
  border: 1px solid var(--c-navy-border); background: var(--c-navy-light);
  color: var(--c-navy); font-size: 13px; text-decoration: none;
}
.asset-chip { margin-right: 6px; margin-bottom: 6px; }
.asset-chips { display: flex; flex-wrap: wrap; }

.managed-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 500;
  background: var(--c-teal-light); color: var(--c-teal);
  border: 1px solid #a7e1d8;
}

/* Time tracking */
.timesheet-day-heading {
  font-size: 13px; font-weight: 500; color: var(--c-text-secondary);
  padding: 12px 0 6px; border-bottom: 1px solid var(--c-border);
  display: flex; justify-content: space-between;
}
.time-entry-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--c-border); font-size: 13px;
}
.time-entry-row:last-child { border: none; }
.time-work-type {
  font-size: 11px; color: var(--c-text-muted);
  background: var(--c-bg-hover); padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.time-duration  { font-weight: 500; min-width: 52px; text-align: right; }
.billable-dot   {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-green); flex-shrink: 0;
  display: inline-block;
}
.non-bill-dot   { background: var(--c-text-muted); }
.approved-check { color: var(--c-green); font-size: 14px; }

.util-pct {
  font-size: 36px; font-weight: 500; text-align: center;
  line-height: 1; color: var(--c-navy);
}
.util-bar {
  height: 8px; border-radius: 999px; background: var(--c-border);
  overflow: hidden; margin: 8px 0;
}
.util-bar-fill { height: 100%; border-radius: 999px; background: var(--c-green); }

/* Search dropdown for asset link */
.search-dropdown {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: 6px; max-height: 200px; overflow: auto;
}
.search-dropdown li {
  padding: 6px 10px; cursor: pointer; font-size: 13px;
}
.search-dropdown li:hover { background: var(--c-navy-light); color: var(--c-navy); }
.search-dropdown li.no-results { color: var(--c-text-muted); font-style: italic; cursor: default; }

/* Dispatch board */
.dispatch-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.dispatch-agent-col {
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px;
}
.dispatch-agent-header {
  display: flex; align-items: center; gap: 8px; font-weight: 500;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-border);
  margin-bottom: 8px;
}
.dispatch-free {
  color: var(--c-text-muted); font-size: 12px;
  text-align: center; padding: 16px 0;
}

/* Schedule events */
.cal-event {
  border-radius: 4px; padding: 6px 8px;
  font-size: 11px; line-height: 1.4; cursor: pointer;
  color: #fff;
}
.cal-event.scheduled    { background:#1a3a5c; }
.cal-event.in_progress  { background:#d97706; }
.cal-event.completed    { background:#2e7d32; }
.cal-event.cancelled    { background:#9ca3af; }
.cal-event.onsite::before { content: "📍 "; }

.is-active { background: var(--c-navy) !important; color: #fff !important; }

/* ==========================================================================
   Phase 6 — Contracts, Finance, Projects, Stock
   ========================================================================== */

/* Contract type badges */
.contract-msa                { background:#e8f0f8; color:#1a3a5c; border:1px solid #b8cfe8; }
.contract-block_hours        { background:#f5f3ff; color:#7c3aed; border:1px solid #ddd6fe; }
.contract-time_and_materials { background:#f0fdfa; color:#0f766e; border:1px solid #99f6e4; }
.contract-fixed_fee          { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
.contract-per_device         { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.contract-per_user           { background:#fef3e2; color:#d97706; border:1px solid #fde68a; }
.contract-hybrid             { background:#fdf2f8; color:#be185d; border:1px solid #fbcfe8; }

/* Invoice status badges */
.inv-draft     { background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; }
.inv-sent      { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
.inv-viewed    { background:#eff6ff; color:#2563eb; border:1px solid #bfdbfe; }
.inv-part_paid { background:#fef3e2; color:#d97706; border:1px solid #fde68a; }
.inv-paid      { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.inv-overdue   { background:#fdeaea; color:#e24b4a; border:1px solid #fca5a5; }
.inv-void      { background:#f3f4f6; color:#9ca3af; border:1px solid #e5e7eb; text-decoration: line-through; }
.inv-cancelled { background:#f3f4f6; color:#9ca3af; border:1px solid #e5e7eb; }
.inv-partial   { background:#fef3e2; color:#d97706; border:1px solid #fde68a; }
.inv-received  { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.inv-active    { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.inv-on_hold   { background:#fef3e2; color:#d97706; border:1px solid #fde68a; }
.inv-completed { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.inv-expired   { background:#fdeaea; color:#e24b4a; border:1px solid #fca5a5; }
.data-table tr.overdue-row td { background: #fff5f5; }
.data-table tr.overdue-row:hover td { background: #ffe9e9; }

/* Invoice print card (in-app) */
.invoice-print-card {
  max-width: 760px; margin: 0 auto;
  padding: 32px;
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: #fff; font-size: 13px;
}
.invoice-header {
  display: flex; justify-content: space-between; margin-bottom: 24px;
}
.invoice-totals { text-align: right; margin-top: 16px; }
.invoice-totals .total-row { font-size: 16px; font-weight: 500; }
.invoice-totals .balance-row {
  font-size: 18px; font-weight: 500;
  color: var(--c-navy); border-top: 2px solid var(--c-navy);
  padding-top: 8px; margin-top: 8px;
}

/* Line items table */
.line-items-table td, .line-items-table th { padding: 8px 12px; font-size: 13px; }
.line-items-table .col-qty   { width: 70px;  text-align: right; }
.line-items-table .col-price { width: 110px; text-align: right; }
.line-items-table .col-total { width: 110px; text-align: right; font-weight: 500; }
.line-items-total {
  border-top: 2px solid var(--c-border-strong);
  font-weight: 500; font-size: 14px;
}

/* Project tasks (kanban) */
.task-columns {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.task-col {
  background: var(--c-bg-hover); border-radius: var(--r-md);
  padding: 10px; min-height: 80px;
}
.task-col-header {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-text-muted);
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
}
.task-card {
  background: var(--c-bg-card); border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: 10px 12px; margin-bottom: 6px;
  font-size: 12px;
}
.task-card.done { opacity: 0.55; }
.task-card.blocked { border-left: 3px solid var(--c-red); }
.task-title { font-weight: 500; margin-bottom: 4px; line-height: 1.4;
              display: flex; align-items: center; gap: 6px; }
.task-meta {
  display: flex; align-items: center; gap: 6px;
  color: var(--c-text-muted); font-size: 11px;
}
.task-due.overdue { color: var(--c-red); font-weight: 500; }

/* Progress bars */
.progress-bar {
  height: 8px; border-radius: 999px;
  background: var(--c-border); overflow: hidden;
}
.progress-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; }
.progress-fill.low  { background: var(--c-blue); }
.progress-fill.mid  { background: var(--c-navy); }
.progress-fill.over { background: var(--c-red);  }
.progress-fill.done { background: var(--c-green);}

/* Stock indicators */
.stock-ok   { color: var(--c-green); font-weight: 500; }
.stock-low  { color: var(--c-amber); font-weight: 500; }
.stock-zero { color: var(--c-red);   font-weight: 500; }
.stock-na   { color: var(--c-text-muted); }
.margin-pct { font-size: 11px; color: var(--c-text-secondary); }

/* ── Recent tickets sidebar list ──────────────────────────────── */
.recent-ticket-list {
  list-style: none; padding: 0; margin: 0;
}
.recent-ticket-item {
  border-bottom: 0.5px solid var(--c-border);
}
.recent-ticket-item:last-child { border-bottom: none; }

.recent-ticket-link {
  display: flex; flex-direction: column; gap: 3px;
  padding: 7px 0; text-decoration: none;
  transition: background 80ms; border-radius: 4px;
}
.recent-ticket-link:hover { text-decoration: none; }
.recent-ticket-link:hover .recent-ticket-title {
  color: var(--c-navy);
  text-decoration: underline;
}

.recent-ticket-meta {
  display: flex; align-items: center; gap: 6px;
}
.recent-ticket-num {
  font-size: 11px; font-family: var(--font-mono, monospace);
  color: var(--c-text-muted);
}
.recent-ticket-title {
  font-size: 12.5px; color: var(--c-text-primary);
  line-height: 1.4;
}

.sidebar-view-all-link {
  display: block; margin-top: 8px;
  font-size: 11.5px; color: var(--c-blue);
  text-decoration: none;
}
.sidebar-view-all-link:hover { text-decoration: underline; }

.empty-state-sm {
  font-size: 12.5px; color: var(--c-text-muted);
  font-style: italic; margin: 4px 0 0;
}

/* ── Canned response dropdown ─────────────────────────────────── */
.canned-response-wrap {
  position: relative; display: inline-block;
}

.canned-toggle-btn {
  display: flex; align-items: center; gap: 5px;
}

.canned-dropdown {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  min-width: 280px; max-width: 360px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  list-style: none; padding: 4px 0; margin: 0;
  z-index: 200; max-height: 320px; overflow-y: auto;
}
.canned-dropdown[hidden] { display: none; }

.canned-group-heading {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-muted);
  padding: 8px 12px 4px;
  border-top: 1px solid var(--c-border);
}
.canned-group-heading:first-child { border-top: none; }

.canned-item {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 8px;
  padding: 8px 14px; cursor: pointer;
  transition: background 80ms;
  outline: none;
}
.canned-item:hover,
.canned-item:focus {
  background: var(--c-navy-light);
}
.canned-item-title {
  font-size: 13px; color: var(--c-text-primary);
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; flex: 1;
}
.canned-item-cat {
  font-size: 10.5px; color: var(--c-text-muted);
  white-space: nowrap; flex-shrink: 0;
}

.canned-create-link {
  padding: 6px 14px;
}
.canned-create-link a {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--c-blue);
  text-decoration: none;
}
.canned-create-link a:hover { text-decoration: underline; }

.canned-loading, .canned-error, .canned-empty {
  padding: 10px 14px; font-size: 13px;
  color: var(--c-text-muted); font-style: italic;
}
.canned-empty a {
  color: var(--c-blue); text-decoration: none; margin-left: 4px;
}


/* ── Ticket presence: list column + avatars ───────────────────── */
.col-viewing {
  width: 80px;
  padding-right: 6px !important;
}
th.col-viewing {
  color: var(--c-text-muted);
  font-size: 13px;
  text-align: center;
}
th.col-viewing i { vertical-align: middle; font-size: 16px; }
.col-priority    { width: 20px; padding: 0 4px !important; }

.viewing-avatars {
  display: flex;
  align-items: center;
  min-height: 26px;
}

.presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  border: 2px solid var(--c-bg-card);
  margin-left: -6px;       /* overlapping stack */
  cursor: default;
  transition: transform 120ms;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  overflow: hidden;
  user-select: none;
}
.presence-avatar:first-child { margin-left: 0; }
.presence-avatar:hover { transform: scale(1.15); z-index: 10; }
.presence-avatar img {
  width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}

.presence-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
  color: var(--c-text-secondary);
  background: var(--c-bg-hover);
  border: 2px solid var(--c-bg-card);
  margin-left: -6px;
  cursor: default;
}

/* ── "Also viewing" bar on ticket detail ──────────────────────── */
.also-viewing-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  margin-top: 8px;
  background: var(--c-navy-light);
  border: 1px solid var(--c-navy-border);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--c-navy);
  width: fit-content;
}
.also-viewing-bar[hidden] { display: none; }
.also-viewing-bar i       { font-size: 14px; flex-shrink: 0; }
.also-viewing-label       { white-space: nowrap; font-weight: 500; }
.also-viewing-avatars     { display: flex; align-items: center; }
.also-viewing-avatars .presence-avatar {
  border-color: var(--c-navy-light);
}

/* Hide viewing column on small screens */
@media (max-width: 768px) {
  .col-viewing { display: none; }
}


/* ── Admin service catalog ────────────────────────────────────── */
.vis-public           { background:#e8f5e9; color:#2e7d32;
                         border:1px solid #a5d6a7; }
.vis-restricted       { background:#fef3e2; color:#d97706;
                         border:1px solid #fde68a; }
.vis-company_specific { background:#eff6ff; color:#2563eb;
                         border:1px solid #bfdbfe; }
.field-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--c-bg-hover); color: var(--c-text-secondary);
  border: 1px solid var(--c-border);
}
.svc-icon-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--c-navy-light); color: var(--c-navy);
  font-size: 20px; flex-shrink: 0;
}


/* ── Three-tier ticket taxonomy ──────────────────────────────── */
.taxonomy-breadcrumb {
  display: inline-flex; align-items: center; gap: 5px;
  flex-wrap: wrap; font-size: 12.5px;
}
.taxonomy-breadcrumb i { font-size: 13px; color: var(--c-text-muted); }
.tax-sep { color: var(--c-text-muted); font-size: 11px; }

/* Type badge (ticket list column) */
.col-type { width: 140px; }
.type-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--c-text-secondary);
  max-width: 130px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.type-badge i           { font-size: 13px; flex-shrink: 0; }
.type-legacy            { color: var(--c-text-muted); font-style: italic; }
.unclassified-badge {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--c-amber); font-size: 12px;
}
.unclassified-badge-sm  { color: var(--c-border-strong); }
.hide-mobile            { /* utility — collapsed below */ }
@media (max-width: 768px) { .hide-mobile { display: none; } }

/* Taxonomy admin tree */
.taxonomy-tree          { list-style: none; padding: 0; margin: 0; }
.taxonomy-type-row {
  background: var(--c-bg-card); border: 0.5px solid var(--c-border);
  border-radius: var(--r-md); margin-bottom: 8px; overflow: visible;
}
.tax-type-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; font-weight: 500; font-size: 14px;
}
.tax-type-icon          { font-size: 17px; color: var(--c-text-secondary); }
.tax-type-name          { flex: 1; }
.tax-ticket-count {
  font-size: 11px; color: var(--c-text-muted); font-weight: 400;
  background: var(--c-bg-hover); padding: 1px 8px;
  border-radius: 999px; border: 1px solid var(--c-border);
}
.taxonomy-subtype-list {
  list-style: none; padding: 0 0 8px 32px; margin: 0;
  border-top: 1px solid var(--c-border);
}
.tax-subtype-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 0; font-size: 13px;
  border-bottom: 0.5px solid var(--c-border); flex-wrap: wrap;
}
.tax-subtype-row:last-child { border-bottom: none; }
.taxonomy-item-list {
  list-style: none; padding: 0 0 4px 20px; margin: 4px 0;
}
.tax-item-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 12px;
  color: var(--c-text-secondary);
}
.tax-name               { flex: 1; }
.tax-inactive           { opacity: 0.45; text-decoration: line-through; }

.tax-inline-form {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0; margin: 4px 0;
}
.tax-inline-input {
  padding: 4px 8px; font-size: 12.5px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  background: var(--c-bg-card); flex: 1; max-width: 240px;
}

/* Requirement strip on /admin/ticket-taxonomy */
.taxonomy-requirement-strip {
  display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap;
}
.req-card {
  flex: 1; min-width: 160px;
  background: var(--c-bg-card); border: 0.5px solid var(--c-border);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.req-title              { font-size: 13px; font-weight: 500; }
.toggle-pill {
  padding: 4px 14px; border-radius: 999px; font-size: 12px;
  font-weight: 500; border: 1px solid;
}
.toggle-pill.on {
  background: var(--c-green-light);
  border-color: var(--c-green); color: var(--c-green);
}
.toggle-pill:not(.on) {
  background: var(--c-bg-hover);
  border-color: var(--c-border); color: var(--c-text-muted);
}

/* Cascading dropdowns row on the ticket form */
.taxonomy-row           { align-items: flex-start; }
.taxonomy-row .form-group { flex: 1; }
.form-row.taxonomy-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
select:disabled {
  opacity: 0.55; cursor: not-allowed;
  background: var(--c-bg-hover);
}
.req-star { color: var(--c-red); margin-left: 2px; }


/* ── CSAT rating badges & feedback admin ───────────────────────── */
.rating-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; border: 1px solid;
}
.rating-terrible  { background:#fee2e2; color:#dc2626; border-color:#fca5a5; }
.rating-poor      { background:#fef3e2; color:#d97706; border-color:#fde68a; }
.rating-ok        { background:#fefce8; color:#a16207; border-color:#fef08a; }
.rating-good      { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.rating-excellent { background:#f0fdf4; color:#16a34a; border-color:#86efac; }

.feedback-stats-strip {
  display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px;
}
.feedback-stat {
  flex: 1; min-width: 110px;
  background: var(--c-bg-hover);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 12px 14px; text-align: center;
}
.feedback-stat .val {
  display: block; font-size: 22px; font-weight: 500;
  color: var(--c-navy); line-height: 1;
}
.feedback-stat .lbl {
  display: block; font-size: 11px; color: var(--c-text-muted);
  margin-top: 4px;
}


/* ── Feedback sidebar card on ticket detail ────────────────────── */
.feedback-rating-display {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; margin-bottom: 6px;
}
.feedback-stars   { font-size: 13px; letter-spacing: 1px; margin-left: 4px; }
.star-filled      { color: var(--c-amber); }
.star-empty       { color: var(--c-border-strong); }
.feedback-date    { font-size: 11px; color: var(--c-text-muted);
                     margin: 0 0 8px; }
.feedback-comment-block {
  padding: 8px 10px; border-radius: var(--r-md);
  font-size: 12.5px; margin-bottom: 6px; line-height: 1.5;
}
.feedback-comment-block p { margin: 0; }
.feedback-positive { background: #f0fdf4; border-left: 3px solid #16a34a; }
.feedback-negative { background: #fef2f2; border-left: 3px solid #dc2626; }
.comment-label {
  display: block; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-muted); margin-bottom: 4px;
}

/* ── Dashboard feedback feed ───────────────────────────────────── */
.feedback-feed       { list-style: none; padding: 0; margin: 0; }
.feedback-feed-item  {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 0; border-bottom: 0.5px solid var(--c-border);
}
.feedback-feed-item:last-child { border-bottom: none; }
.feedback-feed-badge { flex-shrink: 0; }
.feedback-feed-body  { flex: 1; min-width: 0; }
.feedback-feed-ticket {
  display: block; font-size: 12.5px; font-weight: 500;
  color: var(--c-navy); text-decoration: none;
}
.feedback-feed-title { font-weight: 400; color: var(--c-text-secondary); }
.feedback-feed-meta  { font-size: 11px; color: var(--c-text-muted);
                        margin: 1px 0; }
.feedback-feed-comment {
  font-size: 12px; color: var(--c-text-secondary);
  font-style: italic; margin: 2px 0 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Feedback report distribution bar ──────────────────────────── */
.rating-distribution { margin: 8px 0; }
.rating-dist-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin-bottom: 5px;
}
.rating-dist-label { width: 110px; flex-shrink: 0; color: var(--c-text-muted); }
.rating-dist-bar   { flex: 1; height: 10px; border-radius: 999px;
                      background: var(--c-border); overflow: hidden; }
.rating-dist-fill  { height: 100%; border-radius: 999px;
                      transition: width 300ms; }
.rating-dist-count { width: 36px; text-align: right;
                      flex-shrink: 0; color: var(--c-text-secondary);
                      font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════
   FEEDBACK ADMIN — Resizable checkbox panels
   ════════════════════════════════════════════════════════════════ */

.resizable-check-panel {
  resize: vertical;
  overflow-y: auto;
  min-height: 80px;
  max-height: 600px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-card);
  padding: 6px 0 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Ccircle cx='3' cy='3' r='1.2' fill='%23d1d5db'/%3E%3Ccircle cx='8' cy='3' r='1.2' fill='%23d1d5db'/%3E%3Ccircle cx='13' cy='3' r='1.2' fill='%23d1d5db'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center bottom 4px;
}

.resizable-check-panel:focus-within {
  outline: 2px solid var(--c-navy);
  outline-offset: 1px;
}

.check-panel-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-text-primary);
  cursor: pointer;
  transition: background 80ms;
}
.check-panel-row:hover {
  background: var(--c-bg-hover);
}
.check-panel-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--c-navy);
}
.check-panel-row i {
  font-size: 14px;
  color: var(--c-text-muted);
  flex-shrink: 0;
}
.check-panel-priority {
  font-size: 10px;
  flex-shrink: 0;
}
.check-panel-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-text-muted);
  font-style: italic;
  margin: 0;
}

.check-panel-row.hidden-by-search { display: none; }

.form-help-inline {
  font-size: 11px;
  font-weight: 400;
  color: var(--c-text-muted);
  margin-left: 4px;
}
.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--c-blue);
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}
.btn-link:hover { color: var(--c-navy); }

/* ════════════════════════════════════════════════════════════════
   FEEDBACK ADMIN — Rating editor (CSAT customisation)
   ════════════════════════════════════════════════════════════════ */

.rating-editor-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rating-editor-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rating-editor-preview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid;
  min-width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
}
.rating-editor-preview.rating-1 {
  color: #dc2626; border-color: #fca5a5; background: #fee2e2;
}
.rating-editor-preview.rating-2 {
  color: #d97706; border-color: #fde68a; background: #fef3e2;
}
.rating-editor-preview.rating-3 {
  color: #a16207; border-color: #fef08a; background: #fefce8;
}
.rating-editor-preview.rating-4 {
  color: #2563eb; border-color: #bfdbfe; background: #eff6ff;
}
.rating-editor-preview.rating-5 {
  color: #16a34a; border-color: #86efac; background: #f0fdf4;
}
.rating-editor-fields {
  display: flex;
  gap: 6px;
  flex: 1;
}
.rating-emoji-input {
  width: 60px;
  text-align: center;
  font-size: 18px;
}
.rating-label-input { flex: 1; }

/* ════════════════════════════════════════════════════════════════
   FEEDBACK ADMIN — Email preview block
   ════════════════════════════════════════════════════════════════ */

.csat-email-preview {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 20px;
  background: #f9fafb;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
.csat-preview-heading {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #111827;
}
.csat-preview-subheading {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 16px;
}
.csat-preview-buttons {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.csat-preview-btn {
  padding: 9px 16px;
  border-radius: 6px;
  border: 2px solid;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  cursor: default;
}
.csat-preview-footer {
  font-size: 11px;
  color: #9ca3af;
}

/* ════════════════════════════════════════════════════════════════
   FEEDBACK ADMIN — NPS scale preview
   ════════════════════════════════════════════════════════════════ */

.nps-scale-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: #f9fafb;
  flex-wrap: wrap;
}
.nps-anchor-label {
  font-size: 11px;
  color: var(--c-text-muted);
  font-style: italic;
  flex-shrink: 0;
  max-width: 80px;
  text-align: center;
  line-height: 1.3;
}
.nps-buttons-preview {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}
.nps-preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid;
  font-size: 12px;
  font-weight: 600;
}
.nps-red   { color: #dc2626; border-color: #fca5a5; background: #fee2e2; }
.nps-amber { color: #d97706; border-color: #fde68a; background: #fef3e2; }
.nps-green { color: #16a34a; border-color: #86efac; background: #f0fdf4; }

/* ── Admin field builder ──────────────────────────────────────── */
.field-options-panel {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.field-options-panel[hidden] { display: none; }

.options-textarea {
  font-family: var(--font-mono, monospace);
  font-size: 12.5px;
  resize: vertical;
  min-height: 100px;
}

.field-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text-secondary);
  text-transform: none;
  white-space: nowrap;
}
.field-type-badge i { font-size: 13px; opacity: 0.75; }

.qty-badge {
  display: inline-block;
  padding: 1px 5px;
  background: var(--c-blue);
  color: #fff;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-left: 3px;
  vertical-align: middle;
}

.field-type-preview {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  min-height: 60px;
}
.preview-check-row,
.preview-radio-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; color: var(--c-text-secondary);
}
.preview-qty {
  font-size: 11px; color: var(--c-text-muted);
  background: var(--c-bg-hover); padding: 1px 6px;
  border-radius: 3px; margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════════
   KPI STRIP — tickets page header
   ════════════════════════════════════════════════════════════════ */

.kpi-strip-wrap {
  margin-bottom: 20px;
}

.kpi-strip {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.kpi-strip[hidden] { display: none; }

.kpi-card {
  flex: 1;
  min-width: 110px;
  max-width: 160px;
  background: var(--c-bg-card);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px 8px;
  position: relative;
  transition: border-color 200ms, background 200ms;
  cursor: default;
}

.kpi-card.kpi-green   { border-color: #86efac; background: #f0fdf4; }
.kpi-card.kpi-amber   { border-color: #fde68a; background: #fefce8; }
.kpi-card.kpi-red     { border-color: #fca5a5; background: #fef2f2; }
.kpi-card.kpi-stretch { border-color: #34d399; background: #ecfdf5; }
.kpi-card.kpi-none    { /* No data — neutral */ }

.kpi-card-value {
  display: block;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  color: var(--c-navy);
  margin-bottom: 3px;
}
.kpi-card.kpi-green   .kpi-card-value { color: #16a34a; }
.kpi-card.kpi-amber   .kpi-card-value { color: #d97706; }
.kpi-card.kpi-red     .kpi-card-value { color: #dc2626; }
.kpi-card.kpi-stretch .kpi-card-value { color: #059669; }

.kpi-card-label {
  display: block;
  font-size: 11px;
  color: var(--c-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-card-target {
  display: block;
  font-size: 10px;
  color: var(--c-text-muted);
  margin-top: 4px;
}

.kpi-progress-track {
  height: 3px;
  background: var(--c-border);
  border-radius: 999px;
  margin-top: 6px;
  position: relative;
  overflow: visible;
}
.kpi-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: currentColor;
  max-width: 100%;
  transition: width 400ms ease;
}
.kpi-target-marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--c-text-muted);
  border-radius: 1px;
}
.kpi-stretch-marker {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: #059669;
  border-radius: 1px;
  opacity: 0.6;
}

.kpi-backlog-trend {
  font-size: 11px;
  margin-top: 4px;
}
.trend-up   { color: var(--c-red); }
.trend-down { color: var(--c-green); }
.trend-flat { color: var(--c-text-muted); }

.kpi-card-skeleton {
  height: 72px;
  background: linear-gradient(90deg,
    var(--c-border) 25%,
    var(--c-bg-hover) 50%,
    var(--c-border) 75%);
  background-size: 200% 100%;
  animation: kpi-shimmer 1.4s infinite;
  border-radius: var(--r-md);
  flex: 1; min-width: 110px; max-width: 160px;
}
@keyframes kpi-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.kpi-strip-meta {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--c-text-muted);
  margin-top: 6px;
}
.kpi-strip-sep  { color: var(--c-border-strong); }
.kpi-strip-link { color: var(--c-blue); text-decoration: none; }
.kpi-strip-link:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   REOPENED STATUS + REOPEN FORM
   ════════════════════════════════════════════════════════════════ */

.status-reopened {
  background: #fef3e2;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
.status-reopened i { font-size: 12px; }

.reopen-form {
  margin-top: 14px;
  padding: 14px;
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}
.reopen-form-actions { display: flex; gap: 8px; margin-top: 10px; }

.reopen-history-row {
  padding: 7px 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 12.5px;
}
.reopen-history-row:last-child { border-bottom: none; }
.reopen-date  { color: var(--c-text-muted); font-size: 11px; }
.reopen-by    { color: var(--c-text-secondary); margin-left: 6px; }
.reopen-reason {
  color: var(--c-text-secondary);
  font-style: italic;
  margin: 3px 0 0 0;
}

/* Portal reopen disclosure */
.portal-reopen-section { margin-top: 16px; }
.portal-reopen-details summary {
  cursor: pointer; font-size: 13px;
  color: var(--c-text-muted); list-style: none;
  display: flex; align-items: center; gap: 6px;
}
.portal-reopen-details summary::-webkit-details-marker { display: none; }
.portal-reopen-body {
  margin-top: 12px; padding: 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-hover);
  font-size: 13px;
}

/* ════════════════════════════════════════════════════════════════
   ADMIN KPI GOALS
   ════════════════════════════════════════════════════════════════ */

.kpi-number-input {
  width: 90px;
  text-align: center;
  padding: 4px 8px;
  font-size: 13px;
}
.kpi-unit-badge {
  font-size: 10px;
  color: var(--c-text-muted);
  background: var(--c-bg-hover);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
}
.kpi-value-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid;
}
.kpi-value-badge.kpi-green   { color:#16a34a; border-color:#86efac; background:#f0fdf4; }
.kpi-value-badge.kpi-amber   { color:#d97706; border-color:#fde68a; background:#fefce8; }
.kpi-value-badge.kpi-red     { color:#dc2626; border-color:#fca5a5; background:#fef2f2; }
.kpi-value-badge.kpi-stretch { color:#059669; border-color:#34d399; background:#ecfdf5; }
.kpi-value-badge.kpi-none    { color:#9ca3af; border-color:#e5e7eb; background:#f9fafb; }

.badge-amber { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.badge-green { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.badge-blue  { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }

/* ════════════════════════════════════════════════════════════════
   TICKET TIMER PANEL
   ════════════════════════════════════════════════════════════════ */

.ticket-timer-panel {
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.timer-display {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  flex-wrap: wrap;
}

.timer-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.timer-dot-running {
  background: var(--c-green);
  animation: timer-pulse 1.2s ease-in-out infinite;
}
.timer-dot-paused { background: var(--c-amber); }

@keyframes timer-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

.timer-elapsed {
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--c-navy);
  letter-spacing: .05em;
  min-width: 80px;
}
.timer-running .timer-elapsed { color: var(--c-green); }
.timer-paused  .timer-elapsed { color: var(--c-amber); }
.timer-paused-label {
  font-size: 12px;
  color: var(--c-amber);
  font-weight: 500;
}

.timer-note-input {
  width: 100%;
  font-size: 12.5px;
  resize: vertical;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm, 4px);
  padding: 6px 10px;
  background: var(--c-bg-card);
  margin-top: 6px;
}

/* Flexible time input — used in composer + modal + timesheet */
.time-input-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.time-entry-input { max-width: 160px; }
.time-input-hint {
  font-size: 12px;
  color: var(--c-green);
  font-weight: 500;
  white-space: nowrap;
}
.time-input-hint.invalid { color: var(--c-red); }
.time-input-parsed-inline {
  font-size: 12px;
  color: var(--c-text-muted);
}

.start-end-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.start-end-sep { color: var(--c-text-muted); font-size: 12px; }
.start-end-row input { max-width: 110px; }

/* Modal — basic overlay/card if not already provided by another stylesheet */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--c-bg-card, #fff);
  border-radius: var(--r-md);
  padding: 22px;
  width: 90%; max-width: 520px;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.modal-title { margin: 0 0 14px; font-size: 18px; }
.modal-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px; border-top: 1px solid var(--c-border);
  padding-top: 14px;
}

/* ════════════════════════════════════════════════════════════════
   TOPBAR FLOATING TIMER
   ════════════════════════════════════════════════════════════════ */

.topbar-timer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: #f0fdf4;
  border: 1px solid #16a34a;
  border-radius: 999px;
  font-size: 13px;
  color: #16a34a;
  font-weight: 500;
  margin-right: 8px;
}
.topbar-timer[hidden] { display: none; }
.topbar-timer i        { font-size: 14px; }
.topbar-timer-label {
  color: #16a34a; font-size: 12px;
  text-decoration: none; max-width: 110px;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-timer-label:hover { text-decoration: underline; }
.topbar-timer-btn {
  background: none; border: none;
  color: #16a34a; cursor: pointer;
  font-size: 14px; padding: 0 2px;
  display: flex; align-items: center;
}
.topbar-timer-btn:hover { color: var(--c-navy); }

/* ════════════════════════════════════════════════════════════════
   TIMESHEET PAGE
   ════════════════════════════════════════════════════════════════ */

.timesheet-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.timesheet-period-label {
  font-size: 16px;
  font-weight: 500;
}

.timesheet-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.timesheet-day-col {
  background: var(--c-bg-card);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 80px;
  display: flex; flex-direction: column;
}
.timesheet-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
  border-bottom: 1px solid var(--c-border);
  font-size: 12px;
  font-weight: 500;
  background: var(--c-bg-hover);
}
.timesheet-day-total {
  font-weight: 600;
  color: var(--c-navy);
}
.timesheet-day-today .timesheet-day-header {
  background: var(--c-navy-light);
  color: var(--c-navy);
}
.timesheet-entry-row {
  padding: 5px 8px;
  font-size: 11.5px;
  border-bottom: 0.5px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 6px;
}
.timesheet-entry-row:last-of-type { border-bottom: none; }
.timesheet-entry-ticket {
  color: var(--c-blue);
  font-family: var(--font-mono, monospace);
  font-size: 10.5px;
  flex-shrink: 0;
  text-decoration: none;
}
.timesheet-entry-ticket:hover { text-decoration: underline; }
.timesheet-entry-desc {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--c-text-secondary);
  min-width: 0;
}
.timesheet-entry-dur {
  font-weight: 500;
  color: var(--c-text-primary, #0f172a);
  flex-shrink: 0;
}
.timesheet-add-btn {
  width: 100%; padding: 4px;
  font-size: 12px; color: var(--c-text-muted);
  background: none; border: none; cursor: pointer;
  border-top: 1px dashed var(--c-border);
  margin-top: auto;
}
.timesheet-add-btn:hover {
  background: var(--c-bg-hover);
  color: var(--c-navy);
}

.timesheet-totals-strip {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.ts-total-card {
  background: var(--c-bg-hover);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-md); padding: 12px 16px;
  text-align: center; min-width: 110px;
}
.ts-total-val {
  display: block; font-size: 22px;
  font-weight: 500; color: var(--c-navy);
}
.ts-total-lbl {
  display: block; font-size: 11px;
  color: var(--c-text-muted); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}

/* Submission status banner */
.ts-status-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: var(--r-md);
  margin-bottom: 16px; font-size: 13px; font-weight: 500;
}
.ts-status-draft     { background:#f9fafb; border:1px solid var(--c-border); color: var(--c-text-secondary); }
.ts-status-submitted { background:#fefce8; border:1px solid var(--c-amber); color: #92400e; }
.ts-status-approved  { background:#f0fdf4; border:1px solid #16a34a; color: #166534; }
.ts-status-rejected  { background:#fef2f2; border:1px solid #dc2626; color: #991b1b; }

@media (max-width: 900px) {
  .timesheet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════
   PHASE 16: COVERAGE BANNER — ticket detail sidebar
   ════════════════════════════════════════════════════════════════ */

.coverage-banner-card { padding-bottom: 12px; }
.coverage-alert       { border-color: var(--c-amber) !important; }

.coverage-contract-name {
  display: flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: 13px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.contract-type-chip {
  font-size: 10px; font-weight: 500; text-transform: uppercase;
  letter-spacing: .04em; padding: 1px 7px;
  border-radius: 999px; background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
}

.block-hours-display {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-md);
  background: var(--c-green-light); border: 1px solid #86efac;
  margin-bottom: 10px; font-size: 13px;
}
.block-hours-display.block-hours-low {
  background: var(--c-amber-light); border-color: var(--c-amber);
}
.block-hours-display i { font-size: 16px; color: var(--c-green);
                          flex-shrink: 0; }
.block-hours-low .block-hours-display i { color: var(--c-amber); }
.block-hours-value { font-size: 18px; font-weight: 600;
                      display: block; color: var(--c-navy); }
.block-hours-label { font-size: 11px; color: var(--c-text-muted);
                      display: block; }
.block-alert-badge {
  margin-left: auto; font-size: 10px; font-weight: 600;
  background: var(--c-amber); color: #fff; padding: 2px 7px;
  border-radius: 999px; text-transform: uppercase;
}

.coverage-section {
  margin-bottom: 8px; padding: 6px 8px;
  border-radius: var(--r-sm); border-left: 3px solid;
}
.coverage-section-covered  { border-color: var(--c-green);
                               background: #f0fdf4; }
.coverage-section-billable { border-color: var(--c-amber);
                               background: var(--c-amber-light); }
.coverage-section-nocharge { border-color: var(--c-blue);
                               background: var(--c-navy-light); }

.coverage-section-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: 5px;
  color: var(--c-text-muted);
}
.coverage-section-covered  .coverage-section-label { color: #16a34a; }
.coverage-section-billable .coverage-section-label { color: #d97706; }
.coverage-section-nocharge .coverage-section-label { color: #2563eb; }

.coverage-item {
  display: inline-block; font-size: 12px;
  color: var(--c-text-secondary); margin-right: 6px;
}

.coverage-no-contract-msg {
  font-size: 12.5px; color: var(--c-amber);
  display: flex; align-items: center; gap: 6px;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════
   BILLING OUTCOME CHIP — time logging modal
   ════════════════════════════════════════════════════════════════ */

.billing-outcome-chip {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-md);
  border: 1.5px solid; font-size: 13px;
  transition: background 200ms, border-color 200ms;
  margin-bottom: 6px;
}
.billing-outcome-chip.outcome-covered {
  background: #f0fdf4; border-color: #86efac; color: #16a34a;
}
.billing-outcome-chip.outcome-billable {
  background: var(--c-amber-light);
  border-color: var(--c-amber); color: var(--c-amber);
}
.billing-outcome-chip.outcome-no_charge {
  background: var(--c-navy-light);
  border-color: var(--c-navy-border); color: var(--c-navy);
}
.billing-outcome-chip.outcome-loading {
  background: var(--c-bg-hover);
  border-color: var(--c-border); color: var(--c-text-muted);
}

.boc-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
  background: currentColor;
}
#billing-outcome-label { font-weight: 500; flex-shrink: 0; }
.boc-reason {
  font-size: 11.5px; color: inherit; opacity: .75;
  line-height: 1.4; flex: 1;
}

#billing-override-panel {
  padding: 10px 12px;
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-top: 6px;
}
#billing-override-panel[hidden] { display: none; }

/* ════════════════════════════════════════════════════════════════
   ADMIN BILLING RULES PAGE
   ════════════════════════════════════════════════════════════════ */

.billing-rules-grid { overflow-x: auto; margin-bottom: 24px; }
.billing-rules-table {
  border-collapse: collapse; width: 100%;
  font-size: 12.5px; min-width: 700px;
}
.billing-rules-table th {
  padding: 8px 12px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-muted); text-align: center;
  border-bottom: 2px solid var(--c-border);
  white-space: nowrap;
}
.billing-rules-table th.col-worktype { text-align: left; }
.billing-rules-table td {
  padding: 6px 8px; border-bottom: 0.5px solid var(--c-border);
  vertical-align: middle;
}
.billing-rules-table tr:hover td { background: var(--c-bg-hover); }

.outcome-segment {
  display: inline-flex; border-radius: var(--r-sm);
  border: 1px solid var(--c-border); overflow: hidden;
}
.outcome-segment input[type="radio"] { display: none; }
.outcome-segment label {
  padding: 3px 8px; font-size: 11px; cursor: pointer;
  white-space: nowrap; color: var(--c-text-muted);
  transition: background 100ms, color 100ms;
  border-right: 1px solid var(--c-border);
}
.outcome-segment label:last-of-type { border-right: none; }
.outcome-segment input[value="covered"]:checked + label {
  background: #f0fdf4; color: #16a34a; font-weight: 500;
}
.outcome-segment input[value="billable"]:checked + label {
  background: var(--c-amber-light); color: #d97706;
  font-weight: 500;
}
.outcome-segment input[value="no_charge"]:checked + label {
  background: var(--c-navy-light); color: var(--c-navy);
  font-weight: 500;
}
.outcome-segment input[value="use_default"]:checked + label {
  background: var(--c-bg-hover); color: var(--c-text-secondary);
  font-weight: 500;
}

.override-worktype-label { font-weight: 500; font-size: 13px; }
.override-default-label  {
  font-size: 11px; color: var(--c-text-muted);
  font-style: italic;
}
.override-note-input { font-size: 12px; padding: 3px 8px; }

/* Contract override page — two-column preview layout */
.billing-override-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
}
@media (max-width: 1100px) {
  .billing-override-layout { grid-template-columns: 1fr; }
}
.billing-override-form { min-width: 0; }
.billing-override-preview {
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 14px 16px;
  align-self: start;
  position: sticky;
  top: 16px;
}
.billing-override-preview .preview-table th,
.billing-override-preview .preview-table td {
  padding: 4px 6px; font-size: 12px;
}
.preview-outcome { font-weight: 500; }
.preview-outcome.preview-covered  { color: #16a34a; }
.preview-outcome.preview-billable { color: #d97706; }
.preview-outcome.preview-no_charge { color: var(--c-navy); }

/* Timesheet approval — override highlight */
tr.te-override td {
  background: #fffaf0;
  border-left: 3px solid var(--c-amber);
}
.te-override-reason {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--c-amber);
  margin-top: 4px; font-style: italic;
}
.te-outcome {
  display: inline-block; font-size: 12px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px;
  background: var(--c-bg-hover); color: var(--c-text-secondary);
}
.te-outcome-covered  { background: #f0fdf4; color: #16a34a; }
.te-outcome-billable { background: var(--c-amber-light); color: #d97706; }
.te-outcome-no_charge { background: var(--c-navy-light); color: var(--c-navy); }
.te-override-badge {
  display: inline-block; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  margin-left: 4px; padding: 1px 6px;
  background: var(--c-amber); color: #fff; border-radius: 999px;
}

/* Reply composer billing row */
.reply-billing-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 8px;
  padding-top: 8px; border-top: 1px dashed var(--c-border);
}
.reply-billing-row .billing-outcome-chip {
  flex: 1; min-width: 220px; margin-bottom: 0;
}
#reply-override-panel {
  display: flex; gap: 6px; flex: 1 100%;
  margin-top: 6px;
}
#reply-override-panel[hidden] { display: none; }
#reply-override-panel .form-input { flex: 1; }
.composer-worktype {
  display: flex; flex-direction: column;
  font-size: 11px; color: var(--c-text-muted);
}
.composer-worktype .form-select { font-size: 12px; }

/* ════════════════════════════════════════════════════════════════
   PHASE 17 — SCHEDULE WORK FROM TICKET + EDITABLE STATUSES
   ════════════════════════════════════════════════════════════════ */

/* ── Schedule work panel ─────────────────────────────────────── */
.schedule-work-section { margin: 0 0 12px 0; }
.schedule-panel {
  margin-top: 10px;
  padding: 16px;
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: var(--r-md, 8px);
  animation: scheduleSlideDown 150ms ease;
}
.schedule-panel[hidden] { display: none; }
@keyframes scheduleSlideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.schedule-panel-actions {
  display: flex; gap: 8px; margin-top: 12px;
}
.schedule-panel .form-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.schedule-panel .form-row .form-group { flex: 1; min-width: 140px; }
.schedule-panel .form-label { font-size: 12px; }
.schedule-panel .req-star { color: #c2410c; }

/* ── Scheduled entries sidebar card ──────────────────────────── */
.scheduled-entries-card .card-title { display: flex;
                                       align-items: center; gap: 6px; }
.schedule-entry-row {
  padding: 8px 0;
  border-bottom: 0.5px solid var(--c-border, #e5e7eb);
  font-size: 12.5px;
}
.schedule-entry-row:last-child { border-bottom: none; }
.se-datetime { display: flex; align-items: center;
                gap: 5px; font-weight: 500; }
.se-datetime i { color: var(--c-text-muted, #6b7280); font-size: 13px; }
.se-duration { font-weight: 400; color: var(--c-text-muted, #6b7280); }
.se-agent { font-size: 11.5px;
             color: var(--c-text-secondary, #4b5563); margin-top: 2px; }
.se-cancel-form { display: inline; margin-top: 4px; }
.se-status-badge { font-size: 11px; color: var(--c-text-muted, #6b7280);
                    font-style: italic; }

/* ── SLA pause indicator ─────────────────────────────────────── */
.sla-paused-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--c-amber-light, #fef3e2);
  border: 1px solid #fde68a;
  color: #b45309; font-size: 12px; font-weight: 500;
}
.sla-paused-chip i { font-size: 13px; }

/* ── Scheduled-ticket icon on list ───────────────────────────── */
.scheduled-icon {
  display: inline-flex; align-items: center; gap: 3px;
  color: #0891b2; font-size: 12px;
  margin-left: 6px; vertical-align: middle;
}
.scheduled-icon i { font-size: 14px; }
.scheduled-date-mini { font-size: 10.5px; font-weight: 500; }

/* ── Dynamic status badge (inline colour from DB) ─────────────
   Layered on top of the legacy status-{slug} classes — when an
   inline style is present it wins by specificity. */
.status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  border: 1.5px solid; white-space: nowrap;
}

/* ── Admin status list ───────────────────────────────────────── */
.status-admin-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--c-border, #e5e7eb);
  background: var(--c-bg-card, #fff);
  transition: background 80ms;
}
.status-admin-row:hover { background: var(--c-bg-hover, #f8fafc); }
.status-color-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.06);
}
.status-name-cell { flex: 1; font-weight: 500; font-size: 13.5px; }
.status-sla-chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  font-weight: 500; border: 1px solid transparent;
}
.sla-chip-active   { background:#f0fdf4; color:#16a34a;
                      border-color:#86efac; }
.sla-chip-paused   { background:#fef3e2; color:#d97706;
                      border-color:#fde68a; }
.sla-chip-resolved { background:#eff6ff; color:#2563eb;
                      border-color:#bfdbfe; }
.status-lock-icon { color: var(--c-text-muted, #6b7280); font-size: 14px; }
.status-ticket-count {
  font-size: 11.5px; color: var(--c-text-muted, #6b7280);
  min-width: 70px; text-align: right;
}
.status-edit-panel {
  padding: 12px 14px 16px 34px;
  background: var(--c-bg-hover, #f8fafc);
  border-bottom: 0.5px solid var(--c-border, #e5e7eb);
}
.status-edit-form .form-label { display:block; margin-top:8px;
                                 font-size:12px; }
.status-edit-form .form-input,
.status-edit-form .form-select { display:block; margin-top:4px;
                                  max-width:380px; }
.status-new-form .form-row { display:flex; gap:12px; flex-wrap:wrap; }
.status-new-form .form-group { flex: 1; min-width: 160px; }

/* ── No SLA badge (ticket detail card) ─────────────────────── */
.no-sla-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 10px; border-radius: 999px;
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 12px; font-weight: 500;
}
.no-sla-badge i { font-size: 13px; }

/* Compact version for ticket list column */
.no-sla-badge-sm {
  font-size: 11px; color: var(--c-text-muted);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   QUOTES — List
   ════════════════════════════════════════════════════════════════ */

.quote-stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.quote-stat-card {
  background: var(--c-bg-card);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-md); padding: 14px 16px;
  text-align: center;
}
.quote-stat-val {
  display: block; font-size: 22px; font-weight: 600;
  color: var(--c-navy);
}
.quote-stat-lbl {
  display: block; font-size: 11.5px; color: var(--c-text-muted);
  margin-top: 3px;
}

/* Margin % text colours */
.margin-green { color: #16a34a; font-weight: 500; }
.margin-amber { color: #d97706; font-weight: 500; }
.margin-red   { color: #dc2626; font-weight: 500; }

/* ════════════════════════════════════════════════════════════════
   QUOTES — Form
   ════════════════════════════════════════════════════════════════ */

.quote-form-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px; align-items: start;
}
@media (max-width: 768px) {
  .quote-form-layout { grid-template-columns: 1fr; }
}

/* ── Line items ─────────────────────────────────────────────────── */
.li-header-row, .li-item-row {
  display: grid;
  grid-template-columns:
    60px          /* type indicator */
    1fr           /* description */
    64px          /* qty */
    100px         /* cost */
    100px         /* sell */
    54px          /* margin% */
    54px          /* disc% */
    34px          /* tax toggle */
    34px          /* optional toggle */
    90px          /* total */
    28px;         /* remove btn */
  gap: 4px; align-items: center;
}
.li-header-row {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--c-text-muted);
  padding-bottom: 6px; border-bottom: 1.5px solid var(--c-border);
  margin-bottom: 4px;
}
.li-item-row {
  padding: 5px 0;
  border-bottom: 0.5px solid var(--c-border);
}
.li-item-row:last-of-type { border-bottom: none; }
.li-item-row input[type="number"],
.li-item-row input[type="text"] {
  width: 100%; font-size: 12.5px; padding: 4px 6px;
}

/* Section row — full-width label bar */
.li-section-row {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 4px; align-items: center;
  padding: 6px 8px;
  margin: 8px 0;
  background: var(--c-bg-hover);
  border-left: 3px solid var(--c-navy);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 12.5px; font-weight: 600; color: var(--c-navy);
}
.li-section-row input[type="text"] {
  background: transparent; border: 1px dashed transparent;
  font-weight: 600; color: var(--c-navy);
  font-size: 13px;
}
.li-section-row input[type="text"]:focus {
  border-color: var(--c-navy-border, var(--c-navy)); background: #fff;
}
.li-type-badge {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--c-text-muted); padding: 2px 4px;
}

.li-margin-cell {
  font-size: 11.5px; font-weight: 500; text-align: right;
}

.li-add-row {
  display: flex; gap: 8px; margin-top: 10px; margin-bottom: 16px;
}

.li-remove-btn {
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: none; cursor: pointer;
  color: var(--c-text-muted); font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.li-remove-btn:hover {
  background: #fee2e2; color: var(--c-red);
}

/* ── Totals card ────────────────────────────────────────────────── */
.quote-totals-card {
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px;
  position: sticky; top: 72px;
}
.qt-row {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 4px 0;
  border-bottom: 0.5px solid var(--c-border);
}
.qt-row:last-child { border-bottom: none; }
.qt-row.qt-total {
  font-size: 15px; font-weight: 600; color: var(--c-navy);
  padding-top: 8px; margin-top: 4px;
}
.qt-sep {
  border: none; border-top: 1px solid var(--c-border);
  margin: 8px 0;
}
.qt-cost-row { font-size: 12px; color: var(--c-text-secondary); }
.qt-margin-row {
  font-size: 13px; font-weight: 600;
  padding-top: 4px;
}
.qt-margin-badge {
  display: inline-block; padding: 2px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
}
.qt-margin-green {
  background: #f0fdf4; color: #16a34a; border: 1px solid #86efac;
}
.qt-margin-amber {
  background: var(--c-amber-light, #fef3c7); color: #d97706;
  border: 1px solid #fde68a;
}
.qt-margin-red {
  background: #fef2f2; color: #dc2626;
  border: 1px solid #fca5a5;
}

/* ════════════════════════════════════════════════════════════════
   QUOTES — Detail
   ════════════════════════════════════════════════════════════════ */

.quote-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 20px; align-items: start;
}
@media (max-width: 900px) {
  .quote-detail-layout { grid-template-columns: 1fr; }
}

/* Status badges */
.quote-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; border: 1.5px solid;
  white-space: nowrap;
}

/* Viewed indicator */
.quote-viewed-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--c-text-muted);
  margin-top: 12px;
}
.quote-viewed-chip.viewed { color: var(--c-green); }
.quote-viewed-chip i      { font-size: 14px; }

/* Portal link copy */
.portal-link-row {
  display: flex; align-items: center; gap: 6px;
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm); padding: 6px 10px;
  font-size: 12px; margin-top: 8px;
}
.portal-link-url {
  flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--c-text-secondary);
}

/* Timeline */
.quote-timeline { margin-top: 20px; }
.quote-timeline-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 6px 0; font-size: 12.5px;
}
.qt-step-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; margin-top: 3px;
}
.qt-done    { background: var(--c-green); }
.qt-current { background: var(--c-blue); }
.qt-future  { background: var(--c-border); }
.qt-step-text { flex: 1; }
.qt-step-date { color: var(--c-text-muted); font-size: 11px; }

/* Internal approval banner */
.approval-pending-banner {
  background: #f5f3ff; border: 1px solid #c4b5fd;
  border-radius: var(--r-md); padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #7c3aed; margin-bottom: 16px;
}
.approval-done-banner {
  background: #f0fdf4; border: 1px solid #86efac;
  color: #16a34a;
}

/* Send / reject inline panel */
.send-quote-panel {
  background: var(--c-bg-hover); border: 1px solid var(--c-border);
  border-radius: var(--r-md); padding: 16px;
  margin-top: 10px;
}
.send-quote-panel[hidden] { display: none; }

/* Convert to contract modal */
.convert-contract-modal { max-width: 420px; }

/* ════════════════════════════════════════════════════════════════
   ADMIN — Service Boards
   ════════════════════════════════════════════════════════════════ */

.board-admin-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--c-bg-card);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  transition: box-shadow 80ms;
  cursor: default;
}
.board-admin-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.board-admin-row.inactive { opacity: 0.55; }

.board-drag-handle {
  color: var(--c-text-muted); cursor: grab;
  font-size: 18px; flex-shrink: 0;
}
.board-drag-handle:active { cursor: grabbing; }

.board-color-dot {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; border: 2px solid rgba(0,0,0,.08);
}
.board-name-cell {
  flex: 1; font-weight: 500; font-size: 14px;
  color: var(--c-text-primary);
}
.board-name-cell small {
  display: block; font-size: 11.5px; font-weight: 400;
  color: var(--c-text-muted); margin-top: 1px;
}

.board-access-badge {
  font-size: 11.5px; color: var(--c-text-muted);
  white-space: nowrap;
}
.board-portal-badge {
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
}
.board-portal-on  {
  background: #f0fdf4; color: #16a34a; border: 1px solid #86efac;
}
.board-portal-off {
  background: var(--c-bg-hover); color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}
.board-default-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 999px;
  background: var(--c-amber-light, #fef3c7); color: #d97706;
  border: 1px solid #fde68a; white-space: nowrap;
}
.board-inactive-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  background: var(--c-bg-hover); color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}
.board-ticket-count {
  font-size: 12px; color: var(--c-text-muted);
  white-space: nowrap; min-width: 70px; text-align: right;
}
.board-ticket-count a {
  color: var(--c-blue); text-decoration: none;
}
.board-ticket-count a:hover { text-decoration: underline; }
.board-actions {
  display: flex; gap: 6px; flex-shrink: 0;
}

/* ── Board form ─────────────────────────────────────────────────── */
.board-color-picker-row {
  display: flex; align-items: center; gap: 10px;
}
.board-color-swatch {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border); flex-shrink: 0;
  transition: background 150ms;
}
.access-type-panel { margin-top: 10px; }
.access-type-panel[hidden] { display: none; }
.role-checkbox-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.role-checkbox-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; cursor: pointer;
}
.agent-multi-select {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--c-border); border-radius: var(--r-sm);
  padding: 6px;
}
.agent-multi-select label {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; font-size: 13px; cursor: pointer;
  border-radius: 4px;
}
.agent-multi-select label:hover { background: var(--c-bg-hover); }

/* ── Board chip (reused in ticket list + detail) ─────────────────── */
.board-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.1);
}
.board-chip .board-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   TICKET LIST — Board tab strip + Board column (Statement 2)
   ════════════════════════════════════════════════════════════════ */

.board-tab-strip {
  display: flex; align-items: center; gap: 4px;
  padding: 0 0 0 2px; margin-bottom: 10px;
  border-bottom: 2px solid var(--c-border);
  flex-wrap: wrap; white-space: nowrap;
}
.board-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; font-size: 13px;
  color: var(--c-text-secondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 150ms, border-color 150ms;
  flex-shrink: 0;
}
.board-tab:hover { color: var(--c-text-primary); }
.board-tab.active {
  color: var(--c-navy); font-weight: 500;
  border-bottom-color: var(--c-navy);
}
.board-tab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

.board-col-header { white-space: nowrap; min-width: 100px; }
.board-col-cell   { white-space: nowrap; }

/* ════════════════════════════════════════════════════════════════
   TICKET FORM — board selector
   ════════════════════════════════════════════════════════════════ */

.board-select-row { display: flex; align-items: center; gap: 8px; }
.board-color-dot-lg {
  width: 14px; height: 14px; border-radius: 50%;
  flex-shrink: 0; border: 1.5px solid rgba(0,0,0,.1);
  transition: background 200ms;
}

/* ════════════════════════════════════════════════════════════════
   TICKET DETAIL — board display + move
   ════════════════════════════════════════════════════════════════ */

.board-detail-cell {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
.move-board-panel {
  background: var(--c-bg-hover);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  margin: 6px 0 12px;
}
.move-board-panel[hidden] { display: none; }
.move-board-form-row {
  display: flex; align-items: center; gap: 8px;
}
.form-select-sm { font-size: 13px; padding: 5px 8px; }

.ticket-meta-board {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; margin-left: 4px;
}
.ticket-meta-board i { font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   SKILLS — admin user edit (tag-based, scenario B)
   ════════════════════════════════════════════════════════════════ */

.skills-tag-input-wrap { max-width: 520px; }

.skills-tag-list {
  display: flex; flex-wrap: wrap; gap: 6px;
  min-height: 38px; padding: 6px 8px;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}

.skill-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 10px;
  background: var(--c-navy-light);
  border: 1px solid var(--c-navy-border);
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  color: var(--c-navy);
}
.skill-tag-remove {
  background: none; border: none;
  color: var(--c-navy); cursor: pointer;
  padding: 0; display: flex; align-items: center;
  opacity: .6; font-size: 13px;
}
.skill-tag-remove:hover { opacity: 1; color: var(--c-red); }

.skills-add-row {
  display: flex; align-items: center; gap: 8px;
}


/* ════════════════════════════════════════════════════════════════
   TICKET CHECKLIST (migration 0022 — recurring tickets)
   ════════════════════════════════════════════════════════════════ */

.ticket-checklist {
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.checklist-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.checklist-title {
  display: flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13.5px; flex: 1;
}
.checklist-title i { font-size: 15px; color: var(--c-navy, #1e3a8a); }
.checklist-progress {
  font-size: 12px; font-weight: 600;
  color: var(--c-text-muted, #6b7280); white-space: nowrap;
}
.checklist-progress-bar {
  width: 80px; height: 6px;
  background: var(--c-border, #e2e8f0);
  border-radius: 999px; overflow: hidden;
}
.checklist-progress-fill {
  height: 100%; background: var(--c-green, #10b981);
  border-radius: 999px; transition: width 300ms ease;
}
.checklist-list { list-style: none; padding: 0; margin: 0; }
.checklist-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
  transition: background 100ms;
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item:hover { background: rgba(0,0,0,.02); }
.checklist-item-done .checklist-label {
  text-decoration: line-through;
  color: var(--c-text-muted, #6b7280);
}
.checklist-toggle {
  background: none; border: none; cursor: pointer;
  padding: 0; color: var(--c-text-muted, #6b7280);
  font-size: 18px; flex-shrink: 0;
  display: flex; align-items: center;
  transition: color 150ms;
}
.checklist-item-done .checklist-toggle { color: var(--c-green, #10b981); }
.checklist-toggle:hover { color: var(--c-navy, #1e3a8a); }
.checklist-label {
  flex: 1; font-size: 13.5px;
  color: var(--c-text-primary, #1f2937);
}
.checklist-required-badge {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; padding: 1px 6px; border-radius: 3px;
  background: #fef3e2; color: #d97706; flex-shrink: 0;
}
.checklist-done-by {
  font-size: 11px; color: var(--c-text-muted, #6b7280);
  flex-shrink: 0;
}
.checklist-source {
  font-size: 11.5px; color: var(--c-text-muted, #6b7280);
  margin: 10px 0 0; display: flex; align-items: center; gap: 4px;
}
.checklist-source a {
  color: var(--c-blue, #2563eb); text-decoration: none;
}
.checklist-source a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════
   ADMIN — Recurring tickets form
   ════════════════════════════════════════════════════════════════ */

.form-grid-2col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
@media (max-width: 900px) {
  .form-grid-2col { grid-template-columns: 1fr; }
}
.section-heading {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-muted, #6b7280);
  margin: 18px 0 10px;
}
.recurrence-options { margin-bottom: 12px; }
.recurrence-option {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; margin-bottom: 4px;
  border-radius: var(--r-md, 6px);
  cursor: pointer; transition: background 100ms;
}
.recurrence-option:hover { background: var(--c-bg-hover, #f8fafc); }
.recurrence-option input[type="radio"],
.recurrence-option input[type="checkbox"] {
  margin-top: 3px; flex-shrink: 0;
}
.recurrence-option-label { font-size: 13.5px; font-weight: 500; }
.recurrence-sub-field {
  margin: 4px 0 10px 26px;
  padding: 10px;
  background: var(--c-bg-hover, #f8fafc);
  border-radius: var(--r-sm, 4px);
}
.recurrence-sub-field[hidden] { display: none; }
.weekday-checkboxes {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.weekday-checkbox-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
}
.weekday-checkbox-item label {
  font-size: 11.5px; font-weight: 500; cursor: pointer;
}
.weekday-checkbox-item input { cursor: pointer; }

.schedule-preview {
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: var(--r-md, 6px);
  padding: 12px 14px;
  margin-top: 16px;
}
.schedule-preview-title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: #3730a3;
  margin: 0 0 8px;
}
.schedule-preview-dates {
  list-style: none; padding: 0; margin: 0;
}
.schedule-preview-dates li {
  font-size: 13px; color: #1e3a8a; padding: 2px 0;
}

.checklist-builder { max-width: 640px; }
.checklist-builder-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.checklist-builder-row:last-child { border-bottom: none; }
.checklist-builder-row input[type="text"] { flex: 1; }
.checklist-builder-row .req-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; white-space: nowrap;
}
.li-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--c-text-muted, #6b7280);
  padding: 4px;
}
.li-remove-btn:hover { color: var(--c-red, #ef4444); }

.inactive-row { opacity: 0.55; }
.stat-strip {
  display: flex; gap: 12px; margin: 12px 0 18px;
  flex-wrap: wrap;
}
.stat-card {
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 6px);
  padding: 10px 14px;
  display: flex; flex-direction: column;
  min-width: 110px;
}
.stat-card .stat-value {
  font-size: 18px; font-weight: 700;
  color: var(--c-text-primary, #1f2937);
}
.stat-card .stat-label {
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-muted, #6b7280);
}

.creation-time-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--c-text-muted, #6b7280);
  white-space: nowrap;
}
.creation-time-chip i { font-size: 13px; }
.meta-sep { color: var(--c-text-muted, #9ca3af); margin: 0 4px; }

/* ── Auto acknowledgement preview (admin settings) ─────────────── */
.ack-preview-section {
  margin-top: 16px;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 6px);
  overflow: hidden;
}
.ack-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px;
  background: var(--c-bg-hover, #f8fafc);
  border-bottom: 1px solid var(--c-border, #e2e8f0);
  font-size: 13px; font-weight: 500;
}
#ack-preview-panel {
  padding: 14px;
  background: var(--c-bg-card, #fff);
}
#ack-preview-panel[hidden] { display: none; }
.ack-preview-subject {
  font-size: 13px; margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.ack-preview-body { font-size: 13px; }

/* ════════════════════════════════════════════════════════════════
   TICKET RELATIONSHIPS — parent/child + merging (migration 0024)
   ════════════════════════════════════════════════════════════════ */

.ticket-link-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--r-sm, 4px);
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  font-size: 12.5px; font-weight: 500;
  color: var(--c-navy, #1e3a8a); text-decoration: none;
}
.ticket-link-chip:hover {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.ticket-link-chip i { font-size: 13px; }
.merged-chip {
  color: #64748b; background: #f8fafc; border-color: #e2e8f0;
}
.parent-ticket-ref {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.rel-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 5px; border-radius: 3px;
  vertical-align: middle; margin-left: 4px; white-space: nowrap;
}
.rel-parent {
  background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe;
}
.rel-child {
  background: #f5f3ff; color: #7c3aed; border: 1px solid #ddd6fe;
}
.rel-merged {
  background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0;
  font-style: italic;
}

.child-tickets-section {
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px);
  padding: 14px 16px; margin-bottom: 16px;
}
.child-tickets-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.child-tickets-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 13.5px;
  color: var(--c-navy, #1e3a8a);
}
.child-tickets-title i { font-size: 15px; }
.child-count-badge {
  background: #eef2ff; color: #3730a3;
  border: 1px solid #c7d2fe;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
}
.child-open-badge {
  background: #f0fdf4; color: #16a34a;
  border: 1px solid #86efac;
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
}
.child-tickets-actions {
  display: flex; gap: 6px; flex-wrap: wrap;
}

.child-tickets-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.child-tickets-table th {
  padding: 6px 10px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-text-muted, #6b7280); text-align: left;
  border-bottom: 1.5px solid var(--c-border, #e2e8f0);
}
.child-tickets-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
  vertical-align: middle;
}
.child-tickets-table tr:last-child td { border-bottom: none; }
.child-row-closed td { opacity: 0.55; }

.inline-action-panel {
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px);
  padding: 14px 16px; margin-top: 10px;
}
.inline-action-panel[hidden] { display: none; }
.panel-help {
  font-size: 13px; color: var(--c-text-secondary, #4b5563);
  margin: 0 0 10px;
}
.panel-actions { display: flex; gap: 8px; margin-top: 10px; }

.ticket-search-wrap { position: relative; }
.ticket-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 0 0 var(--r-md, 6px) var(--r-md, 6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  max-height: 220px; overflow-y: auto;
  z-index: 100;
}
.ticket-search-results:empty { display: none; }
.search-result-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--c-bg-hover, #f8fafc); }
.search-result-item.disabled {
  cursor: not-allowed; opacity: 0.6;
}
.search-result-item.disabled:hover { background: transparent; }
.search-result-num {
  font-family: monospace; font-size: 12px;
  color: #2563eb; flex-shrink: 0;
}
.search-result-company {
  font-size: 11px; color: var(--c-text-muted, #6b7280);
  flex-shrink: 0;
}
.search-result-diff-company {
  color: #ef4444; font-size: 11px;
}

.selected-children-list,
.selected-merge-list {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.selected-ticket-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; background: #eef2ff;
  border: 1px solid #c7d2fe; border-radius: 999px;
  font-size: 12px; color: #3730a3;
}
.selected-ticket-tag button {
  background: none; border: none; cursor: pointer;
  color: #3730a3; font-size: 14px; padding: 0;
  line-height: 1;
}
.selected-ticket-tag button:hover { color: #ef4444; }

.selected-ticket-display {
  padding: 8px 12px; background: #eef2ff;
  border: 1px solid #c7d2fe; border-radius: var(--r-sm, 4px);
  font-size: 13px; color: #3730a3; margin-top: 8px;
}

/* ════════════════════════════════════════════════════════════════
   TICKET LIST — bulk merge bar, row select, modal
   ════════════════════════════════════════════════════════════════ */

.col-select {
  width: 32px; text-align: center; padding: 0 4px;
}
.col-select input[type="checkbox"] {
  cursor: pointer; margin: 0;
}

.merge-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; margin: 10px 0 8px;
  background: #f8fafc;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 6px);
  font-size: 13px;
}
.merge-bar-info {
  flex: 1; display: flex; align-items: center; gap: 6px;
  color: var(--c-text-muted, #6b7280);
}
.merge-bar-info i { font-size: 14px; }
.merge-bar-count {
  font-weight: 600; color: var(--c-text-primary, #1f2937);
  white-space: nowrap;
}
.merge-bar.has-selection {
  background: #eef2ff;
  border-color: #c7d2fe;
}
.merge-bar.has-selection .merge-bar-info { color: #3730a3; }
.merge-bar.has-selection .merge-bar-count { color: #1e3a8a; }

/* Modal */
.merge-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}
.merge-modal[hidden] { display: none; }
.merge-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.merge-modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 8px;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100vh - 64px);
  display: flex; flex-direction: column;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.35);
}
.merge-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.merge-modal-header h3 {
  margin: 0; font-size: 15px; font-weight: 600;
}
.merge-modal-close {
  background: none; border: none; cursor: pointer;
  padding: 4px; color: var(--c-text-muted, #6b7280);
  font-size: 18px; line-height: 1;
}
.merge-modal-close:hover { color: var(--c-text-primary, #1f2937); }

.merge-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
}
.merge-modal-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--c-border, #e2e8f0);
  background: #f8fafc;
  border-radius: 0 0 8px 8px;
}

.merge-modal-warning {
  background: #fef2f2; color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 6px;
  padding: 8px 12px; font-size: 13px;
  margin-bottom: 12px;
}
.merge-modal-warning ul {
  margin: 4px 0 0; padding-left: 20px;
}

.merge-modal-list {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 6px;
  padding: 4px;
  max-height: 280px; overflow-y: auto;
}
.merge-modal-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 100ms;
}
.merge-modal-row:hover { background: #f8fafc; }
.merge-modal-row input[type="radio"] {
  margin: 0; flex-shrink: 0;
}
.merge-modal-row .row-main {
  display: flex; flex-direction: column; gap: 2px; flex: 1;
  min-width: 0;
}
.merge-modal-row .row-num {
  font-family: monospace; font-size: 12px;
  font-weight: 600; color: #2563eb;
}
.merge-modal-row .row-title {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.merge-modal-row .row-meta {
  font-size: 11px; color: var(--c-text-muted, #6b7280);
}
.merge-modal-row .row-remove {
  background: none; border: none; cursor: pointer;
  color: var(--c-text-muted, #6b7280);
  padding: 4px; font-size: 14px;
}
.merge-modal-row .row-remove:hover { color: #ef4444; }
.merge-modal-row.is-primary {
  background: #eef2ff;
}
.merge-modal-row.is-primary .row-num { color: #1e3a8a; }

/* ════════════════════════════════════════════════════════════════
   CONTRACT RENEWAL
   ════════════════════════════════════════════════════════════════ */

/* Sidebar renewal card */
.renewal-sidebar-card { }
.renewal-alert-history { margin-top: 10px; }
.renewal-alert-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; font-size: 12px;
  border-bottom: 0.5px solid var(--c-border);
}
.renewal-alert-row:last-child { border-bottom: none; }
.renewal-alert-days {
  font-weight: 600; color: var(--c-navy); min-width: 60px;
}
.renewal-alert-date { color: var(--c-text-muted); flex: 1; }
.renewal-link {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; color: var(--c-blue); text-decoration: none;
}
.renewal-link:hover { text-decoration: underline; }

/* Pipeline page */
.renewal-pipeline-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 12px; margin-bottom: 20px;
}
.rps-card {
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid; text-align: center;
}
.rps-card.critical {
  background: #fef2f2; border-color: #fca5a5;
}
.rps-card.warning  {
  background: var(--c-amber-light, #fef3c7); border-color: var(--c-amber, #d97706);
}
.rps-card.upcoming {
  background: #eff6ff; border-color: #bfdbfe;
}
.rps-num {
  display: block; font-size: 28px; font-weight: 700;
  line-height: 1;
}
.rps-card.critical  .rps-num { color: #dc2626; }
.rps-card.warning   .rps-num { color: #d97706; }
.rps-card.upcoming  .rps-num { color: #2563eb; }
.rps-label {
  display: block; font-size: 12px; color: var(--c-text-muted);
  margin-top: 4px;
}

/* Alert threshold chips */
.alert-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; padding: 1px 6px; border-radius: 999px;
  font-weight: 500; white-space: nowrap;
}
.alert-chip-sent {
  background: #f0fdf4; color: #16a34a;
  border: 1px solid #86efac;
}
.alert-chip-pending {
  background: var(--c-bg-hover, #f3f4f6); color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

/* Renewal status badge */
.renewal-status-badge {
  font-size: 11.5px; padding: 2px 8px; border-radius: 999px;
  font-weight: 500; white-space: nowrap;
  border: 1px solid;
}
.rs-active      { background:#f0fdf4; color:#16a34a; border-color:#86efac; }
.rs-in_progress { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.rs-renewed     { background:#f5f3ff; color:#7c3aed; border-color:#ddd6fe; }
.rs-lapsed      { background:#fef2f2; color:#dc2626; border-color:#fca5a5; }

/* Sidebar badge */
.sidebar-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: 10px; font-weight: 700; padding: 0 5px;
  margin-left: auto;
}

/* ════════════════════════════════════════════════════════════════
   TICKET TEMPLATES — combined index
   ════════════════════════════════════════════════════════════════ */

.template-admin-list { margin-top: 16px; }

.template-admin-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--c-bg-card, #fff);
  border: 0.5px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: 6px;
  transition: box-shadow 80ms;
}
.template-admin-row:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.template-admin-row.inactive { opacity: 0.55; }

.tmpl-main { flex: 1; min-width: 0; }
.tmpl-name {
  display: block; font-weight: 500; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tmpl-meta {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 12px; color: var(--c-text-muted); margin-top: 3px;
}
.tmpl-next-run {
  font-size: 12px; color: var(--c-text-muted);
  white-space: nowrap; min-width: 110px;
}
.tmpl-count {
  font-size: 12.5px; white-space: nowrap; min-width: 80px;
  text-align: right;
}
.tmpl-count a { color: var(--c-blue, #2563eb); text-decoration: none; }
.tmpl-count a:hover { text-decoration: underline; }
.tmpl-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* Tab nav */
.tab-nav {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 16px;
}
.tab-nav-item {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; font-size: 13.5px;
  color: var(--c-text-secondary, #475569);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 150ms, border-color 150ms;
}
.tab-nav-item:hover { color: var(--c-text-primary, #0f172a); }
.tab-nav-item.active {
  color: var(--c-navy, #1a3a5c);
  font-weight: 500;
  border-bottom-color: var(--c-navy, #1a3a5c);
}
.tab-count {
  background: var(--c-bg-hover, #f3f4f6);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px; min-width: 22px;
  text-align: center;
}

/* Feature chips */
.feature-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 500; padding: 1px 6px;
  border-radius: 3px; white-space: nowrap;
}
.feature-ticket {
  background: #eff6ff; color: #2563eb;
  border: 1px solid #bfdbfe;
}
.feature-quote {
  background: #f0fdf4; color: #16a34a;
  border: 1px solid #86efac;
}

.alert-threshold-chip {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; padding: 1px 6px;
  border-radius: 999px;
  background: var(--c-navy-light, #e0e7ff);
  color: var(--c-navy, #1a3a5c);
  border: 1px solid var(--c-navy-border, #c7d2fe);
  white-space: nowrap;
  margin-right: 3px;
}

.badge-inactive {
  font-size: 11px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px;
  background: var(--c-bg-hover, #f3f4f6);
  color: var(--c-text-muted);
  border: 1px solid var(--c-border);
}

.empty-state {
  padding: 40px 20px; text-align: center;
  color: var(--c-text-muted);
}
.empty-state i { font-size: 32px; margin-bottom: 8px; display: block; }

.breadcrumb-link {
  display: inline-block; font-size: 12px;
  color: var(--c-text-muted); text-decoration: none;
  margin-bottom: 4px;
}
.breadcrumb-link:hover { color: var(--c-navy, #1a3a5c); }

/* ════════════════════════════════════════════════════════════════
   RENEWAL RULE FORM — layout helpers
   ════════════════════════════════════════════════════════════════ */

/* Inline checkbox + label pair (used for toggles and threshold chips) */
.checkbox-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--c-text-primary, #0f172a);
}
.checkbox-inline input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}
.checkbox-inline > span { user-select: none; }

/* Grid of threshold checkboxes — wraps cleanly */
.checkbox-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  padding: 4px 0 2px;
}

/* Indented block under a "Create ticket/quote" toggle */
.nested-fields {
  margin: 4px 0 14px 26px;
  padding: 14px 16px;
  border-left: 2px solid var(--c-border);
  background: var(--c-bg-hover, #f7f8fa);
  border-radius: 0 8px 8px 0;
}
.nested-fields .form-group:last-child { margin-bottom: 0; }

/* Checklist editor table */
.checklist-table th,
.checklist-table td { padding: 6px 8px; vertical-align: middle; }
.checklist-table .col-required {
  width: 90px;
  text-align: center;
}
.checklist-table .col-actions {
  width: 60px;
  text-align: center;
}
.checklist-table .form-input { width: 100%; }
.checklist-table .remove-row {
  font-size: 16px;
  line-height: 1;
  padding: 2px 8px;
}

/* Token-reference footer */
.token-help { margin: 14px 0 6px; }
.token-help code {
  background: var(--c-bg-hover, #f3f4f6);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-size: 11.5px;
  padding: 1px 5px;
  margin: 0 2px;
}

/* Form actions row at the bottom of a form */
.form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
}

/* ════════════════════════════════════════════════════════════════
   COMPANY PAGE — Monthly Report section
   ════════════════════════════════════════════════════════════════ */
.monthly-report-section { padding: 16px; }

.mr-recipients-list {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 4px; padding: 6px;
  margin-top: 4px;
}
.mr-contact-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 4px; cursor: pointer;
  font-size: 13px;
}
.mr-contact-item:hover { background: var(--c-bg-hover, #f8fafc); }
.contact-email {
  color: var(--c-text-muted, #64748b); font-size: 12px; flex: 1;
}
.no-email-warn {
  font-size: 10.5px; color: #dc2626;
  background: #fef2f2; padding: 1px 5px;
  border-radius: 3px;
}

.mr-sections-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px;
}
.mr-section-item {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 7px 10px; min-width: 200px;
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 4px; cursor: pointer;
  font-size: 13px;
}
.mr-section-item:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
.mr-section-label { font-weight: 500; display: block; }
.mr-section-desc  {
  font-size: 11.5px; color: var(--c-text-muted, #64748b);
  display: block; margin-top: 1px;
}

.mr-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ════════════════════════════════════════════════════════════════
   QUICK VIEW STRIP
   ════════════════════════════════════════════════════════════════ */
/* Primary queue-view selector — styled as a pill bar so it
   doesn't get visually confused with the .board-tab-strip
   that sits inside the card below it. */
.quick-view-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px;
  background: var(--c-bg-card, #ffffff);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  flex-wrap: wrap;
}
.quick-view-tab {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px;
  font-size: 15px; font-weight: 500;
  color: var(--c-text-secondary, #475569);
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: color 150ms, background 150ms;
}
.quick-view-tab:hover {
  color: var(--c-text-primary, #1e293b);
  background: var(--c-bg-hover, #f1f5f9);
  text-decoration: none;
}
.quick-view-tab.quick-view-active {
  color: #ffffff;
  background: var(--c-navy, #1a3a5c);
  font-weight: 600;
}
.quick-view-tab.quick-view-active:hover {
  background: var(--c-navy, #1a3a5c);
}
.quick-view-tab i { font-size: 18px; }

.qv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 22px;
  padding: 0 8px;
  font-size: 12.5px; font-weight: 700;
  border-radius: 999px;
  background: var(--c-bg-hover, #f1f5f9);
  color: var(--c-text-muted, #64748b);
  border: 1px solid var(--c-border, #e2e8f0);
}
/* Badge inside an active (navy) tab — invert for contrast. */
.qv-badge-active {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, .35);
}
.qv-badge-alert {
  background: #fef2f2;
  color: #dc2626;
  border-color: #fca5a5;
}
.qv-badge-unassigned {
  background: #fef3e2;
  color: #d97706;
  border-color: #fde68a;
}

.qv-context-note {
  font-size: 12.5px;
  color: var(--c-text-muted, #64748b);
  margin: 6px 2px 0;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════
   TICKET AGE
   ════════════════════════════════════════════════════════════════ */
.ticket-age-cell { white-space: nowrap; }
.age-chip {
  display: inline-block;
  font-size: 11.5px;
  color: var(--c-text-muted, #64748b);
  white-space: nowrap;
}
.age-new    { color: var(--c-green, #16a34a); font-weight: 500; }
.age-aging  { color: #d97706; font-weight: 500; }
.age-old    {
  color: #dc2626; font-weight: 600;
  background: #fef2f2; padding: 1px 6px;
  border-radius: 3px; border: 1px solid #fca5a5;
}

/* ════════════════════════════════════════════════════════════════
   CLAIM BUTTON
   ════════════════════════════════════════════════════════════════ */
.claim-btn {
  font-size: 11.5px !important;
  padding: 2px 8px !important;
  margin-left: 6px;
  white-space: nowrap;
  vertical-align: middle;
}
.claim-btn.claimed {
  background: var(--c-bg-hover, #f1f5f9) !important;
  color: var(--c-text-muted, #64748b) !important;
  border-color: var(--c-border, #e2e8f0) !important;
  cursor: default;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════
   AWAITING REPLY CHIP
   ════════════════════════════════════════════════════════════════ */
.awaiting-reply-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600;
  padding: 1px 7px; border-radius: 999px;
  background: #eff6ff; color: #2563eb;
  border: 1px solid #bfdbfe;
  vertical-align: middle; margin-left: 6px;
  white-space: nowrap;
}
.awaiting-reply-chip i { font-size: 11px; }

/* Sidebar badge */
.sidebar-badge {
  margin-left: auto;
  background: #dc2626; color: #fff;
  font-size: 10.5px; font-weight: 700;
  min-width: 18px; padding: 0 6px; height: 16px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════════
   TICKET WATCHERS
   ════════════════════════════════════════════════════════════════ */
.watcher-row-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 500;
  padding: 1px 6px; border-radius: 999px;
  background: #f5f3ff; color: #7c3aed;
  border: 1px solid #ddd6fe;
  vertical-align: middle; margin-left: 5px;
  white-space: nowrap;
}
.watcher-row-chip i { font-size: 11px; }

.watchers-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border, #e2e8f0);
}
.detail-section-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.detail-section-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-text-muted, #64748b);
}
.detail-section-title i { font-size: 13px; }
.watcher-count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 10.5px; font-weight: 700;
  background: var(--c-bg-hover, #f1f5f9);
  color: var(--c-text-muted, #64748b);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 999px;
}

.watcher-list { list-style: none; padding: 0; margin: 0 0 8px; }
.watcher-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--c-border, #e2e8f0);
}
.watcher-item:last-child { border-bottom: none; }
.watcher-avatar { flex-shrink: 0; }
.watcher-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #1a3a5c; color: #fff;
  font-size: 11px; font-weight: 700;
}
.watcher-name {
  flex: 1; font-size: 13px; cursor: help;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.watcher-promote-btn, .watcher-remove-btn {
  background: none; border: none; cursor: pointer;
  color: var(--c-text-muted, #64748b);
  font-size: 14px;
  padding: 2px; border-radius: 3px; flex-shrink: 0;
  display: flex; align-items: center;
  transition: color 100ms;
}
.watcher-promote-btn:hover { color: #16a34a; }
.watcher-remove-btn:hover  { color: #dc2626; }
.watcher-empty {
  font-size: 12.5px; color: var(--c-text-muted, #64748b);
  font-style: italic; margin: 4px 0 8px;
}

.add-watcher-wrap { position: relative; margin-top: 4px; }
.watcher-search-results {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  max-height: 200px; overflow-y: auto;
  z-index: 100;
}
.watcher-search-results:empty { display: none; }
.watcher-result-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; font-size: 13px;
  border-bottom: 0.5px solid var(--c-border, #e2e8f0);
}
.watcher-result-item:last-child { border-bottom: none; }
.watcher-result-item:hover { background: var(--c-bg-hover, #f8fafc); }
.watcher-result-email {
  font-size: 11.5px; color: var(--c-text-muted, #64748b);
}

.watch-self-toggle { margin-top: 8px; }
.inline-action-panel {
  margin-top: 8px; padding: 10px;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 4px;
}
.inline-action-panel .panel-help {
  font-size: 12.5px; margin: 0 0 8px;
}
.inline-action-panel .panel-actions {
  display: flex; gap: 6px;
}

.watcher-select-list {
  max-height: 180px; overflow-y: auto;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: 4px; padding: 6px;
  margin-top: 4px;
}
.watcher-select-item {
  display: flex; align-items: center; gap: 7px;
  padding: 4px 6px; border-radius: 4px;
  font-size: 13px; cursor: pointer;
}
.watcher-select-item:hover { background: var(--c-bg-hover, #f8fafc); }

/* ════════════════════════════════════════════════════════════════
   KNOWLEDGE BASE — admin UI
   ════════════════════════════════════════════════════════════════ */

/* ── Status badges ───────────────────────────────────────────── */
.kb-status-badge {
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.kb-status-draft     { background:#f1f5f9; color:#64748b;
                       border:1px solid #e2e8f0; }
.kb-status-review    { background:#fef3e2; color:#d97706;
                       border:1px solid #fde68a; }
.kb-status-published { background:#f0fdf4; color:#16a34a;
                       border:1px solid #86efac; }
.kb-status-archived  { background:#f1f5f9; color:#94a3b8;
                       border:1px solid #e2e8f0; opacity:.65; }

/* ── Visibility badges ───────────────────────────────────────── */
.kb-vis-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 500; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.kb-vis-internal { background:#f5f3ff; color:#7c3aed;
                   border:1px solid #ddd6fe; }
.kb-vis-public   { background:#f0fdf4; color:#16a34a;
                   border:1px solid #86efac; }
.kb-vis-specific { background:#eff6ff; color:#2563eb;
                   border:1px solid #bfdbfe; }

/* ── Filter bar ──────────────────────────────────────────────── */
.kb-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px; margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px);
}

/* ── Template selector ───────────────────────────────────────── */
.kb-template-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.kb-template-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 5px;
  padding: 10px 14px; min-width: 110px;
  background: var(--c-bg-hover, #f8fafc);
  border: 1.5px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px); cursor: pointer;
  font-size: 12px; font-weight: 500;
  color: var(--c-text-secondary, #475569);
  transition: border-color 150ms, background 150ms;
}
.kb-template-btn:hover,
.kb-template-btn.selected {
  background: var(--c-navy-light, #eff6ff);
  border-color: var(--c-navy, #1e3a8a);
  color: var(--c-navy, #1e3a8a);
}
.kb-template-btn i { font-size: 20px; }
.kb-template-blank { border-style: dashed; }

/* ── Status toggle ───────────────────────────────────────────── */
.kb-status-toggle-group {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px;
}
.kb-status-option { display: inline-flex; align-items: center; cursor: pointer; }
.kb-status-option input { display: none; }
.kb-status-option input:checked + .kb-status-badge {
  outline: 2px solid var(--c-navy, #1e3a8a); outline-offset: 2px;
}
.kb-status-option:hover .kb-status-badge { opacity: .85; }

/* ── Visibility selector ─────────────────────────────────────── */
.kb-visibility-group {
  display: flex; flex-direction: column; gap: 8px; margin-top: 4px;
}
.kb-vis-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px;
  background: var(--c-bg-card, #fff);
  border: 1.5px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px); cursor: pointer;
  transition: border-color 150ms, background 150ms;
}
.kb-vis-option:hover { border-color: var(--c-navy-border, #c7d2fe); }
.kb-vis-option.active {
  border-color: var(--c-navy, #1e3a8a);
  background: var(--c-navy-light, #eff6ff);
}
.kb-vis-option input { flex-shrink: 0; margin-top: 3px; }
.kb-vis-option > i   { font-size: 18px; color: var(--c-navy, #1e3a8a);
                       flex-shrink: 0; margin-top: 1px; }
.vis-label { display: block; font-size: 13.5px; font-weight: 600;
             color: var(--c-text-primary, #0f172a); }
.vis-desc  { display: block; font-size: 12px;
             color: var(--c-text-muted, #64748b); margin-top: 1px; }

/* ── Company selector ────────────────────────────────────────── */
.kb-company-select {
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px); overflow: hidden;
}
.kb-company-select > input { border: none; border-radius: 0;
                              border-bottom: 1px solid var(--c-border, #e2e8f0); }
.kb-company-list { max-height: 220px; overflow-y: auto; padding: 6px; }
.kb-company-item {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px; border-radius: 4px;
  font-size: 13px; cursor: pointer;
}
.kb-company-item:hover { background: var(--c-bg-hover, #f8fafc); }

/* ── Version history ─────────────────────────────────────────── */
.version-history-section {
  margin-top: 20px;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px);
  overflow: hidden;
}
.version-history-toggle {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  background: var(--c-bg-hover, #f8fafc);
  font-size: 13.5px; font-weight: 500;
  color: var(--c-navy, #1e3a8a);
  list-style: none;
}
.version-history-toggle::-webkit-details-marker { display: none; }
.version-count-badge {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: var(--c-navy-light, #eff6ff); color: var(--c-navy, #1e3a8a);
  border: 1px solid var(--c-navy-border, #c7d2fe);
}
.version-history-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.version-history-table th,
.version-history-table td {
  padding: 7px 14px;
  border-bottom: .5px solid var(--c-border, #e2e8f0);
  text-align: left;
}
.version-history-table tr:last-child td { border-bottom: none; }

/* ── Helpful percentage colour helpers ───────────────────────── */
.text-green { color: #16a34a; }
.text-amber { color: #d97706; }

/* ── Categories admin page ──────────────────────────────────── */
.kb-categories-layout {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: 18px; margin-top: 12px;
}
@media (max-width: 800px) {
  .kb-categories-layout { grid-template-columns: 1fr; }
}
.kb-categories-list .kb-cat-node {
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px); padding: 10px 14px;
  margin-bottom: 10px; background: var(--c-bg-card, #fff);
}
.kb-categories-list summary {
  cursor: pointer; padding: 4px 0;
  display: flex; align-items: center; gap: 8px;
}
.kb-cat-edit-form {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0;
}
.kb-cat-sub-row {
  display: flex; gap: 6px; align-items: center;
  padding-left: 22px; margin: 4px 0;
  border-left: 2px solid var(--c-border, #e2e8f0);
}
.kb-cat-sub-row .kb-cat-edit-form { margin: 0; flex: 1; }
.kb-cat-delete-form { display: inline; margin: 0; }
.kb-categories-new {
  padding: 14px;
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px); align-self: start;
}
.kb-categories-new h3 { margin: 0 0 10px; font-size: 14px; }

/* EasyMDE: keep the editor inside the form's max-width */
.EasyMDEContainer .CodeMirror {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
}

/* ════════════════════════════════════════════════════════════════
   PORTAL KNOWLEDGE BASE
   ════════════════════════════════════════════════════════════════ */

.portal-page-header { margin-bottom: 20px; }

.kb-portal-search-form {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 24px;
}

.kb-portal-category-block { margin-bottom: 28px; }
.kb-portal-cat-heading {
  display: flex; align-items: center; gap: 8px;
  font-size: 17px; font-weight: 600;
  color: var(--c-navy, #1e3a8a);
  margin-bottom: 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--c-border, #e2e8f0);
}
.kb-portal-cat-heading i { font-size: 18px; }

.kb-portal-subcat-block { margin: 10px 0 10px 12px; }
.kb-portal-subcat-heading {
  font-size: 13.5px; font-weight: 600;
  color: var(--c-text-secondary, #475569);
  margin-bottom: 6px;
}

.kb-portal-article-list { list-style: none; padding: 0; margin: 0; }
.kb-portal-article-link {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border-radius: var(--r-sm, 6px);
  text-decoration: none; color: var(--c-text-primary, #0f172a);
  font-size: 13.5px; transition: background 100ms;
}
.kb-portal-article-link:hover {
  background: var(--c-bg-hover, #f8fafc);
}
.kb-portal-article-link i {
  font-size: 16px; color: var(--c-text-muted, #64748b);
  flex-shrink: 0; margin-top: 2px;
}
.kb-portal-article-title { font-weight: 500; }
.kb-portal-helpful-pct {
  display: block; font-size: 11.5px;
  color: #16a34a; margin-top: 1px;
}

/* ── Article page (portal) ───────────────────────────────────── */
.kb-article-wrap { max-width: 760px; margin: 0 auto; }
.kb-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--c-text-muted, #64748b);
  margin-bottom: 16px; flex-wrap: wrap;
}
.kb-breadcrumb a { color: #2563eb; text-decoration: none; }
.kb-breadcrumb a:hover { text-decoration: underline; }
.kb-breadcrumb-sep { color: var(--c-text-muted, #64748b); }
.kb-article-title {
  font-size: 22px; font-weight: 700;
  color: var(--c-navy, #1e3a8a); margin-bottom: 4px;
}
.kb-article-meta {
  font-size: 12.5px; color: var(--c-text-muted, #64748b);
  margin-bottom: 20px;
}
.kb-article-content { font-size: 14.5px; line-height: 1.7; }
.kb-article-content h2 {
  font-size: 17px; font-weight: 600; margin: 20px 0 8px;
}
.kb-article-content h3 {
  font-size: 15px; font-weight: 600; margin: 16px 0 6px;
}
.kb-article-content p { margin: 0 0 10px; }
.kb-article-content ul,
.kb-article-content ol { padding-left: 22px; margin: 0 0 10px; }
.kb-article-content code {
  background: var(--c-bg-hover, #f8fafc); border-radius: 4px;
  padding: 2px 6px; font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.kb-article-content pre {
  background: var(--c-bg-hover, #f8fafc); border-radius: 4px;
  padding: 12px; overflow-x: auto; margin: 0 0 12px;
}
.kb-article-content pre code { padding: 0; background: none; }
.kb-article-content table {
  width: 100%; border-collapse: collapse; margin: 0 0 12px;
}
.kb-article-content th,
.kb-article-content td {
  padding: 6px 10px;
  border: 1px solid var(--c-border, #e2e8f0);
  text-align: left;
}
.kb-article-content blockquote {
  border-left: 3px solid var(--c-border, #e2e8f0);
  padding-left: 12px; color: var(--c-text-secondary, #475569);
  margin: 0 0 12px;
}

/* ── Portal feedback section ─────────────────────────────────── */
.kb-feedback-section {
  background: var(--c-bg-hover, #f8fafc);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-md, 8px);
  padding: 16px 18px; margin: 28px 0; text-align: center;
}
.kb-feedback-question {
  font-size: 14.5px; font-weight: 500; margin-bottom: 10px;
}
.kb-feedback-buttons {
  display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap;
}
.kb-feedback-done {
  font-size: 13.5px; color: var(--c-text-secondary, #475569);
}
.kb-helpful-summary {
  font-size: 12px; color: var(--c-text-muted, #64748b);
  margin-top: 10px;
}
#kb-feedback-comment { margin-top: 12px; text-align: left; }

.kb-still-need-help {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin: 16px 0;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: var(--r-md, 8px);
  font-size: 13.5px; flex-wrap: wrap;
}
.kb-still-need-help i { font-size: 18px; color: #2563eb; }
.kb-still-need-help span { flex: 1; min-width: 140px; }

.kb-related-section { margin-top: 24px; }
.kb-related-title {
  font-size: 14px; font-weight: 600;
  color: var(--c-text-secondary, #475569); margin-bottom: 8px;
}

.kb-search-count {
  font-size: 13.5px; color: var(--c-text-secondary, #475569);
  margin-bottom: 10px;
}
.kb-search-category {
  display: block; font-size: 11.5px;
  color: var(--c-text-muted, #64748b); margin-top: 1px;
}

/* ── Ticket sidebar KB panel ─────────────────────────────────── */
.kb-search-panel-section { margin-top: 14px; }
.kb-panel-results {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-sm, 6px); margin-top: 6px;
}
.kb-panel-result-item {
  display: flex; flex-direction: column;
  padding: 7px 10px; font-size: 12.5px;
  border-bottom: 0.5px solid var(--c-border, #e2e8f0);
  text-decoration: none; color: var(--c-text-primary, #0f172a);
}
.kb-panel-result-item:last-child { border-bottom: none; }
.kb-panel-result-item:hover { background: var(--c-bg-hover, #f8fafc); }
.kb-panel-result-cat {
  font-size: 11px; color: var(--c-text-muted, #64748b);
  margin-top: 1px;
}
.kb-panel-result-vis {
  font-size: 10.5px; color: #7c3aed; margin-top: 1px;
}

/* ── Create-from-ticket prompt ───────────────────────────────── */
.kb-from-ticket-prompt {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 8px 0;
  background: #fef3e2;
  border: 1px solid #fde68a;
  border-radius: var(--r-sm, 6px);
  font-size: 12.5px;
}
.kb-from-ticket-prompt i { color: #d97706; font-size: 15px; }
.kb-from-ticket-prompt span { flex: 1; color: #92400e; }

/* ── Company page KB section ─────────────────────────────────── */
.company-kb-article-list {
  list-style: none; padding: 0; margin: 6px 0 0;
}
.company-kb-article-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0;
  border-bottom: 0.5px solid var(--c-border, #e2e8f0);
  font-size: 13px;
}
.company-kb-article-row:last-child { border-bottom: none; }
.company-kb-article-link {
  display: flex; align-items: center; gap: 6px;
  text-decoration: none; color: #2563eb; flex: 1;
}
.company-kb-article-link:hover { text-decoration: underline; }
.section-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; margin-left: 6px;
  font-size: 11px; font-weight: 600;
  background: var(--c-bg-hover, #f8fafc); color: var(--c-text-muted, #64748b);
  border: 1px solid var(--c-border, #e2e8f0); border-radius: 999px;
}
.empty-section-note {
  font-size: 12.5px; color: var(--c-text-muted, #64748b);
  font-style: italic; padding: 8px 0;
}