/* ============================================
   PITCHU BOX — Stockage (V3)
   Complète budget.css ; pensé mobile d'abord.
   ============================================ */

.stock-main { max-width: 1100px; }

.stock-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* ---- Recherche ---- */

.stock-search {
    width: 100%;
    margin-bottom: 1rem;
    min-height: 52px;
    font-size: 1.05rem;
}

mark {
    background: #fde68a;
    color: inherit;
    border-radius: 3px;
    padding: 0 1px;
}

.search-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.search-result-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.search-result-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.search-result-objets {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
}

.search-result-objets li {
    padding: 0.35rem 0 0.35rem 1.2rem;
    position: relative;
    font-size: 0.95rem;
    border-bottom: 1px dashed var(--border);
}

.search-result-objets li:last-child { border-bottom: none; }

.search-result-objets li::before {
    content: '🔎';
    position: absolute;
    left: 0;
    font-size: 0.75rem;
    top: 0.5rem;
}

.search-summary {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0 0 0.75rem;
    font-weight: 600;
}

/* ---- Onglets Plan / Cartons ---- */

.stock-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem;
    margin-bottom: 1rem;
}

.stock-tab {
    flex: 1;
    border: none;
    background: none;
    border-radius: 999px;
    padding: 0.65rem 0.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s ease, color 0.15s ease;
}

.stock-tab.active {
    background: var(--accent);
    color: #fff;
}

/* ---- Plan du box ---- */

.plan-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.plan-toolbar .btn-secondary.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-dark);
}

.plan-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0.6rem;
}

.box-map {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px),
        var(--bg-card);
    background-size: 10% 10%, 10% 10%, auto;
    border: 3px solid var(--text-secondary);
    border-radius: 0.9rem;
    overflow: hidden;
    touch-action: pan-y; /* le glisser des blocs est géré en JS en mode édition */
    user-select: none;
    -webkit-user-select: none;
}

/* Porte du box : repère d'orientation en bas du plan */
.box-map::after {
    content: '🚪 Entrée';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-secondary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.9rem;
    border-radius: 0.5rem 0.5rem 0 0;
    letter-spacing: 0.05em;
    pointer-events: none;
}

.box-map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 1.5rem;
    pointer-events: none;
}

/* ---- Blocs emplacements ---- */

.empl-block {
    position: absolute;
    border: 2px solid;
    border-radius: 0.7rem;
    padding: 0.35rem 0.45rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.15rem;
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}

.empl-block.editing {
    cursor: grab;
    border-style: dashed;
    touch-action: none;
    overflow: visible; /* laisse dépasser les poignées de coin */
}

.empl-block.dragging {
    cursor: grabbing;
    box-shadow: var(--shadow-lg);
    z-index: 5;
    opacity: 0.9;
}

.empl-block.selected {
    box-shadow: 0 0 0 3px var(--accent);
    z-index: 3;
}

.empl-name {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.empl-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    align-self: flex-start;
    white-space: nowrap;
}

/* Les couleurs des emplacements viennent de la palette (style inline, voir stockage.js) */

/* Badge des emplacements superposés (ex : étagère au-dessus d'une autre) */
.empl-stack-badge {
    position: absolute;
    top: 0.25rem;
    right: 0.3rem;
    font-size: 0.58rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    letter-spacing: 0.03em;
    pointer-events: none;
}

/* Poignées de redimensionnement aux 4 coins (mode édition) */
.empl-handle {
    position: absolute;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 2.5px solid currentColor;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    touch-action: none;
    z-index: 2;
}

.empl-handle-nw { top: -9px;    left: -9px;   cursor: nwse-resize; }
.empl-handle-ne { top: -9px;    right: -9px;  cursor: nesw-resize; }
.empl-handle-sw { bottom: -9px; left: -9px;   cursor: nesw-resize; }
.empl-handle-se { bottom: -9px; right: -9px;  cursor: nwse-resize; }

/* ---- Cartons d'un emplacement (panneau sous le plan) ---- */

.plan-cartons {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1rem;
    margin-top: 0.9rem;
}

.plan-cartons-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.plan-cartons-empty {
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* ---- Liste des cartons ---- */

.carton-group-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 1.2rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.carton-group-title:first-child { margin-top: 0; }

.carton-group-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.carton-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.9rem;
    padding: 0.8rem 1rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    min-height: 56px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.carton-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
}

.carton-code {
    flex: 0 0 auto;
    background: var(--accent-light);
    color: var(--accent-dark);
    border-radius: 0.6rem;
    padding: 0.35rem 0.6rem;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    min-width: 3.2rem;
    text-align: center;
}

.carton-info { flex: 1; min-width: 0; }

.carton-nom {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.carton-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 0.1rem;
}

.carton-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 1.1rem;
}

.stock-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
}

/* Chip emplacement (réutilisé un peu partout) */
.empl-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1.5px solid;
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.empl-chip-none {
    border-color: var(--border);
    color: var(--text-muted);
    background: var(--bg);
}

/* ---- Détail d'un carton ---- */

.carton-detail {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    padding: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}

.carton-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.carton-detail-code {
    display: inline-block;
    background: var(--accent-light);
    color: var(--accent-dark);
    border-radius: 0.7rem;
    padding: 0.4rem 0.85rem;
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: 0.05em;
}

.carton-detail-nom {
    font-size: 1.05rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.carton-detail-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.carton-detail-empl { margin-bottom: 1rem; }

.stock-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.25rem 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.objets-list { list-style: none; padding: 0; margin: 0; }

.objet-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--border);
}

.objet-row:last-child { border-bottom: none; }

.objet-nom {
    flex: 1;
    font-size: 0.95rem;
    overflow-wrap: anywhere;
    padding: 0.3rem 0;
}

.objet-nom::before { content: '• '; color: var(--accent); font-weight: 700; }

.objet-remove {
    flex: 0 0 auto;
    background: none;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.objet-remove:hover {
    color: var(--accent-red);
    border-color: var(--accent-red);
}

.objets-empty { color: var(--text-muted); font-size: 0.9rem; padding: 0.5rem 0; }

.objet-add-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.9rem;
}

.objet-add-row .form-input { flex: 1; min-height: 48px; }

.objet-add-row .btn-primary { min-height: 48px; }

/* ---- Modals ---- */

.stock-modal { max-width: 560px; width: calc(100% - 2rem); }

.stock-code-input {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-size: 1.1rem;
}

.stock-textarea { font-family: inherit; resize: vertical; line-height: 1.5; }

/* Choix de couleur (palette style Apple : pastilles pleines) */
.swatch-row { display: flex; gap: 0.55rem; flex-wrap: wrap; }

.swatch {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--border);
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.swatch.selected {
    box-shadow: 0 0 0 3px var(--accent);
    transform: scale(1.12);
}

/* ---- Mobile ---- */

@media (max-width: 720px) {
    .stock-main { padding: 1rem; }
    .page-header { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .page-header .btn-primary { justify-content: center; min-height: 48px; }

    /* Plan plus haut sur mobile pour des blocs faciles à toucher */
    .box-map { aspect-ratio: 3 / 4; }

    .plan-toolbar .btn-secondary {
        flex: 1;
        justify-content: center;
        min-height: 44px;
    }

    .empl-name { font-size: 0.72rem; }

    /* Poignées plus grosses pour le doigt */
    .empl-handle { width: 24px; height: 24px; }
    .empl-handle-nw { top: -12px;    left: -12px; }
    .empl-handle-ne { top: -12px;    right: -12px; }
    .empl-handle-sw { bottom: -12px; left: -12px; }
    .empl-handle-se { bottom: -12px; right: -12px; }

    .carton-detail { padding: 1.1rem; }
    .carton-detail-code { font-size: 1.15rem; }
    .stock-modal { width: calc(100% - 1rem); max-height: 92vh; }
    .objet-remove { width: 2.6rem; height: 2.6rem; }
}