@import url("./editorial-theme-contract.css");

/* ==========================================================================
   theme-components.css
   CSS classes for UI components previously styled inline by JavaScript.
   Dark theme is the default; [data-theme-mode="light"] provides overrides.
   Prefix: tc-  (theme component)
   ========================================================================== */

/* ==========================================================================
   1. TEXT COLORS
   ========================================================================== */

/* Primary text (headings, strong content) */
.tc-text-primary    { color: #e5e7eb; }
.tc-text-heading    { color: #f1f5f9; }
.tc-text-white      { color: #ffffff; }

/* Secondary / body text */
.tc-text-secondary  { color: #cbd5e1; }
.tc-text-body       { color: #e2e8f0; }

/* Muted / subdued text */
.tc-text-muted      { color: #94a3b8; }
.tc-text-muted-alt  { color: #9ca3af; }
.tc-text-subtle     { color: #64748b; }
.tc-text-faint      { color: #475569; }

/* Semantic status text */
.tc-text-error      { color: #fca5a5; }
.tc-text-error-strong { color: #ef4444; }
.tc-text-error-bold { color: #f87171; }
.tc-text-success    { color: #86efac; }
.tc-text-success-strong { color: #22c55e; }
.tc-text-success-vivid  { color: #4ade80; }
.tc-text-success-mid { color: #34d399; }
.tc-text-success-soft { color: #bbf7d0; }
.tc-text-warning    { color: #fde047; }
.tc-text-warning-strong { color: #fbbf24; }
.tc-text-warning-mid { color: #f59e0b; }
.tc-text-warning-subtle { color: #fef9c3; }

/* Info / links */
.tc-text-info       { color: #60a5fa; }
.tc-text-info-strong { color: #3b82f6; }
.tc-text-link       { color: #7dd3fc; }
.tc-text-link-alt   { color: #38bdf8; }
.tc-text-link-strong { color: #93c5fd; }
.tc-text-pink       { color: #fda4af; }

/* Purple / violet */
.tc-text-purple     { color: #a78bfa; }
.tc-text-purple-alt { color: #c4b5fd; }
.tc-text-purple-light { color: #818cf8; }
.tc-text-teal       { color: #2dd4bf; }

/* JSON syntax highlighting */
.tc-json-key        { color: #60a5fa; }
.tc-json-string     { color: #fbbf24; }
.tc-json-number     { color: #34d399; }
.tc-json-bool       { color: #f472b6; }

/* Light theme text overrides */
[data-theme-mode="light"] .tc-text-primary     { color: #1e293b; }
[data-theme-mode="light"] .tc-text-heading     { color: #0f172a; }
[data-theme-mode="light"] .tc-text-white       { color: #1e293b; }
[data-theme-mode="light"] .tc-text-secondary   { color: #374151; }
[data-theme-mode="light"] .tc-text-body        { color: #1e293b; }
[data-theme-mode="light"] .tc-text-muted       { color: #64748b; }
[data-theme-mode="light"] .tc-text-muted-alt   { color: #6b7280; }
[data-theme-mode="light"] .tc-text-subtle      { color: #64748b; }
[data-theme-mode="light"] .tc-text-faint       { color: #64748b; }
[data-theme-mode="light"] .tc-text-error       { color: #dc2626; }
[data-theme-mode="light"] .tc-text-error-strong { color: #b91c1c; }
[data-theme-mode="light"] .tc-text-error-bold  { color: #dc2626; }
[data-theme-mode="light"] .tc-text-success     { color: #16a34a; }
[data-theme-mode="light"] .tc-text-success-strong { color: #15803d; }
[data-theme-mode="light"] .tc-text-success-vivid  { color: #16a34a; }
[data-theme-mode="light"] .tc-text-success-mid { color: #059669; }
[data-theme-mode="light"] .tc-text-success-soft { color: #16a34a; }
[data-theme-mode="light"] .tc-text-warning     { color: #ca8a04; }
[data-theme-mode="light"] .tc-text-warning-strong { color: #d97706; }
[data-theme-mode="light"] .tc-text-warning-mid { color: #b45309; }
[data-theme-mode="light"] .tc-text-warning-subtle { color: #92400e; }
[data-theme-mode="light"] .tc-text-info        { color: #2563eb; }
[data-theme-mode="light"] .tc-text-info-strong { color: #1d4ed8; }
[data-theme-mode="light"] .tc-text-link        { color: #0284c7; }
[data-theme-mode="light"] .tc-text-link-alt    { color: #0369a1; }
[data-theme-mode="light"] .tc-text-link-strong { color: #2563eb; }
[data-theme-mode="light"] .tc-text-pink        { color: #e11d48; }
[data-theme-mode="light"] .tc-text-purple      { color: #7c3aed; }
[data-theme-mode="light"] .tc-text-purple-alt  { color: #6d28d9; }
[data-theme-mode="light"] .tc-text-purple-light { color: #7c3aed; }
[data-theme-mode="light"] .tc-text-teal        { color: #0d9488; }
[data-theme-mode="light"] .tc-json-key         { color: #2563eb; }
[data-theme-mode="light"] .tc-json-string      { color: #b45309; }
[data-theme-mode="light"] .tc-json-number      { color: #059669; }
[data-theme-mode="light"] .tc-json-bool        { color: #be185d; }


/* ==========================================================================
   2. BACKGROUNDS
   ========================================================================== */

/* Panel backgrounds - various opacities */
.tc-bg-panel {
  background: rgba(15, 23, 42, 0.8);
}
.tc-bg-panel-strong {
  background: rgba(15, 23, 42, 0.95);
}
.tc-bg-panel-medium {
  background: rgba(15, 23, 42, 0.6);
}
.tc-bg-panel-light {
  background: rgba(15, 23, 42, 0.5);
}
.tc-bg-panel-subtle {
  background: rgba(30, 41, 59, 0.5);
}
.tc-bg-panel-muted {
  background: rgba(30, 41, 59, 0.3);
}
.tc-bg-panel-dark {
  background: rgba(30, 41, 59, 0.8);
}
.tc-bg-panel-deep {
  background: rgba(2, 6, 23, 0.8);
}
.tc-bg-disabled {
  background: #1e293b;
}
.tc-bg-transparent {
  background: transparent;
}
.tc-bg-slate-subtle {
  background: rgba(148, 163, 184, 0.1);
}
.tc-bg-slate-medium {
  background: rgba(148, 163, 184, 0.2);
}

/* Semantic backgrounds */
.tc-bg-info {
  background: rgba(59, 130, 246, 0.1);
}
.tc-bg-info-stronger {
  background: rgba(59, 130, 246, 0.15);
}
.tc-bg-error {
  background: rgba(239, 68, 68, 0.1);
}
.tc-bg-error-stronger {
  background: rgba(239, 68, 68, 0.2);
}
.tc-bg-success {
  background: rgba(34, 197, 94, 0.1);
}
.tc-bg-success-stronger {
  background: rgba(34, 197, 94, 0.2);
}
.tc-bg-warning {
  background: rgba(234, 179, 8, 0.1);
}
.tc-bg-warning-alt {
  background: rgba(251, 191, 36, 0.1);
}
.tc-bg-purple {
  background: rgba(139, 92, 246, 0.12);
}
.tc-bg-teal {
  background: rgba(20, 184, 166, 0.15);
}

[data-theme-mode="light"] .tc-bg-panel         { background: #ffffff; }
[data-theme-mode="light"] .tc-bg-panel-strong   { background: #ffffff; }
[data-theme-mode="light"] .tc-bg-panel-medium   { background: #f0f4f8; }
[data-theme-mode="light"] .tc-bg-panel-light    { background: #f0f4f8; }
[data-theme-mode="light"] .tc-bg-panel-subtle   { background: #e8edf3; }
[data-theme-mode="light"] .tc-bg-panel-muted    { background: #f0f4f8; }
[data-theme-mode="light"] .tc-bg-panel-dark     { background: #e8edf3; }
[data-theme-mode="light"] .tc-bg-panel-deep     { background: #ffffff; }
[data-theme-mode="light"] .tc-bg-disabled       { background: #e2e8f0; }
[data-theme-mode="light"] .tc-bg-slate-subtle   { background: rgba(100, 116, 139, 0.06); }
[data-theme-mode="light"] .tc-bg-slate-medium   { background: rgba(100, 116, 139, 0.08); }
[data-theme-mode="light"] .tc-bg-info           { background: rgba(37, 99, 235, 0.06); }
[data-theme-mode="light"] .tc-bg-info-stronger  { background: rgba(37, 99, 235, 0.08); }
[data-theme-mode="light"] .tc-bg-error          { background: rgba(220, 38, 38, 0.06); }
[data-theme-mode="light"] .tc-bg-error-stronger { background: rgba(220, 38, 38, 0.08); }
[data-theme-mode="light"] .tc-bg-success        { background: rgba(22, 163, 74, 0.06); }
[data-theme-mode="light"] .tc-bg-success-stronger { background: rgba(22, 163, 74, 0.08); }
[data-theme-mode="light"] .tc-bg-warning        { background: rgba(217, 119, 6, 0.06); }
[data-theme-mode="light"] .tc-bg-warning-alt    { background: rgba(217, 119, 6, 0.06); }
[data-theme-mode="light"] .tc-bg-purple         { background: rgba(124, 58, 237, 0.06); }
[data-theme-mode="light"] .tc-bg-teal           { background: rgba(13, 148, 136, 0.06); }


/* ==========================================================================
   3. BORDERS
   ========================================================================== */

.tc-border-subtle   { border: 1px solid rgba(148, 163, 184, 0.2); }
.tc-border-medium   { border: 1px solid rgba(148, 163, 184, 0.3); }
.tc-border-strong   { border: 1px solid rgba(148, 163, 184, 0.5); }
.tc-border-stronger { border: 1px solid rgba(148, 163, 184, 0.6); }
.tc-border-dark     { border: 1px solid #334155; }
.tc-border-separator { border-top: 1px solid rgba(148, 163, 184, 0.2); }
.tc-border-separator-bottom { border-bottom: 1px solid rgba(148, 163, 184, 0.2); }
.tc-border-white-subtle { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.tc-border-left-accent { border-left: 2px solid rgba(148, 163, 184, 0.3); }
.tc-border-left-info   { border-left: 3px solid #60a5fa; }
.tc-border-left-success { border-left: 3px solid #34d399; }

/* Semantic borders */
.tc-border-info     { border: 1px solid rgba(59, 130, 246, 0.3); }
.tc-border-error    { border: 1px solid rgba(239, 68, 68, 0.3); }
.tc-border-success  { border: 1px solid rgba(34, 197, 94, 0.4); }
.tc-border-warning  { border: 1px solid rgba(234, 179, 8, 0.3); }
.tc-border-warning-alt { border: 1px solid rgba(251, 191, 36, 0.3); }
.tc-border-purple   { border: 1px solid rgba(139, 92, 246, 0.25); }
.tc-border-teal     { border: 1px solid rgba(20, 184, 166, 0.3); }

/* Validation borders */
.tc-border-valid    { border-color: rgba(34, 197, 94, 0.6); }
.tc-border-invalid  { border-color: rgba(239, 68, 68, 0.6); }
.tc-border-default  { border-color: rgba(148, 163, 184, 0.6); }
.tc-border-selected { border-color: rgba(59, 130, 246, 0.6); }
.tc-input.tc-border-selected { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }

[data-theme-mode="light"] .tc-border-subtle    { border-color: #cbd5e1; }
[data-theme-mode="light"] .tc-border-medium    { border-color: #d1d5db; }
[data-theme-mode="light"] .tc-border-strong    { border-color: #94a3b8; }
[data-theme-mode="light"] .tc-border-stronger  { border-color: #94a3b8; }
[data-theme-mode="light"] .tc-border-dark      { border-color: #cbd5e1; }
[data-theme-mode="light"] .tc-border-separator { border-top-color: #cbd5e1; }
[data-theme-mode="light"] .tc-border-separator-bottom { border-bottom-color: #cbd5e1; }
[data-theme-mode="light"] .tc-border-white-subtle { border-bottom-color: #cbd5e1; }
[data-theme-mode="light"] .tc-border-left-accent { border-left-color: #d1d5db; }
[data-theme-mode="light"] .tc-border-left-info   { border-left-color: #2563eb; }
[data-theme-mode="light"] .tc-border-left-success { border-left-color: #16a34a; }
[data-theme-mode="light"] .tc-border-info      { border-color: rgba(37, 99, 235, 0.2); }
[data-theme-mode="light"] .tc-border-error     { border-color: rgba(220, 38, 38, 0.2); }
[data-theme-mode="light"] .tc-border-success   { border-color: rgba(22, 163, 74, 0.25); }
[data-theme-mode="light"] .tc-border-warning   { border-color: rgba(217, 119, 6, 0.2); }
[data-theme-mode="light"] .tc-border-warning-alt { border-color: rgba(217, 119, 6, 0.2); }
[data-theme-mode="light"] .tc-border-purple    { border-color: rgba(124, 58, 237, 0.2); }
[data-theme-mode="light"] .tc-border-teal      { border-color: rgba(13, 148, 136, 0.2); }
[data-theme-mode="light"] .tc-border-valid     { border-color: rgba(22, 163, 74, 0.5); }
[data-theme-mode="light"] .tc-border-invalid   { border-color: rgba(220, 38, 38, 0.5); }
[data-theme-mode="light"] .tc-border-default   { border-color: #d1d5db; }
[data-theme-mode="light"] .tc-border-selected  { border-color: rgba(37, 99, 235, 0.5); }
[data-theme-mode="light"] .tc-input.tc-border-selected { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }


/* ==========================================================================
   4. COMPOSITE COMPONENTS
   ========================================================================== */

/* --- Card --- */
.tc-card {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
}
.tc-card-strong {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 8px;
}
.tc-card-subtle {
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 8px;
}
.tc-card-dark {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
}
.tc-card-deep {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 6px;
}

[data-theme-mode="light"] .tc-card        { background: #ffffff; border-color: #cbd5e1; }
[data-theme-mode="light"] .tc-card-strong { background: #ffffff; border-color: #cbd5e1; }
[data-theme-mode="light"] .tc-card-subtle { background: #f0f4f8; border-color: #cbd5e1; }
[data-theme-mode="light"] .tc-card-dark   { background: #f0f4f8; border-color: #cbd5e1; }
[data-theme-mode="light"] .tc-card-deep   { background: #f0f4f8; border-color: #cbd5e1; }


/* --- Modal --- */
.tc-modal-overlay {
  background: rgba(2, 6, 23, 0.85);
}
.tc-modal-overlay-dark {
  background: rgba(0, 0, 0, 0.8);
}
.tc-modal-dialog {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.8);
  color: #e5e7eb;
}
.tc-modal-dialog-gradient {
  background: radial-gradient(circle at top, #0b1120 0%, #020617 100%);
  border: 2px solid rgba(59, 130, 246, 0.5);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: #e5e7eb;
}

[data-theme-mode="light"] .tc-modal-overlay      { background: rgba(0, 0, 0, 0.4); }
[data-theme-mode="light"] .tc-modal-overlay-dark  { background: rgba(0, 0, 0, 0.4); }
[data-theme-mode="light"] .tc-modal-dialog {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  color: #1e293b;
}
[data-theme-mode="light"] .tc-modal-dialog-gradient {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
  color: #1e293b;
}


/* --- Input / Form --- */
.tc-input {
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  color: #f1f5f9;
}
.tc-input-strong {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.5);
  border-radius: 6px;
  color: #e5e7eb;
}
.tc-textarea {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: 6px;
  color: #e5e7eb;
}
.tc-select {
  background: rgba(2, 6, 23, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  color: #f1f5f9;
}

[data-theme-mode="light"] .tc-input,
[data-theme-mode="light"] .tc-input-strong,
[data-theme-mode="light"] .tc-textarea,
[data-theme-mode="light"] .tc-select {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
}


/* --- Button --- */
.tc-btn-subtle {
  background: rgba(148, 163, 184, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 6px;
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
}
.tc-btn-subtle:hover {
  background: rgba(148, 163, 184, 0.3);
  border-color: rgba(148, 163, 184, 0.5);
}
.tc-btn-danger {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 6px;
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.2s;
}
.tc-btn-danger:hover {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.6);
}
.tc-btn-danger-sm {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 4px;
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.2s;
}
.tc-btn-danger-sm:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}
.tc-btn-ghost {
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
}
.tc-btn-secondary-dark {
  background: rgba(71, 85, 105, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  color: #e5e7eb;
  cursor: pointer;
  transition: all 0.2s;
}
.tc-btn-secondary-dark:hover {
  background: rgba(71, 85, 105, 1);
}
.tc-btn-primary-gradient {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  border: none;
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
}
.tc-btn-primary-gradient:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
}
.tc-btn-copy {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 4px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}
.tc-btn-copy:hover {
  background: rgba(59, 130, 246, 0.4);
  color: #e5e7eb;
}

[data-theme-mode="light"] .tc-btn-subtle {
  background: #e8edf3;
  border-color: #d1d5db;
  color: #374151;
}
[data-theme-mode="light"] .tc-btn-subtle:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}
[data-theme-mode="light"] .tc-btn-danger {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.3);
  color: #dc2626;
}
[data-theme-mode="light"] .tc-btn-danger:hover {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.5);
}
[data-theme-mode="light"] .tc-btn-danger-sm {
  background: rgba(220, 38, 38, 0.04);
  border-color: rgba(220, 38, 38, 0.2);
  color: #dc2626;
}
[data-theme-mode="light"] .tc-btn-danger-sm:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.4);
  color: #b91c1c;
}
[data-theme-mode="light"] .tc-btn-ghost {
  color: #2563eb;
}
[data-theme-mode="light"] .tc-btn-secondary-dark {
  background: #e8edf3;
  border-color: #d1d5db;
  color: #374151;
}
[data-theme-mode="light"] .tc-btn-secondary-dark:hover {
  background: #e2e8f0;
}
[data-theme-mode="light"] .tc-btn-copy {
  background: rgba(37, 99, 235, 0.06);
  border-color: rgba(37, 99, 235, 0.2);
  color: #64748b;
}
[data-theme-mode="light"] .tc-btn-copy:hover {
  background: rgba(37, 99, 235, 0.12);
  color: #1e293b;
}


/* --- Badges / Pills --- */
.tc-badge-info {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 999px;
}
.tc-badge-error {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-radius: 999px;
}
.tc-badge-success {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 999px;
}
.tc-badge-warning {
  background: rgba(251, 191, 36, 0.2);
  color: #fde047;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 999px;
}
.tc-badge-purple {
  background: rgba(139, 92, 246, 0.2);
  color: #c4b5fd;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 999px;
}
.tc-badge-disabled {
  background: #1e293b;
  color: #475569;
  border: 1px solid #334155;
  border-radius: 999px;
}

[data-theme-mode="light"] .tc-badge-info {
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
}
[data-theme-mode="light"] .tc-badge-error {
  background: rgba(220, 38, 38, 0.06);
  color: #dc2626;
  border-color: rgba(220, 38, 38, 0.2);
}
[data-theme-mode="light"] .tc-badge-success {
  background: rgba(22, 163, 74, 0.06);
  color: #16a34a;
  border-color: rgba(22, 163, 74, 0.2);
}
[data-theme-mode="light"] .tc-badge-warning {
  background: rgba(217, 119, 6, 0.06);
  color: #b45309;
  border-color: rgba(217, 119, 6, 0.2);
}
[data-theme-mode="light"] .tc-badge-purple {
  background: rgba(124, 58, 237, 0.06);
  color: #6d28d9;
  border-color: rgba(124, 58, 237, 0.2);
}
[data-theme-mode="light"] .tc-badge-disabled {
  background: #e2e8f0;
  color: #64748b;
  border-color: #d1d5db;
}


/* --- Pipeline badges (report-delivery) --- */
.tc-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 500;
  white-space: nowrap;
}
.tc-pill-success {
  background: rgba(34, 197, 94, 0.10);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.tc-pill-success-required {
  background: rgba(34, 197, 94, 0.10);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.tc-pill-disabled {
  background: #1e293b;
  color: #475569;
  border: 1px solid #334155;
  text-decoration: line-through;
  opacity: 0.7;
}
.tc-pill-purple {
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
  border: 1px dashed rgba(139, 92, 246, 0.25);
}
.tc-pill-subtle {
  background: rgba(100, 116, 139, 0.08);
  color: #64748b;
  border: 1px dashed rgba(100, 116, 139, 0.25);
}
.tc-pill-indigo {
  background: rgba(99, 102, 241, 0.10);
  color: #818cf8;
  border: 1px solid rgba(99, 102, 241, 0.2);
}
.tc-pill-teal-active {
  background: rgba(20, 184, 166, 0.15);
  color: #2dd4bf;
  border: 1px solid rgba(20, 184, 166, 0.3);
}
.tc-pill-teal-inactive {
  background: #1e293b;
  color: #475569;
  border: 1px solid #334155;
}
.tc-pill-error {
  background: rgba(239, 68, 68, 0.10);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

[data-theme-mode="light"] .tc-pill-success       { background: rgba(22, 163, 74, 0.06); color: #16a34a; border-color: rgba(22, 163, 74, 0.2); }
[data-theme-mode="light"] .tc-pill-success-required { background: rgba(22, 163, 74, 0.06); color: #16a34a; border-color: rgba(22, 163, 74, 0.2); }
[data-theme-mode="light"] .tc-pill-disabled       { background: #e8edf3; color: #64748b; border-color: #d1d5db; }
[data-theme-mode="light"] .tc-pill-purple         { background: rgba(124, 58, 237, 0.06); color: #7c3aed; border-color: rgba(124, 58, 237, 0.2); }
[data-theme-mode="light"] .tc-pill-subtle         { background: rgba(100, 116, 139, 0.06); color: #64748b; border-color: rgba(100, 116, 139, 0.2); }
[data-theme-mode="light"] .tc-pill-indigo         { background: rgba(99, 102, 241, 0.06); color: #4f46e5; border-color: rgba(99, 102, 241, 0.15); }
[data-theme-mode="light"] .tc-pill-teal-active    { background: rgba(13, 148, 136, 0.06); color: #0d9488; border-color: rgba(13, 148, 136, 0.2); }
[data-theme-mode="light"] .tc-pill-teal-inactive  { background: #e8edf3; color: #64748b; border-color: #d1d5db; }
[data-theme-mode="light"] .tc-pill-error          { background: rgba(220, 38, 38, 0.06); color: #dc2626; border-color: rgba(220, 38, 38, 0.2); }


/* --- Semantic message panels --- */
.tc-msg-info {
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: 8px;
  color: #7dd3fc;
}
.tc-msg-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #fca5a5;
}
.tc-msg-success {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 8px;
  color: #22c55e;
}
.tc-msg-warning {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  border-radius: 8px;
  color: #fde047;
}
.tc-msg-warning-alt {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: 8px;
  color: #fbbf24;
}

[data-theme-mode="light"] .tc-msg-info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}
[data-theme-mode="light"] .tc-msg-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}
[data-theme-mode="light"] .tc-msg-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #166534;
}
[data-theme-mode="light"] .tc-msg-warning {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}
[data-theme-mode="light"] .tc-msg-warning-alt {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;
}


/* --- Tooltip --- */
.tc-tooltip {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 4px;
  color: #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme-mode="light"] .tc-tooltip {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #1e293b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* --- Recipient pill (delivery history) --- */
.tc-recipient-pill {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 4px;
  color: #e2e8f0;
}

[data-theme-mode="light"] .tc-recipient-pill {
  background: #e8edf3;
  border-color: #cbd5e1;
  color: #1e293b;
}


/* --- Code / pre block --- */
.tc-code-block {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid #1f2937;
  border-radius: 8px;
  color: #e5e7eb;
}

[data-theme-mode="light"] .tc-code-block {
  background: #e8edf3;
  border-color: #cbd5e1;
  color: #1e293b;
}


/* --- List items (contacts, groups, etc.) --- */
.tc-list-item {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.tc-list-item:hover {
  background: rgba(148, 163, 184, 0.15);
  border-color: rgba(148, 163, 184, 0.3);
}
.tc-list-item.selected,
.tc-list-item-selected {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(59, 130, 246, 0.6);
}

[data-theme-mode="light"] .tc-list-item {
  background: rgba(232, 237, 243, 0.8);
  border-color: #cbd5e1;
}
[data-theme-mode="light"] .tc-list-item:hover {
  background: rgba(226, 232, 240, 0.6);
  border-color: #cbd5e1;
}
[data-theme-mode="light"] .tc-list-item.selected,
[data-theme-mode="light"] .tc-list-item-selected {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.4);
}


/* --- Status indicator --- */
.tc-status-icon-answered {
  border: 2px solid rgba(34, 197, 94, 0.5);
  background: rgba(34, 197, 94, 0.1);
  border-radius: 50%;
}
.tc-status-icon-answered.active {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}
.tc-status-icon-noanswer {
  border: 2px solid rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  border-radius: 50%;
}
.tc-status-icon-noanswer.active {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.3);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
}


/* --- Table row --- */
.tc-table-row {
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

[data-theme-mode="light"] .tc-table-row {
  border-bottom-color: #e2e8f0;
}


/* --- Sticky header (used in reports-in-progress, etc.) --- */
.tc-sticky-header {
  background: rgba(2, 6, 23, 0.95);
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}

[data-theme-mode="light"] .tc-sticky-header {
  background: #ffffff;
  border-bottom-color: #cbd5e1;
}


/* --- Delivery branch connector --- */
.tc-branch-connector {
  border-left: 2px solid #334155;
}

[data-theme-mode="light"] .tc-branch-connector {
  border-left-color: #d1d5db;
}

.tc-connector-text {
  color: #475569;
}

[data-theme-mode="light"] .tc-connector-text {
  color: #64748b;
}


/* --- Delivery status badges (dynamic color via CSS vars) --- */
.tc-delivery-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}


/* --- Read-only field (system contacts, etc.) --- */
.tc-readonly-field {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: #e2e8f0;
}

[data-theme-mode="light"] .tc-readonly-field {
  background: rgba(37, 99, 235, 0.04);
  border-color: rgba(37, 99, 235, 0.15);
  color: #1e293b;
}


/* --- Green dot indicator --- */
.tc-dot-active {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
}

[data-theme-mode="light"] .tc-dot-active {
  background: #16a34a;
  box-shadow: 0 0 6px rgba(22, 163, 74, 0.5);
}


/* --- Copy feedback state --- */
.tc-copy-success {
  background: rgba(34, 197, 94, 0.3) !important;
  color: #34d399 !important;
}
.tc-copy-error {
  background: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

[data-theme-mode="light"] .tc-copy-success {
  background: rgba(22, 163, 74, 0.1) !important;
  color: #16a34a !important;
}
[data-theme-mode="light"] .tc-copy-error {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #dc2626 !important;
}


/* --- Manual user form input (developer page) --- */
.tc-form-input {
  width: 100%;
  padding: 6px 8px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 4px;
  color: #f1f5f9;
  font-size: 0.8rem;
}

[data-theme-mode="light"] .tc-form-input {
  background: #ffffff;
  border-color: #d1d5db;
  color: #1e293b;
}


/* --- Boxshadow variants --- */
.tc-shadow {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.35);
}
.tc-shadow-lg {
  box-shadow: 0 20px 40px rgba(2, 6, 23, 0.8);
}

[data-theme-mode="light"] .tc-shadow {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
[data-theme-mode="light"] .tc-shadow-lg {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}


/* --- Links --- */
.tc-link {
  color: #7dd3fc;
  text-decoration: none;
}
.tc-link:hover {
  text-decoration: underline;
}
.tc-link-blue {
  color: #60a5fa;
  text-decoration: none;
}
.tc-link-blue:hover {
  text-decoration: underline;
}

[data-theme-mode="light"] .tc-link      { color: #0284c7; }
[data-theme-mode="light"] .tc-link-blue { color: #2563eb; }


/* --- Active/inactive toggle buttons (chart mode, etc.) --- */
.tc-toggle-active {
  background: rgba(59, 130, 246, 0.35);
  color: #e2e8f0;
}
.tc-toggle-inactive {
  background: rgba(148, 163, 184, 0.1);
  color: #94a3b8;
}

[data-theme-mode="light"] .tc-toggle-active {
  background: rgba(37, 99, 235, 0.12);
  color: #1e293b;
}
[data-theme-mode="light"] .tc-toggle-inactive {
  background: rgba(100, 116, 139, 0.06);
  color: #64748b;
}