/* Scope composant */
.mptp {
    /* variables personnalisables par thème */
    --mptp-row-h: 28px;
    --mptp-border: #e5e7eb;
    --mptp-hour-color: #6b7280;
    --mptp-day-bg: #f8f9fa;     /* Bootstrap light */
    --mptp-today-bg: rgba(255,235,59,.07);
    --mptp-now: #dc3545;        /* Bootstrap danger */
    --mptp-max-h: calc(100vh - 160px); /* ajuste selon ta navbar/header */
    --mptp-col-size: 40px; /* 1ère colonne des grilles */
    --mptp-col-scroll: 16px;
    --mptp-col-numb: 5; /* nombre de colonnes = nb jour (5|7) */
}

/* Zone scrollable (grille uniquement) */
.mptp .mptp-grid-scroll {
    max-height: var(--mptp-max-h);
    overflow-y: auto;
    background: #fff;
}

/* Grille */
.mptp .mptp-grid {
    display: grid;
    grid-template-columns: var(--mptp-col-size) repeat(var(--mptp-col-numb), 1fr);
}

.mptp .mptp-grid-body {
    position: relative;
}

/* Colonne heures (gauche) */
.mptp .mptp-hours {
    border-right: 1px solid var(--mptp-border);
}
.mptp .mptp-hours .cell {
    height: var(--mptp-row-h);
    line-height: var(--mptp-row-h);
    font-size: .78rem;
    color: var(--mptp-hour-color);
    text-align: right;
    padding-right: 8px;
    margin-top: 14px;
}
/* Heure pleine: bord + texte au trait */
.mptp .mptp-hours .cell.is-hour {
    margin-top: -14px;
    padding-top: 0;
    font-weight: 500;
}

/* Colonnes jours */
.mptp .mptp-col {
    border-left: none;
    position: relative;
    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, .25);
}
.mptp .slot-row {
    position: relative;
    z-index: 1;
}
.mptp .mptp-col .slot-row {
    height: var(--mptp-row-h);
    border-top: 1px solid rgba(0,0,0,.25); /* opacité réglée inline si besoin */
}
.mptp .mptp-col .slot-row.is-half {
    border-top-color: var(--mptp-border);
}
.mptp .mptp-col .slot-row.is-hour {
    border-top-color: rgba(0,0,0,.25);
}

.mptp .mptp-col.is-half {
    border-right-width: 0;
    border-left: 1px solid var(--mptp-border);
}
.mptp .mptp-col.is-hour {
    border-right-width: 0;
    border-left: 1px solid rgba(0,0,0,.25);
}

/* En-tête temps */
.mptp .mptp-time-header {
    padding: 6px 0;
    font-weight: 300;
    border-bottom: 1px solid var(--mptp-border);
    margin-right: -19px;
    text-align: end;
}

/* En-tête jour */
.mptp .mptp-day-header {
    padding: 6px 8px;
    font-weight: 600;
    border-bottom: 1px solid var(--mptp-border);
}

/* Jour courant + ligne "now" */
.mptp .mptp-col.today {
    background: linear-gradient(0deg, var(--mptp-today-bg), var(--mptp-today-bg));
}
.mptp .mptp-now {
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--mptp-now);
    z-index: 2;
}

/* Slots */
.mptp .slot {
    position: absolute;
    left: 6px;
    right: 6px;
    z-index: 3;
    border-radius: 0.35rem;
    background: rgba(13,110,253,.15); /* primary soft */
    border: 2px solid rgba(13,110,253,.55);
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    user-select: none;
}
.mptp .slot--ghost {
    border-style: dashed;
    opacity: .7;
}
/* Poignées de resize : cliquables en top/bottom */
.mptp .slot .slot-handle {
    position: absolute;
    left: 0; right: 0;
    height: 6px;
    cursor: ns-resize;
    background: transparent;
}
.mptp .slot .slot-handle.top    {
    top: 0;
}
.mptp .slot .slot-handle.bottom {
    bottom: 0;
}
.mptp .slot .slot-body {
    cursor: default;
    color: inherit; /* hérite de la couleur calculée inline sur .slot */
}
.mptp .mptp-grid-body.is-dragging {
    cursor: move;
}
.mptp .slot .slot-body:active {
    cursor: grabbing;
}
.mptp .slot.is-selected {
    outline: 2px solid rgba(220,53,69,.7); /* rouge bootstrap-ish */
    outline-offset: 0;
}
.mptp .mptp-grid-body:focus {
    outline: none;
}

/* Hint en bas de la div pendant drag/resize/duplicate */
.mptp-drag-hint {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: .25rem .5rem;
    font-size: .75rem;
    line-height: 1;
    border-radius: .375rem;
    background: rgba(33,37,41,.92);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    white-space: nowrap;
}
.mptp .slot .slot-hint{
    position:absolute;
    right:6px;
    bottom:6px;
    padding:.15rem .35rem;
    font-size:.70rem;
    line-height:1;
    border-radius:.35rem;
    pointer-events:none;
    background:rgba(33,37,41,.92);
    color:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
    white-space:nowrap;
}
.mptp-drag-hint small {
    opacity: .85;
    margin-left: .35rem;
}
/* A placer dans l'Api boostrap avant la compilation */
.min-vh-20 { min-height: 20vh !important; }
.min-vh-16 { min-height: 16vh !important; }
.min-vh-12 { min-height: 12vh !important; }
.min-vh-8 { min-height: 8vh !important; }

.mptp-day-cell:hover .btn-create {
    display: block !important;
}

/* vue month */
.mptp-slot-item {
    cursor: pointer;
    transition: all 0.2s;
}

.mptp-slot-item:hover {
    border: 1px solid var(--bs-primary);
    background: var(--bs-light);
}

.mptp-slot-item.selected {
    border: 2px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.mptp-slot-item .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.slot--ghost {
    opacity: 0.8;
    border-style: dashed !important;
}

.slot--ghost .slot-title {
    font-style: italic;
}