/* =========================================================
   OD Help Site Foundations (Milestone 0.13-09)
   ========================================================= */

:root {
  /* Shared ODH foundation tokens */
  --odh-primary: #2e6da4;
  --odh-primary-hover: #1a4e7a;
  --odh-info: #0a8fa8;
  --odh-success: #16a34a;
  --odh-warning: #d97706;
  --odh-danger: #dc2626;
  --odh-neutral: #0f2d4a;

  --odh-gray-50: #f7f9fc;
  --odh-gray-100: #edf2f7;
  --odh-gray-200: #dae3ec;
  --odh-gray-300: #b8ccda;
  --odh-gray-700: #3a5570;
  --odh-gray-900: #0d1f2d;

  --odh-bg-canvas: #f5f8fb;
  --odh-bg-soft: #edf2f7;
  --odh-bg-card: #ffffff;
  --odh-border: #b8ccda;
  --odh-text: #0d1f2d;
  --odh-text-muted: #3a5570;

  --odh-font-family: inherit;
  --odh-font-size-xs: 0.75rem;
  --odh-font-size-sm: 0.875rem;
  --odh-font-size-md: 1rem;
  --odh-font-size-lg: 1.125rem;
  --odh-font-size-xl: 1.35rem;
  --odh-font-size-2xl: 1.5rem;
  --odh-font-size-3xl: 1.875rem;
  --odh-line-height: 1.45;

  --odh-space-1: 0.5rem;
  --odh-space-2: 0.75rem;
  --odh-space-3: 1rem;
  --odh-space-4: 1.25rem;
  --odh-space-5: 1.5rem;
  --odh-space-6: 2rem;

  --odh-radius-sm: 0.375rem;
  --odh-radius-md: 0.5rem;
  --odh-radius-lg: 0.75rem;
  --odh-radius-pill: 999px;
  --odh-surface-radius: 14px;
  --odh-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --odh-shadow-md: 0 8px 20px rgb(15 23 42 / 0.08);
  --odh-focus-ring: #0a8fa8;
  --odh-shadow-focus-primary-soft: 0 0 0 0.18rem color-mix(in srgb, var(--odh-primary) 18%, transparent);

  --odh-tone-primary-bg-soft: color-mix(in srgb, var(--odh-primary) 8%, var(--odh-bg-card));
  --odh-tone-primary-bg: color-mix(in srgb, var(--odh-primary) 13%, var(--odh-bg-card));
  --odh-tone-primary-border: color-mix(in srgb, var(--odh-primary) 28%, var(--odh-bg-card));
  --odh-tone-primary-border-strong: color-mix(in srgb, var(--odh-primary) 38%, var(--odh-bg-card));
  --odh-tone-primary-text: color-mix(in srgb, var(--odh-primary-hover) 70%, var(--odh-primary) 30%);
  --odh-tone-primary-text-strong: color-mix(in srgb, var(--odh-primary-hover) 82%, var(--odh-primary) 18%);

  --odh-tone-info-bg: color-mix(in srgb, var(--odh-info) 14%, var(--odh-bg-card));
  --odh-tone-info-border: color-mix(in srgb, var(--odh-info) 34%, var(--odh-bg-card));
  --odh-tone-info-text: color-mix(in srgb, var(--odh-primary-hover) 60%, var(--odh-info) 40%);

  --odh-tone-success-bg: color-mix(in srgb, var(--odh-success) 12%, var(--odh-bg-card));
  --odh-tone-success-border: color-mix(in srgb, var(--odh-success) 32%, var(--odh-bg-card));
  --odh-tone-success-text: color-mix(in srgb, var(--odh-success) 74%, var(--odh-text) 26%);

  --odh-tone-warning-bg: color-mix(in srgb, var(--odh-warning) 12%, var(--odh-bg-card));
  --odh-tone-warning-border: color-mix(in srgb, var(--odh-warning) 34%, var(--odh-bg-card));
  --odh-tone-warning-text: color-mix(in srgb, var(--odh-warning) 72%, var(--odh-text) 28%);

  --odh-tone-danger-bg: color-mix(in srgb, var(--odh-danger) 10%, var(--odh-bg-card));
  --odh-tone-danger-border: color-mix(in srgb, var(--odh-danger) 30%, var(--odh-bg-card));
  --odh-tone-danger-text: color-mix(in srgb, var(--odh-danger) 74%, var(--odh-text) 26%);

  --odh-tone-neutral-bg: color-mix(in srgb, var(--odh-text-muted) 10%, var(--odh-bg-card));
  --odh-tone-neutral-border: color-mix(in srgb, var(--odh-text-muted) 26%, var(--odh-bg-card));
  --odh-tone-neutral-text: color-mix(in srgb, var(--odh-text) 52%, var(--odh-text-muted) 48%);

  /* Badge tones (new unified values) */
  --odh-badge-primary-bg: #dce8f5;
  --odh-badge-primary-border: #85b3de;
  --odh-badge-primary-text: #0c447c;

  --odh-badge-info-bg: #c8eaf2;
  --odh-badge-info-border: #4ab8d8;
  --odh-badge-info-text: #0a5a72;

  --odh-badge-success-bg: #c8eed8;
  --odh-badge-success-border: #5cb87a;
  --odh-badge-success-text: #0f5c2e;

  --odh-badge-solved-bg: #c8f0ee;
  --odh-badge-solved-border: #4abcb8;
  --odh-badge-solved-text: #0a5a58;

  --odh-badge-warning-bg: #faecd8;
  --odh-badge-warning-border: #e8a850;
  --odh-badge-warning-text: #7a4a00;

  --odh-badge-danger-bg: #fad8d4;
  --odh-badge-danger-border: #e8847a;
  --odh-badge-danger-text: #7a1f1a;

  --odh-badge-neutral-bg: #e0e4e8;
  --odh-badge-neutral-border: #8fa5b8;
  --odh-badge-neutral-text: #2c3e50;

  --odh-badge-pinned-bg: #fddcc0;
  --odh-badge-pinned-border: #e89050;
  --odh-badge-pinned-text: #7a3800;

  /* Legacy aliases */
  --odh-color-primary: var(--odh-primary);
  --odh-color-primary-hover: var(--odh-primary-hover);
  --odh-color-info: var(--odh-info);
  --odh-color-success: var(--odh-success);
  --odh-color-warning: var(--odh-warning);
  --odh-color-danger: var(--odh-danger);
  --odh-color-neutral: var(--odh-neutral);
}

/* Shared UI components (Milestone 0.13-10) */
.odh-ui-card {
  background: var(--odh-bg-card);
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-md);
  box-shadow: var(--odh-shadow-sm);
}

.odh-ui-card--compact {
  padding: var(--odh-space-3);
}

.odh-ui-panel {
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--odh-tone-primary-bg-soft) 66%, var(--odh-bg-card) 34%) 0%, var(--odh-bg-card) 100%);
  overflow: hidden;
  box-shadow: var(--odh-shadow-sm);
}

.odh-ui-panel__head {
  padding: var(--odh-space-2) var(--odh-space-3);
  border-bottom: 1px solid var(--odh-tone-primary-border);
  background: var(--odh-tone-primary-bg-soft);
}

.odh-ui-panel__title {
  margin: 0;
  font-size: var(--odh-font-size-md);
  font-weight: 700;
  line-height: var(--odh-line-height);
  color: var(--odh-text);
}

.odh-ui-panel__body {
  padding: var(--odh-space-3);
}

.odh-ui-empty {
  padding: var(--odh-space-3);
  border: 1px dashed var(--odh-tone-primary-border);
  border-radius: var(--odh-radius-md);
  background: var(--odh-tone-primary-bg-soft);
  color: var(--odh-text-muted);
  font-size: var(--odh-font-size-sm);
  line-height: var(--odh-line-height);
}

.odh-ui-empty p {
  margin: 0;
}

.odh-ui-actions,
.odh-ui-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odh-space-1);
}

.odh-ui-action-row form {
  margin: 0;
}

.odh-shell,
.odh-entries-wrap,
.odh-entry-detail,
.odh-submit-form {
  background: linear-gradient(180deg, var(--odh-bg-canvas) 0%, var(--odh-bg-soft) 100%);
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-lg);
  padding: var(--odh-space-5);
  margin-bottom: var(--odh-space-6);
  font-family: var(--odh-font-family);
}

.odh-entries-wrap {
  background:
    radial-gradient(circle at 10% -10%, color-mix(in srgb, var(--odh-primary) 14%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--odh-info) 14%, transparent) 0%, transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--odh-bg-card) 62%, var(--odh-bg-canvas) 38%) 0%, color-mix(in srgb, var(--odh-bg-card) 34%, var(--odh-bg-soft) 66%) 100%);
  border-color: color-mix(in srgb, var(--odh-border) 82%, var(--odh-primary) 18%);
  box-shadow: 0 14px 30px rgb(23 63 95 / 0.12);
}

.odh-shell :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--odh-focus-ring);
  outline-offset: 2px;
}

.odh-shell__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--odh-space-1) var(--odh-space-3);
  margin-bottom: var(--odh-space-4);
}

.odh-shell__subtitle {
  margin: 0;
  color: var(--odh-text-muted);
  font-size: var(--odh-font-size-sm);
  line-height: var(--odh-line-height);
}

.odh-shell__title,
.odh-entries-title,
.odh-entry-detail__title,
.odh-submit-form__title {
  margin: 0;
  font-size: var(--odh-font-size-xl);
  font-weight: 700;
  line-height: var(--odh-line-height);
  color: var(--odh-text);
}

.odh-staff-queue__intro {
  margin: 0;
  color: var(--odh-text-muted);
  line-height: var(--odh-line-height);
}

.odh-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--odh-space-1);
  margin-bottom: var(--odh-space-4);
}

.odh-tab {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--odh-tone-primary-border);
  border-radius: var(--odh-radius-pill);
  background: var(--odh-tone-primary-bg-soft);
  color: var(--odh-tone-primary-text);
  text-decoration: none;
  font-size: var(--odh-font-size-sm);
  font-weight: 600;
  transition: all 0.2s ease;
}

.odh-tab:hover,
.odh-tab:focus-visible {
  background: var(--odh-tone-primary-bg);
  color: var(--odh-tone-primary-text-strong);
  border-color: var(--odh-tone-primary-border-strong);
}

.odh-tab.is-active {
  background: var(--odh-color-primary-hover);
  color: var(--odh-bg-card);
  border-color: var(--odh-color-primary-hover);
  box-shadow: var(--odh-shadow-sm);
}

.odh-filter-bar-wrap {
  margin-bottom: var(--odh-space-4);
}

.odh-filter-toggle {
  border: 1px solid var(--odh-tone-primary-border);
  border-radius: var(--odh-radius-pill);
  background: var(--odh-tone-primary-bg-soft);
  color: var(--odh-tone-primary-text);
  font-size: var(--odh-font-size-sm);
  font-weight: 600;
  padding: 0.42rem 0.9rem;
  margin-bottom: var(--odh-space-2);
}

.odh-filter-toggle:hover,
.odh-filter-toggle:focus-visible {
  border-color: var(--odh-tone-primary-border-strong);
  background: var(--odh-tone-primary-bg);
  color: var(--odh-tone-primary-text-strong);
}

.odh-filter-bar {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--odh-space-2);
  padding: var(--odh-space-3);
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-md);
  background: color-mix(in srgb, var(--odh-bg-card) 84%, var(--odh-bg-canvas) 16%);
  box-shadow: var(--odh-shadow-sm);
}

.odh-filter-bar-wrap.odh-ui-panel {
  border-color: color-mix(in srgb, var(--odh-border) 76%, var(--odh-primary) 24%);
  background: color-mix(in srgb, var(--odh-bg-card) 66%, var(--odh-bg-soft) 34%);
}

.odh-filter-bar-wrap .odh-ui-panel__body {
  background: transparent;
}

.odh-filter-bar[hidden] {
  display: none;
}

.odh-filter-field {
  display: grid;
  gap: 0.32rem;
}

.odh-filter-field--search {
  min-width: 0;
}

#odh-filter-bar .odh-filter-field--search input[type="search"] {
  width: 100% !important;
  max-width: none;
}

.odh-filter-field label,
.odh-form-group__label {
  font-size: var(--odh-font-size-sm);
  font-weight: 600;
  line-height: var(--odh-line-height);
  color: var(--odh-text);
}

.odh-filter-field input,
.odh-filter-field select,
.odh-form-group__select,
.odh-form-group__textarea,
.odh-form-group input,
.odh-form-group select,
.odh-form-group textarea {
  width: 100%;
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-sm);
  padding: 0.48rem 0.58rem;
  background: var(--odh-bg-card);
  color: var(--odh-text);
  font: inherit;
}

.odh-filter-field input:focus,
.odh-filter-field select:focus,
.odh-form-group__select:focus,
.odh-form-group__textarea:focus,
.odh-form-group input:focus,
.odh-form-group select:focus,
.odh-form-group textarea:focus {
  outline: none;
  border-color: var(--odh-tone-primary-border-strong);
  box-shadow: var(--odh-shadow-focus-primary-soft);
}

/* Keep submit description textarea multi-line even when template CSS forces compact controls. */
.odh-submit-form #jform_content,
.odh-submit-form textarea[name="jform[content]"],
.odh-submit-form .odh-form-group__textarea--content {
  min-height: 13rem !important;
  height: auto !important;
  line-height: var(--odh-line-height);
  resize: vertical;
}

.odh-filter-actions,
.odh-form-group--actions {
  display: flex;
  gap: var(--odh-space-1);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--odh-space-1);
}

.odh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--odh-radius-sm);
  min-height: 2.45rem;
  padding: 0.54rem 1rem;
  background: color-mix(in srgb, var(--odh-tone-primary-bg-soft) 70%, var(--odh-bg-card) 30%);
  font-size: var(--odh-font-size-sm);
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.odh-filter-actions .odh-btn,
.odh-ui-action-row .odh-btn {
  min-width: 6.9rem;
}

.odh-ui-actions .odh-btn,
.odh-ui-action-row .odh-btn {
  border-radius: var(--odh-radius-sm);
}

.odh-btn--primary,
.odh-btn--accept {
  background: linear-gradient(180deg, color-mix(in srgb, var(--odh-color-primary) 84%, var(--odh-bg-card) 16%) 0%, var(--odh-color-primary) 100%);
  color: var(--odh-bg-card);
  border-color: color-mix(in srgb, var(--odh-color-primary-hover) 56%, var(--odh-color-primary) 44%);
  box-shadow: 0 8px 18px rgb(23 63 95 / 0.2);
}

.odh-btn--primary:hover,
.odh-btn--primary:focus-visible,
.odh-btn--accept:hover,
.odh-btn--accept:focus-visible {
  background: var(--odh-color-primary-hover);
  border-color: var(--odh-color-primary-hover);
  color: var(--odh-bg-card);
}

.odh-btn--secondary {
  background: var(--odh-tone-primary-bg-soft);
  border-color: var(--odh-tone-primary-border);
  color: var(--odh-tone-primary-text);
}

.odh-btn--secondary:hover,
.odh-btn--secondary:focus-visible {
  background: var(--odh-tone-primary-bg);
  border-color: var(--odh-tone-primary-border-strong);
  color: var(--odh-tone-primary-text-strong);
}

.odh-btn--tertiary {
  background: var(--odh-tone-info-bg);
  border-color: var(--odh-tone-info-border);
  color: var(--odh-tone-info-text);
}

.odh-btn--tertiary:hover,
.odh-btn--tertiary:focus-visible {
  background: color-mix(in srgb, var(--odh-info) 20%, var(--odh-bg-card));
  border-color: color-mix(in srgb, var(--odh-info) 44%, var(--odh-bg-card));
  color: color-mix(in srgb, var(--odh-info) 84%, var(--odh-text) 16%);
}

.odh-btn--danger {
  background: var(--odh-tone-danger-bg);
  border-color: var(--odh-tone-danger-border);
  color: var(--odh-tone-danger-text);
}

.odh-btn--danger:hover,
.odh-btn--danger:focus-visible {
  background: color-mix(in srgb, var(--odh-danger) 16%, var(--odh-bg-card));
  border-color: color-mix(in srgb, var(--odh-danger) 42%, var(--odh-bg-card));
  color: color-mix(in srgb, var(--odh-danger) 82%, var(--odh-text) 18%);
}

.odh-entries-list {
  display: grid;
  gap: var(--odh-space-3);
}

.odh-entry-card {
  border: 1px solid color-mix(in srgb, var(--odh-tone-primary-border) 66%, var(--odh-border) 34%);
  border-radius: var(--odh-radius-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--odh-tone-primary-bg-soft) 56%, var(--odh-bg-card) 44%) 0%, var(--odh-bg-card) 100%);
  padding: var(--odh-space-4);
  box-shadow: var(--odh-shadow-sm);
}

.odh-entry-card.is-pinned {
  border-color: var(--odh-tone-primary-border);
  background: linear-gradient(180deg, var(--odh-tone-primary-bg-soft) 0%, var(--odh-bg-card) 100%);
}

.odh-entry-card__badges {
  display: flex;
  gap: var(--odh-space-1);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--odh-space-2);
}

.odh-entry-card__title {
  margin: 0 0 var(--odh-space-1);
  font-size: var(--odh-font-size-lg);
  line-height: var(--odh-line-height);
}

.odh-entry-card__title a {
  color: var(--odh-text);
  text-decoration: none;
}

.odh-entry-card__title a:hover,
.odh-entry-card__title a:focus-visible {
  color: var(--odh-color-primary);
  text-decoration: underline;
}

.odh-entry-card__breadcrumb,
.odh-entry-card__author,
.odh-entry-card__date {
  font-size: var(--odh-font-size-sm);
  line-height: var(--odh-line-height);
  color: var(--odh-text-muted);
}

.odh-entry-card__breadcrumb {
  margin: 0 0 var(--odh-space-2);
}

.odh-entry-card__footer {
  display: flex;
  gap: var(--odh-space-2);
  flex-wrap: wrap;
  border-top: 1px dashed var(--odh-tone-primary-border);
  padding-top: var(--odh-space-2);
}

.odh-entry-card__replies {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8rem;
  padding: 0.16rem 0.44rem;
  border-radius: var(--odh-radius-pill);
  background: var(--odh-badge-info-bg);
  border: 1px solid var(--odh-badge-info-border);
  color: var(--odh-badge-info-text);
  font-size: var(--odh-font-size-xs);
  font-weight: 700;
}

.odh-entry-card__replies.is-zero {
  background: var(--odh-badge-neutral-bg);
  border-color: var(--odh-badge-neutral-border);
  color: var(--odh-badge-neutral-text);
}

/* Badge semantics (must match admin) */
.odh-badge,
.odh-reply__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.56rem;
  font-size: var(--odh-font-size-xs);
  font-weight: 700;
  line-height: var(--odh-line-height);
  border-radius: var(--odh-radius-pill);
  border: 1px solid transparent;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.odh-badge--type-question,
.odh-badge--question {
  background: var(--odh-badge-primary-bg);
  border-color: var(--odh-badge-primary-border);
  color: var(--odh-badge-primary-text);
}

.odh-badge--type-issue,
.odh-badge--issue {
  background: var(--odh-badge-danger-bg);
  border-color: var(--odh-badge-danger-border);
  color: var(--odh-badge-danger-text);
}

.odh-badge--type-solution,
.odh-badge--solution {
  background: var(--odh-badge-success-bg);
  border-color: var(--odh-badge-success-border);
  color: var(--odh-badge-success-text);
}

.odh-badge--status-open,
.odh-badge--open {
  background: var(--odh-badge-info-bg);
  border-color: var(--odh-badge-info-border);
  color: var(--odh-badge-info-text);
}

.odh-badge--status-answered,
.odh-badge--answered {
  background: var(--odh-badge-warning-bg);
  border-color: var(--odh-badge-warning-border);
  color: var(--odh-badge-warning-text);
}

.odh-badge--status-solved,
.odh-badge--solved {
  background: var(--odh-badge-solved-bg);
  border-color: var(--odh-badge-solved-border);
  color: var(--odh-badge-solved-text);
}

.odh-badge--status-closed,
.odh-badge--closed {
  background: var(--odh-badge-neutral-bg);
  border-color: var(--odh-badge-neutral-border);
  color: var(--odh-badge-neutral-text);
}

.odh-badge--pinned {
  background: var(--odh-badge-pinned-bg);
  border-color: var(--odh-badge-pinned-border);
  color: var(--odh-badge-pinned-text);
}

.odh-badge--total {
  background: var(--odh-badge-primary-bg);
  border-color: var(--odh-badge-primary-border);
  color: var(--odh-badge-primary-text);
}

.odh-badge--visibility-public {
  background: var(--odh-badge-success-bg);
  border-color: var(--odh-badge-success-border);
  color: var(--odh-badge-success-text);
}

.odh-badge--visibility-restricted {
  background: var(--odh-badge-warning-bg);
  border-color: var(--odh-badge-warning-border);
  color: var(--odh-badge-warning-text);
}

.odh-badge--visibility-private,
.odh-badge--visibility {
  background: var(--odh-badge-danger-bg);
  border-color: var(--odh-badge-danger-border);
  color: var(--odh-badge-danger-text);
}

.odh-entry-detail__backnav {
  margin-bottom: var(--odh-space-3);
}

.odh-entry-detail__backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.72rem;
}

.odh-entry-detail__backicon {
  font-size: 1rem;
  line-height: var(--odh-line-height);
  font-weight: 700;
}

.odh-entry-detail__header {
  border-bottom: 1px solid var(--odh-border);
  padding-bottom: var(--odh-space-3);
  margin-bottom: var(--odh-space-4);
}

.odh-entry-detail__badges {
  display: flex;
  gap: var(--odh-space-1);
  flex-wrap: wrap;
  margin-bottom: var(--odh-space-2);
}

.odh-entry-detail__meta {
  display: flex;
  gap: var(--odh-space-2);
  flex-wrap: wrap;
  font-size: var(--odh-font-size-sm);
  color: var(--odh-text-muted);
}

.odh-meta-sep {
  color: var(--odh-text-muted);
  padding: 0 0.2rem;
}

.odh-entry-detail__body {
  padding: var(--odh-space-4);
  line-height: var(--odh-line-height);
  color: var(--odh-text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.odh-entry-actions,
.odh-reply-form,
.odh-reply-thread {
  margin-top: var(--odh-space-5);
}

.odh-reply-thread__heading,
.odh-reply-form__heading,
.odh-form__section-heading {
  margin: 0 0 var(--odh-space-2);
  font-size: var(--odh-font-size-lg);
  font-weight: 700;
  line-height: var(--odh-line-height);
  color: var(--odh-text);
}

.odh-reply-thread__heading.odh-ui-panel__title,
.odh-reply-form__heading.odh-ui-panel__title,
.odh-form__section-heading.odh-ui-panel__title {
  margin: 0;
}

.odh-reply-thread__list {
  display: grid;
  gap: var(--odh-space-2);
}

.odh-reply {
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-md);
  background: var(--odh-bg-card);
  padding: var(--odh-space-3);
  box-shadow: var(--odh-shadow-sm);
}

.odh-reply--accepted {
  border-color: var(--odh-border);
  background: var(--odh-bg-soft);
}

.odh-reply--internal {
  border-color: var(--odh-border);
  background: var(--odh-bg-soft);
}

.odh-reply__meta {
  display: flex;
  gap: var(--odh-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--odh-space-2);
  font-size: var(--odh-font-size-sm);
  color: var(--odh-text-muted);
}

.odh-reply__author {
  font-weight: 600;
  color: var(--odh-text);
}

.odh-reply__content {
  line-height: var(--odh-line-height);
  color: var(--odh-text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.odh-reply__badge--accepted {
  background: var(--odh-badge-success-bg);
  border-color: var(--odh-badge-success-border);
  color: var(--odh-badge-success-text);
  margin-bottom: var(--odh-space-2);
}

.odh-reply__badge--internal {
  background: var(--odh-badge-primary-bg);
  border-color: var(--odh-badge-primary-border);
  color: var(--odh-badge-primary-text);
  margin-bottom: var(--odh-space-2);
}

.odh-reply__accept-form {
  margin-top: var(--odh-space-3);
}

.odh-empty-state,
.odh-reply-thread__empty,
.odh-reply-form__login-notice {
  margin: 0;
  padding: var(--odh-space-3);
  border: 1px dashed var(--odh-border);
  border-radius: var(--odh-radius-md);
  background: var(--odh-bg-soft);
  color: var(--odh-text-muted);
}

.odh-form {
  display: grid;
  gap: var(--odh-space-4);
}

.odh-form__section {
  border: 1px solid var(--odh-border);
  border-radius: var(--odh-radius-md);
  background: var(--odh-bg-card);
  padding: var(--odh-space-3);
  box-shadow: var(--odh-shadow-sm);
}

.odh-form__section.odh-ui-panel {
  padding: 0;
}

.odh-form-group {
  display: grid;
  gap: var(--odh-space-1);
  margin-bottom: var(--odh-space-2);
}

.odh-form-group:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .odh-filter-toggle {
    display: none;
  }

  .odh-filter-bar[hidden] {
    display: grid;
  }

  .odh-filter-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .odh-filter-field--search,
  .odh-filter-actions {
    grid-column: span 2;
  }
}

@media (min-width: 1200px) {
  .odh-filter-bar {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .odh-filter-field--search {
    grid-column: span 1;
  }

  .odh-filter-actions {
    grid-column: span 4;
  }
}

/* Pagination footer */
.odh-entries-pagination {
  margin-top: var(--odh-space-5);
}

.odh-entries-pagination .limit {
  display: flex;
  align-items: center;
  gap: var(--odh-space-1);
}

.odh-entries-pagination label[for="limit"] {
  display: inline;
  margin: 0;
  font-size: var(--odh-font-size-sm);
  font-weight: 600;
  color: var(--odh-text-muted);
  white-space: nowrap;
}

.odh-entries-pagination select[name="limit"] {
  width: auto;
  display: inline-block;
}

@media (max-width: 767.98px) {
  .odh-entries-wrap,
  .odh-entry-detail,
  .odh-submit-form {
    padding: var(--odh-space-3);
  }

  .odh-tab {
    flex: 1 1 calc(50% - var(--odh-space-1));
    justify-content: center;
  }

  .odh-entry-card__footer,
  .odh-entry-detail__meta,
  .odh-reply__meta {
    flex-direction: column;
    gap: 0.32rem;
  }

  .odh-btn {
    width: 100%;
  }

  .odh-entry-detail__backlink {
    width: auto;
  }
}

/* =========================================================
   Module: sp-module chrome override (odh-shell look)
   ========================================================= */
.sp-module:has(.odh-mod-myentries),
.sp-module:has(.odh-mod-overview),
.sp-module:has(.odh-mod-myentries__empty),
.sp-module:has(.odh-mod-overview__empty),
.sp-module:has(.mod-odhelp-overview-empty) {
  background:
    radial-gradient(circle at 8% -16%, color-mix(in srgb, var(--odh-primary) 18%, transparent) 0%, transparent 44%),
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--odh-info) 14%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--odh-tone-primary-bg-soft) 78%, var(--odh-bg-card) 22%) 0%, color-mix(in srgb, var(--odh-bg-soft) 70%, var(--odh-bg-card) 30%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--odh-tone-primary-border) 78%, var(--odh-border) 22%) !important;
  border-radius: var(--odh-radius-lg) !important;
  padding: var(--odh-space-5) !important;
  box-shadow: var(--odh-shadow-md);
  font-family: var(--odh-font-family);
}

/* =========================================================
   Module: My Entries (mod_odhelp_myentries)
   ========================================================= */
.odh-mod-myentries {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--odh-space-2);
}

.odh-mod-myentries__item {
  background: linear-gradient(180deg, color-mix(in srgb, var(--odh-tone-primary-bg-soft) 74%, var(--odh-bg-card) 26%) 0%, var(--odh-bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--odh-tone-primary-border) 82%, var(--odh-border) 18%);
  border-radius: var(--odh-radius-md);
  box-shadow: var(--odh-shadow-sm);
  padding: var(--odh-space-2) var(--odh-space-3);
}

.odh-mod-myentries__link {
  display: block;
  color: var(--odh-text);
  text-decoration: none;
  font-size: var(--odh-font-size-sm);
  font-weight: 600;
  line-height: var(--odh-line-height);
  margin-bottom: 0.25rem;
}

.odh-mod-myentries__link:hover,
.odh-mod-myentries__link:focus-visible {
  color: var(--odh-color-primary);
  text-decoration: underline;
}

.odh-mod-myentries__meta {
  display: flex;
  align-items: center;
  gap: var(--odh-space-1);
  flex-wrap: wrap;
}

.odh-mod-myentries__date {
  font-size: var(--odh-font-size-xs);
  color: var(--odh-text-muted);
}

.odh-mod-myentries__empty {
  margin: 0;
  color: var(--odh-text-muted);
  font-size: var(--odh-font-size-sm);
}

/* =========================================================
   Module: Overview (mod_odhelp_overview)
   ========================================================= */
.odh-mod-overview {
  display: grid;
  gap: var(--odh-space-2);
}

.odh-mod-overview__block {
  background: linear-gradient(180deg, color-mix(in srgb, var(--odh-tone-primary-bg-soft) 74%, var(--odh-bg-card) 26%) 0%, var(--odh-bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--odh-tone-primary-border) 82%, var(--odh-border) 18%);
  border-radius: var(--odh-radius-md);
  box-shadow: var(--odh-shadow-sm);
  padding: var(--odh-space-2) var(--odh-space-3);
}

.odh-mod-overview__counter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.odh-mod-overview__counter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odh-space-2);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--odh-tone-primary-border);
}

.odh-mod-overview__counter-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.odh-mod-overview__counter-item--total {
  font-weight: 700;
  border: 0;
  border-bottom: 1px solid var(--odh-tone-primary-border);
  border-radius: 0;
  background: transparent;
  margin-bottom: 0.15rem;
  padding: 0 0 0.55rem;
}

.odh-mod-overview__counter-item--total .odh-mod-overview__counter-label {
  font-size: var(--odh-font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--odh-tone-primary-text);
}

.odh-mod-overview__counter-item--total .odh-mod-overview__value {
  font-size: var(--odh-font-size-xs);
  font-weight: 700;
}

.odh-mod-overview__counter-label {
  flex: 1;
  font-size: var(--odh-font-size-sm);
  color: var(--odh-text);
  line-height: var(--odh-line-height);
}

.odh-mod-overview__breakdown-title {
  font-size: var(--odh-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--odh-tone-primary-text);
  margin: 0 0 var(--odh-space-1);
}

.odh-mod-overview__breakdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.odh-mod-overview__breakdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odh-space-1);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--odh-tone-primary-border);
  font-size: var(--odh-font-size-sm);
}

.odh-mod-overview__value {
  min-width: 2rem;
  text-align: center;
}

.odh-mod-overview__breakdown-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.odh-mod-overview__breakdown-label {
  flex: 1;
  color: var(--odh-text);
}

.odh-mod-overview__empty {
  margin: 0;
  color: var(--odh-text-muted);
  font-size: var(--odh-font-size-sm);
}

/* Robust two-column alignment for overview counters and breakdown rows. */
.odh-mod-overview.odh-mod-overview--cols .odh-mod-overview__counter-item,
.odh-mod-overview.odh-mod-overview--cols .odh-mod-overview__breakdown-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center;
  column-gap: var(--odh-space-2);
}

.odh-mod-overview.odh-mod-overview--cols .odh-mod-overview__counter-label,
.odh-mod-overview.odh-mod-overview--cols .odh-mod-overview__breakdown-label {
  min-width: 0;
}

.odh-mod-overview.odh-mod-overview--cols .odh-mod-overview__value {
  justify-self: end;
  margin-left: var(--odh-space-2);
  flex: 0 0 auto;
}