/* ==========================================================================
   DTP — Date picker + Time picker (modulaire, admin)
   Dépend seulement de /assets/css/admin.css (variables & boutons)
   ========================================================================== */

/*
  IMPORTANT
  admin.css définit parfois un display explicite sur des éléments (ex: .btn),
  ce qui peut écraser le style UA du boolean attribute [hidden].
  On force donc le comportement attendu : hidden = invisible.
*/
[hidden]{ display:none !important; }

.dtp-control{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.dtp-control input{
  flex:1;
}
.dtp-open-btn{
  width:46px;
  min-width:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--admin-border);
  background:#fff;
  border-radius:14px;
  cursor:pointer;
}
.dtp-open-btn:hover{ filter:brightness(.98); }
.dtp-open-btn:active{ transform:translateY(1px); }
.dtp-open-btn svg{ width:20px; height:20px; opacity:.85; }

.dtp-overlay{
  position:fixed;
  inset:0;
  background:rgba(15, 23, 42, .45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:260;
}
.dtp-overlay.open{ display:flex; }

.dtp-modal{
  /* Pas de width fixe → plus petit naturellement */
  max-width:calc(100vw - 32px);
  background:var(--admin-card-bg);
  border:1px solid var(--admin-border);
  border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
  overflow:hidden;
}

.dtp-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--admin-border);
  background:linear-gradient(180deg, #fff, #fbfbfe);
}
.dtp-modal-title{
  font-weight:900;
  color:var(--admin-text);
}
.dtp-close{
  width:42px; height:42px;
  border:1px solid var(--admin-border);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dtp-close svg{ width:18px; height:18px; opacity:.85; }
.dtp-close:hover{ filter:brightness(.98); }

.dtp-modal-body{ padding:16px; }

.dtp-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:12px 16px 16px;
  border-top:1px solid var(--admin-border);
  background:#fff;
}

/* ======================== Date modal ======================== */
.dtp-date-modal .dtp-modal-body{ padding:14px 16px 16px; }
.dtp-cal{
  border:1px solid var(--admin-border);
  border-radius:16px;
  padding:14px;
  background:#fff;
}
.dtp-cal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.dtp-cal-head .month{
  font-weight:900;
}
.dtp-nav{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid var(--admin-border);
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dtp-nav svg{ width:18px; height:18px; opacity:.85; }
.dtp-nav:hover{ filter:brightness(.98); }

.dtp-dow{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
  margin:10px 0 8px;
  font-size:.82rem;
  color:var(--admin-dim);
  text-align:center;
  font-weight:800;
}
.dtp-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:8px;
}
.dtp-day{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid transparent;
  background:#fff;
  cursor:pointer;
  font-weight:800;
}
.dtp-day:hover{
  background:#f5f7ff;
  border-color:#dbe2ff;
}
.dtp-day[disabled]{
  opacity:.35;
  cursor:default;
  background:#fafafa;
}
.dtp-day.is-today{
  border-color:#e4e7ff;
}
.dtp-day.is-selected{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
@media (max-width: 420px){
  .dtp-day{ width:36px; height:36px; border-radius:11px; }
  .dtp-nav{ width:38px; height:38px; }
}

/* ======================== Time modal ======================== */
.dtp-time-modal .dtp-modal-body{ padding:16px; }

.dtp-time-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
}

.dtp-time-spinners{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.dtp-time-box{
  width:120px;
  border:1px solid var(--admin-border);
  border-radius:16px;
  background:#fff;
  padding:10px;
}
.dtp-time-box .label{
  font-size:.8rem;
  color:var(--admin-dim);
  font-weight:800;
  text-align:center;
  margin-bottom:8px;
}
.dtp-spin{
  display:grid;
  grid-template-rows: 34px 1fr 34px;
  align-items:center;
  justify-items:center;
  gap:6px;
}
.dtp-spin button{
  width:100%;
  height:34px;
  border:1px solid var(--admin-border);
  background:#fff;
  border-radius:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dtp-spin button:hover{ filter:brightness(.98); }
.dtp-spin button svg{ width:16px; height:16px; opacity:.85; }

.dtp-time-input{
  width:100%;
  text-align:center;
  font-size:28px;
  font-weight:900;
  border:0;
  outline:none;
  padding: 12px 0px; /* demandé */
  background:transparent;
}

/* séparateur “:” */
.dtp-time-colon{
  font-size:28px;
  font-weight:900;
  color:var(--admin-dim);
  padding:0 2px;
}

/* Presets */
.dtp-presets{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
.dtp-presets button{
  border:1px solid var(--admin-border);
  background:#fff;
  border-radius:12px;
  padding:10px 10px;
  cursor:pointer;
  font-weight:800;
}
.dtp-presets button:hover{ filter:brightness(.98); }
@media (max-width: 520px){
  .dtp-time-spinners{ gap:10px; }
  .dtp-time-box{ width:110px; }
  .dtp-presets{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}