/* =============================================
   WMS — Estilos globais
   Dolibarr 24.x — padrão modmotorista
   ============================================= */

:root {
    --wms-blue:    #00143f;
    --wms-blue2:   #0b2a6f;
    --wms-gold:    #f4b000;
    --wms-green:   #198754;
    --wms-red:     #dc3545;
    --wms-orange:  #fd7e14;
    --wms-gray:    #6c757d;
    --wms-bg:      #f4f7fb;
    --wms-card:    #ffffff;
    --wms-border:  #dee2e6;
    --wms-radius:  10px;
}

/* ── Painel ────────────────────────────────── */
.wms-painel { padding: 8px 0; }

.wms-metrics-row {
    display: flex;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.wms-metric-card {
    flex: 1 1 160px;
    background: var(--wms-card);
    border-radius: var(--wms-radius);
    border: 1px solid var(--wms-border);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.wms-metric-card i        { font-size: 24px; opacity: .7; }
.wms-metric-val           { font-size: 32px; font-weight: 900; line-height: 1; }
.wms-metric-lbl           { font-size: 13px; color: var(--wms-gray); text-align: center; }

.wms-card-blue   { border-top: 4px solid var(--wms-blue);   }
.wms-card-blue   i, .wms-card-blue .wms-metric-val  { color: var(--wms-blue);   }
.wms-card-green  { border-top: 4px solid var(--wms-green);  }
.wms-card-green  i, .wms-card-green .wms-metric-val { color: var(--wms-green);  }
.wms-card-orange { border-top: 4px solid var(--wms-orange); }
.wms-card-orange i, .wms-card-orange .wms-metric-val{ color: var(--wms-orange); }
.wms-card-red    { border-top: 4px solid var(--wms-red);    }
.wms-card-red    i, .wms-card-red .wms-metric-val   { color: var(--wms-red);    }

/* ── Barra de ocupação ─────────────────────── */
.wms-ocupacao-bar-wrap  { margin-bottom: 20px; }
.wms-ocupacao-label     { font-size: 14px; margin-bottom: 6px; }
.wms-bar                { background: #e9ecef; border-radius: 20px; height: 14px; overflow: hidden; }
.wms-bar.mini           { height: 8px; }
.wms-bar-fill           { background: linear-gradient(90deg, var(--wms-green), var(--wms-gold)); height: 100%; border-radius: 20px; transition: width .4s; }

/* ── Atalhos ───────────────────────────────── */
.wms-atalhos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }

/* ── Botões ────────────────────────────────── */
.btn-wms {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; font-size: 14px;
    font-weight: 700; border: none; cursor: pointer;
    text-decoration: none; transition: all .18s;
    white-space: nowrap;
}
.btn-wms:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.14); text-decoration: none; }
.btn-wms-blue   { background: var(--wms-blue);   color: #fff; }
.btn-wms-green  { background: var(--wms-green);  color: #fff; }
.btn-wms-orange { background: var(--wms-orange); color: #fff; }
.btn-wms-red    { background: var(--wms-red);    color: #fff; }
.btn-wms-gray   { background: #6c757d;           color: #fff; }
.btn-wms.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-wms-close  { background: none; border: none; font-size: 22px; cursor: pointer; color: #666; }

/* ── Seções ────────────────────────────────── */
.wms-section {
    background: var(--wms-card);
    border: 1px solid var(--wms-border);
    border-radius: var(--wms-radius);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.wms-section h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--wms-blue); }

/* ── Badges ────────────────────────────────── */
.badge-wms {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: 12px; font-weight: 700;
}
.badge-green  { background: #d1e7dd; color: #0a3622; }
.badge-red    { background: #f8d7da; color: #58151c; }
.badge-orange { background: #fff3cd; color: #664d03; }
.badge-blue   { background: #cfe2ff; color: #052c65; }

/* ── Info box ──────────────────────────────── */
.wms-info-box {
    background: #e8f4f8; border-left: 4px solid var(--wms-blue);
    border-radius: 6px; padding: 12px 16px;
    margin-bottom: 20px; font-size: 14px;
}

/* ── Toolbar do mapa 3D ────────────────────── */
.wms-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
    background: var(--wms-card);
    border: 1px solid var(--wms-border); border-radius: var(--wms-radius);
    padding: 10px 16px;
}
.wms-toolbar-left, .wms-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wms-select, .wms-input {
    padding: 6px 10px; border: 1px solid var(--wms-border);
    border-radius: 6px; font-size: 13px; min-width: 140px;
}

/* ── Legenda ───────────────────────────────── */
.wms-legenda {
    display: flex; gap: 16px; flex-wrap: wrap;
    margin-bottom: 10px; font-size: 13px;
}
.leg-item { display: flex; align-items: center; gap: 6px; }
.leg-cor   { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* ── Canvas 3D ─────────────────────────────── */
#wms3d-wrap {
    position: relative;
    width: 100%; height: 520px;
    background: #f0f4fa;
    border: 1px solid var(--wms-border);
    border-radius: var(--wms-radius);
    overflow: hidden;
    margin-bottom: 20px;
}
#wms3d-canvas { width: 100%; height: 100%; display: block; }
#wms3d-loading {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 16px; color: #666;
}
#wms3d-tooltip {
    position: absolute; display: none; pointer-events: none;
    background: rgba(0,0,0,.82); color: #fff;
    padding: 8px 12px; border-radius: 8px;
    font-size: 13px; max-width: 220px; z-index: 50;
    line-height: 1.5;
}

/* ── Painel de detalhes ────────────────────── */
.wms-detail-panel {
    position: fixed; right: 20px; top: 80px;
    width: 360px; max-height: 80vh; overflow-y: auto;
    background: var(--wms-card);
    border: 1px solid var(--wms-border);
    border-radius: var(--wms-radius);
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    z-index: 999; padding: 16px;
    transition: transform .2s;
}
.wms-detail-panel.hidden { display: none; }
.wms-detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.wms-detail-header h4 { margin: 0; font-size: 16px; font-weight: 800; color: var(--wms-blue); }
.wms-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.wms-detail-table th { background: #f0f4fa; padding: 4px 8px; text-align: left; }
.wms-detail-table td { padding: 4px 8px; border-bottom: 1px solid #eee; }

/* ── Toast ─────────────────────────────────── */
#wms-toast-container {
    position: fixed; bottom: 24px; right: 24px;
    display: flex; flex-direction: column; gap: 8px; z-index: 9999;
}
.wms-toast {
    padding: 12px 20px; border-radius: 8px;
    font-size: 14px; font-weight: 600;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    animation: slideIn .25s ease;
    color: #fff;
}
.wms-toast-success { background: var(--wms-green); }
.wms-toast-danger  { background: var(--wms-red);   }
.wms-toast-warning { background: var(--wms-orange); }

@keyframes slideIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ── Linha com divergência ─────────────────── */
.wms-row-warn td { background: #fff8e1 !important; }

/* ── Confirmação manual de lotação ────────── */
.wms-full-check {
    display:inline-flex; align-items:center; gap:12px; cursor:pointer;
    padding:11px 14px; border:1px solid #dbe4ef; border-radius:10px;
    background:#f8fafc; transition:all .18s;
}
.wms-full-check:hover { border-color:#94a3b8; background:#fff; box-shadow:0 3px 10px rgba(15,23,42,.07); }
.wms-full-check > input { position:absolute; opacity:0; pointer-events:none; }
.wms-full-check-box { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex:0 0 22px; border:2px solid #94a3b8; border-radius:6px; color:transparent; background:#fff; }
.wms-full-check input:checked + .wms-full-check-box { border-color:#dc3545; background:#dc3545; color:#fff; }
.wms-full-check strong { display:block; color:#1e293b; font-size:13px; }
.wms-full-check small { display:block; margin-top:2px; color:#64748b; font-size:11px; }

/* ── Busca da listagem de alocações ───────── */
.wms-list-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:10px; }
.wms-list-head h3 { margin:0; }
.wms-list-search { position:relative; min-width:310px; max-width:480px; flex:1; }
.wms-list-search > i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#64748b; }
.wms-list-search input { width:100%; box-sizing:border-box; padding:9px 36px 9px 35px; border:1px solid #cbd5e1; border-radius:9px; background:#fff; font-size:13px; outline:none; }
.wms-list-search input:focus { border-color:#0b5cab; box-shadow:0 0 0 3px rgba(11,92,171,.1); }
.wms-list-search button { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:28px; height:28px; border:0; border-radius:6px; background:transparent; color:#64748b; cursor:pointer; }
.wms-list-search button:hover { background:#eef2f7; }
.wms-search-result { min-height:18px; margin-bottom:5px; color:#64748b; font-size:11px; }
.wms-no-results { padding:22px !important; text-align:center; color:#64748b; }

/* ── Estado Aberta/Cheia ──────────────────── */
.wms-status-toggle { display:inline-flex; align-items:center; gap:7px; cursor:pointer; white-space:nowrap; }
.wms-status-toggle input { position:absolute; opacity:0; pointer-events:none; }
.wms-status-slider { width:32px; height:18px; border-radius:20px; background:#22c55e; position:relative; transition:.2s; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
.wms-status-slider:after { content:""; position:absolute; width:14px; height:14px; left:2px; top:2px; background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.2s; }
.wms-status-toggle input:checked + .wms-status-slider { background:#dc3545; }
.wms-status-toggle input:checked + .wms-status-slider:after { transform:translateX(14px); }
.wms-status-label { font-size:11px; font-weight:800; color:#15803d; }
.wms-status-toggle input:checked ~ .wms-status-label { color:#b91c1c; }

/* ── Responsivo ────────────────────────────── */
@media (max-width: 768px) {
    .wms-metrics-row { flex-direction: column; }
    .wms-detail-panel { width: calc(100vw - 24px); right: 12px; }
    #wms3d-wrap { height: 320px; }
    .wms-list-search { min-width:100%; }
}

/* ── Card de alerta: pendentes de alocação ─── */
.wms-alerta-pendentes {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #fff3cd, #ffe8a1);
    border: 2px solid #f0a500;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 0 0 18px;
    text-decoration: none;
    color: #7a5000;
    font-size: 14px;
    transition: box-shadow .2s, transform .15s;
    box-shadow: 0 2px 8px rgba(240,165,0,.2);
}
.wms-alerta-pendentes:hover {
    box-shadow: 0 4px 16px rgba(240,165,0,.35);
    transform: translateY(-2px);
    text-decoration: none;
    color: #7a5000;
}
.wms-alerta-pendentes > i:first-child { font-size: 24px; color: #e08c00; flex-shrink: 0; }
.wms-alerta-pendentes > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wms-alerta-pendentes strong { font-size: 15px; color: #6b4300; }
.wms-alerta-pendentes span   { font-size: 12px; color: #9a6800; }
.wms-alerta-pendentes > i:last-child { color: #c07a00; }