/*
 * Premium skin for ckanext-comments' thread widget (audit 2026-07-27, gap #3).
 *
 * ckanext-comments ships its own comments-thread.css with plain grey
 * borders and no dark-mode awareness, visually disconnected from the rest
 * of the portal. This file reskins the exact class names the extension's
 * own templates already emit — no template overrides needed — using the
 * same design tokens (--color-wascal-*, --color-surface-*, --color-text-*,
 * --color-border*) and the .dark class-based dark mode convention already
 * established in style.css.
 *
 * Every selector is scoped under [data-module="comments-thread"], the
 * container thread.html always renders, so these rules win regardless of
 * whether this file loads before or after ckanext-comments' own CSS.
 */

[data-module="comments-thread"] {
  margin-top: 1.5rem;
}

[data-module="comments-thread"] > .heading {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary) !important;
  margin-bottom: 1rem;
}

.dark [data-module="comments-thread"] > .heading {
  color: var(--color-text-dark-primary) !important;
}

/* Nested reply thread: replace the flat grey rule with a soft brand-tinted
   accent so nesting depth stays legible without looking like a stray HR. */
[data-module="comments-thread"] .comments-thread .comments-thread {
  padding-inline-start: 20px;
  margin-inline-start: 4px;
  border-inline-start: 2px solid var(--color-border);
}

.dark [data-module="comments-thread"] .comments-thread .comments-thread {
  border-inline-start-color: var(--color-border-dark);
}

[data-module="comments-thread"] .comments-comment {
  border-bottom: 1px solid var(--color-border) !important;
}

.dark [data-module="comments-thread"] .comments-comment {
  border-bottom-color: var(--color-border-dark) !important;
}

[data-module="comments-thread"] .comments-comment:last-child,
[data-module="comments-thread"] .comments-comment.mobile-hidden-comment {
  border-bottom: none;
}

/* Individual comment card */
[data-module="comments-thread"] .comment {
  padding: 16px;
  margin: 8px 0;
  border-radius: 12px;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-module="comments-thread"] .comment:hover {
  border-color: var(--color-wascal-blue-light) !important;
  box-shadow: 0 2px 10px rgba(27, 83, 155, 0.08);
}

.dark [data-module="comments-thread"] .comment {
  background: var(--color-surface-dark-secondary) !important;
  border-color: var(--color-border-dark) !important;
}

.dark [data-module="comments-thread"] .comment:hover {
  border-color: var(--color-wascal-blue) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

[data-module="comments-thread"] .comment .comment-heading .comment-authored .author-avatar img {
  border-radius: 50%;
  border: 1px solid var(--color-border) !important;
}

.dark [data-module="comments-thread"] .comment .comment-heading .comment-authored .author-avatar img {
  border-color: var(--color-border-dark) !important;
}

[data-module="comments-thread"] .comment .comment-heading .comment-authored .comment-meta .author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary) !important;
}

.dark [data-module="comments-thread"] .comment .comment-heading .comment-authored .comment-meta .author-name {
  color: var(--color-text-dark-primary) !important;
}

[data-module="comments-thread"] .comment .comment-heading .comment-authored .comment-meta .comment-date {
  color: var(--color-text-muted) !important;
}

.dark [data-module="comments-thread"] .comment .comment-heading .comment-authored .comment-meta .comment-date {
  color: var(--color-text-dark-secondary) !important;
}

[data-module="comments-thread"] .comment .comment-body .comment-content {
  color: var(--color-text-secondary) !important;
}

.dark [data-module="comments-thread"] .comment .comment-body .comment-content {
  color: var(--color-text-dark-secondary) !important;
}

/* State pill: draft comments (awaiting moderation) get a visible marker so
   moderators can tell at a glance which cards still need attention. */
[data-module="comments-thread"] .comment.comment-state-draft {
  border-style: dashed;
  border-color: var(--color-wadirep-orange) !important;
}

[data-module="comments-thread"] .comment.comment-state-draft::before {
  content: "";
}

/* Buttons the extension doesn't tag with WASCAL's own .btn-primary/.btn-default
   classes: Approve (.btn-success) and the inline Remove (.btn-remove). The
   rest of comment-action already inherits WASCAL's global button skin. */
[data-module="comments-thread"] .btn-success {
  background: var(--color-wascal-green) !important;
  border-color: var(--color-wascal-green) !important;
  color: #ffffff !important;
}

[data-module="comments-thread"] .btn-success:hover,
[data-module="comments-thread"] .btn-success:focus {
  background: var(--color-wascal-green-hover) !important;
  border-color: var(--color-wascal-green-hover) !important;
}

[data-module="comments-thread"] .btn-remove,
.confirmation-modal .btn-remove {
  background: transparent !important;
  border-color: var(--color-border) !important;
  color: var(--color-wadirep-orange) !important;
}

[data-module="comments-thread"] .btn-remove:hover,
[data-module="comments-thread"] .btn-remove:focus,
.confirmation-modal .btn-remove:hover,
.confirmation-modal .btn-remove:focus {
  background: var(--color-wadirep-orange) !important;
  border-color: var(--color-wadirep-orange) !important;
  color: #ffffff !important;
}

.dark [data-module="comments-thread"] .btn-remove,
.dark .confirmation-modal .btn-remove {
  border-color: var(--color-border-dark) !important;
}

/* Comment form */
[data-module="comments-thread"] .comment-form fieldset legend {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary) !important;
}

.dark [data-module="comments-thread"] .comment-form fieldset legend {
  color: var(--color-text-dark-primary) !important;
}