/**
 * forms.css: generic form controls + the post / event "composer" card.
 *
 * Structure comes from Drupal config (form display + field groups). This file
 * only paints it. Hooks used: core class names (.form-item, .form-actions,
 * details, fieldset), the .composer class added by form--node-composer.html.twig,
 * CKEditor's own CSS variables, and the media library button class.
 */

:root {
  /* Inline icons (stroke colour baked in: crimson on light, rose on dark). */
  --icon-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23890000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --icon-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpath d='m21 15-5-5L5 21'/%3E%3C/svg%3E");
}

/* ---- Generic controls (zero specificity so anything can override) ---- */
:where(
  input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="password"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  select, textarea
) {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--theme-input-border);
  border-radius: var(--radius-md);
  background: var(--theme-input-bg);
  color: var(--theme-text);
  font: inherit;
}

:where(input, select, textarea):focus {
  outline: 2px solid var(--theme-accent);
  outline-offset: 1px;
  border-color: var(--theme-accent);
}

:where(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--theme-accent);
}

.form-item {
  margin-block: var(--space-4);
}

.form-item > label,
legend {
  display: block;
  margin-bottom: var(--space-1);
  padding: 0;
  font-weight: 600;
}

.form-type-checkbox > label,
.form-type-radio > label {
  display: inline;
  font-weight: 400;
}

.form-required::after {
  content: " *";
  color: var(--theme-accent);
}

.form-item .description,
.form-item .form-item__description {
  margin-top: var(--space-1);
  color: var(--theme-text-muted);
  font-size: var(--text-sm);
}

.form-item--error-message,
.form-item--error input,
.form-item--error textarea {
  color: #b91c1c;
}

.form-item--error input,
.form-item--error textarea {
  border-color: #b91c1c;
}

fieldset {
  min-width: 0;
  margin: var(--space-4) 0;
  padding: 0;
  border: 0;
}

details {
  margin-block: var(--space-4);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--radius-md);
  background: var(--theme-surface-alt);
}

details > summary {
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  cursor: pointer;
}

details > :not(summary) {
  margin-inline: var(--space-4);
}

details[open] > summary {
  border-bottom: 1px solid var(--theme-border-subtle);
}

details > :last-child {
  margin-bottom: var(--space-4);
}

/* ---- Composer card: post and event add/edit forms ---- */
.composer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.75rem;
  border: 1px solid var(--theme-border-subtle, #e5e7eb);
  border-radius: var(--radius-xl, 16px);
  background: var(--theme-surface, #ffffff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Author header with avatar and Public badge (Screenshot 2) */
.composer__header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--space-4, 1rem);
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--theme-border-subtle, #f3f4f6);
}

.composer__avatar-circle,
.composer__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--theme-accent, #890000);
  color: #ffffff;
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.composer__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.composer__author {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--theme-text, #18181b);
}

.composer__visibility-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: #eff6ff;
  color: #1e40af;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  border: 1px solid #dbeafe;
  align-self: flex-start;
}

:root[data-theme="dark"] .composer__visibility-badge,
html.dark .composer__visibility-badge {
  background: rgba(30, 64, 175, 0.2);
  color: #93c5fd;
  border-color: rgba(30, 64, 175, 0.3);
}

/* Field groups: References & Advanced with themed icons (Screenshot 2) */
.composer details.field-group-references,
.composer details.field-group-advanced,
.composer details {
  margin-block: var(--space-4, 1rem);
  border: 1px solid var(--theme-border-subtle, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  background: var(--theme-surface-alt, #fafafa);
  overflow: hidden;
  transition: all 0.2s ease;
}

.composer details summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--theme-text, #1f2937);
  background: var(--theme-surface-alt, #fafafa);
  user-select: none;
}

.composer details[open] summary {
  border-bottom: 1px solid var(--theme-border-subtle, #e5e7eb);
  background: var(--theme-surface, #ffffff);
}

.composer details.field-group-references > summary::before {
  content: "🏷️";
  font-size: 1.1rem;
}

.composer details.field-group-advanced > summary::before {
  content: "⚙️";
  font-size: 1.1rem;
}

.composer details > :not(summary) {
  padding: 0.75rem 1rem;
}

/* Text box: CKEditor should feel like one big input */
.composer .ck-editor__editable_inline {
  min-height: 9rem;
}

/* Text format filter: hidden in body, shown cleanly in Advanced group */
.composer .field--type-text-with-summary > .filter-wrapper,
.composer .field--type-text-long > .filter-wrapper,
.composer .field--widget-text-textarea > .filter-wrapper,
.composer .field--widget-text-textarea-with-summary > .filter-wrapper {
  display: none;
}

.composer details.field-group-advanced .filter-wrapper,
.composer details.field-group-advanced .js-filter-wrapper {
  display: block !important;
  margin-block: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  background: var(--theme-surface, #ffffff) !important;
  border: 1px solid var(--theme-border-subtle, #e2e8f0) !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .composer details.field-group-advanced .filter-wrapper,
[data-theme="dark"] .composer details.field-group-advanced .js-filter-wrapper,
html.dark .composer details.field-group-advanced .filter-wrapper,
html.dark .composer details.field-group-advanced .js-filter-wrapper {
  background: var(--theme-surface, #1e293b) !important;
  border-color: var(--theme-border, #334155) !important;
}

/* Photo / video: core's media library widget with a clean pill button */
.composer .field--name-field-media {
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  background: var(--theme-surface-alt, #fafafa);
  border: 1px solid var(--theme-border-subtle, #e5e7eb);
  border-radius: 12px;
}

.composer .field--name-field-media legend,
.composer .field--name-field-media > .form-item__label {
  font-weight: 700;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}

.composer .js-media-library-open-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  padding: 0.5rem 1.25rem !important;
  border: 1px solid var(--theme-border, #d1d5db) !important;
  border-radius: 9999px !important;
  background: #ffffff !important;
  color: var(--theme-text, #18181b) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.15s ease !important;
}

.composer .js-media-library-open-button::before {
  content: "🖼️";
  font-size: 1rem;
}

.composer .js-media-library-open-button:hover {
  background: var(--theme-surface-warm, #fdfaf7) !important;
  border-color: var(--theme-accent, #890000) !important;
  color: var(--theme-accent, #890000) !important;
}

.composer .media-library-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Multi-value table (Smart Date, references, etc.) inside composer */
.composer .tabledrag-toggle-weight-wrapper {
  text-align: right !important;
  margin: 0.25rem 0 0.5rem 0 !important;
}

.composer .tabledrag-toggle-weight {
  display: inline-block !important;
  background: var(--theme-surface-alt, #f1f5f9) !important;
  color: var(--theme-text-secondary, #64748b) !important;
  border: 1px solid var(--theme-border, #cbd5e1) !important;
  border-radius: 6px !important;
  padding: 0.2rem 0.65rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

[data-theme="dark"] .composer .tabledrag-toggle-weight,
html.dark .composer .tabledrag-toggle-weight {
  background: var(--theme-surface-alt, #27364b) !important;
  border-color: var(--theme-border, #334155) !important;
  color: var(--theme-text-secondary, #94a3b8) !important;
}

/* Multi-value table converted into modern card stack */
.composer .field-multiple-table {
  width: 100% !important;
  border: none !important;
  border-collapse: collapse !important;
  margin-block: 0.5rem !important;
}

.composer #field-when-values {
  display: block !important;
  width: 100% !important;
}

.composer #field-when-values thead {
  display: none !important;
}

.composer #field-when-values tbody {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  width: 100% !important;
}

.composer #field-when-values tr.draggable {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  padding: 1rem 1.15rem !important;
  border: 1px solid var(--theme-border, #e2e8f0) !important;
  border-radius: var(--radius-lg, 14px) !important;
  background: var(--theme-surface-alt, #f8fafc) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

[data-theme="dark"] .composer #field-when-values tr.draggable,
html.dark .composer #field-when-values tr.draggable {
  background: var(--theme-surface, #1e293b) !important;
  border-color: var(--theme-border, #334155) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

.composer .field-multiple-table td.field-multiple-drag {
  display: none !important;
}

.composer #field-when-values td:nth-child(2),
.composer #field-when-values td:has(.smartdate--widget) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.composer #field-when-values td:nth-child(3),
.composer #field-when-values td:has(input[value="Remove"]),
.composer #field-when-values td:nth-last-child(2) {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: none !important;
  margin-left: auto !important;
}

/* Remove button styling */
.composer input[name*="_remove_button"],
.composer #field-when-values input[value="Remove"],
.composer .field-multiple-table input[value="Remove"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.35rem !important;
  padding: 0.45rem 1.15rem !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #b91c1c !important;
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(185, 28, 28, 0.06) !important;
  transition: all 0.18s ease !important;
}

.composer input[name*="_remove_button"]:hover,
.composer #field-when-values input[value="Remove"]:hover,
.composer .field-multiple-table input[value="Remove"]:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #991b1b !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(185, 28, 28, 0.12) !important;
}

[data-theme="dark"] .composer input[name*="_remove_button"],
[data-theme="dark"] .composer #field-when-values input[value="Remove"],
[data-theme="dark"] .composer .field-multiple-table input[value="Remove"],
html.dark .composer input[name*="_remove_button"],
html.dark .composer #field-when-values input[value="Remove"],
html.dark .composer .field-multiple-table input[value="Remove"] {
  background: rgba(185, 28, 28, 0.15) !important;
  color: #fca5a5 !important;
  border-color: rgba(185, 28, 28, 0.35) !important;
}

.composer .field-add-more-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  margin-top: 0.75rem !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  padding: 0.55rem 1.35rem !important;
  border-radius: 9999px !important;
  border: 1px dashed var(--theme-border, #cbd5e1) !important;
  background: var(--theme-surface, #ffffff) !important;
  color: var(--theme-text, #1e293b) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.composer .field-add-more-submit:hover {
  background: var(--theme-surface-warm, #fdfaf7) !important;
  border-color: var(--theme-accent, #890000) !important;
  color: var(--theme-accent, #890000) !important;
}

/* Smart Date (events): clean two-row grid layout for Start/End date and time */
.composer .smartdate--widget {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.composer .smartdate--widget .fieldset-wrapper {
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.composer .smartdate--time-inline {
  display: grid !important;
  grid-template-columns: minmax(46px, auto) 1fr !important;
  gap: 0.5rem 0.75rem !important;
  align-items: center !important;
}

.composer .smartdate--time-inline .smartdate--separator {
  display: none !important;
}

.composer .smartdate--widget h4.label,
.composer .smartdate--widget h4 {
  display: inline-block !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  min-width: 2.85rem !important;
  color: var(--theme-text-muted, #64748b) !important;
}

.composer .smartdate--widget .time-start,
.composer .smartdate--widget .time-end {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}

.composer .smartdate--widget .form-item {
  margin: 0 !important;
}

.composer [class*="smartdate"] :where(input[type="date"], input[type="time"]) {
  width: auto !important;
  padding: 0.45rem 0.65rem !important;
  font-size: 0.88rem !important;
  border-radius: 8px !important;
  border: 1px solid var(--theme-border, #cbd5e1) !important;
  background: var(--theme-input-bg, #ffffff) !important;
  color: var(--theme-text, #1e293b) !important;
  box-sizing: border-box !important;
}

.composer .smartdate--widget .allday-label {
  margin: 0.25rem 0 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  font-size: 0.85rem !important;
  color: var(--theme-text-muted, #64748b) !important;
  cursor: pointer;
}

.composer .field--name-field-when > .form-item__label,
.composer .field--name-field-when legend {
  font-family: var(--font-serif-heading, inherit) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--theme-text, #1c1917) !important;
  margin-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--theme-border-subtle, rgba(0, 0, 0, 0.08)) !important;
  padding-bottom: 0.5rem !important;
  display: block !important;
  width: 100% !important;
}

[data-theme="dark"] .composer .field--name-field-when > .form-item__label,
[data-theme="dark"] .composer .field--name-field-when legend,
html.dark .composer .field--name-field-when > .form-item__label,
html.dark .composer .field--name-field-when legend {
  color: var(--theme-text, #f1f5f9) !important;
  border-bottom-color: var(--theme-border-subtle, rgba(148, 163, 184, 0.18)) !important;
}


/* Action bar: Preview & Post buttons (Screenshot 2) */
.composer .form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--theme-border-subtle, #e5e7eb);
}

.composer .button--primary,
.composer input[type="submit"].button--primary,
.composer #edit-submit {
  background: var(--theme-accent, #890000) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  padding: 0.65rem 2.25rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(137, 0, 0, 0.25) !important;
  transition: all 0.2s ease !important;
}

.composer .button--primary:hover,
.composer input[type="submit"].button--primary:hover,
.composer #edit-submit:hover {
  background: #6b0000 !important;
  box-shadow: 0 4px 10px rgba(137, 0, 0, 0.35) !important;
  transform: translateY(-1px);
}

.composer #edit-preview,
.composer .button:not(.button--primary) {
  background: transparent !important;
  color: var(--theme-text, #374151) !important;
  border: 1px solid var(--theme-border, #d1d5db) !important;
  border-radius: 9999px !important;
  padding: 0.65rem 1.75rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.composer #edit-preview:hover,
.composer .button:not(.button--primary):hover {
  background: var(--theme-surface-alt, #f3f4f6) !important;
  border-color: var(--theme-text-muted, #9ca3af) !important;
}

/* ---- Autocomplete suggestions (jQuery UI menu used by core) ---- */
.ui-autocomplete.ui-menu {
  z-index: 1000;
  max-width: 28rem;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  border: 1px solid var(--theme-border);
  border-radius: var(--radius-md);
  background: var(--theme-surface);
  box-shadow: var(--shadow-lg);
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--theme-text);
  cursor: pointer;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  margin: 0;
  background: var(--theme-surface-warm);
  color: var(--theme-text);
}

/* ---- CKEditor 5: theme it through its own CSS variables ----
   Declared on the editor and on its body-attached popups (balloons,
   dropdowns), not :root, so load order against CKEditor's CSS cannot matter. */
.ck-editor,
.ck-body-wrapper {
  --ck-border-radius: var(--radius-md);
  --ck-color-base-background: var(--theme-input-bg);
  --ck-color-base-border: var(--theme-input-border);
  --ck-color-base-foreground: var(--theme-surface-alt);
  --ck-color-base-text: var(--theme-text);
  --ck-color-editor-base-text: var(--theme-text);
  --ck-content-font-color: var(--theme-text);
  --ck-color-text: var(--theme-text);
  --ck-color-base-focus: var(--theme-accent);
  --ck-color-focus-border: var(--theme-accent);
  --ck-color-toolbar-background: var(--theme-surface-alt);
  --ck-color-toolbar-border: var(--theme-input-border);
  --ck-color-panel-background: var(--theme-surface);
  --ck-color-panel-border: var(--theme-border);
  --ck-color-dropdown-panel-background: var(--theme-surface);
  --ck-color-list-background: var(--theme-surface);
  --ck-color-input-background: var(--theme-input-bg);
  --ck-color-input-border: var(--theme-input-border);
  --ck-color-input-text: var(--theme-text);
}

.ck.ck-content,
.ck-editor__editable,
.ck-editor__editable p {
  color: var(--theme-text) !important;
  --ck-content-font-color: var(--theme-text) !important;
}

/* Hide residual vertical tabs inside composer card */
.composer .form-type-vertical-tabs,
.composer .vertical-tabs {
  display: none !important;
}

/* URL alias details inside Advanced field group */
.composer details.path-form {
  margin-block: 0.75rem !important;
  border: 1px solid var(--theme-border-subtle, #e2e8f0) !important;
  border-radius: 8px !important;
  background: var(--theme-surface, #ffffff) !important;
}

[data-theme="dark"] .composer details.path-form,
html.dark .composer details.path-form {
  background: var(--theme-surface, #1e293b) !important;
  border-color: var(--theme-border, #334155) !important;
}