/* ============================================================================
   OffsiteCloud Portal — stylesheet
   Refined, professional SaaS aesthetic, tuned to the brand wordmark
   (slate #2e3f50 + cyan ~#16b6e6). Light is primary (auth screens forced light);
   dark tokens included for signed-in pages via [data-theme="dark"].
   ============================================================================ */

:root {
  /* Surfaces / text */
  --cp-bg:         #eef2f6;
  --cp-bg-2:       #e2e8ef;
  --cp-surface:    #ffffff;
  --cp-ink:        #1d2733;   /* readable dark slate (brand family) */
  --cp-slate:      #2e3f50;   /* brand slate (wordmark dark) */
  --cp-muted:      #5a6573;
  --cp-border:     #d7dee7;
  --cp-border-2:   #e7ecf1;

  /* Brand cyan family. --cp-brand-cyan is the literal logo cyan (accents only);
     --cp-accent is a darker cyan used for buttons/links so text contrast passes. */
  --cp-brand-cyan: #16b6e6;
  --cp-accent:     #0b7fa6;
  --cp-accent-ink: #0a6685;
  --cp-accent-soft:#e3f4fb;

  --cp-danger:     #b42318;
  --cp-danger-soft:#fdecea;

  --cp-radius:     12px;
  --cp-radius-sm:  8px;
  --cp-shadow:     0 1px 2px rgba(16,24,40,.04), 0 8px 24px rgba(16,24,40,.06);
  --cp-shadow-sm:  0 1px 2px rgba(16,24,40,.06);
  --cp-font:       "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cp-font-head:  "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cp-mono:       ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  --cp-bg:         #0e1117;
  --cp-bg-2:       #0b0e13;
  --cp-surface:    #161b22;
  --cp-ink:        #e7ecf2;
  --cp-slate:      #c4ced9;
  --cp-muted:      #9aa6b4;
  --cp-border:     #232b36;
  --cp-border-2:   #1d242e;
  --cp-brand-cyan: #2bc4f0;
  --cp-accent:     #22b8cf;
  --cp-accent-ink: #7fd6e3;
  --cp-accent-soft:#10303a;
  --cp-danger:     #f3766a;
  --cp-danger-soft:#2a1714;
  --cp-shadow:     0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.45);
  --cp-shadow-sm:  0 1px 2px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: var(--cp-font);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cp-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .4rem; }
.cp-h1 { font-size: 1.5rem; font-weight: 650; }
.cp-muted { color: var(--cp-muted); }
.cp-sub { margin-top: 0; margin-bottom: 1.25rem; }
.cp-mt { margin-top: 1.1rem; }

/* ---- Brand logo (image) ---- */
.cp-logo { display: block; height: 26px; width: auto; }
.cp-logo-auth { height: 24px; margin: 0 0 .25rem; }
[data-theme="dark"] .cp-logo { background: #fff; padding: 5px 8px; border-radius: 6px; }

/* ---- Auth screens (centred card on a soft, brand-tinted background) ---- */
.cp-authbody {
  min-height: 100vh;
  background:
    radial-gradient(1100px 480px at 50% -8%, var(--cp-accent-soft), transparent 60%),
    linear-gradient(180deg, var(--cp-bg) 0%, var(--cp-bg-2) 100%);
}
.cp-authwrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
}
.cp-authcard {
  width: 100%; max-width: 380px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  padding: 2rem 1.9rem; position: relative; overflow: hidden;
}
.cp-authcard::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--cp-brand-cyan), var(--cp-accent));
}
.cp-authcard-wide { max-width: 460px; }
.cp-authbrand { margin-bottom: 1.25rem; }

/* ---- App shell (signed-in) ---- */
.cp-appbar {
  background: var(--cp-surface);
  border-bottom: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-sm);
  position: sticky; top: 0; z-index: 10;
}
.cp-appbar-inner {
  max-width: 1000px; margin: 0 auto; padding: 0 1.25rem;
  height: 60px; display: flex; align-items: center; gap: 1.5rem;
}
.cp-brand { display: inline-flex; align-items: center; }
.cp-brand:hover { text-decoration: none; }
.cp-nav { margin-left: auto; display: flex; align-items: center; gap: 1.25rem; }
.cp-nav a { color: var(--cp-muted); font-weight: 500; }
.cp-nav a:hover { color: var(--cp-ink); text-decoration: none; }
.cp-nav .cp-signout {
  color: var(--cp-accent); border: 1px solid var(--cp-border);
  padding: .35rem .75rem; border-radius: var(--cp-radius-sm);
}
.cp-nav .cp-signout:hover { background: var(--cp-accent-soft); }
.cp-container { max-width: 1000px; margin: 0 auto; padding: 1.75rem 1.25rem; }
.cp-container-wide { max-width: 1320px; }

/* Ticket detail: full-width header + two-column grid (conversation + details sidebar). */
.cp-ticket-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 1.1rem; }
.cp-ticket-header-main { min-width: 0; }
.cp-ticket-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; align-items: start; }
.cp-ticket-main { min-width: 0; }
.cp-ticket-side { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; }
.cp-side-list { margin: 0; }
.cp-side-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--cp-border-2); }
.cp-side-row:first-of-type { padding-top: 0; }
.cp-side-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-side-row dt { font-size: .84rem; color: var(--cp-muted); margin: 0; flex-shrink: 0; }
.cp-side-row dd { margin: 0; font-size: .88rem; color: var(--cp-ink); font-weight: 600; text-align: right; }
.cp-side-agent { display: inline-flex; align-items: center; gap: .5rem; }
.cp-side-agent .cp-avatar { width: 30px; height: 30px; font-size: .8rem; }
.cp-side-contact { margin-bottom: .75rem; font-weight: 600; color: var(--cp-ink); }
.cp-bal { font-weight: 700; }
.cp-bal--pos { color: #2e7d32; }
.cp-bal--low { color: #c77700; }
.cp-bal--neg { color: #c0392b; }
.cp-convo-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.cp-convo-head .cp-section-title { margin-bottom: 0; }
.cp-asset-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.cp-asset { display: flex; align-items: center; gap: .65rem; }
.cp-asset-icon { color: var(--cp-slate); flex-shrink: 0; display: inline-flex; }
.cp-asset-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cp-asset-name { font-weight: 600; color: var(--cp-ink); word-break: break-word; }
.cp-asset-type { font-size: .8rem; }
.cp-sla-name { font-weight: 650; color: var(--cp-ink); margin-bottom: .5rem; }
.cp-sla-pri { font-weight: 500; color: var(--cp-muted); }
.cp-sla-bar { position: relative; height: 22px; border-radius: 4px; background: var(--cp-border);
  overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cp-sla-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.cp-sla-bar-label { position: relative; z-index: 1; font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
.cp-sla-bar--ok .cp-sla-bar-fill { background: #68bc00; }
.cp-sla-bar--over .cp-sla-bar-fill { background: #e8362f; }
.cp-sla-bar--hold .cp-sla-bar-fill { background: #cccccc; }
.cp-sla-bar--ok .cp-sla-bar-label,
.cp-sla-bar--over .cp-sla-bar-label { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.cp-sla-bar--hold .cp-sla-bar-label { color: var(--cp-ink); }
.cp-cats { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .9rem; color: var(--cp-ink); }
.cp-cat-sep { color: var(--cp-muted); }
@media (max-width: 860px) {
  .cp-ticket-grid { grid-template-columns: 1fr; }
  .cp-ticket-side { position: static; }
}

/* ---- Cards ---- */
.cp-card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow-sm);
}
.cp-pad { padding: 1.5rem 1.6rem; }

/* ---- Forms ---- */
.cp-form { display: flex; flex-direction: column; gap: 1rem; margin-top: .25rem; }
.cp-field { display: flex; flex-direction: column; gap: .35rem; }
.cp-field > span { font-size: .82rem; font-weight: 600; color: var(--cp-muted); }
.cp-field input, .cp-field select {
  font: inherit; color: var(--cp-ink); background: var(--cp-surface);
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm);
  padding: .7rem .8rem; transition: border-color .12s, box-shadow .12s;
}
.cp-field input:focus, .cp-field select:focus {
  outline: none; border-color: var(--cp-accent);
  box-shadow: 0 0 0 3px var(--cp-accent-soft);
}
.cp-code {
  font-family: var(--cp-mono); font-size: 1.5rem !important;
  letter-spacing: .5em; text-align: center; padding-left: .5em !important;
}

/* ---- Buttons ---- */
.cp-btn {
  appearance: none; cursor: pointer; font: inherit; font-weight: 600;
  color: #fff; background: var(--cp-accent);
  border: 1px solid var(--cp-accent); border-radius: var(--cp-radius-sm);
  padding: .72rem 1rem; transition: background .12s, transform .04s;
}
.cp-btn:hover { background: var(--cp-accent-ink); border-color: var(--cp-accent-ink); }
.cp-btn:active { transform: translateY(1px); }
.cp-btn-ghost { color: var(--cp-accent); background: transparent; border-color: var(--cp-border); }
.cp-btn-ghost:hover { background: var(--cp-accent-soft); }
.cp-btn-sm { padding: .4rem .7rem; font-size: .85rem; }
.cp-link { color: var(--cp-accent); font-size: .9rem; }

/* ---- Alerts ---- */
.cp-alert {
  background: var(--cp-danger-soft); color: var(--cp-danger);
  border: 1px solid rgba(180,35,24,.3); border-radius: var(--cp-radius-sm);
  padding: .65rem .8rem; font-size: .9rem; margin: 0 0 1rem;
}

/* ---- MFA enrolment ---- */
.cp-qrwrap {
  display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap;
  background: var(--cp-bg); border: 1px solid var(--cp-border-2);
  border-radius: var(--cp-radius-sm); padding: 1rem; margin: 0 0 1.25rem;
}
.cp-qr {
  width: 168px; height: 168px; flex: 0 0 auto;
  background: #fff; border-radius: 6px; padding: 8px;
  display: flex; align-items: center; justify-content: center;
}
.cp-qr img, .cp-qr canvas { display: block; }
.cp-keyblock { flex: 1 1 160px; min-width: 160px; }
.cp-key {
  display: block; font-family: var(--cp-mono); font-size: .95rem; word-break: break-all;
  background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 6px;
  padding: .55rem .65rem; margin: .35rem 0 .6rem; letter-spacing: .05em;
}

/* ---- Meta chips / empty states / tables ---- */
.cp-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0; }
.cp-chip {
  font-size: .8rem; font-weight: 600; color: var(--cp-muted);
  background: var(--cp-bg); border: 1px solid var(--cp-border-2);
  border-radius: 999px; padding: .25rem .7rem;
}
.cp-chip-accent { color: var(--cp-accent-ink); background: var(--cp-accent-soft); border-color: transparent; }

.cp-empty {
  text-align: center; padding: 2.5rem 1rem; color: var(--cp-ink);
  border: 1px dashed var(--cp-border); border-radius: var(--cp-radius-sm); margin-top: 1rem;
}
.cp-empty p { margin: .2rem 0; }

.cp-table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; }
.cp-table th, .cp-table td { text-align: left; padding: .65rem .7rem; border-bottom: 1px solid var(--cp-border-2); }
.cp-table th { color: var(--cp-muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.cp-table tbody tr:hover { background: var(--cp-bg); }

@media (max-width: 520px) {
  .cp-authcard { padding: 1.6rem 1.3rem; }
  .cp-appbar-inner, .cp-container { padding-left: 1rem; padding-right: 1rem; }
  .cp-logo { height: 22px; }
}

/* --- Ticket detail / conversation / reply (ticket-detail slice) --- */
.cp-link { color: var(--cp-accent); text-decoration: none; font-weight: 600; }
.cp-link:hover { text-decoration: underline; }

.cp-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.cp-ref { font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: .25rem; }
.cp-detail-side { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; flex-shrink: 0; }
.cp-detail-agent { display: inline-flex; align-items: center; gap: .55rem; }
.cp-detail-agent .cp-avatar { width: 34px; height: 34px; }
.cp-detail-agent-meta { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.cp-detail-agent-label { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-muted); }
.cp-detail-agent-name { font-size: .9rem; font-weight: 600; color: var(--cp-ink); }

.cp-meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; margin: 1.25rem 0 .5rem; padding: 1rem 1.15rem;
  background: var(--cp-bg-2); border: 1px solid var(--cp-border-2); border-radius: var(--cp-radius-sm); }
.cp-meta-item { min-width: 7rem; }
.cp-meta-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-muted); margin-bottom: .15rem; }
.cp-meta-value { color: var(--cp-ink); font-weight: 600; }

.cp-section-title { display: block; font-weight: 700; color: var(--cp-slate); font-size: 1.05rem; margin: 1.4rem 0 .9rem; }

/* Conversation */
.cp-msg { border: 1px solid var(--cp-border); border-left: 3px solid var(--cp-brand-cyan); border-radius: var(--cp-radius-sm);
  padding: 1rem 1.15rem; margin-bottom: 1rem; background: var(--cp-surface); box-shadow: var(--cp-shadow-sm);
  display: flex; gap: .85rem; align-items: flex-start; }
.cp-msg:last-of-type { margin-bottom: 0; }
.cp-msg-main { flex: 1; min-width: 0; }
.cp-msg-avatar { flex: 0 0 auto; }
.cp-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; overflow: hidden; object-fit: cover; font-weight: 700; font-size: .85rem; }
.cp-avatar-initials { background: var(--cp-slate); color: #fff; }
.cp-avatar-user { background: var(--cp-border-2); color: var(--cp-muted); }
.cp-msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid var(--cp-border-2); }
.cp-msg-author { font-weight: 700; color: var(--cp-slate); }
.cp-msg-when { font-size: .8rem; white-space: nowrap; }
.cp-msg-body { color: var(--cp-ink); line-height: 1.65; word-break: break-word; }

/* Reply form */
.cp-reply { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cp-border-2); }
.cp-textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 6rem; padding: .8rem .95rem;
  font: inherit; line-height: 1.5; color: var(--cp-ink); background: var(--cp-surface);
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); }
.cp-textarea:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px var(--cp-accent-soft); }
/* Inline (no-iframe) rich editor — looks like the textarea so the switch is seamless. */
#reply-editor { width: 100%; box-sizing: border-box; min-height: 8rem; max-height: 55vh; overflow: auto;
  padding: .8rem .95rem; line-height: 1.5; color: var(--cp-ink); background: var(--cp-surface);
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); }
#reply-editor:focus { outline: none; border-color: var(--cp-accent); box-shadow: 0 0 0 3px var(--cp-accent-soft); }
.cp-rt-toolbar { margin-bottom: .5rem; }
.cp-rt-toolbar:empty { display: none; } /* hide the docked-toolbar slot until TinyMCE fills it */
.cp-reply-actions { margin-top: .85rem; display: flex; justify-content: flex-end; }

/* Flash banners */
.cp-flash { padding: .7rem 1rem; border-radius: var(--cp-radius-sm); margin-bottom: 1rem; font-size: .92rem; border: 1px solid transparent; }
.cp-flash-ok { background: var(--cp-accent-soft); color: var(--cp-accent-ink); border-color: var(--cp-accent); }
.cp-flash-err { background: var(--cp-danger-soft); color: var(--cp-danger); border-color: var(--cp-danger); }

/* Impersonation banner (staff "log in as user") + small inline admin controls */
.cp-imp-banner {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #b45309; color: #fff;
  padding: .55rem 1rem; font-size: .9rem;
}
.cp-imp-banner strong { font-weight: 700; }
.cp-imp-form { margin: 0; }
.cp-imp-return {
  font: inherit; cursor: pointer; color: #fff;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--cp-radius-sm); padding: .3rem .8rem; white-space: nowrap;
}
.cp-imp-return:hover { background: rgba(255,255,255,.28); }
.cp-inline-form { display: inline; margin: 0; }
.cp-note {
  background: var(--cp-accent-soft); color: var(--cp-ink);
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm);
  padding: .6rem .8rem; margin: 0 0 1rem;
}

/* Ticket attachment list */
.cp-attach-list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.cp-attach-list li { padding: .4rem 0; border-bottom: 1px solid var(--cp-border-2); }
.cp-attach-list li:last-child { border-bottom: 0; }

/* Inline checkbox (e.g. close-on-reply) */
.cp-check { display: flex; align-items: center; gap: .5rem; margin: .6rem 0; font-size: .92rem; color: var(--cp-text-2, inherit); cursor: pointer; }
.cp-check input { width: auto; margin: 0; }

/* Tickets filter tabs + sortable headers */
.cp-filter { display: flex; gap: .4rem; margin: .2rem 0 1rem; flex-wrap: wrap; }
.cp-filter-tab { padding: .35rem .8rem; border: 1px solid var(--cp-border, #d6dde3); border-radius: 999px; font-size: .88rem; text-decoration: none; color: inherit; }
.cp-filter-tab:hover { border-color: var(--cp-accent, #16b6e6); }
.cp-filter-on, .cp-filter-on:hover { background: var(--cp-accent, #16b6e6); border-color: var(--cp-accent, #16b6e6); color: #fff; }
.cp-sort { text-decoration: none; color: inherit; white-space: nowrap; }
.cp-sort:hover { text-decoration: underline; }
.cp-row-closed { opacity: .6; }

/* Admin: role checkbox group + danger button */
.cp-checks { display: flex; flex-wrap: wrap; gap: .2rem 1.4rem; margin: .4rem 0 .7rem; }
.cp-btn-danger, .cp-btn-danger:hover { background: #c0392b; border-color: #c0392b; color: #fff; }
.cp-btn-danger:hover { background: #a93226; }

/* "Reply to ticket" disclosure — summary acts as the button, reveals the reply form */
.cp-reply-toggle { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--cp-border-2); }
.cp-reply-toggle > summary {
  display: inline-block; cursor: pointer; list-style: none;
  padding: .55rem 1.05rem; border-radius: 8px; font-weight: 600; font-size: .92rem;
  color: #fff; background: var(--cp-accent); border: 1px solid var(--cp-accent);
}
.cp-reply-toggle > summary::-webkit-details-marker { display: none; }
.cp-reply-toggle > summary::marker { content: ""; }
.cp-reply-toggle > summary:hover { background: var(--cp-accent-ink); border-color: var(--cp-accent-ink); }
.cp-reply-toggle .cp-reply { border-top: none; margin-top: 1rem; padding-top: .25rem; }
.cp-reply-file { margin-top: .85rem; }
.cp-reply-file > span { display: block; font-size: .9rem; margin-bottom: .3rem; }

/* Reply action button (sits under the description) + the reply box it reveals */
.cp-detail-actions { margin-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cp-detail-note { margin-left: .25rem; }
.cp-reply-open { display: inline-flex; align-items: center; gap: .5rem; }
.cp-attach-open { display: inline-flex; align-items: center; gap: .5rem; }
/* Has files: prominent (brand cyan) so it's obvious there's something to see. */
.cp-attach-open--has { background: var(--cp-brand-cyan); border-color: var(--cp-brand-cyan); color: #06323f; }
.cp-attach-open--has:hover { background: #12a6d2; border-color: #12a6d2; }
/* No files: subdued ghost style so it recedes. */
.cp-attach-open--none { background: transparent; color: var(--cp-muted); border-color: var(--cp-border); }
.cp-attach-open--none:hover { background: var(--cp-bg-2); border-color: var(--cp-border); }
.cp-reply-box .cp-section-title { margin-top: 0; }
.cp-reply-box .cp-reply { border-top: none; margin-top: .75rem; padding-top: 0; }

/* Attachment thumbnails — responsive grid of file-preview tiles (icon + name + size) */
.cp-attach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem; margin-top: .6rem;
}
.cp-attach-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm);
  text-decoration: none; color: var(--cp-ink); background: var(--cp-surface);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cp-attach-card:hover { border-color: var(--cp-accent); box-shadow: var(--cp-shadow); transform: translateY(-2px); }
.cp-attach-pic {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 112px; padding: 1.1rem; background: var(--cp-bg-2); line-height: 0;
}
.cp-attach-pic svg { width: 64px; height: 80px; }
.cp-attach-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: var(--cp-surface); z-index: 1;
}
/* Image tile: the picture fills the area; the type icon sits centred on top, semi-transparent. */
.cp-attach-pic-img svg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 44px; height: 55px; padding: 4px; opacity: .82;
  background: rgba(255, 255, 255, .55); border-radius: 8px; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.cp-attach-info { padding: .55rem .7rem .65rem; border-top: 1px solid var(--cp-border); }
.cp-attach-name {
  font-size: .82rem; font-weight: 600; line-height: 1.25; word-break: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-attach-size { display: block; font-size: .72rem; margin-top: .2rem; }

/* Attachment lightbox (image popup with prev/next + download) */
body.cp-lb-open { overflow: hidden; }
.cp-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .86); padding: 3.4rem 1rem 4.4rem;
}
.cp-lightbox[hidden] { display: none; }
.cp-lb-stage { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .65rem; max-width: min(92vw, 1100px); }
.cp-lb-img { max-width: 100%; max-height: 74vh; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 8px 40px rgba(0, 0, 0, .5); }
.cp-lb-cap { color: #e7ecf1; font-size: .85rem; text-align: center; word-break: break-word; }
.cp-lb-close { position: absolute; top: .5rem; right: .9rem; background: none; border: none; color: #fff; font-size: 2.1rem; line-height: 1; cursor: pointer; padding: .15rem .5rem; }
.cp-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 4rem;
  background: rgba(255, 255, 255, .12); color: #fff; border: none; cursor: pointer;
  font-size: 2.4rem; line-height: 1; border-radius: 8px;
}
.cp-lb-nav:hover { background: rgba(255, 255, 255, .22); }
.cp-lb-prev { left: 1rem; }
.cp-lb-next { right: 1rem; }
.cp-lb-nav[hidden] { display: none; }
.cp-lb-dl {
  position: absolute; bottom: 1.1rem; left: 50%; transform: translateX(-50%);
  background: var(--cp-accent); color: #fff; text-decoration: none;
  padding: .5rem 1.15rem; border-radius: 8px; font-size: .9rem; font-weight: 600;
}
.cp-lb-dl:hover { background: var(--cp-accent-ink); }

/* Rendered rich-text (Halo notes / customer rich replies) inside message bodies */
.cp-rich > :first-child { margin-top: 0; }
.cp-rich > :last-child { margin-bottom: 0; }
.cp-rich p { margin: 0 0 .6rem; }
.cp-rich ul, .cp-rich ol { margin: .4rem 0 .7rem; padding-left: 1.5rem; }
.cp-rich li { margin: .15rem 0; }
.cp-rich h1, .cp-rich h2, .cp-rich h3, .cp-rich h4 { margin: .8rem 0 .4rem; line-height: 1.25; }
.cp-rich a { color: var(--cp-accent); }
.cp-rich blockquote {
  margin: .6rem 0; padding: .4rem .9rem; border-left: 3px solid var(--cp-border);
  color: var(--cp-muted); background: var(--cp-bg-2); border-radius: 0 6px 6px 0;
}
.cp-rich code { font-family: var(--cp-mono); font-size: .9em; background: var(--cp-bg-2); padding: .1rem .35rem; border-radius: 4px; }
.cp-rich pre { background: var(--cp-bg-2); padding: .75rem .9rem; border-radius: 8px; overflow: auto; }
.cp-rich pre code { background: none; padding: 0; }
.cp-rich hr { border: none; border-top: 1px solid var(--cp-border); margin: .9rem 0; }
.cp-rich table { border-collapse: collapse; width: auto; max-width: 100%; margin: .6rem 0; display: block; overflow-x: auto; }
.cp-rich th, .cp-rich td { border: 1px solid var(--cp-border); padding: .4rem .6rem; text-align: left; vertical-align: top; }
.cp-rich th { background: var(--cp-bg-2); font-weight: 600; }
.cp-rich caption { caption-side: top; font-size: .82rem; color: var(--cp-muted); margin-bottom: .3rem; }

.cp-rich img { max-width: 100%; height: auto; border-radius: 4px; }

/* ---------------- Dashboard (home) ---------------- */
.cp-hero {
  background: linear-gradient(135deg, var(--cp-slate) 0%, #1f6f93 55%, var(--cp-brand-cyan) 130%);
  color: #fff; border-radius: var(--cp-radius); padding: 2.6rem 2rem; margin-bottom: 1.5rem;
  box-shadow: var(--cp-shadow);
}
.cp-hero-inner { max-width: 760px; }
.cp-hero-title { font-size: 2rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.15; }
.cp-hero-sub { margin: 0; opacity: .92; font-size: 1.02rem; }

.cp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.cp-stat { background: var(--cp-surface); border: 1px solid var(--cp-border-2); border-radius: var(--cp-radius);
  padding: 1.25rem; box-shadow: var(--cp-shadow-sm); }
.cp-stat-num { font-size: 2.2rem; font-weight: 750; color: var(--cp-slate); line-height: 1; }
.cp-stat-label { margin-top: .4rem; font-weight: 600; color: var(--cp-ink); }
.cp-stat-sub { font-size: .8rem; margin-top: .15rem; }
.cp-stat-chart { display: flex; flex-direction: column; }
.cp-barchart { display: flex; align-items: flex-end; gap: .5rem; height: 80px; margin-top: auto; padding-top: .6rem; }
.cp-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem; height: 100%; }
.cp-bar-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.cp-bar-fill { width: 100%; min-height: 3px; background: linear-gradient(var(--cp-brand-cyan), var(--cp-accent));
  border-radius: 4px 4px 0 0; }
.cp-bar-x { font-size: .7rem; }

.cp-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 1.1rem; }
.cp-tile { display: flex; gap: .9rem; align-items: flex-start; background: var(--cp-surface);
  border: 1px solid var(--cp-border-2); border-radius: var(--cp-radius); padding: 1.3rem;
  box-shadow: var(--cp-shadow-sm); text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
a.cp-tile:hover { transform: translateY(-3px); box-shadow: var(--cp-shadow); border-color: var(--cp-brand-cyan); }
.cp-tile-icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--cp-accent-soft); color: var(--cp-accent); }
.cp-tile-body { min-width: 0; }
.cp-tile-title { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 650; color: var(--cp-ink);
  display: flex; align-items: center; gap: .5rem; }
.cp-tile-desc { margin: 0; font-size: .88rem; color: var(--cp-muted); }
.cp-tile--soon { opacity: .72; }
.cp-tile-badge { font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--cp-bg-2); color: var(--cp-muted); padding: .12rem .45rem; border-radius: 999px; }
@media (max-width: 560px) { .cp-hero { padding: 1.8rem 1.3rem; } .cp-hero-title { font-size: 1.6rem; } }

/* ---------------- Dashboard v2 (reference-style) ---------------- */
.cp-dash-welcome { margin-bottom: 1.25rem; }
.cp-dash-title { font-size: 1.7rem; font-weight: 700; color: var(--cp-ink); margin: 0 0 .25rem; }
.cp-dash-sub { margin: 0; font-size: 1rem; }
.cp-mt-row { margin-top: 1.5rem; }

/* Stat cards */
.cp-stat2 { display: flex; gap: 1rem; align-items: flex-start; background: var(--cp-surface);
  border: 1px solid var(--cp-border-2); border-radius: var(--cp-radius); padding: 1.25rem; box-shadow: var(--cp-shadow-sm); }
.cp-stat2-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; display: inline-flex;
  align-items: center; justify-content: center; }
.cp-stat2-body { min-width: 0; }
.cp-stat2-label { font-size: .88rem; color: var(--cp-muted); font-weight: 600; }
.cp-stat2-num { font-size: 2rem; font-weight: 750; color: var(--cp-ink); line-height: 1.1; margin-top: .1rem; }
.cp-stat2-trend { font-size: .8rem; margin-top: .35rem; font-weight: 600; }
.cp-trend-up { color: #1f9d57; }
.cp-trend-down { color: #d1495b; }
.cp-stat2-trend .cp-muted { font-weight: 400; }
.cp-tint-purple { background: #ece9fd; color: #6d54e8; }
.cp-tint-green  { background: #e3f6ec; color: #1f9d57; }
.cp-tint-blue   { background: #e4f1fd; color: #2b7fd0; }
.cp-tint-amber  { background: #fdf0dc; color: #d98a18; }

/* Panels + chart row */
.cp-dash-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .cp-dash-row { grid-template-columns: 1fr; } }
.cp-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cp-panel-title { font-size: 1.1rem; font-weight: 650; color: var(--cp-ink); margin: 0; }
.cp-chip-soft { background: var(--cp-bg-2); color: var(--cp-muted); border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; font-weight: 600; }

/* Area chart */
.cp-ch-legend { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--cp-muted); margin-bottom: .25rem; }
.cp-ch-legend .cp-leg-dot { margin-left: .6rem; }
.cp-ch-legend .cp-leg-dot:first-child { margin-left: 0; }
.cp-dot-logged { background: var(--cp-accent); }
.cp-dot-resolved { background: #1f9d57; }
.cp-area-chart { width: 100%; height: auto; display: block; }
.cp-ch-grid { stroke: var(--cp-border-2); stroke-width: 1; }
.cp-ch-ylab { fill: var(--cp-muted); font-size: 11px; text-anchor: end; }
.cp-ch-xlab { fill: var(--cp-muted); font-size: 11px; text-anchor: middle; }
.cp-area-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.cp-line-logged { stroke: var(--cp-accent); }
.cp-line-resolved { stroke: #1f9d57; }
.cp-area-fill { stroke: none; opacity: .13; }
.cp-fill-logged { fill: var(--cp-accent); }
.cp-fill-resolved { fill: #1f9d57; }

/* Donut */
.cp-donut-wrap { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cp-donut-svg { width: 150px; height: 150px; flex-shrink: 0; }
.cp-donut-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: .5rem; }
.cp-donut-legend li { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
.cp-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.cp-leg-label { color: var(--cp-ink); }
.cp-leg-val { margin-left: auto; color: var(--cp-muted); font-variant-numeric: tabular-nums; }

/* Recent tickets */
.cp-recent-list { list-style: none; margin: 0; padding: 0; }
.cp-recent { border-top: 1px solid var(--cp-border-2); }
.cp-recent:first-child { border-top: none; }
.cp-recent-link { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; text-decoration: none; color: inherit; }
.cp-recent-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cp-recent-sum { font-weight: 600; color: var(--cp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-recent-meta { font-size: .8rem; margin-top: .1rem; }
.cp-recent-link:hover .cp-recent-sum { color: var(--cp-accent); }

/* Quick actions */
.cp-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }

/* ================= Sidebar app shell ================= */
.cp-shell { display: flex; min-height: 100vh; background: var(--cp-bg); }
.cp-sidebar { width: 252px; flex-shrink: 0; background: #0f1729; color: #c4cee0;
  position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column;
  padding: 1.25rem .9rem 1.1rem; }
.cp-sb-brand { display: flex; align-items: center; justify-content: center; padding: .5rem .55rem 1.25rem;
  margin-bottom: .25rem; flex-shrink: 0; }
.cp-sb-brand .cp-logo { height: 28px; width: auto; max-width: 100%; }
.cp-sb-badge { align-self: flex-start; margin: -.5rem 0 .7rem .55rem; font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; background: rgba(22,182,230,.18); color: #5fd3f5;
  padding: .15rem .5rem; border-radius: 999px; flex-shrink: 0; }
.cp-sb-nav { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-height: 0; overflow-y: auto;
  overflow-x: hidden; padding-right: .15rem; }
.cp-sb-link { display: flex; align-items: center; gap: .8rem; padding: .72rem .85rem; border-radius: 11px;
  color: #aab6cc; text-decoration: none; font-size: .92rem; font-weight: 500; white-space: nowrap;
  transition: background .12s, color .12s; }
.cp-sb-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.cp-sb-link.is-active { background: linear-gradient(90deg, var(--cp-brand-cyan), #1295c6); color: #fff;
  box-shadow: 0 4px 12px rgba(18,149,198,.35); }
.cp-sb-txt { overflow: hidden; text-overflow: ellipsis; }
.cp-sb-ico { display: inline-flex; flex-shrink: 0; }
.cp-sb-ico svg { width: 19px; height: 19px; }
.cp-sb-foot { flex-shrink: 0; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: .7rem; }
.cp-help-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .85rem; }
.cp-help-title { font-weight: 700; color: #fff; font-size: .92rem; }
.cp-help-text { margin: .25rem 0 .6rem; font-size: .8rem; color: #9aa6bd; }
.cp-help-btn { width: 100%; justify-content: center; }
.cp-sb-user { display: flex; align-items: center; gap: .6rem; padding: .2rem .3rem; }
.cp-sb-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cp-brand-cyan); color: #07202c;
  font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-sb-user-meta { display: flex; flex-direction: column; min-width: 0; }
.cp-sb-user-name { font-size: .85rem; font-weight: 600; color: #e6ebf3; }
.cp-sb-user-sub { font-size: .74rem; color: #8693ab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-sb-signout { display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem; border-radius: 10px;
  color: #9aa6bd; text-decoration: none; font-size: .88rem; }
.cp-sb-signout:hover { background: rgba(255,255,255,.06); color: #fff; }

.cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-content { width: 100%; padding: 1.75rem 2rem; flex: 1; }
.cp-overlay { display: none; }

/* In-content page header (welcome + search/bell/avatar on one row) */
.cp-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.cp-pagehead-left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cp-pagehead-title { min-width: 0; }
.cp-pagehead-right { display: flex; align-items: center; gap: .85rem; flex-shrink: 0; }
.cp-page-title { font-size: 1.5rem; font-weight: 700; color: var(--cp-ink); margin: 0; }
.cp-sb-toggle { display: none; background: none; border: none; color: var(--cp-ink); cursor: pointer; padding: .3rem; }
.cp-search { display: flex; align-items: center; gap: .5rem; background: var(--cp-surface); border: 1px solid var(--cp-border-2);
  border-radius: 999px; padding: .5rem .95rem; width: 260px; max-width: 34vw; color: var(--cp-muted); box-shadow: var(--cp-shadow-sm); }
.cp-search input { border: none; background: none; outline: none; color: var(--cp-ink); width: 100%; font-size: .9rem; }
.cp-search-ico svg { width: 16px; height: 16px; }
.cp-topbar-ico { color: var(--cp-muted); display: inline-flex; padding: .4rem; background: var(--cp-surface);
  border: 1px solid var(--cp-border-2); border-radius: 50%; box-shadow: var(--cp-shadow-sm); }
.cp-topbar-ico:hover { color: var(--cp-ink); }
.cp-topbar-ico svg { width: 18px; height: 18px; }
.cp-topbar-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--cp-slate); color: #fff;
  font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; flex-shrink: 0; }

/* Off-canvas on smaller screens */
@media (max-width: 860px) {
  .cp-sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.cp-sb-open .cp-sidebar { transform: none; }
  body.cp-sb-open .cp-overlay { display: block; position: fixed; inset: 0; background: rgba(8,12,22,.5); z-index: 55; }
  .cp-sb-toggle { display: inline-flex; }
  .cp-content { padding: 1.25rem 1rem; }
  .cp-pagehead { flex-wrap: wrap; }
  .cp-search { width: 150px; }
}

/* ================= Filler / coming-soon ================= */
.cp-soon-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.cp-soon-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--cp-accent-soft); color: var(--cp-accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-soon-head .cp-chip-soft { margin-left: auto; }
.cp-soon-sub { margin: .15rem 0 0; font-size: .88rem; }
.cp-soon-list { list-style: none; margin: 0; padding: 0; }
.cp-soon-row { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-top: 1px solid var(--cp-border-2); }
.cp-soon-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cp-soon-row-title { font-weight: 600; color: var(--cp-ink); }
.cp-soon-row-sub { font-size: .82rem; margin-top: .1rem; }

/* Dashboard 3-column lower row */
.cp-dash-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: stretch; }
.cp-dash-stack { display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 1100px) { .cp-dash-row3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cp-dash-row3 { grid-template-columns: 1fr; } }
.cp-invoice-card .cp-inv-label { font-size: .82rem; }
.cp-inv-amount { font-size: 1.9rem; font-weight: 750; color: var(--cp-ink); margin: .15rem 0 .9rem; }

/* ===== Typography: Plus Jakarta Sans headings · Inter body · Inter SemiBold KPIs ===== */
h1, h2, h3, h4,
.cp-dash-title, .cp-page-title, .cp-panel-title, .cp-h1, .cp-hero-title, .cp-help-title { font-family: var(--cp-font-head); }
h1, h2, h3,
.cp-dash-title, .cp-page-title, .cp-panel-title, .cp-h1, .cp-hero-title { font-weight: 600; }
.cp-stat2-num, .cp-stat-num, .cp-inv-amount { font-family: var(--cp-font); font-weight: 600; }

/* Panel header icon */
.cp-panel-title-wrap { display: flex; align-items: center; gap: .6rem; }
.cp-panel-ico { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-panel-ico svg { width: 18px; height: 18px; }

/* ================= Tickets list (reference table) ================= */
.cp-tickets-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cp-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.cp-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 10px;
  font-size: .88rem; font-weight: 600; color: var(--cp-muted); text-decoration: none; border: 1px solid transparent; }
.cp-tab:hover { background: var(--cp-surface); color: var(--cp-ink); }
.cp-tab.is-active { background: var(--cp-accent-soft); color: var(--cp-accent-ink); border-color: rgba(11,127,166,.18); }
.cp-tab-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cp-tab-count { font-size: .76rem; font-weight: 700; background: rgba(0,0,0,.06); color: inherit; padding: .05rem .4rem; border-radius: 999px; }
.cp-tab.is-active .cp-tab-count { background: rgba(11,127,166,.16); }
.cp-tickets-actions { display: flex; align-items: center; gap: .5rem; }
.cp-tickets-actions .cp-btn svg { width: 16px; height: 16px; }
.cp-btn-soon { opacity: .6; }

.cp-table-card { overflow: hidden; padding: 0; }
.cp-table-scroll { overflow-x: auto; }
.cp-tickets-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cp-tickets-table thead th { text-align: left; padding: .85rem 1rem; background: var(--cp-bg);
  border-bottom: 1px solid var(--cp-border-2); white-space: nowrap; }
.cp-th-sort { color: var(--cp-muted); text-decoration: none; font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.cp-th-sort:hover { color: var(--cp-ink); }
.cp-tickets-table tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--cp-border-2); vertical-align: middle; }
.cp-tickets-table tbody tr:last-child td { border-bottom: none; }
.cp-tickets-table tbody tr:hover { background: var(--cp-bg); }
.cp-nowrap { white-space: nowrap; }
.cp-col-check, .cp-col-menu { width: 1%; white-space: nowrap; }
.cp-check { width: 16px; height: 16px; accent-color: var(--cp-accent); cursor: pointer; }
.cp-tid-link { color: var(--cp-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cp-tid-link:hover { text-decoration: underline; }
.cp-cell-subject { max-width: 320px; }
.cp-subj-link { color: var(--cp-ink); text-decoration: none; font-weight: 500; }
.cp-subj-link:hover { color: var(--cp-accent); }
.cp-prio, .cp-cat, .cp-asset-cell, .cp-byline { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.cp-prio-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.cp-cat-ico, .cp-asset-cell-ico { color: var(--cp-muted); display: inline-flex; }
.cp-cat-ico svg, .cp-asset-cell-ico svg { width: 17px; height: 17px; }
.cp-by-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--cp-accent-soft); color: var(--cp-accent-ink);
  font-size: .68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-row-menu { color: var(--cp-muted); display: inline-flex; padding: .25rem; border-radius: 6px; }
.cp-row-menu:hover { color: var(--cp-ink); background: var(--cp-bg-2); }
.cp-row-menu svg { width: 18px; height: 18px; }

.cp-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem; border-top: 1px solid var(--cp-border-2); flex-wrap: wrap; font-size: .85rem; }
.cp-pager { display: flex; align-items: center; gap: .3rem; }
.cp-pg { min-width: 30px; height: 30px; padding: 0 .5rem; border-radius: 8px; border: 1px solid var(--cp-border-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--cp-ink); text-decoration: none; font-size: .85rem; font-weight: 600; }
.cp-pg:hover { background: var(--cp-bg); }
.cp-pg-on { background: var(--cp-accent); border-color: var(--cp-accent); color: #fff; }
.cp-pg-dis { opacity: .4; pointer-events: none; }

/* ================= Ticket detail (reference) ================= */
.cp-back-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--cp-accent); text-decoration: none;
  font-weight: 600; font-size: .88rem; margin-bottom: 1rem; }
.cp-back-link svg { width: 18px; height: 18px; }
.cp-back-link:hover { text-decoration: underline; }

.cp-td-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cp-td-title { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: 1.55rem; font-weight: 600; color: var(--cp-ink); margin: 0; }
.cp-td-sub { margin: .35rem 0 0; font-size: .9rem; }
.cp-td-header-actions { flex-shrink: 0; }
.cp-td-header-actions .cp-btn svg { width: 17px; height: 17px; }

/* Summary bar */
.cp-td-summary { display: flex; flex-wrap: wrap; padding: 1.1rem 0; margin-bottom: 1.25rem; }
.cp-sum-cell { flex: 1; min-width: 150px; display: flex; align-items: center; gap: .7rem; padding: .25rem 1.25rem; border-left: 1px solid var(--cp-border-2); }
.cp-sum-cell:first-child { border-left: none; }
.cp-sum-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--cp-bg); color: var(--cp-muted);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-sum-ico svg { width: 19px; height: 19px; }
.cp-sum-meta { display: flex; flex-direction: column; min-width: 0; }
.cp-sum-label { font-size: .76rem; color: var(--cp-muted); }
.cp-sum-value { font-weight: 600; color: var(--cp-ink); font-size: .95rem; }
.cp-sum-sub { font-size: .76rem; }

/* Tab card */
.cp-tabcard { padding: 0; overflow: hidden; }
.cp-tabs-bar { display: flex; align-items: center; gap: 1.6rem; padding: 0 1.25rem; border-bottom: 1px solid var(--cp-border-2); }
.cp-convo-sort { margin-left: auto; }
.cp-tab2 { background: none; border: none; cursor: pointer; padding: .95rem 0; font-size: .92rem; font-weight: 600;
  color: var(--cp-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
  display: inline-flex; align-items: center; gap: .4rem; }
.cp-tab2:hover { color: var(--cp-ink); }
.cp-tab2.is-active { color: var(--cp-accent); border-bottom-color: var(--cp-accent); }
.cp-tab2 .cp-tab-count { background: var(--cp-bg-2); color: var(--cp-muted); }

/* Conversation messages */
.cp-tabpanel .cp-convo { display: flex; flex-direction: column; gap: 1.4rem; }
.cp-msg { display: flex; gap: .85rem; }
.cp-msg-avatar { flex-shrink: 0; }
.cp-msg-main { flex: 1; min-width: 0; }
.cp-msg-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; }
.cp-msg-author { font-weight: 600; color: var(--cp-ink); }
.cp-msg-when { margin-left: auto; font-size: .8rem; white-space: nowrap; }
.cp-role { font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; }
.cp-role-tech { background: #e3f6ec; color: #1f7a45; }
.cp-role-req { background: #ece9fd; color: #5b46c9; }
.cp-msg-body { color: var(--cp-ink); font-size: .92rem; line-height: 1.55; }

/* Composer (static, at the bottom of the conversation) */
.cp-composer { background: var(--cp-surface); border-top: 1px solid var(--cp-border-2); }
.cp-composer .cp-reply { margin-top: 0; padding-top: 0; border-top: none; }
.cp-composer #reply-editor, .cp-composer .cp-textarea { min-height: 4.25rem; max-height: 9rem; }
.cp-composer-tabs { display: flex; gap: 1.2rem; margin-bottom: .7rem; }
.cp-composer-tab { font-size: .85rem; font-weight: 600; color: var(--cp-accent); padding-bottom: .35rem; border-bottom: 2px solid var(--cp-accent); }
.cp-composer-foot { display: flex; align-items: center; gap: 1.5rem; margin-top: .75rem; flex-wrap: wrap; }
.cp-composer-file { display: inline-flex; align-items: center; gap: .4rem; color: var(--cp-muted); font-size: .85rem; cursor: pointer; white-space: nowrap; }
.cp-composer-file svg { width: 17px; height: 17px; flex-shrink: 0; }
.cp-composer-file input[type="file"] { max-width: 190px; font-size: .78rem; }
.cp-composer-close { font-size: .85rem; color: var(--cp-muted); white-space: nowrap; }
.cp-composer-send-group { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-wrap: wrap; }
.cp-composer-close-btn { white-space: nowrap; }
.cp-composer-send { white-space: nowrap; }
.cp-composer-send svg { width: 16px; height: 16px; }
.cp-composer-hint { margin: .5rem 0 0; font-size: .76rem; }

/* Confirm dialog */
.cp-confirm { position: fixed; inset: 0; background: rgba(8,12,22,.5); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cp-confirm[hidden] { display: none; }
.cp-confirm-box { background: var(--cp-surface); border-radius: var(--cp-radius); padding: 1.5rem; max-width: 420px; width: 100%; box-shadow: var(--cp-shadow); }
.cp-confirm-title { font-family: var(--cp-font-head); font-weight: 600; font-size: 1.1rem; color: var(--cp-ink); margin-bottom: .5rem; }
.cp-confirm-text { color: var(--cp-muted); font-size: .9rem; line-height: 1.5; margin: 0 0 1.25rem; }
.cp-confirm-actions { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; }

/* Activity log timeline */
.cp-activity { list-style: none; margin: 0; padding: .4rem 0; }
.cp-act { display: flex; gap: .8rem; padding: 0 0 1rem .2rem; position: relative; }
.cp-act:not(:last-child)::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -2px; width: 2px; background: var(--cp-border-2); }
.cp-act-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cp-accent); flex-shrink: 0; margin-top: 4px; position: relative; z-index: 1; }
.cp-act-body { display: flex; flex-direction: column; gap: .1rem; }
.cp-act-text { font-size: .9rem; color: var(--cp-ink); }
.cp-act-when { font-size: .78rem; }

/* SLA badge */
.cp-sla-badge { font-size: .68rem; font-weight: 700; padding: .1rem .45rem; border-radius: 999px; margin-left: .35rem; }
.cp-sla-ok { background: #e3f6ec; color: #1f7a45; }
.cp-sla-over { background: #fde7ea; color: #c02b3f; }

/* Related information */
.cp-related, .cp-actions-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.cp-rel { display: flex; align-items: center; gap: .65rem; }
.cp-rel-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--cp-accent-soft); color: var(--cp-accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cp-rel-ico svg { width: 16px; height: 16px; }
.cp-rel-link { color: var(--cp-accent); text-decoration: none; font-size: .88rem; font-weight: 500; }
.cp-rel-link:hover { text-decoration: underline; }
.cp-rel-text { display: flex; flex-direction: column; font-size: .88rem; color: var(--cp-ink); }
.cp-rel-sub { font-size: .76rem; }

/* Actions list */
.cp-action-link { display: flex; align-items: center; gap: .6rem; width: 100%; background: none; border: none;
  cursor: pointer; font-family: inherit; font-size: .9rem; color: var(--cp-ink); text-decoration: none; padding: .35rem 0; text-align: left; }
.cp-action-link svg { width: 18px; height: 18px; color: var(--cp-muted); }
.cp-action-link:hover { color: var(--cp-accent); }
.cp-action-link:hover svg { color: var(--cp-accent); }
@media (max-width: 720px) { .cp-sum-cell { border-left: none; min-width: 45%; } }

/* Your IT Expert card */
.cp-expert-row { display: flex; align-items: center; gap: .9rem; }
.cp-expert-avatar .cp-avatar { width: 54px; height: 54px; font-size: 1.05rem; }
.cp-expert-avatar .cp-avatar-user svg { width: 28px; height: 28px; }
.cp-expert-meta { display: flex; flex-direction: column; min-width: 0; }
.cp-expert-name { font-weight: 600; color: var(--cp-ink); font-size: 1rem; }
.cp-expert-role { font-size: .8rem; margin-top: .1rem; }