/* SupportHub – Tailwind overrides & utilities */

/* Smooth theme transitions (color + background only, no layout shift) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease !important;
}

/* Material Symbols sizing */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  vertical-align: middle;
}

/* Prose overrides for message bodies */
.prose img { max-width: 100%; height: auto; border-radius: 0.5rem; }
.prose a { color: #4f46e5; text-decoration: underline; }
.dark .prose a { color: #818cf8; }
.prose pre { font-size: 0.75rem; }
.dark .prose pre { background-color: #1f2937; color: #e5e7eb; }
.dark .prose code { color: #e5e7eb; }

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Star button styling */
.star-btn {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  user-select: none;
}

.star-btn:hover {
  filter: brightness(1.2);
}

.star-btn:active {
  transform: scale(0.95);
}

/* Unread inbox rows are styled via .row-unread + CSS vars in inbox.html
   (do NOT target tr.font-semibold here — the thead row carries that class too). */

/* Loading spinner animation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Button disabled state */
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Flash message fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out;
}

/* Status picker dialog slide-up */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Sync button loading state */
.sync-icon.loading {
  animation: spin 1s linear infinite;
}

/* Theme toggle active state */
.theme-btn.active {
  background-color: rgba(99, 102, 241, 0.15);
  color: #6366f1;
}
.dark .theme-btn.active {
  background-color: rgba(99, 102, 241, 0.25);
  color: #818cf8;
}

/* Quill editor dark mode overrides */
.dark .ql-toolbar.ql-snow {
  border-color: #374151;
  background-color: #1f2937;
}
.dark .ql-toolbar .ql-stroke {
  stroke: #9ca3af;
}
.dark .ql-toolbar .ql-fill {
  fill: #9ca3af;
}
.dark .ql-toolbar .ql-picker-label {
  color: #9ca3af;
}
.dark .ql-toolbar button:hover .ql-stroke {
  stroke: #e5e7eb;
}
.dark .ql-toolbar button:hover .ql-fill {
  fill: #e5e7eb;
}
.dark .ql-container.ql-snow {
  border-color: #374151;
  background-color: #111827;
  color: #e5e7eb;
}
.dark .ql-editor.ql-blank::before {
  color: #6b7280;
}
.dark .ql-snow .ql-picker-options {
  background-color: #1f2937;
  border-color: #374151;
}
.dark .ql-snow .ql-picker-item {
  color: #d1d5db;
}

/* Signature line in dark mode */
.dark .sig-line {
  color: #6b7280;
}

/* Scrollbar dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}
.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* ── Linkified URLs inside message bodies ── */
.message-body a.linkified,
a.linkified {
  color: #4f46e5;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-all;
  transition: color .12s ease, background-color .12s ease;
}
.message-body a.linkified:hover,
a.linkified:hover {
  color: #3730a3;
  background-color: rgba(99, 102, 241, 0.08);
  border-radius: 2px;
}
.dark .message-body a.linkified,
.dark a.linkified {
  color: #a5b4fc;
}
.dark .message-body a.linkified:hover,
.dark a.linkified:hover {
  color: #c7d2fe;
  background-color: rgba(129, 140, 248, 0.15);
}
/* External-link glyph after each linkified URL */
a.linkified::after {
  content: "\2197"; /* ↗ */
  font-size: 0.8em;
  margin-left: 2px;
  opacity: 0.7;
}

a.link-warning {
  color: #d97706 !important;
  text-decoration: underline wavy !important;
  position: relative;
}
a.link-warning::before {
  content: '\26A0';
  margin-right: 2px;
  font-size: 0.85em;
}
.dark a.link-warning {
  color: #fbbf24 !important;
}

a.link-dangerous {
  color: #dc2626 !important;
  text-decoration: underline wavy !important;
  cursor: warning;
  position: relative;
}
a.link-dangerous::before {
  content: '\1F6AB';
  margin-right: 2px;
  font-size: 0.85em;
}
.dark a.link-dangerous {
  color: #f87171 !important;
}

/* ── Credential Modal ── */
.cred-type-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 18px;
  flex-shrink: 0;
}
.cred-type-backoffice { background: #ede9fe; color: #7c3aed; }
.cred-type-ftp { background: #fef3c7; color: #d97706; }
.cred-type-htaccess { background: #fee2e2; color: #dc2626; }
.cred-type-cpanel { background: #dbeafe; color: #2563eb; }
.cred-type-ssh { background: #d1fae5; color: #059669; }
.cred-type-other { background: #f3f4f6; color: #6b7280; }
.cred-type-product { background: #ccfbf1; color: #0d9488; }
.dark .cred-type-backoffice { background: #7c3aed20; }
.dark .cred-type-ftp { background: #d9770620; }
.dark .cred-type-htaccess { background: #dc262620; }
.dark .cred-type-cpanel { background: #2563eb20; }
.dark .cred-type-ssh { background: #05966920; }
.dark .cred-type-other { background: #6b728020; }
.dark .cred-type-product { background: #0d948820; }