/* Кастомний календар/час замість нативного <input type="datetime-local"> */
.cdt-wrap{ position:relative; width:100%; }
.cdt-trigger{
    display:flex; align-items:center; gap:10px; width:100%; height:calc(1.5em + .75rem + 2px);
    background:#fff; border:1px solid #d1d5db; border-radius:8px; padding:0 14px;
    font-size:.9rem; font-weight:600; color:#111827; cursor:pointer; user-select:none; transition:.15s;
}
.cdt-trigger:hover{ border-color:#b9bdc7; }
.cdt-wrap.open .cdt-trigger{ border-color:#4e73df; box-shadow:0 0 0 3px rgba(78,115,223,.12); }
.cdt-trigger-icon{ color:#4e73df; flex:none; }
.cdt-trigger-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.cdt-panel{
    display:none; z-index:2000; width:300px;
    background:#fff; border-radius:14px; box-shadow:0 20px 50px rgba(16,24,40,.18); border:1px solid #eef0f5;
    overflow:hidden;
}
.cdt-panel.open{ display:block; }
/* position:fixed + рендер у document.body — щоб панель не обрізалась батьківськими
   блоками з overflow:hidden. Left/top виставляються інлайн через JS відносно тригера. */
.cdt-panel-fixed{ position:fixed; }

.cdt-header{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:linear-gradient(135deg,#1c1c1c 0%,#0a0a0a 100%); color:#fff; padding:14px 16px;
}
.cdt-month-label{ font-size:.85rem; font-weight:800; letter-spacing:.02em; }
.cdt-nav{
    width:26px; height:26px; border-radius:8px; border:none; background:rgba(255,255,255,.12); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:.7rem; cursor:pointer; transition:.15s;
}
.cdt-nav:hover{ background:rgba(255,255,255,.22); }

.cdt-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); padding:10px 12px 0; }
.cdt-weekdays div{ text-align:center; font-size:.68rem; font-weight:800; text-transform:uppercase; color:#9ca3af; }

.cdt-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; padding:6px 12px 12px; }
.cdt-day{
    aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px;
    font-size:.82rem; font-weight:600; color:#374151; cursor:pointer; transition:.12s;
}
.cdt-day:hover{ background:#f1f3f9; }
.cdt-day-muted{ color:#d1d5db; cursor:default; }
.cdt-day-muted:hover{ background:transparent; }
.cdt-day-today{ box-shadow:inset 0 0 0 1.5px #4e73df; color:#4e73df; }
.cdt-day-selected{ background:#4e73df; color:#fff; }
.cdt-day-selected:hover{ background:#3f5fc9; }

.cdt-time-row{ display:flex; align-items:center; gap:8px; padding:2px 16px 14px; }
.cdt-time-icon{ color:#9ca3af; font-size:.8rem; }
.cdt-time-input{
    width:52px; text-align:center; border:1px solid #e3e6f0; border-radius:8px; padding:6px 4px;
    font-size:.85rem; font-weight:700; color:#111827;
}
.cdt-time-input:focus{ outline:none; border-color:#4e73df; }
.cdt-time-sep{ font-weight:800; color:#9ca3af; }

.cdt-footer{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid #eef0f5; }
.cdt-btn{ border:none; border-radius:8px; padding:.4em 1em; font-size:.78rem; font-weight:700; cursor:pointer; transition:.15s; }
.cdt-btn-light{ background:#f3f4f6; color:#4b5563; }
.cdt-btn-light:hover{ background:#e9ebef; }
.cdt-btn-primary{ background:linear-gradient(135deg,#4e73df,#3452b4); color:#fff; }
.cdt-btn-primary:hover{ opacity:.92; }