/* ===== Base wrapper & toolbar ===== */
.ptc-wrapper { border:1px solid #e5e7eb; border-radius:12px; padding:16px; background:#fff; }
.ptc-toolbar { display:flex; gap:8px; justify-content:flex-end; margin-bottom:12px; }
.ptc-footer  { margin-top:12px; display:flex; justify-content:flex-end; }

/* Buttons */
.ptc-btn { padding:8px 12px; border:1px solid #e5e7eb; background:#f8fafc; cursor:pointer; border-radius:8px; height: 44px;}
.ptc-btn:hover { background:#eef2f7; }

/* ===== Notices (inline feedback) ===== */
.ptc-notices { margin-bottom:12px; }
.ptc-notice {
  padding:10px 12px; border-radius:8px; margin-bottom:8px; font-size:14px;
  display:flex; align-items:center; gap:8px;
}
.ptc-notice-success { background:#ecfdf5; border:1px solid #10b98133; color:#065f46; }
.ptc-notice-error   { background:#fef2f2; border:1px solid #ef444433; color:#7f1d1d; }
.ptc-notice-info    { background:#eff6ff; border:1px solid #3b82f633; color:#1e3a8a; }
.ptc-notice .ptc-close {
  margin-left:auto; background:transparent; border:0; cursor:pointer; font-size:16px; line-height:1; color:inherit;
}

/* ===== List & cards ===== */
.ptc-list { display:grid; gap:12px; }
.ptc-empty { opacity:.7; font-style:italic; }

.ptc-card { border:1px solid #e5e7eb; border-radius:12px; padding:12px; }
.ptc-card-head { display:flex; gap:8px; align-items:center; }
.ptc-card-head .ptc-nom { flex:1; padding:8px; }

.ptc-card-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
.ptc-card-actions .ptc-btn { padding:6px 10px; line-height:1.15; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

/* Action buttons w/ dashicons */
.ptc-btn.ptc-duplicate { background:#eff6ff; border-color:#bfdbfe; }
.ptc-btn.ptc-duplicate:hover { background:#dbeafe; }
.ptc-btn.ptc-duplicate::before {
  font-family: dashicons; font-size:16px; line-height:1; content:"\f463"; /* repeat */
}
.ptc-btn.ptc-remove { background:#fff5f5; border-color:#fecaca; }
.ptc-btn.ptc-remove:hover { background:#fee2e2; }
.ptc-btn.ptc-remove::before {
  font-family: dashicons; font-size:16px; line-height:1; content:"\f182"; /* trash */
}

.ptc-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; }
.ptc-card textarea { width:100%; margin:8px 0; padding:8px; }

/* ===== Nuits section ===== */
.ptc-nuits { border-top:1px dashed #e5e7eb; padding-top:8px; margin-top:8px; }
.ptc-nuits-head { font-weight:600; margin-bottom:6px; }

/* Une nuit */
.ptc-nuit { padding:8px 0; border-top:1px dashed #e5e7eb; }
.ptc-nuit:first-child { border-top:0; }

/* Ligne: libellé à gauche, prix pilule à droite */
.ptc-nuit-row { display:flex; gap:12px; }
.ptc-nuit-left { display:flex; align-items:center; gap:8px; }

/* ===== Switch ===== */
.ptc-switch { position:relative; display:inline-block; width:40px; height:22px; }
.ptc-switch input { opacity:0; width:0; height:0; }
.ptc-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#e5e7eb; transition:.2s; border-radius:999px; }
.ptc-slider:before {
  position:absolute; content:""; height:18px; width:18px; left:2px; top:2px;
  background:#fff; transition:.2s; border-radius:999px; box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.ptc-switch input:checked + .ptc-slider { background:#22c55e; }
.ptc-switch input:checked + .ptc-slider:before { transform:translateX(18px); }

/* ===== Input group (pilule + suffixes) ===== */
.ptc-input-group{
  display:inline-flex; align-items:center;
  border:1px solid #e5e7eb; border-radius:5px; overflow:hidden; background:#fff;
}
.ptc-input-group > input{
  border:0 !important; padding:8px 12px; height:44px; line-height:44px; min-width:100px; font:inherit; outline:none;
}
.ptc-input-group .ptc-append{
  display:flex; align-items:center; padding:0 10px; height:44px; line-height:44px;
  background:#f3f4f6; border-left:1px solid #e5e7eb; color:#374151; font-size:13px; white-space:nowrap;
}

/* Prix par nuit (à droite en pilule) */
.ptc-prix-group { justify-self:end; }
.ptc-prix-group > input { width:120px; }

/* Ligne "rabais" sous la nuit */
.ptc-rabais-nuit { display:flex; gap:10px; align-items:end; margin:8px 0 0 0px; flex-wrap:wrap; }
.ptc-rabais-nuit-title { font-size:12px; opacity:.8; margin-right:4px; }
.ptc-rabais-type{
  height:36px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:5px; background:#fff;
}

/* Nuit affichée (select construit à partir des nuits actives) */
.ptc-nuit-affichee { margin:8px 0; display:flex; gap:8px; align-items:center; }
.ptc-nuit-affichee select{
  height:36px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:5px; background:#fff;
}

/* ===== Validation ===== */
.ptc-invalid { border-color:#dc2626 !important; box-shadow:0 0 0 1px #fecaca inset; }

/* ===== Mobile tweaks ===== */
@media (max-width: 480px) {
  .ptc-card-actions { gap:6px; }
  .ptc-card-actions .ptc-btn { padding:6px 8px; }
  .ptc-input-group > input { min-width:84px; }
}



/* ===== Responsive mobile pour les nuits ===== */
@media (max-width: 640px) {
  /* évite tout débordement horizontal */
  .ptc-wrapper { overflow-x: hidden; }

  /* 1) Ligne du titre + prix : 2 colonnes qui tiennent à l'écran */
  .ptc-nuit-row{
    grid-template-columns: 1fr minmax(96px, 42%);
    gap: 8px;
  }
  .ptc-nuit-left { min-width: 0; }
  .ptc-nuit-label{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Prix en pilule prend la largeur de sa colonne, sans dépasser */
  .ptc-prix-group{ justify-self: end; max-width: 42vw; }
  .ptc-prix-group > input{ width: 100%; min-width: 0; }

  /* 2) Bloc "Rabais" : on empile sur 4 lignes */
  .ptc-rabais-nuit{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0 0 0;   /* retire l’indentation gauche pour gagner de l’espace */
  }
  .ptc-rabais-nuit-title{ order: 1; font-size: 13px; }
  .ptc-rabais-type{
    order: 2;
    width: 100%;
  }
  .ptc-rabais-valeur-group{
    order: 3;
    width: 100%;
    max-width: 100%;     /* confortable, sans dépasser */
  }

  /* Les groupes pilules s’étirent proprement en mobile */
  .ptc-input-group{ width: 100%; }
  .ptc-input-group > input{ width: 100%; }
}

/* Option: mini-breakpoint encore plus serré */
@media (max-width: 400px) {
  .ptc-nuit-row{ grid-template-columns: 1fr minmax(84px, 44%); }
  .ptc-prix-group{ max-width: 44vw; }
}


/* === Anti-overflow global sur les champs === */
.ptc-card input[type="text"],
.ptc-card input[type="number"],
.ptc-card select,
.ptc-card textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.ptc-grid > div { min-width: 0; } /* évite que les colonnes forcent la largeur */
.ptc-wrapper { overflow-x: hidden; } /* coupe tout dépassement horizontal */

/* === Mobile layout ≤ 640px === */
@media (max-width: 640px) {
  /* 1) Actions au-dessus du titre */
  .ptc-card-head {
    flex-direction: column;        /* on empile */
    align-items: stretch;
    gap: 8px;
  }
  .ptc-card-head .ptc-card-actions {
    order: -1;                     /* remonte au-dessus du champ titre */
    align-self: flex-end;
    margin-bottom: 4px;
  }
  .ptc-card-head .ptc-nom {
    width: 100%;
    min-width: 0;
  }

  /* 2) Dates côte à côte sans dépasser */
  .ptc-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ptc-grid > div { min-width: 0; }
  .ptc-grid input.ptc-date,
  .ptc-grid input[type="text"] {
    width: 100%;
  }

  /* 3) Description pleine largeur, sans overflow */
  .ptc-card textarea {
    width: 100%;
    max-width: 100%;
  }

  /* 4) Nuits: titre + prix sur une ligne, tout le reste en dessous */
  .ptc-nuit-row {
    grid-template-columns: 1fr minmax(96px, 42%);
    gap: 8px;
  }
  .ptc-nuit-left { min-width: 0; }
  .ptc-nuit-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .ptc-prix-group { justify-self: end; max-width: 42vw; }
  .ptc-prix-group > input { width: 100%; min-width: 0; }

  /* Bloc "Rabais" empilé proprement */
  .ptc-rabais-nuit {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 10px 0 0 0;  /* retire l’indentation gauche */
  }
  .ptc-rabais-nuit-title { order: 1; font-size: 13px; }
  .ptc-rabais-type { order: 2; width: 100%; }
  .ptc-rabais-valeur-group { order: 3; width: 100%; max-width: 100%; }

  /* Nuit affichée: plein largeur */
  .ptc-nuit-affichee { display:flex; gap:8px; align-items:center; }
  .ptc-nuit-affichee select { width: 100%; }
}

/* Mini-breakpoint ultra serré */
@media (max-width: 400px) {
  .ptc-nuit-row { grid-template-columns: 1fr minmax(84px, 44%); }
  .ptc-prix-group { max-width: 44vw; }
}


/* Conteneur général */
#ptc-periodes { margin-top: 10px; }

/* Carte période */
.ptc-periode {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 1px 1px rgba(0,0,0,.03);
}

/* Header cliquable */
.ptc-periode__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  cursor: default;
  user-select: none;
}

.ptc-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
}

.ptc-toggle .dashicons {
  transition: transform .18s ease;
  transform: rotate(0deg);
}
.ptc-toggle[aria-expanded="true"] .dashicons {
  transform: rotate(180deg);
}

.ptc-periode__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ptc-periode__actions .ptc-move,
.ptc-periode__actions .ptc-delete {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
}
.ptc-periode__actions .ptc-move:hover,
.ptc-periode__actions .ptc-delete:hover {
  background: #f1f5f9;
}

/* Body repliable */
.ptc-periode__body {
  padding: 12px;
  border-top: 1px solid #e5e7eb;
}

/* Placeholder visuel quand on drag */
.ptc-sortable-placeholder {
  border: 2px dashed #94a3b8;
  border-radius: 10px;
  height: 48px;
  margin: 10px 0;
  background: #f8fafc;
}
