/* Panels */
.volissam-wrap .volissam-panel {
  background: #fff;
  border: 1px solid #ccd0d4;
  padding: 16px;
  margin-top: 16px;
  border-radius: 4px;
}

.volissam-wrap .volissam-panel > h2 {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Status table */
.volissam-status th { width: 260px; }

/* Action rows */
.volissam-actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}

.volissam-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

/* Notes & warnings */
.volissam-note {
  color: #646970;
  font-style: italic;
}

.volissam-warning {
  background: #fff3cd;
  border: 1px solid #ffeeba;
  color: #856404;
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 3px;
}

/* Inputs */
.volissam-headers-form .volissam-header-value {
  width: 100%;
  max-width: 800px;
  font-family: var(--wp--preset--font-family--monospace, monospace);
}

/* Buttons: accessibility & disabled state */
.volissam-wrap .button[disabled],
.volissam-wrap .button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.volissam-wrap .button:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 2px;
}

/* --------- Responsive (≤ 782px) --------- */
@media (max-width: 782px) {
  /* Panneaux compacts */
  .volissam-wrap .volissam-panel { padding: 12px; }

  /* Les tableaux ne doivent pas casser la mise en page */
  .volissam-wrap .volissam-panel { overflow-x: auto; } /* scroll horizontal si besoin */
  .volissam-wrap table.widefat { table-layout: fixed; min-width: 520px; } /* évite les sauts */
  .volissam-wrap table.widefat th,
  .volissam-wrap table.widefat td {
    word-break: break-word;
    white-space: normal;
  }
  .volissam-status th { width: 42%; } /* un peu plus étroit que 50/50 */
  .volissam-status code { word-break: break-all; }

  /* Lignes d’actions = colonnes empilées et pleine largeur */
  .volissam-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .volissam-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 6px 0;
  }
  .volissam-actions .button,
  .volissam-actions input[type="submit"] {
    width: 100%;
  }

  /* Formulaire des headers : champs sur toute la largeur */
  .volissam-headers-form .volissam-header-value {
    max-width: 100%;
  }

  /* Petites marges pour les notes */
  .volissam-note { display: block; line-height: 1.4; }
}

/* --------- Micro-breakpoint (≤ 480px) --------- */
@media (max-width: 480px) {
  .volissam-status th { width: 48%; } /* un peu plus lisible sur très petit écran */
  .volissam-wrap .volissam-panel { padding: 10px; }
}