/*
 * L’Alcôve 4.11.0 — audit global des espacements et du rythme visuel.
 * Cette couche est chargée après toutes les feuilles historiques afin de
 * garantir un rendu homogène sur chaque page, composant et largeur d’écran.
 */

:root {
  --border: var(--line);
  --shadow-soft: var(--shadow-sm);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --page-flow-gap: 22px;
  --section-flow-gap: 16px;
  --control-flow-gap: 10px;
}

/* ---------- Rythme global de chaque page ---------- */

.content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#content > * {
  min-width: 0;
  margin-block: 0;
}

#content > * + * {
  margin-top: var(--page-flow-gap);
}

#content > * + .section-head {
  margin-top: 36px;
}

#content > .section-head + * {
  margin-top: 14px;
}

#content > .section-head + .section-head {
  margin-top: 28px;
}

#content > .section-head:first-child {
  margin-top: 0;
}

#content > .pagination {
  margin-block: 0;
}

#content > .tabs,
#content > .view-tabs,
#content > .ticket-tabs {
  margin-bottom: 0;
}

#content > .callout + .callout,
#content > .notice + .notice {
  margin-top: 12px;
}

#content > .grid,
#content > .table-wrap,
#content > .card,
#content > .panel,
#content > .empty,
#content > .callout,
#content > .notice,
#content > section {
  width: 100%;
}

.section-head {
  align-items: flex-end;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
}

.section-head > :first-child {
  min-width: min(100%, 260px);
  flex: 1 1 440px;
}

.section-head > :first-child > :first-child {
  margin-top: 0;
}

.section-head > :first-child > :last-child {
  margin-bottom: 0;
}

.section-head h2,
.section-head h3,
.section-head p {
  margin-block: 0;
}

.section-head h2 + p,
.section-head h3 + p {
  margin-top: 6px;
}

.section-head.compact {
  min-height: 0;
  padding-bottom: 10px;
}

.section-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 1 auto;
  flex-wrap: wrap;
  margin-left: auto;
  gap: var(--control-flow-gap);
}

/* ---------- Grilles et groupes horizontaux ---------- */

.grid {
  min-width: 0;
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

.grid > * {
  min-width: 0;
}

.action-group,
.config-tools,
.json-editor-actions,
.ticket-filter-actions,
.ticket-detail-actions,
.channel-picker-actions,
.mute-target-counts,
.inline-control,
.modal-foot,
.sidebar-footer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: var(--control-flow-gap);
  row-gap: var(--space-2);
}

.action-group > *,
.section-actions > *,
.config-tools > *,
.ticket-filter-actions > *,
.ticket-detail-actions > * {
  margin: 0;
}

.toolbar,
.ajax-toolbar {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding: var(--space-4);
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.toolbar > .grow,
.ajax-toolbar > .grow {
  min-width: min(100%, 260px);
}

.tabs,
.view-tabs,
.ticket-tabs {
  margin: 0;
  gap: var(--space-1);
}

/* ---------- Cartes, panneaux et contenu interne ---------- */

.card,
.panel,
.editor-pane,
.preview-pane,
.ticket-filter-card,
.ticket-config-status,
.ticket-open-form,
.ticket-open-empty {
  min-width: 0;
}

.card > :first-child,
.panel > :first-child,
.editor-pane > :first-child,
.preview-pane > :first-child {
  margin-top: 0;
}

.card > :last-child,
.panel > :last-child,
.editor-pane > :last-child,
.preview-pane > :last-child {
  margin-bottom: 0;
}

.card > h2,
.card > h3,
.panel > h2,
.panel > h3,
.editor-pane > h2,
.editor-pane > h3,
.preview-pane > h2,
.preview-pane > h3 {
  margin-block: 0;
}

.card > h2 + p,
.card > h3 + p,
.panel > h2 + p,
.panel > h3 + p,
.editor-pane > h2 + p,
.editor-pane > h3 + p,
.preview-pane > h2 + p,
.preview-pane > h3 + p {
  margin-top: var(--space-2);
}

.card > p,
.panel > p,
.editor-pane > p,
.preview-pane > p {
  margin-bottom: 0;
}

.card > p + .button,
.card > p + .action-group,
.card > p + .grid,
.card > p + .form-grid,
.card > p + .list-editor,
.panel > p + .button,
.panel > p + .action-group,
.panel > p + .grid,
.panel > p + .form-grid,
.panel > p + .list-editor {
  margin-top: var(--space-4);
}

.metric-label,
.metric-value,
.metric-sub {
  overflow-wrap: anywhere;
}

.metric-sub {
  margin-top: 0;
}

.compact-card {
  padding: var(--space-4);
}

.stack,
.list-editor,
.ticket-question-list,
.ticket-answers,
.picker-list,
.preview-list,
.clean-list,
.analytics-page,
.analytics-card,
.analytics-chart,
.channel-picker-groups,
.mute-target-options {
  display: grid;
  min-width: 0;
  gap: var(--section-flow-gap);
}

.stack > *,
.list-editor > *,
.ticket-question-list > *,
.ticket-answers > *,
.picker-list > *,
.preview-list > *,
.clean-list > *,
.analytics-page > *,
.analytics-card > *,
.analytics-chart > *,
.channel-picker-groups > *,
.mute-target-options > * {
  min-width: 0;
  margin-block: 0;
}

/* ---------- Formulaires ---------- */

.form-grid {
  align-items: start;
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

.form-grid > * {
  min-width: 0;
  margin: 0;
}

.field {
  align-content: start;
  gap: var(--space-2);
}

.field > label,
.field-label-row label {
  margin: 0;
  line-height: 1.35;
}

.field > .input,
.field > .select,
.field > textarea,
.field > .multi-select {
  margin: 0;
}

.field-help,
.field small,
.field p {
  margin: 0;
}

.field-label-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 var(--space-2);
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

.field-label-row > :first-child {
  min-width: min(100%, 240px);
  flex: 1 1 420px;
}

.field-label-row > :first-child > * {
  margin-block: 0;
}

.field-label-row > :first-child > * + * {
  margin-top: var(--space-1);
}

.toggle-cluster,
.check-grid,
.role-check-grid {
  margin: 0;
  padding: var(--space-3);
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}

.toggle-row,
.check-card,
.list-row,
.picker-option,
.channel-picker-option {
  min-width: 0;
}

.toggle-row > div,
.check-card > div,
.list-row > .grow,
.picker-option > .grow,
.channel-picker-option > .grow {
  min-width: 0;
}

.toggle-row small,
.check-card small,
.list-row small,
.picker-option small,
.channel-picker-option small {
  overflow-wrap: anywhere;
}

.config-subsection {
  display: grid;
  margin-top: var(--space-4);
  gap: var(--space-3);
}

.config-subsection > * {
  margin-block: 0;
}

.config-subsection h3 + .field-help,
.config-subsection h3 + p {
  margin-top: -4px;
}

/* ---------- Configuration ---------- */

.config-sticky {
  margin: 0;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
}

.config-status {
  display: grid;
  align-content: center;
  gap: var(--space-1);
}

.config-status > * {
  margin: 0;
}

.config-tools {
  justify-content: flex-end;
}

.config-section {
  margin: 0;
}

.config-section > summary {
  gap: var(--space-4);
}

.config-body {
  display: grid;
  gap: var(--space-5);
}

.config-body > * {
  min-width: 0;
  margin-block: 0;
}

.config-body .form-grid {
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

.json-editor-actions {
  margin-top: 0;
}

/* ---------- Tableaux, listes et pagination ---------- */

.table-wrap {
  margin: 0;
}

.table th,
.table td {
  overflow-wrap: anywhere;
}

.table td > .button,
.table td > a.button {
  margin: 3px 6px 3px 0;
  vertical-align: middle;
}

.table td > .button + .button,
.table td > a.button + .button,
.table td > .button + a.button,
.table td > a.button + a.button {
  margin-left: 0;
}

.table td > .badge + .badge {
  margin-left: var(--space-2);
}

.table td > .identity-sub,
.table td > .muted,
.table td > .mono + .muted {
  margin-top: var(--space-1);
}

.list-editor {
  gap: var(--space-3);
}

.list-row {
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

.pagination {
  min-height: 36px;
  margin: 0;
  gap: var(--space-3);
}

/* ---------- Alertes, informations et états vides ---------- */

.callout,
.notice,
.empty,
.empty-state,
.error-card {
  margin: 0;
}

.callout,
.notice {
  min-width: 0;
  overflow-wrap: anywhere;
}

.callout > :first-child,
.notice > :first-child {
  margin-top: 0;
}

.callout > :last-child,
.notice > :last-child {
  margin-bottom: 0;
}

.empty-state {
  min-height: 84px;
  display: grid;
  padding: var(--space-5);
  place-items: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  text-align: center;
}

/* ---------- Sécurité et modération ---------- */

.security-metrics {
  gap: var(--space-5);
}

.security-rule-grid {
  margin: 0;
  column-gap: var(--space-4);
  row-gap: var(--space-4);
}

.security-rule-card {
  min-width: 0;
  padding: var(--space-4);
  column-gap: var(--space-3);
}

.security-rule-card > div {
  gap: var(--space-1);
}

.security-rule-card strong,
.security-rule-card small {
  overflow-wrap: anywhere;
}

.moderation-mutes-section {
  display: grid;
  margin: 12px 0 0;
  padding-top: var(--space-6);
  gap: var(--section-flow-gap);
  border-top: 1px solid var(--line);
}

.moderation-mutes-section > * {
  min-width: 0;
  margin: 0;
}

.mute-target-picker {
  display: grid;
  padding-block: var(--space-4);
  gap: var(--space-4);
}

.mute-target-columns {
  gap: var(--space-4);
}

.mute-target-pane {
  min-width: 0;
}

.mute-target-pane > header,
.channel-picker-group > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.mute-target-pane > header > div,
.channel-picker-group > header > div {
  display: grid;
  gap: var(--space-1);
}

.mute-target-pane > header strong,
.mute-target-pane > header small,
.channel-picker-group > header strong,
.channel-picker-group > header small {
  margin: 0;
  overflow-wrap: anywhere;
}

.mute-target-options,
.channel-picker-options {
  gap: var(--space-3);
}

/* ---------- Sélecteurs de salons et ressources ---------- */

.channel-picker-toolbar {
  align-items: flex-end;
  flex-wrap: wrap;
  padding-bottom: var(--space-4);
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.channel-picker-toolbar > .grow {
  min-width: min(100%, 260px);
}

.channel-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: var(--space-4) 0;
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.channel-picker-group {
  margin: 0;
}

.channel-picker-groups {
  gap: var(--space-3);
}

.channel-picker-options {
  padding: var(--space-3);
}

.anonymous-channel-config,
.anonymous-channel-summary,
.anonymous-channel-picker {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.anonymous-channel-config > *,
.anonymous-channel-summary > *,
.anonymous-channel-picker > * {
  margin-block: 0;
}

.anonymous-channel-summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.anonymous-selected-grid {
  gap: var(--space-3);
}

.anonymous-selected-channel {
  column-gap: var(--space-3);
  row-gap: var(--space-2);
}

/* ---------- Annonces et aperçu Discord ---------- */

.announcement-studio,
.ticket-editor-grid {
  column-gap: var(--space-6);
  row-gap: var(--space-6);
}

.editor-pane,
.preview-pane {
  padding: var(--space-5);
}

.editor-pane {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.editor-pane > * {
  min-width: 0;
  margin: 0;
}

.preview-pane {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.discord-preview {
  margin: 0;
}

.discord-preview > * {
  margin-block: 0;
}

.discord-preview > * + * {
  margin-top: var(--space-3);
}

.attachment-list {
  margin-top: var(--space-3);
  gap: var(--space-2);
}

/* ---------- Tickets ---------- */

.ticket-kpis {
  margin: 0;
  gap: var(--space-5);
}

.ticket-filter-card,
.ticket-config-status,
.ticket-open-form,
.ticket-open-empty {
  margin: 0;
  padding: var(--space-5);
}

.ticket-filter-card > *,
.ticket-config-status > *,
.ticket-open-form > *,
.ticket-open-empty > * {
  margin-block: 0;
}

.ticket-filter-card > * + *,
.ticket-config-status > * + *,
.ticket-open-form > * + *,
.ticket-open-empty > * + * {
  margin-top: var(--space-4);
}

.ticket-detail-head {
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 0 0 var(--space-5);
  column-gap: var(--space-5);
  row-gap: var(--space-3);
}

.ticket-detail-actions {
  margin: var(--space-4) 0;
}

.ticket-detail-grid {
  margin: var(--space-5) 0;
  gap: var(--space-5);
}

.ticket-person-row,
.ticket-transcript-row {
  align-items: flex-start;
  flex-wrap: wrap;
  padding: var(--space-3) 0;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

.ticket-question-row {
  column-gap: var(--space-3);
  row-gap: var(--space-3);
}

.ticket-answer {
  padding: var(--space-3);
}

.ticket-answer p {
  margin: var(--space-2) 0 0;
}

.note-card > div {
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

/* ---------- Statistiques et autres pages spécialisées ---------- */

.analytics-page {
  gap: var(--space-6);
}

.analytics-page .section-head {
  margin: 0;
}

.analytics-kpis,
.analytics-panels {
  gap: var(--space-5);
}

.analytics-card {
  gap: var(--space-4);
}

.analytics-card-head {
  margin: 0;
}

.chart-legend {
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

.detail-grid,
.key-value {
  column-gap: var(--space-4);
  row-gap: var(--space-3);
}

.export-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.export-card .button {
  margin-top: auto;
}

.incident-card {
  margin: 0;
}

.incident-card + .incident-card {
  margin-top: var(--space-3);
}

/* ---------- Modales et tiroirs ---------- */

.modal-head,
.modal-body,
.modal-foot {
  margin: 0;
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.modal-body > * {
  min-width: 0;
  margin-block: 0;
}

.modal-foot {
  justify-content: flex-end;
}

.event-drawer-head {
  column-gap: var(--space-4);
}

.event-drawer-head > div {
  min-width: 0;
}

.event-feed {
  display: grid;
  gap: var(--space-1);
}

.toast-zone {
  gap: var(--space-3);
}

/* ---------- Largeurs intermédiaires ---------- */

@media (max-width: 1280px) {
  .content {
    --page-flow-gap: 20px;
  }

  .section-head > :first-child {
    flex-basis: 360px;
  }

  .security-metrics,
  .ticket-kpis,
  .analytics-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .mute-target-columns {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  :root {
    --page-flow-gap: 18px;
    --section-flow-gap: 14px;
  }

  #content > * + .section-head {
    margin-top: 30px;
  }

  .section-head {
    align-items: flex-start;
  }

  .section-actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .config-tools {
    justify-content: flex-start;
  }

  .announcement-studio,
  .ticket-editor-grid,
  .ticket-detail-grid,
  .analytics-panels {
    grid-template-columns: 1fr !important;
  }

  .preview-pane {
    position: static;
  }
}

@media (max-width: 720px) {
  :root {
    --page-flow-gap: 16px;
    --section-flow-gap: 12px;
    --control-flow-gap: 8px;
  }

  #content > * + .section-head {
    margin-top: 26px;
  }

  #content > .section-head + * {
    margin-top: 12px;
  }

  .section-head {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    padding-bottom: var(--space-3);
  }

  .section-head > :first-child {
    min-width: 0;
    flex-basis: auto;
  }

  .section-actions,
  .action-group,
  .config-tools,
  .ticket-filter-actions,
  .ticket-detail-actions,
  .modal-foot {
    align-items: stretch;
    width: 100%;
  }

  .section-actions > .button,
  .action-group > .button,
  .config-tools > .button,
  .ticket-filter-actions > .button,
  .ticket-detail-actions > .button,
  .modal-foot > .button {
    flex: 1 1 150px;
  }

  .toolbar,
  .ajax-toolbar,
  .channel-picker-toolbar,
  .channel-picker-actions,
  .field-label-row,
  .anonymous-channel-summary-head,
  .ticket-detail-head {
    align-items: stretch;
    flex-direction: column;
  }

  .toolbar > *,
  .ajax-toolbar > *,
  .channel-picker-toolbar > *,
  .channel-picker-actions > *,
  .field-label-row > *,
  .anonymous-channel-summary-head > * {
    width: 100%;
  }

  .field-label-row > :first-child {
    min-width: 0;
    flex: 0 1 auto;
  }

  .field-label-row .action-group {
    width: 100%;
  }

  .security-metrics,
  .security-rule-grid,
  .ticket-kpis,
  .analytics-kpis,
  .anonymous-selected-grid,
  .channel-picker-options {
    grid-template-columns: 1fr !important;
  }

  .card,
  .editor-pane,
  .preview-pane,
  .ticket-filter-card,
  .ticket-config-status,
  .ticket-open-form,
  .ticket-open-empty {
    padding: var(--space-4);
  }

  .form-grid,
  .config-body .form-grid {
    row-gap: var(--space-4);
  }

  .table td > .button,
  .table td > a.button {
    margin-block: 4px;
  }

  .mute-target-picker {
    padding-block: var(--space-3);
  }
}

@media (max-width: 460px) {
  .content {
    --page-flow-gap: 14px;
  }

  .section-actions > .button,
  .action-group > .button,
  .config-tools > .button,
  .ticket-filter-actions > .button,
  .ticket-detail-actions > .button,
  .modal-foot > .button {
    flex-basis: 100%;
  }

  .metric-value {
    font-size: 29px;
  }
}