/* public/css/_box-plan.css — Styles Plan de boxes (V5.9.b) */

/* ─── Page sélection / liste — réutilise les styles riders/shows ── */

/* ─── Page Config ──────────────────────────────────────────────── */
.zones-config { padding: 0 16px 12px; }

.zone-block {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.zone-header { margin-bottom: 10px; }

.zone-fields {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 8px;
    align-items: center;
}

.aisles-list {
    padding: 8px 0;
    margin-bottom: 8px;
    border-top: 1px dashed #ccc;
}

.aisle-row {
    display: grid;
    grid-template-columns: 90px 1fr 100px 90px 90px 90px 70px 95px 95px 40px;
    gap: 6px;
    align-items: center;
    padding: 6px 0;
}

.aisle-row.aisle-headers {
    padding: 4px 0 2px;
    align-items: end;
}
.aisle-row.aisle-headers > * {
    padding: 0 2px;
    text-align: left;
}
.aisle-row.aisle-headers small {
    display: block;
    text-align: left;
    color: #888;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    line-height: 1.2;
}
.aisle-row.aisle-headers .aisle-boxes,
.aisle-row.aisle-headers .aisle-rows,
.aisle-row.aisle-headers .aisle-corridors,
.aisle-row.aisle-headers .aisle-num-start,
.aisle-row.aisle-headers .aisle-tb-every,
.aisle-row.aisle-headers .aisle-tb-count,
.aisle-row.aisle-headers .aisle-vertical {
    /* Surcharge des classes input qui ont border/padding */
    background: transparent;
    border: none;
    height: auto;
    text-align: left;
}
/* V5.x : en-têtes TB alignés à gauche comme les champs */
.aisle-row.aisle-headers .aisle-tb-every,
.aisle-row.aisle-headers .aisle-tb-count {
    text-align: left;
}
.aisle-row.aisle-headers .aisle-tb-every small,
.aisle-row.aisle-headers .aisle-tb-count small {
    text-align: left;
    display: block;
}
/* V5.x : champs TB désactivés (pas d'option « Emplacement fixe ») → grisés */
.aisle-row .aisle-tb-every:disabled,
.aisle-row .aisle-tb-count:disabled {
    background: #eceff1;
    color: #b0b8c0;
    border-color: #dfe4e7;
    cursor: not-allowed;
}
/* V5.x : cellule case à cocher "numérotation verticale" centrée sous son en-tête */
.aisle-row .aisle-vertical-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}
.aisle-row .aisle-vertical-cell input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.aisle-row.aisle-headers .aisle-actions-spacer {
    width: 100%;
}

.aisle-row .form-control,
.zone-fields .form-control {
    height: 32px;
    padding: 4px 10px;
    font-size: 13px;
}

.form-actions {
    padding: 14px 22px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ─── Page Plan : layout 2 colonnes ───────────────────────────── */
.box-plan-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    min-height: calc(100vh - 80px);
}

.box-plan-sidebar {
    background: #fff;
    border-right: 1px solid #ddd;
    padding: 16px 12px;
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 90px);
    overflow-y: auto;
}

.box-plan-sidebar .sidebar-section { margin-bottom: 14px; }
.box-plan-sidebar h4 {
    margin: 0;
    font-size: 13px;
    color: #2c3e50;
    display: flex;
    align-items: center;
}
.badge-count {
    margin-left: auto;
    background: #34495e;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.unplaced-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unplaced-horse {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: grab;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: box-shadow 0.15s;
}
.unplaced-horse:active { cursor: grabbing; }
.unplaced-horse:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.unplaced-horse.dragging { opacity: 0.4; }

.unplaced-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.unplaced-content strong {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.unplaced-content small {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unplaced-empty {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px 10px;
    font-size: 13px;
}

/* ─── Main area : zones et boxes ──────────────────────────────── */
.box-plan-main {
    padding: 0 12px;
}

.zones-display {
    padding: 12px 16px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.zone-display {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 12px 14px;
}

.zone-display-header {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    padding-bottom: 8px;
    border-bottom: 2px solid #34495e;
    margin-bottom: 10px;
}
.zone-display-label { color: #888; font-weight: normal; }

.aisle-display {
    /* L'allée occupe toute la largeur de la ligne pour étaler les couloirs */
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 10px;
    flex: 1 1 100%;
    width: 100%;
}

.aisle-display-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 6px;
    border-bottom: 1px dashed #ddd;
    margin-bottom: 8px;
    font-size: 12px;
    color: #666;
}
.aisle-code-tag {
    background: #ecf0f1;
    padding: 3px 10px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 14px;
    color: #2c3e50;
    font-family: monospace;
}
.aisle-stat { margin-left: auto; color: #888; font-size: 12px; }
.aisle-display-header small { font-size: 13px; color: #555; }

/* V5.9.d : Allées côte à côte dans la zone (wrap si trop large) */
.zone-aisles-wrap {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;          /* écart entre allées */
    align-items: flex-start;
}

/* Dans une allée : colonnes de boxes côte à côte */
.aisle-columns-stack {
    display: flex;
    flex-direction: row;
    gap: 8px;           /* écart entre colonnes physiques d'une même allée */
}

/* Chaque colonne : boxes empilés verticalement */
.boxes-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* En layout vertical, les boxes prennent largeur fixe étiroite */
.aisle-columns-stack .box-cell {
    width: 280px;
    min-height: 48px;
    flex-shrink: 0;
}

.box-cell {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 3px;
    min-height: 38px;
    padding: 2px 4px 2px 30px;   /* place à gauche pour le numéro */
    position: relative;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.box-cell .box-num {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 700;
    color: #2c3e50;
    font-family: monospace;
    width: 22px;
    text-align: right;
}

/* V5.x : le numéro est sur la "porte" du box, côté couloir central.
   Colonne de GAUCHE → numéro à droite ; colonne de DROITE → numéro à gauche (défaut). */
.boxes-column-left .box-cell {
    padding: 2px 30px 2px 4px;   /* place à droite pour le numéro */
}
.boxes-column-left .box-cell .box-num {
    left: auto;
    right: 4px;
    text-align: left;
}
.box-cell.empty { background: #fafafa; }
.box-cell.empty:hover { background: #f0f0f0; }

.box-cell.drop-target {
    background: #d4edda;
    border-color: #27ae60;
    box-shadow: inset 0 0 0 2px #27ae60;
}

.box-cell.occupied { background: #ecf5fb; }

/* V5.x (A3) : double box — la cellule porteuse (box_span=2) occupe la hauteur
   de deux box + le gap vertical (48 + 3 + 48 = 99px en layout vertical).
   La cellule du dessous est "absorbée" : masquée, son espace est reprise. */
.aisle-columns-stack .box-cell.box-double {
    min-height: 99px;
}
.box-cell.box-double {
    min-height: 79px; /* fallback layouts non-verticaux : 38 + 3 + 38 */
}
.box-cell.box-absorbed {
    display: none;
}
/* Double box : le numéro du haut se cale en haut, celui du bas en bas,
   chacun à la position de sa case respective (la cellule couvre 2 box). */
.box-cell.box-double .box-num {
    top: 24px;                /* ~centre de la 1re case (48px) */
    transform: translateY(-50%);
}
.box-cell.box-double .box-num-bottom {
    top: auto;
    bottom: 24px;             /* ~centre de la 2e case */
    transform: translateY(50%);
}
/* Repère visuel discret de double box */
.box-cell.box-double .box-occupant::after {
    content: "×2";
    position: absolute;
    top: 3px;
    right: 5px;
    font-size: 10px;
    font-weight: 700;
    color: #2c3e50;
    opacity: 0.45;
}

.box-occupant {
    flex: 1;
    background: #fff;
    border-left: 3px solid #3498db;
    border-radius: 3px;
    padding: 3px 6px;
    margin: 0;       /* plus de marge top pour layout vertical */
    cursor: grab;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 30px;
    justify-content: center;
}

/* V5.x : pastille "nouveau cavalier" (présent cette semaine, absent de la référence S1) */
.box-occupant {
    position: relative;
}

/* V5.x : sélection multiple (Ctrl+clic) */
.box-occupant.selected {
    outline: 2px solid #2980b9;
    outline-offset: 1px;
    background: #eaf4fb;
    box-shadow: 0 0 0 3px rgba(41,128,185,0.18);
}
.box-selection-bar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    background: #2c3e50;
    color: #fff;
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-size: 14px;
}
.box-selection-bar.hidden { display: none; }
.box-selection-bar .bsb-count { font-weight: 600; }
.box-selection-bar .bsb-clear {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 0;
    border-radius: 5px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
.box-selection-bar .bsb-clear:hover {
    background: rgba(255,255,255,0.28);
}
.box-occupant.is-new {
    padding-right: 16px;
}
.new-rider-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e67e22;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}

/* V5.9.e : occupant "réservé" (cavalier sans cheval précis) */
.box-occupant.reserved {
    border-left-color: #f39c12;
    background: #fffbe6;
    border-left-style: dashed;
}
.box-occupant.reserved .occupant-horse {
    font-style: italic;
    color: #b9770e;
}

/* V5.9.f : couleur du groupe sur les box-occupants
   (override de la border-left et du background par défaut) */
.box-occupant.group-color-blue   { border-left-color: #3498db; background: rgba( 52,152,219,0.15); }
.box-occupant.group-color-teal   { border-left-color: #16a085; background: rgba( 22,160,133,0.15); }
.box-occupant.group-color-purple { border-left-color: #8e44ad; background: rgba(142, 68,173,0.15); }
.box-occupant.group-color-amber  { border-left-color: #f39c12; background: rgba(243,156, 18,0.15); }
.box-occupant.group-color-red    { border-left-color: #e74c3c; background: rgba(231, 76, 60,0.15); }
.box-occupant.group-color-green  { border-left-color: #27ae60; background: rgba( 39,174, 96,0.15); }
.box-occupant.group-color-pink   { border-left-color: #e91e63; background: rgba(233, 30, 99,0.15); }
.box-occupant.group-color-gray   { border-left-color: #7f8c8d; background: rgba(127,140,141,0.15); }

/* Si "reserved" + un groupe : on garde le fond jaune dashed (réservé prime visuellement),
   on change juste la couleur de la bordure dashed pour refléter le groupe */
.box-occupant.reserved.group-color-blue   { border-left-color: #3498db; background: #fffbe6; }
.box-occupant.reserved.group-color-teal   { border-left-color: #16a085; background: #fffbe6; }
.box-occupant.reserved.group-color-purple { border-left-color: #8e44ad; background: #fffbe6; }
.box-occupant.reserved.group-color-amber  { border-left-color: #f39c12; background: #fffbe6; }
.box-occupant.reserved.group-color-red    { border-left-color: #e74c3c; background: #fffbe6; }
.box-occupant.reserved.group-color-green  { border-left-color: #27ae60; background: #fffbe6; }
.box-occupant.reserved.group-color-pink   { border-left-color: #e91e63; background: #fffbe6; }
.box-occupant.reserved.group-color-gray   { border-left-color: #7f8c8d; background: #fffbe6; }
.box-occupant:active { cursor: grabbing; }
.box-occupant.dragging { opacity: 0.4; }
.box-occupant:hover { box-shadow: 0 1px 4px rgba(0,0,0,0.1); }

.occupant-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    color: #2c3e50;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.occupant-horse {
    font-size: 12px;
    color: #777;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Couleurs de groupe sur les occupants ──────────────────────── */
/* (utilisées si l'occupant porte une classe group-bg-X via le data) */
.unplaced-horse.group-bg-blue   { border-left: 4px solid #3498db; }
.unplaced-horse.group-bg-teal   { border-left: 4px solid #16a085; }
.unplaced-horse.group-bg-purple { border-left: 4px solid #8e44ad; }
.unplaced-horse.group-bg-amber  { border-left: 4px solid #f39c12; }
.unplaced-horse.group-bg-red    { border-left: 4px solid #e74c3c; }
.unplaced-horse.group-bg-green  { border-left: 4px solid #27ae60; }
.unplaced-horse.group-bg-pink   { border-left: 4px solid #e91e63; }
.unplaced-horse.group-bg-gray   { border-left: 4px solid #7f8c8d; }

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .box-plan-layout {
        grid-template-columns: 1fr;
    }
    .box-plan-sidebar {
        position: relative;
        top: 0;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    .aisle-columns-stack .box-cell {
        width: 150px;
    }
}

/* ─── V5.9.g : Menu contextuel ────────────────────────────────── */
.ctx-menu {
    position: fixed;
    z-index: 3000;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    padding: 4px 0;
    min-width: 180px;
    font-size: 13px;
}
.ctx-menu.hidden { display: none; }

/* V5.x : sous-menu cascade "Déplacer vers" */
.ctx-submenu {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 220px;
}
.ctx-submenu-zone {
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 4px;
    margin-bottom: 4px;
}
.ctx-submenu-zone:last-child {
    border-bottom: 0;
    margin-bottom: 0;
}
.ctx-submenu-zone-label {
    display: block;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #aaa;
}
.ctx-target-corridor {
    padding-left: 28px !important;
    font-size: 12px;
}
.ctx-submenu-caret {
    margin-left: auto !important;
    color: #bbb !important;
}

.ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: #2c3e50;
    font-size: 13px;
    line-height: 1.2;
}
.ctx-menu-item:hover {
    background: #f5f5f5;
}
.ctx-menu-item i {
    width: 16px;
    color: #888;
}
.ctx-menu-item[data-action="unassign"] i {
    color: #c0392b;
}

/* ─── V5.9.m : Couloirs face-à-face ───────────────────────────── */
.aisle-corridors-wrap {
    display: flex;
    flex-direction: row;
    gap: 32px;        /* plancher d'écart entre couloirs (space-between gère le reste) */
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.corridor-block {
    display: flex;
    flex-direction: column;
}

.corridor-label {
    font-size: 12px;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 700;
    text-align: center;
    background: #f8f8f8;
    padding: 2px 6px;
    border-radius: 2px;
}

/* Dans un couloir : colonnes face-à-face avec gap marqué (= passage central) */
.corridor-block .aisle-columns-stack {
    gap: 40px;
}

/* ─── V5.9.h : Bascule rapide entre semaines (tabs en haut du plan) ─── */
.week-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 22px 0;
    border-bottom: 1px solid #e5e5e5;
    flex-wrap: wrap;
}

.week-tab {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 6px 14px;
    min-width: 80px;
    background: transparent;
    color: #555;
    border: 1px solid transparent;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-bottom: -1px;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    transition: background-color 0.12s ease, color 0.12s ease;
    cursor: pointer;
}

.week-tab:hover {
    background: #f3f5f7;
    color: #2c3e50;
    text-decoration: none;
}

.week-tab strong {
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1.1;
}

.week-tab small {
    font-size: 10.5px;
    color: #888;
    font-weight: 400;
}

.week-tab.active {
    background: #fff;
    border-color: #d0d0d0;
    color: #2c3e50;
    cursor: default;
}

.week-tab.active strong {
    color: #1a73e8;
}

.week-tab.active small {
    color: #555;
}

/* ─── V5.9.o : Apply to all weeks button ──────────────────── */
#btn-apply-to-weeks {
    transition: background-color 0.12s;
}
#btn-apply-to-weeks:disabled {
    opacity: 0.6;
    cursor: wait;
}
 
/* ─── Cheval NCH dans la sidebar "à placer" ─── */
.unplaced-horse.unplaced-nch {
    border-left: 3px solid #8e44ad;
}
.unplaced-horse.unplaced-nch small {
    color: #8e44ad;
    font-weight: 600;
}
.unplaced-horse.unplaced-option {
    border-left: 3px solid #b9770e;
}
.unplaced-horse.unplaced-option small {
    color: #b9770e;
    font-weight: 600;
}
 
/* ─── Box occupé par un cheval NCH (fond violet, assorti au tableau) ─── */
.box-occupant.box-occupant-nch {
    background: #f3e9f7 !important;   /* violet très clair */
    border: 1px solid #d6bce0;
}
.box-occupant.box-occupant-nch .occupant-horse {
    color: #8e44ad;
    font-weight: 600;
}

/* V5.x : box d'OPTION counts_as_box (Sellerie, Double Box…) — ambre,
   pour le distinguer du NCH (violet). */
.box-occupant.box-occupant-option {
    background: #fdf3e3 !important;   /* ambre très clair */
    border: 1px solid #e8cfa3;
}
.box-occupant.box-occupant-option .occupant-horse {
    color: #b9770e;
    font-weight: 600;
}
 
/* Si un NCH est aussi rattaché à un groupe (group-color-*), la couleur de
   groupe peut primer sur le violet. Si tu veux que le NCH reste violet
   même dans un groupe, garde le !important ci-dessus. Sinon, retire-le
   pour laisser la couleur de groupe prendre le dessus. */
 
   /* ─── Champs de recherche (sidebar + plan) ─── */
.box-search-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.box-search-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid #c4cdd5;
    border-radius: 6px;
    font-size: 13px;
    box-sizing: border-box;
}
.box-search-input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}
.box-search-empty {
    font-size: 12px;
    color: #999;
    font-style: italic;
}
 
/* Recherche au-dessus du plan : un peu plus compacte, dans la barre d'actions */
.plan-search-wrap {
    position: relative;
    align-self: center;
}
.plan-search-wrap .fa-search {
    color: #95a5a6;
    margin-right: 2px;
}
.plan-search-wrap .box-search-input {
    width: 200px;
}
.plan-search-clear {
    background: transparent;
    border: 0;
    color: #95a5a6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.plan-search-clear:hover {
    color: #e74c3c;
}
.plan-search-count {
    align-self: center;
    font-size: 13px;
    font-weight: 700;
    color: #3498db;
    min-width: 28px;
}
.plan-search-count.no-hit {
    color: #e74c3c;
}
 
/* ─── Surlignage du box trouvé dans le plan ─── */
.box-occupant.search-hit {
    outline: 3px solid #f1c40f;
    outline-offset: 1px;
    box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.35);
    animation: box-search-pulse 1s ease-in-out 2;
}
@keyframes box-search-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(241, 196, 15, 0.35); }
    50%      { box-shadow: 0 0 0 8px rgba(241, 196, 15, 0.15); }
}
/* V5.x : box-option avec couleur personnalisee (override de l'ambre uniforme).
   --opt-color est injectee inline par plan.volt quand l'option a une couleur.
   Fallback : sans la classe -colored, l'ambre .box-occupant-option reste. */
.box-occupant.box-occupant-option-colored {
    background: var(--opt-color) !important;            /* fallback navigateurs sans color-mix */
    background: color-mix(in srgb, var(--opt-color) 15%, #fff) !important;
    border: 1px solid var(--opt-color);
}
.box-occupant.box-occupant-option-colored .occupant-horse {
    color: var(--opt-color);
    font-weight: 600;
}