/* =============================================================
   SUPPORT CABINET — scoped additions
   -------------------------------------------------------------
   Aesthetic: "Operations console" — focused, dense, calm.
   Loaded AFTER app.css + merchant.css. Only selectors scoped by
   .pro--support (page root marker) or genuinely support-only
   components (.spt-*). NEVER overrides global tokens.
   ============================================================= */

/* ---------- 0. Support page root + role colour token ---------- */
/* Violet aligns with badge-support (#8B5CF6 family) so the role
   has its own subtle identity without breaking the lime brand. */
.pro--support {
    --spt-violet:       #8B5CF6;
    --spt-violet-dim:   rgba(139, 92, 246, 0.14);
    --spt-violet-soft:  rgba(139, 92, 246, 0.06);
    --spt-violet-text:  #C4B5FD;
}
[data-theme="light"] .pro--support {
    --spt-violet:       #6D28D9;
    --spt-violet-dim:   #EDE9FE;
    --spt-violet-soft:  #F5F3FF;
    --spt-violet-text:  #5B21B6;
}

/* ---------- 1. Hero command bar (above stat cards) ---------- */
.spt-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, var(--spt-violet-soft) 0%, transparent 40%),
        rgba(255, 255, 255, 0.02);
    position: relative;
    overflow: hidden;
}
.spt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 320px 80px at 88% 100%, var(--spt-violet-dim), transparent 70%);
    pointer-events: none;
}
[data-theme="light"] .spt-hero {
    background:
        linear-gradient(135deg, var(--spt-violet-soft) 0%, #FFFFFF 60%);
    border-color: #E2E8F0;
    box-shadow: var(--shadow-card);
}
.spt-hero-lead { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.spt-hero-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--spt-violet-dim); color: var(--spt-violet-text);
    font-size: 18px;
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.18);
}
[data-theme="light"] .spt-hero-icon { color: var(--spt-violet); }
.spt-hero-title {
    font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
    color: var(--color-text-primary); line-height: 1.2;
}
.spt-hero-sub {
    font-size: 12.5px; font-weight: 500;
    color: rgba(255,255,255,0.45); margin-top: 2px;
}
[data-theme="light"] .spt-hero-sub { color: #64748B; }
.spt-hero-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Live "online" indicator */
.spt-live-dot {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px; border-radius: var(--radius-full);
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.20);
    color: var(--color-success);
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
}
.spt-live-dot::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5);
    animation: spt-pulse 2s ease-out infinite;
}
@keyframes spt-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
[data-theme="light"] .spt-live-dot { background: #F0FDF4; border-color: #BBF7D0; color: #166534; }

/* ---------- 2. SLA pill (deadline countdown) ---------- */
.spt-sla {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11.5px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.spt-sla i { font-size: 10px; opacity: 0.85; }
.spt-sla--ok   { background: rgba(52, 211, 153, 0.10); color: var(--color-success); border-color: rgba(52, 211, 153, 0.18); }
.spt-sla--warn { background: rgba(251, 191, 36, 0.10); color: var(--color-warning); border-color: rgba(251, 191, 36, 0.20); }
.spt-sla--crit { background: rgba(248, 113, 113, 0.12); color: var(--color-danger); border-color: rgba(248, 113, 113, 0.24); animation: spt-sla-blink 1.6s ease-in-out infinite; }
@keyframes spt-sla-blink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
    50%      { box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.10); }
}
[data-theme="light"] .spt-sla--ok   { background: #F0FDF4; color: #166534; border-color: #BBF7D0; }
[data-theme="light"] .spt-sla--warn { background: #FFFBEB; color: #92400E; border-color: #FDE68A; }
[data-theme="light"] .spt-sla--crit { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
@media (prefers-reduced-motion: reduce) {
    .spt-sla--crit, .spt-live-dot::before { animation: none; }
}

/* ---------- 3. Toolbar polish on Support pages ---------- */
.pro--support .pg-stat-num,
.pro--support .pg-stat-sub,
.pro--support .pg-table td,
.pro--support .pg-table-mono {
    font-variant-numeric: tabular-nums;
}
.pro--support .pg-stat--accent {
    background: var(--spt-violet-dim);
}
.pro--support .pg-stat-num--accent {
    color: var(--spt-violet-text);
}
[data-theme="light"] .pro--support .pg-stat-num--accent {
    color: var(--spt-violet) !important;
}

/* ---------- 4. Status / priority badges (subtle add) ---------- */
.pro--support .badge-support {
    background: var(--spt-violet-dim);
    color: var(--spt-violet-text);
    border-color: rgba(139, 92, 246, 0.22);
}
[data-theme="light"] .pro--support .badge-support {
    background: var(--spt-violet-dim);
    color: var(--spt-violet);
    border-color: #DDD6FE;
}

/* ---------- 5. Stagger fade-up for tab/stat cards ---------- */
.pro--support .pg-stats > .pg-stat { animation: spt-fade-up 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.pro--support .pg-stats > .pg-stat:nth-child(1) { animation-delay:  20ms; }
.pro--support .pg-stats > .pg-stat:nth-child(2) { animation-delay:  70ms; }
.pro--support .pg-stats > .pg-stat:nth-child(3) { animation-delay: 120ms; }
.pro--support .pg-stats > .pg-stat:nth-child(4) { animation-delay: 170ms; }
@keyframes spt-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pro--support .pg-stats > .pg-stat { animation: none; }
}

/* ---------- 6. Table row hover lift ---------- */
.pro--support .pg-table tbody tr {
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pro--support .pg-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.05);
}
[data-theme="light"] .pro--support .pg-table tbody tr:hover {
    background: var(--spt-violet-soft);
}
.pro--support .pg-table-action:hover {
    color: var(--spt-violet-text);
    background: var(--spt-violet-dim);
}
[data-theme="light"] .pro--support .pg-table-action:hover {
    color: var(--spt-violet);
    background: var(--spt-violet-soft);
}

/* ---------- 7. Dispute / Appeal detail: footer action bar ---------- */
.spt-decision-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4) 0;
    background: linear-gradient(135deg, var(--spt-violet-soft) 0%, transparent 60%), rgba(255,255,255,0.02);
    border: 1px solid rgba(139, 92, 246, 0.16);
    border-radius: var(--radius-lg);
}
[data-theme="light"] .spt-decision-bar {
    background: linear-gradient(135deg, var(--spt-violet-soft) 0%, #FFFFFF 60%);
    border-color: #DDD6FE;
}
.spt-decision-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: 12px; font-weight: 600;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.spt-decision-label i { color: var(--spt-violet-text); }
[data-theme="light"] .spt-decision-label { color: #64748B; }
[data-theme="light"] .spt-decision-label i { color: var(--spt-violet); }
.spt-decision-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Decision action buttons — colour-coded, restrained */
.spt-action {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    font-family: var(--font-family);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}
.spt-action:disabled { opacity: 0.5; cursor: not-allowed; }
.spt-action:active:not(:disabled) { transform: scale(0.97); }
.spt-action--claim {
    background: var(--spt-violet-dim);
    color: var(--spt-violet-text);
    border-color: rgba(139, 92, 246, 0.28);
}
.spt-action--claim:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.22);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.18);
}
.spt-action--approve {
    background: rgba(52, 211, 153, 0.12);
    color: var(--color-success);
    border-color: rgba(52, 211, 153, 0.30);
}
.spt-action--approve:hover:not(:disabled) {
    background: var(--color-success);
    color: #04140C;
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.30);
}
.spt-action--reject {
    background: rgba(248, 113, 113, 0.12);
    color: var(--color-danger);
    border-color: rgba(248, 113, 113, 0.30);
}
.spt-action--reject:hover:not(:disabled) {
    background: var(--color-danger);
    color: #fff;
    box-shadow: 0 4px 14px rgba(248, 113, 113, 0.30);
}
[data-theme="light"] .spt-action--claim {
    background: var(--spt-violet-dim); color: var(--spt-violet); border-color: #C4B5FD;
}
[data-theme="light"] .spt-action--claim:hover:not(:disabled) {
    background: #DDD6FE; box-shadow: 0 4px 12px rgba(109, 40, 217, 0.18);
}
[data-theme="light"] .spt-action--approve {
    background: #F0FDF4; color: #15803D; border-color: #86EFAC;
}
[data-theme="light"] .spt-action--approve:hover:not(:disabled) {
    background: #16A34A; color: #FFFFFF; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.30);
}
[data-theme="light"] .spt-action--reject {
    background: #FEF2F2; color: #B91C1C; border-color: #FECACA;
}
[data-theme="light"] .spt-action--reject:hover:not(:disabled) {
    background: #DC2626; color: #FFFFFF; box-shadow: 0 4px 14px rgba(220, 38, 38, 0.30);
}

/* Resolution confirm panel */
.spt-resolve-panel {
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
    animation: spt-resolve-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="light"] .spt-resolve-panel { background: #F8FAFC; border-color: #E2E8F0; }
.spt-resolve-panel-title {
    font-size: 13px; font-weight: 700; margin: 0 0 var(--space-3);
    display: flex; align-items: center; gap: 8px;
}
.spt-resolve-panel-title.is-for-trader { color: var(--color-success); }
.spt-resolve-panel-title.is-for-client { color: var(--color-danger); }
@keyframes spt-resolve-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .spt-resolve-panel { animation: none; }
}

/* ---------- 8. Two-thread layout on Disputes detail ---------- */
.spt-thread-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}
.spt-thread-col {
    display: flex; flex-direction: column; gap: var(--space-3);
    min-width: 0;
}
.spt-thread-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: rgba(255,255,255,0.02);
}
[data-theme="light"] .spt-thread-head { background: #F8FAFC; border-color: #E2E8F0; }
.spt-thread-head .spt-thread-title {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}
[data-theme="light"] .spt-thread-head .spt-thread-title { color: #475569; }
.spt-thread-head i.spt-thread-merchant { color: var(--color-info); }
.spt-thread-head i.spt-thread-trader   { color: var(--color-accent); }
[data-theme="light"] .spt-thread-head i.spt-thread-trader { color: #4F46E5; }
.spt-thread-count {
    font-size: 11px; font-weight: 700;
    color: rgba(255,255,255,0.45);
    font-variant-numeric: tabular-nums;
}
[data-theme="light"] .spt-thread-count { color: #94A3B8; }
@media (max-width: 920px) {
    .spt-thread-grid { grid-template-columns: 1fr; }
}

/* ---------- 9. Modal: better sticky footer for support ---------- */
.spt-modal-footer {
    position: sticky; bottom: 0;
    margin: var(--space-4) calc(var(--space-5) * -1) calc(var(--space-5) * -1);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--color-bg-surface) 30%);
    border-top: 1px solid var(--color-border);
    z-index: 2;
}
[data-theme="light"] .spt-modal-footer {
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #FFFFFF 30%);
    border-top-color: #E2E8F0;
}

/* ---------- 10. Truncation helpers ---------- */
.spt-truncate {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
}
.spt-truncate--xs { max-width: 100px; }
.spt-truncate--sm { max-width: 160px; }
.spt-truncate--md { max-width: 240px; }
.spt-truncate--lg { max-width: 320px; }

.pro--support td.spt-cell-title {
    max-width: 280px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- 11. Mobile responsiveness ---------- */
@media (max-width: 640px) {
    .spt-hero { flex-direction: column; align-items: flex-start; padding: var(--space-3); gap: var(--space-3); }
    .spt-hero-meta { width: 100%; justify-content: space-between; }
    .pro--support .pg-toolbar { flex-direction: column; align-items: stretch; }
    .pro--support .pg-toolbar .d-flex { flex-wrap: wrap; }
    .spt-decision-bar { flex-direction: column; align-items: stretch; }
    .spt-decision-actions { width: 100%; }
    .spt-action { flex: 1; justify-content: center; }
}

/* ---------- 12. Inline ticket title cell — better hierarchy ---------- */
.spt-title-cell {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0; max-width: 280px;
}
.spt-title-main {
    font-size: 13px; font-weight: 600;
    color: var(--color-text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spt-title-sub {
    font-size: 11px; font-weight: 500;
    color: rgba(255,255,255,0.4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-theme="light"] .spt-title-sub { color: #94A3B8; }

/* ---------- 13. Docs hero badge — violet variant ---------- */
.pro--support .docs-content-badge {
    background: var(--spt-violet-dim);
    color: var(--spt-violet-text);
}
[data-theme="light"] .pro--support .docs-content-badge {
    background: var(--spt-violet-dim);
    color: var(--spt-violet);
}