/**
 * AJT MSP Hub — Ticket Skin.
 *
 * Shared CSS for the redesigned ticket list (Grouped Sections)
 * and ticket detail modal (Thread / Messenger style).
 *
 * White-label compliant: uses --msphub-primary and --cm-* variables.
 * Enqueued by both contracts-manager-frontend.php and autotask-portal.php.
 *
 * @package AJT_MSP_Hub
 * @since   1.19.4
 */

/* ══════════════════════════════════════════════════════════════════
   TICKET SKIN — CSS VARIABLES
   ══════════════════════════════════════════════════════════════════ */
.ajt-tk {
    /* Inherit from white-label / CM variables, with fallbacks */
    --tk-primary:       var(--msphub-primary, var(--cm-plum, #7B4C75));
    --tk-primary-light: var(--msphub-primary-light, rgba(123,76,117,0.06));
    --tk-primary-hover: var(--msphub-primary-hover, #6a3f65);

    --tk-staff-accent:    #475569;
    --tk-staff-bg:        #f0f4f8;
    --tk-staff-border:    #d0dae8;

    --tk-customer-accent: var(--tk-primary);
    --tk-customer-bg:     #faf6f9;
    --tk-customer-border: #ecdae8;

    --tk-internal-accent: #b45309;
    --tk-internal-bg:     #fffbeb;
    --tk-internal-border: #fde68a;

    --tk-status-accent:   #15803d;
    --tk-status-bg:       #f0fdf4;
    --tk-status-border:   #bbf7d0;

    --tk-text:            var(--cm-slate, #1e293b);
    --tk-text-secondary:  var(--cm-gray-500, #64748b);
    --tk-text-muted:      var(--cm-gray-400, #94a3b8);
    --tk-bg:              #ffffff;
    --tk-bg-subtle:       var(--cm-gray-50, #f8fafc);
    --tk-border:          var(--cm-gray-200, #e2e8f0);
    --tk-border-light:    var(--cm-gray-100, #f1f5f9);
    --tk-radius:          var(--cm-radius, 10px);
    --tk-radius-sm:       var(--cm-radius-sm, 6px);
    --tk-transition:      all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --tk-font:            var(--msphub-font-family, inherit);
}


/* ══════════════════════════════════════════════════════════════════
   SECTION 1 — GROUPED TICKET LIST  (Mockup E)
   ══════════════════════════════════════════════════════════════════ */

/* ── Filter Pills (All / Open / Closed / Overdue) ─────────────── */
.ajt-tk-filters { display: flex; gap: 4px; }
.ajt-tk-filter-pill {
    padding: 5px 12px; border: 1px solid var(--tk-border); border-radius: 20px;
    background: var(--tk-bg); font-family: var(--tk-font); font-size: 11px;
    font-weight: 600; color: var(--tk-text-secondary); cursor: pointer;
    transition: var(--tk-transition); display: inline-flex; align-items: center; gap: 4px;
}
.ajt-tk-filter-pill.active { background: var(--tk-primary); color: #fff; border-color: var(--tk-primary); }
.ajt-tk-filter-pill:hover:not(.active) { background: var(--tk-bg-subtle); border-color: var(--tk-border); }

/* ── Section Group ────────────────────────────────────────────── */
.ajt-tk-section { margin-bottom: 16px; }
.ajt-tk-section-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
    padding: 0 4px; cursor: pointer; user-select: none;
}
.ajt-tk-section-header::after {
    content: ''; display: block; width: 0; height: 0; margin-left: auto;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    border-top: 5px solid var(--tk-text-muted); transition: transform 0.2s;
}
.ajt-tk-section-header.collapsed::after { transform: rotate(-90deg); }
.ajt-tk-section-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.ajt-tk-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.ajt-tk-section-count { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 8px; }

.ajt-tk-section--open .ajt-tk-section-dot    { background: #60a5fa; }
.ajt-tk-section--open .ajt-tk-section-label   { color: #1e40af; }
.ajt-tk-section--open .ajt-tk-section-count   { background: #dbeafe; color: #1e40af; }

.ajt-tk-section--closed .ajt-tk-section-dot   { background: #86efac; }
.ajt-tk-section--closed .ajt-tk-section-label  { color: #15803d; }
.ajt-tk-section--closed .ajt-tk-section-count  { background: #dcfce7; color: #15803d; }

.ajt-tk-section-list {
    background: var(--tk-bg); border: 1px solid var(--tk-border);
    border-radius: var(--tk-radius); overflow: hidden;
}

/* ── Ticket Row (list item) ───────────────────────────────────── */
.ajt-tk-row {
    display: grid; grid-template-columns: 8px 1fr 160px 14px;
    align-items: center; gap: 12px; padding: 12px 16px;
    border-bottom: 1px solid var(--tk-border-light);
    cursor: pointer; transition: var(--tk-transition);
}
.ajt-tk-row:last-child { border-bottom: none; }
.ajt-tk-row:hover { background: var(--tk-primary-light); }

.ajt-tk-row-dot { width: 8px; height: 8px; border-radius: 50%; }
.ajt-tk-row-dot--open    { background: #60a5fa; }
.ajt-tk-row-dot--closed  { background: #86efac; }
.ajt-tk-row-dot--overdue { background: #f87171; animation: ajt-tk-pulse 2s infinite; }
@keyframes ajt-tk-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

.ajt-tk-row-main { min-width: 0; }
.ajt-tk-row-title {
    font-size: 13px; font-weight: 600; color: var(--tk-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 3px;
}
.ajt-tk-row-pills { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 3px; }

/* Micro pill */
.ajt-tk-pill {
    display: inline-flex; align-items: center; padding: 1px 7px;
    border-radius: 8px; font-size: 9px; font-weight: 700; white-space: nowrap;
}
.ajt-tk-pill--status-complete  { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ajt-tk-pill--status-new       { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; }
.ajt-tk-pill--status-progress  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.ajt-tk-pill--status-waiting   { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.ajt-tk-pill--status-booked    { background: #fefce8; color: #a16207; border: 1px solid #fde68a; }
.ajt-tk-pill--status-default   { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }
.ajt-tk-pill--prio-1  { background: #fef2f2; color: #dc2626; }
.ajt-tk-pill--prio-2  { background: #fff7ed; color: #ea580c; }
.ajt-tk-pill--prio-3  { background: #fffbeb; color: #d97706; }
.ajt-tk-pill--prio-4  { background: #f0fdf4; color: #16a34a; }
.ajt-tk-pill--prio-0  { background: #f3f4f6; color: #6b7280; }
.ajt-tk-pill--queue   { background: #f0f9ff; color: #0369a1; }
.ajt-tk-pill--source  { background: #faf5ff; color: #7c3aed; }
.ajt-tk-pill--recurring { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; }
.ajt-tk-pill--due     { display: inline-flex; align-items: center; gap: 3px; }
.ajt-tk-pill--due-overdue { background: #fef2f2; color: #dc2626; }
.ajt-tk-pill--due-today   { background: #fffbeb; color: #d97706; }
.ajt-tk-pill--due-normal  { background: #f3f4f6; color: #6b7280; }

.ajt-tk-row-meta { font-size: 10px; color: var(--tk-text-muted); display: flex; gap: 4px; flex-wrap: wrap; }
.ajt-tk-row-meta-sep { color: var(--tk-border); }

/* Assignee cell */
.ajt-tk-row-assignee { display: flex; align-items: center; gap: 6px; justify-content: flex-end; min-width: 0; }
.ajt-tk-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--tk-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; flex-shrink: 0;
}
.ajt-tk-row-assignee-name {
    font-size: 11px; font-weight: 600; color: var(--tk-text-secondary);
    white-space: nowrap; text-align: right; overflow: hidden; text-overflow: ellipsis;
}
.ajt-tk-row-arrow { color: var(--tk-border); transition: var(--tk-transition); }
.ajt-tk-row:hover .ajt-tk-row-arrow { color: var(--tk-primary); }

/* ── Search Box ───────────────────────────────────────────────── */
.ajt-tk-search {
    display: flex; align-items: center; gap: 6px; padding: 7px 12px;
    border: 1px solid var(--tk-border); border-radius: 20px; background: var(--tk-bg);
    transition: var(--tk-transition); min-width: 200px;
}
.ajt-tk-search:focus-within { border-color: var(--tk-primary); box-shadow: 0 0 0 3px var(--tk-primary-light); }
.ajt-tk-search svg { width: 14px; height: 14px; color: var(--tk-text-muted); flex-shrink: 0; }
.ajt-tk-search input {
    border: none; outline: none; font-family: var(--tk-font); font-size: 12px;
    color: var(--tk-text); width: 100%; background: transparent;
}
.ajt-tk-search input::placeholder { color: var(--tk-text-muted); }

/* ── Toolbar ──────────────────────────────────────────────────── */
.ajt-tk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.ajt-tk-toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


/* ══════════════════════════════════════════════════════════════════
   SECTION 2 — THREAD DETAIL MODAL  (Mockup A)
   ══════════════════════════════════════════════════════════════════ */

/* ── Modal Header ─────────────────────────────────────────────── */
.ajt-tk-detail { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.ajt-tk-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--tk-border); flex-shrink: 0; }
.ajt-tk-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ajt-tk-header-left { flex: 1; min-width: 0; }
.ajt-tk-ticket-number { font-size: 12px; font-weight: 500; color: var(--tk-text-muted); letter-spacing: 0.3px; margin-bottom: 4px; }
.ajt-tk-ticket-title { font-size: 18px; font-weight: 700; color: var(--tk-text); line-height: 1.3; }

/* ── Metadata Pill Strip ──────────────────────────────────────── */
.ajt-tk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding: 0 24px; }
.ajt-tk-meta-pill {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border-radius: 20px; font-size: 12px; font-weight: 500;
    background: var(--tk-bg-subtle); color: var(--tk-text-secondary);
    border: 1px solid var(--tk-border-light);
}
.ajt-tk-meta-pill svg { width: 13px; height: 13px; }
.ajt-tk-meta-pill strong { font-weight: 600; color: var(--tk-text); }
.ajt-tk-meta-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ajt-tk-meta-pill--status select {
    border: none; background: transparent; font-family: var(--tk-font);
    font-size: 12px; font-weight: 600; color: inherit; cursor: pointer; outline: none;
    padding-right: 4px;
}
.ajt-tk-meta-staff { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 0 24px; }

/* ── Dates Row ────────────────────────────────────────────────── */
.ajt-tk-dates {
    display: flex; flex-wrap: wrap; gap: 16px; padding: 10px 24px;
    font-size: 11px; color: var(--tk-text-muted);
    border-bottom: 1px solid var(--tk-border-light); flex-shrink: 0;
}
.ajt-tk-dates strong { color: var(--tk-text-secondary); font-weight: 600; }

/* ── Scrollable Body ──────────────────────────────────────────── */
.ajt-tk-body { flex: 1; overflow-y: auto; min-height: 0; }

/* ── Description ──────────────────────────────────────────────── */
.ajt-tk-desc {
    margin: 16px 24px; padding: 16px; background: var(--tk-bg-subtle);
    border: 1px solid var(--tk-border-light); border-radius: var(--tk-radius);
    font-size: 13px; line-height: 1.7; color: var(--tk-text-secondary); position: relative;
}
.ajt-tk-desc.collapsed { max-height: 120px; overflow: hidden; }
.ajt-tk-desc.collapsed::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
    background: linear-gradient(transparent, var(--tk-bg-subtle)); pointer-events: none;
}
.ajt-tk-desc-toggle {
    display: block; margin: -4px auto 0; padding: 4px 14px;
    border: 1px solid var(--tk-border); border-radius: 20px; background: var(--tk-bg);
    font-family: var(--tk-font); font-size: 11px; font-weight: 600;
    color: var(--tk-primary); cursor: pointer; transition: var(--tk-transition);
    position: relative; z-index: 1;
}
.ajt-tk-desc-toggle:hover { background: var(--tk-primary-light); }

/* ── Conversation Section ─────────────────────────────────────── */
.ajt-tk-conversation { padding: 16px 24px 8px; }
.ajt-tk-convo-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.ajt-tk-convo-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--tk-text-muted); }
.ajt-tk-convo-count { font-size: 11px; font-weight: 600; background: var(--tk-border); color: var(--tk-text-secondary); padding: 2px 8px; border-radius: 10px; }
.ajt-tk-convo-hours { font-size: 11px; font-weight: 600; background: #dbeafe; color: #1e40af; padding: 2px 8px; border-radius: 10px; }

/* ── Thread Messages ──────────────────────────────────────────── */
.ajt-tk-thread { display: flex; flex-direction: column; gap: 4px; }

.ajt-tk-msg { display: flex; gap: 10px; max-width: 85%; padding: 2px 0; }
.ajt-tk-msg--staff    { align-self: flex-start; }
.ajt-tk-msg--customer { align-self: flex-end; flex-direction: row-reverse; }
.ajt-tk-msg--internal { align-self: flex-start; }

/* Avatar (shared) */
.ajt-tk-msg-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700; flex-shrink: 0; color: #fff; margin-top: 2px;
}
.ajt-tk-msg--staff .ajt-tk-msg-avatar    { background: var(--tk-staff-accent); }
.ajt-tk-msg--customer .ajt-tk-msg-avatar { background: var(--tk-customer-accent); }
.ajt-tk-msg--internal .ajt-tk-msg-avatar { background: var(--tk-internal-accent); }

/* Bubble */
.ajt-tk-bubble { flex: 1; min-width: 0; }
.ajt-tk-bubble-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; padding: 0 2px; }
.ajt-tk-msg--customer .ajt-tk-bubble-head { flex-direction: row-reverse; }

.ajt-tk-bubble-author { font-size: 12px; font-weight: 600; }
.ajt-tk-msg--staff .ajt-tk-bubble-author    { color: var(--tk-staff-accent); }
.ajt-tk-msg--customer .ajt-tk-bubble-author { color: var(--tk-customer-accent); }
.ajt-tk-msg--internal .ajt-tk-bubble-author { color: var(--tk-internal-accent); }

.ajt-tk-bubble-time { font-size: 10px; color: var(--tk-text-muted); white-space: nowrap; }

.ajt-tk-bubble-badge {
    font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 8px;
}
.ajt-tk-bubble-badge--internal { background: var(--tk-internal-bg); color: var(--tk-internal-accent); border: 1px solid var(--tk-internal-border); }
.ajt-tk-bubble-badge--hours    { background: #dbeafe; color: #1e40af; }

/* Bubble body */
.ajt-tk-bubble-body {
    padding: 10px 14px; border-radius: 12px; font-size: 13px;
    line-height: 1.65; color: var(--tk-text); word-break: break-word;
}
.ajt-tk-msg--staff .ajt-tk-bubble-body {
    background: var(--tk-staff-bg); border: 1px solid var(--tk-staff-border);
    border-top-left-radius: 4px;
}
.ajt-tk-msg--customer .ajt-tk-bubble-body {
    background: var(--tk-customer-bg); border: 1px solid var(--tk-customer-border);
    border-top-right-radius: 4px;
}
.ajt-tk-msg--internal .ajt-tk-bubble-body {
    background: var(--tk-internal-bg); border: 1px solid var(--tk-internal-border);
    border-top-left-radius: 4px;
}

/* Content parsing */
.ajt-tk-parsed { white-space: pre-wrap; }
.ajt-tk-parsed br + br { display: none; }

/* View original toggle */
.ajt-tk-original-toggle {
    margin-top: 6px; padding: 0; border: none; background: none;
    font-family: var(--tk-font); font-size: 11px; color: var(--tk-text-muted);
    cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
    transition: var(--tk-transition);
}
.ajt-tk-original-toggle:hover { color: var(--tk-primary); }

.ajt-tk-original {
    display: none; margin-top: 8px; padding: 10px 12px;
    background: var(--tk-bg-subtle); border: 1px dashed var(--tk-border);
    border-radius: var(--tk-radius-sm); font-size: 12px; line-height: 1.6;
    color: var(--tk-text-secondary); white-space: pre-wrap; max-height: 200px; overflow-y: auto;
}
.ajt-tk-original.show { display: block; }

/* ── Status Divider ───────────────────────────────────────────── */
.ajt-tk-status-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 0 4px; }
.ajt-tk-status-line { flex: 1; height: 1px; background: var(--tk-border); }
.ajt-tk-status-pill {
    font-size: 11px; font-weight: 600; color: var(--tk-status-accent);
    background: var(--tk-status-bg); border: 1px solid var(--tk-status-border);
    padding: 4px 12px; border-radius: 20px; white-space: nowrap;
    display: flex; align-items: center; gap: 4px;
}
.ajt-tk-status-pill svg { width: 12px; height: 12px; }
.ajt-tk-status-date { font-size: 10px; color: var(--tk-text-muted); white-space: nowrap; }


/* ══════════════════════════════════════════════════════════════════
   SECTION 3 — COMPOSE AREA  (Reply + Time Entry tabs)
   ══════════════════════════════════════════════════════════════════ */

.ajt-tk-compose { border-top: 1px solid var(--tk-border); flex-shrink: 0; background: var(--tk-bg); }

.ajt-tk-compose-tabs {
    display: flex; border-bottom: 1px solid var(--tk-border-light); padding: 0 24px;
}
.ajt-tk-compose-tab {
    padding: 10px 16px; font-family: var(--tk-font); font-size: 12px; font-weight: 600;
    border: none; background: none; color: var(--tk-text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; transition: var(--tk-transition);
    display: flex; align-items: center; gap: 5px;
}
.ajt-tk-compose-tab.active { color: var(--tk-primary); border-bottom-color: var(--tk-primary); }
.ajt-tk-compose-tab:hover:not(.active) { color: var(--tk-text-secondary); }
.ajt-tk-compose-tab svg { width: 14px; height: 14px; }

.ajt-tk-compose-pane { display: none; padding: 16px 24px; }
.ajt-tk-compose-pane.active { display: block; }

/* Note type pills */
.ajt-tk-note-type { display: flex; gap: 4px; margin-bottom: 10px; }
.ajt-tk-note-type button {
    padding: 5px 12px; border: 1px solid var(--tk-border); border-radius: 20px;
    background: var(--tk-bg); font-family: var(--tk-font); font-size: 11px;
    font-weight: 600; color: var(--tk-text-secondary); cursor: pointer;
    transition: var(--tk-transition); display: flex; align-items: center; gap: 4px;
}
.ajt-tk-note-type button.active {
    background: var(--tk-primary); color: #fff; border-color: var(--tk-primary);
}
.ajt-tk-note-type button svg { width: 12px; height: 12px; }

/* Textarea */
.ajt-tk-textarea {
    width: 100%; min-height: 80px; max-height: 200px; padding: 12px 14px;
    border: 1px solid var(--tk-border); border-radius: var(--tk-radius-sm);
    font-family: var(--tk-font); font-size: 13px; line-height: 1.6;
    color: var(--tk-text); resize: vertical; transition: var(--tk-transition);
}
.ajt-tk-textarea:focus { outline: none; border-color: var(--tk-primary); box-shadow: 0 0 0 3px var(--tk-primary-light); }
.ajt-tk-textarea::placeholder { color: var(--tk-text-muted); }

/* Actions row */
.ajt-tk-compose-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.ajt-tk-compose-left { display: flex; align-items: center; gap: 8px; }
.ajt-tk-compose-right { display: flex; align-items: center; gap: 8px; }

.ajt-tk-btn {
    padding: 8px 18px; border: none; border-radius: var(--tk-radius-sm);
    font-family: var(--tk-font); font-size: 12px; font-weight: 600;
    cursor: pointer; transition: var(--tk-transition);
    display: inline-flex; align-items: center; gap: 5px;
}
.ajt-tk-btn-primary { background: var(--tk-primary); color: #fff; }
.ajt-tk-btn-primary:hover { background: var(--tk-primary-hover); }
.ajt-tk-btn-ghost { background: transparent; color: var(--tk-text-secondary); border: 1px solid var(--tk-border); }
.ajt-tk-btn-ghost:hover { background: var(--tk-bg-subtle); }
.ajt-tk-btn svg { width: 14px; height: 14px; }

.ajt-tk-attribution { font-size: 11px; color: var(--tk-text-muted); }
.ajt-tk-attribution strong { color: var(--tk-text-secondary); }

/* ── Time Entry Form ──────────────────────────────────────────── */
.ajt-tk-te-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
}
.ajt-tk-te-field { display: flex; flex-direction: column; gap: 4px; }
.ajt-tk-te-field label {
    font-size: 11px; font-weight: 600; color: var(--tk-text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.ajt-tk-te-field input,
.ajt-tk-te-field select {
    padding: 8px 10px; border: 1px solid var(--tk-border); border-radius: var(--tk-radius-sm);
    font-family: var(--tk-font); font-size: 13px; color: var(--tk-text);
    transition: var(--tk-transition);
}
.ajt-tk-te-field input:focus,
.ajt-tk-te-field select:focus {
    outline: none; border-color: var(--tk-primary); box-shadow: 0 0 0 3px var(--tk-primary-light);
}
.ajt-tk-te-field--full { grid-column: 1 / -1; }
.ajt-tk-te-label-row { display: flex; align-items: center; gap: 6px; }
.ajt-tk-te-label-row label { flex: 1; }
.ajt-tk-te-quick-btn {
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 4px;
    border: 1px solid var(--tk-border, #e5e7eb); background: var(--tk-bg-subtle, #f9fafb);
    color: var(--tk-primary, #7B4C75); cursor: pointer; line-height: 1.4;
    transition: background 0.15s, border-color 0.15s;
}
.ajt-tk-te-quick-btn:hover { background: var(--tk-primary-light); border-color: var(--tk-primary); }

.ajt-tk-te-duration {
    display: flex; align-items: center; gap: 8px; padding: 8px 12px;
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: var(--tk-radius-sm);
    font-size: 13px; font-weight: 600; color: #1e40af;
}
.ajt-tk-te-duration svg { width: 16px; height: 16px; opacity: 0.7; }

.ajt-tk-checkbox { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; }
.ajt-tk-checkbox input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--tk-primary); cursor: pointer; }
.ajt-tk-checkbox label { font-size: 12px; color: var(--tk-text-secondary); cursor: pointer; }

/* ── File list ────────────────────────────────────────────────── */
.ajt-tk-file-list { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ajt-tk-file-item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 8px; background: var(--tk-bg-subtle); border: 1px solid var(--tk-border-light);
    border-radius: var(--tk-radius-sm); font-size: 11px; color: var(--tk-text-secondary);
}
.ajt-tk-file-remove {
    border: none; background: none; font-size: 12px; color: var(--tk-text-muted);
    cursor: pointer; padding: 0 2px; line-height: 1;
}
.ajt-tk-file-remove:hover { color: #dc2626; }


/* ══════════════════════════════════════════════════════════════════
   SECTION 3b — STICKY THREE-ZONE LAYOUT (v3.3.0)
   The modal left column is split into:
     1. ajt-tk-sticky-header  — meta + dates + SLA + description (fixed top)
     2. ajt-tk-scroll-zone    — conversation thread (scrollable)
     3. ajt-tk-sticky-footer  — compose area (fixed bottom)
   ══════════════════════════════════════════════════════════════════ */

.ajt-tk-sticky-header {
    flex-shrink: 0;
    border-bottom: 1px solid var(--tk-border-light, #e5e7eb);
    background: var(--tk-bg, #fff);
    max-height: 45%;
    overflow-y: auto;
}

.ajt-tk-scroll-zone {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.ajt-tk-sticky-footer {
    flex-shrink: 0;
    background: var(--tk-bg, #fff);
}

/* Description inside sticky header — compact styling */
.ajt-tk-desc-sticky {
    padding: 8px 24px 10px;
    border-top: 1px solid var(--tk-border-light, #e5e7eb);
}
.ajt-tk-desc-sticky-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tk-text-muted, #9ca3af);
    margin-bottom: 4px;
}
.ajt-tk-desc-sticky .ajt-tk-desc {
    margin: 0;
    padding: 10px 14px;
    font-size: 12px;
    line-height: 1.6;
    max-height: 100px;
}
.ajt-tk-desc-sticky .ajt-tk-desc.collapsed {
    max-height: 80px;
}
.ajt-tk-desc-sticky .ajt-tk-desc-toggle {
    padding: 2px 0;
    font-size: 11px;
}

/* ── Assign Resource Dropdown ──────────────────────────────────── */
.ajt-tk-assign-wrap {
    background: rgba(217, 119, 6, 0.08) !important;
    border-color: rgba(217, 119, 6, 0.2) !important;
    color: #d97706 !important;
}
.ajt-tk-assign-wrap svg { stroke: #d97706; }
.ajt-tk-assign-select {
    border: none;
    background: transparent;
    font-family: var(--tk-font, inherit);
    font-size: 12px;
    font-weight: 600;
    color: #d97706;
    cursor: pointer;
    outline: none;
    padding-right: 4px;
}

/* ── Charges Sidebar Section ──────────────────────────────────── */
.ajt-tk-sidebar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--tk-primary, #7c3aed);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    margin-left: 6px;
    vertical-align: middle;
}
.ajt-tk-charges-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.ajt-tk-charge-item {
    padding: 8px 10px;
    background: var(--tk-bg-subtle, #f8fafc);
    border: 1px solid var(--tk-border-light, #e5e7eb);
    border-radius: 6px;
}
.ajt-tk-charge-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tk-text, #1f2937);
    line-height: 1.3;
    margin-bottom: 3px;
}
.ajt-tk-charge-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--tk-text-muted, #9ca3af);
}
.ajt-tk-charge-amount {
    font-weight: 700;
    color: var(--tk-text-secondary, #4b5563);
}
.ajt-tk-charges-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    margin-top: 8px;
    border-top: 1px solid var(--tk-border-light, #e5e7eb);
    font-size: 12px;
    color: var(--tk-text-secondary, #4b5563);
}
.ajt-tk-charges-total strong {
    font-size: 13px;
    color: var(--tk-text, #1f2937);
}


/* ══════════════════════════════════════════════════════════════════
   SECTION 4 — MODAL BODY OVERRIDE
   When .ajt-tk-detail is inside .ajt-cm-modal-body, remove the
   body's padding/overflow so the detail layout controls everything.
   ══════════════════════════════════════════════════════════════════ */
.ajt-cm-modal-body:has(.ajt-tk-detail) {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Fallback for browsers without :has() — use a class set by JS */
.ajt-cm-modal-body.has-tk-detail {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}


/* ══════════════════════════════════════════════════════════════════
   SECTION 5 — RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .ajt-tk-row { grid-template-columns: 8px 1fr 14px; }
    .ajt-tk-row-assignee { display: none; }
}

@media (max-width: 640px) {
    .ajt-tk-msg { max-width: 92%; }
    .ajt-tk-te-grid { grid-template-columns: 1fr; }
    .ajt-tk-meta { gap: 4px; }
    .ajt-tk-meta-pill { font-size: 11px; padding: 3px 8px; }
    .ajt-tk-header { padding: 16px 18px 12px; }
    .ajt-tk-conversation { padding: 12px 18px 8px; }
    .ajt-tk-compose-pane { padding: 12px 18px; }
    .ajt-tk-compose-tabs { padding: 0 18px; }
    .ajt-tk-dates { padding: 8px 18px; }
    .ajt-tk-desc { margin: 12px 18px; }
    .ajt-tk-meta { padding: 0 18px; }
    .ajt-tk-meta-staff { padding: 0 18px; }
    .ajt-tk-filters { flex-wrap: wrap; }
    .ajt-tk-search { min-width: 100%; }
    .ajt-tk-toolbar { flex-direction: column; align-items: stretch; }
}

/* ══════════════════════════════════════════════════════════════════
   8. DASHBOARD — COMPACT TICKET LIST
   ══════════════════════════════════════════════════════════════════ */
.ajt-tk-dash-list { display: flex; flex-direction: column; }
.ajt-tk-dash-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px; border-bottom: 1px solid var(--tk-border-light, #f3f4f6);
    cursor: pointer; transition: background 0.15s;
}
.ajt-tk-dash-row:last-child { border-bottom: none; }
.ajt-tk-dash-row:hover { background: var(--tk-bg-subtle, #f9fafb); }
.ajt-tk-dash-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ajt-tk-dash-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ajt-tk-dash-title {
    font-size: 13px; font-weight: 600; color: var(--tk-text, #1f2937);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ajt-tk-dash-meta {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
    font-size: 11px; color: var(--tk-text-muted, #9ca3af);
}
.ajt-tk-dash-id { font-weight: 600; color: var(--tk-text-secondary, #6b7280); }
.ajt-tk-dash-pill { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; }
.ajt-tk-dash-status { color: var(--tk-text-secondary, #6b7280); }
.ajt-tk-dash-company { color: var(--tk-text-muted, #9ca3af); }
.ajt-tk-dash-company::before { content: '·'; margin-right: 2px; }
.ajt-tk-dash-overdue {
    font-size: 10px; font-weight: 700; color: #dc2626; text-transform: uppercase;
    background: #fef2f2; padding: 1px 6px; border-radius: 4px;
}
.ajt-tk-dash-arrow { flex-shrink: 0; color: var(--tk-text-muted, #9ca3af); opacity: 0.5; }

/* ── SLA Health Strip (v1.22.0) ── */
.ajt-tk-sla-strip {
    padding: 10px 16px;
    border-bottom: 1px solid var(--tk-border, #e5e7eb);
    background: linear-gradient(180deg, #FAFAFA, #fff);
}
.ajt-tk-sla-strip-header {
    display: flex; align-items: baseline; justify-content: space-between;
}
.ajt-tk-sla-strip-label {
    font-size: 9px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--tk-text-muted, #9ca3af);
}
.ajt-tk-sla-strip-pct {
    font-size: 16px; font-weight: 900; line-height: 1;
}
.ajt-tk-sla-strip-meta {
    display: flex; flex-wrap: wrap; gap: 12px;
    font-size: 10px; font-weight: 600; color: var(--tk-text-muted, #6b7280);
}
.ajt-tk-sla-strip-meta strong { font-weight: 800; }

/* ── Ticket Modal Sidebar (v1.22.0) ── */
.ajt-tk-sidebar {
    padding: 16px;
}
.ajt-tk-sidebar-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--tk-border, #e5e7eb);
}
.ajt-tk-sidebar-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.ajt-tk-sidebar-heading {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tk-text-muted, #9ca3af);
    margin: 0 0 10px 0;
}
.ajt-tk-sidebar-dl {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 8px;
    font-size: 11px;
    margin: 0;
}
.ajt-tk-sidebar-dl dt {
    font-weight: 600;
    color: var(--tk-text-muted, #6b7280);
}
.ajt-tk-sidebar-dl dd {
    margin: 0;
    font-weight: 500;
    color: var(--tk-text, #1f2937);
    word-break: break-word;
}