/* ============================================================
   IoTrack24 — Demo dashboard (mappa live + flotta)
   ============================================================ */
.app{height:calc(100vh - var(--nav-h));min-height:560px;display:grid;grid-template-columns:340px 1fr;background:var(--surface)}
.demo-banner{background:var(--petrol);color:var(--on-dark);font-size:.82rem;text-align:center;padding:8px 16px}
.demo-banner b{color:#fff}
.demo-banner a{color:var(--cyan);font-weight:600;text-decoration:underline}

/* real platform embed (Navixy Geo Link) */
.app.app-real{display:block;grid-template-columns:none}
/* Altezza piena via flexbox invece di un calc(100vh - ...) fisso: così l'iframe
   riempie sempre esattamente lo spazio residuo sotto nav+banner, qualunque sia
   la loro altezza reale (es. banner che va a capo su schermi stretti), senza
   lasciare fasce vuote né tagliare contenuto. Il min-height resta come rete di
   sicurezza sui viewport molto bassi. */
body.app-page .app.app-real{
  min-height:60vh;
}
.navixy-embed{display:block;width:100%;height:100%;border:0}

/* sidebar / vehicle list */
.side{background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.side-head{padding:18px 18px 14px;border-bottom:1px solid var(--border)}
.side-head .t{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.side-head h2{font-size:1.05rem}
.fleet-count{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);background:var(--surface);padding:4px 9px;border-radius:7px}
.search{position:relative}
.search input{width:100%;border:1.5px solid var(--border);border-radius:9px;padding:9px 12px 9px 34px;font-family:inherit;font-size:.88rem;color:var(--fg)}
.search input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(134,197,209,.3)}
.search svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted)}
.filters{display:flex;gap:6px;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.filters button{border:1px solid var(--border);background:#fff;border-radius:999px;padding:6px 12px;font-size:.78rem;font-weight:500;color:var(--muted);cursor:pointer;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.filters button .d{width:7px;height:7px;border-radius:50%}
.filters button.on{background:var(--petrol);color:#fff;border-color:var(--petrol)}
.veh-list{flex:1;overflow-y:auto;min-height:0}
.veh-row{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;align-items:center}
.veh-row:hover{background:var(--surface)}
.veh-row.sel{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--petrol)}
.veh-ic{width:38px;height:38px;border-radius:10px;background:var(--surface);display:grid;place-items:center;flex-shrink:0;color:var(--petrol)}
.veh-ic svg{width:21px;height:21px}
.veh-main{flex:1;min-width:0}
.veh-main .vp{font-family:var(--font-mono);font-weight:500;font-size:.9rem;display:flex;align-items:center;gap:7px}
.veh-main .vn{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.veh-meta{text-align:right;flex-shrink:0}
.veh-meta .sp{font-family:var(--font-mono);font-size:.82rem;font-weight:500}
.stpill{display:inline-flex;align-items:center;gap:5px;font-size:.68rem;font-weight:600;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.st-mov{background:rgba(31,158,111,.13);color:#157a53}
.st-idle{background:rgba(224,161,6,.15);color:#a9760a}
.st-alarm{background:rgba(224,65,60,.13);color:#bb302b}
.st-off{background:rgba(90,119,122,.13);color:#5a777a}
.stpill .d{width:6px;height:6px;border-radius:50%}
.st-mov .d{background:var(--success)}.st-idle .d{background:var(--warn)}.st-alarm .d{background:var(--danger)}.st-off .d{background:var(--muted)}

/* map */
.map-area{position:relative;min-width:0;overflow:hidden}
.map-canvas{position:absolute;inset:0;background:
  radial-gradient(circle at 25% 20%,#eef7f8,#e0eef0 70%,#d6e8ea)}
.map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-veh{position:absolute;transform:translate(-50%,-50%);z-index:5;cursor:pointer;transition:left .95s linear,top .95s linear}
.map-veh .pin{width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2.5px solid #fff;box-shadow:0 3px 8px rgba(23,62,65,.3);display:grid;place-items:center}
.map-veh .pin svg{transform:rotate(45deg);width:15px;height:15px;color:#fff}
.map-veh.mov .pin{background:var(--success)}.map-veh.idle .pin{background:var(--warn)}.map-veh.alarm .pin{background:var(--danger)}.map-veh.off .pin{background:var(--muted)}
.map-veh.sel .pin{outline:3px solid rgba(42,91,95,.35);outline-offset:1px}
.map-veh .lab{position:absolute;left:50%;top:-26px;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-family:var(--font-mono);font-size:.7rem;white-space:nowrap;box-shadow:var(--shadow-sm);opacity:0;transition:opacity .15s;pointer-events:none}
.map-veh.sel .lab,.map-veh:hover .lab{opacity:1}
.map-trail{fill:none;stroke:var(--petrol);stroke-width:2;stroke-dasharray:4 5;opacity:0;transition:opacity .2s}
.map-trail.on{opacity:.55}

.map-overlay{position:absolute;z-index:10;pointer-events:none}
.map-tools{top:16px;right:16px;display:flex;flex-direction:column;gap:8px;pointer-events:auto}
.map-tools button{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);cursor:pointer;display:grid;place-items:center;color:var(--petrol)}
.map-tools button:hover{background:var(--surface)}
.map-tools button svg{width:19px;height:19px}
.map-legend{bottom:16px;left:16px;background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:10px;padding:11px 14px;box-shadow:var(--shadow-sm);font-size:.76rem;display:grid;gap:7px;pointer-events:auto}
.map-legend .lg{display:flex;align-items:center;gap:8px;color:var(--muted)}
.map-legend .lg .d{width:9px;height:9px;border-radius:50%}
.map-clock{top:16px;left:16px;background:rgba(23,62,65,.9);color:#fff;border-radius:10px;padding:9px 14px;font-family:var(--font-mono);font-size:.8rem;display:flex;align-items:center;gap:9px;pointer-events:auto}
.geofence{fill:rgba(134,197,209,.16);stroke:var(--accent-ink);stroke-width:1.5;stroke-dasharray:6 4}

/* telemetry drawer */
.telemetry{
  position:absolute;left:16px;right:16px;bottom:16px;z-index:11;background:#fff;border:1px solid var(--border);
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.8,.2,1);
  max-width:760px;margin-inline:auto;
}
.telemetry.show{transform:none}
.tel-head{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--border)}
.tel-head .veh-ic{width:42px;height:42px}
.tel-head .ti{flex:1}
.tel-head .ti .vp{font-family:var(--font-mono);font-weight:600}
.tel-head .ti .vn{font-size:.82rem;color:var(--muted)}
.tel-close{background:none;border:0;cursor:pointer;color:var(--muted);padding:6px;border-radius:8px}
.tel-close:hover{background:var(--surface)}
.tel-close svg{width:20px;height:20px}
.tel-body{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--border)}
.tel-cell{background:#fff;padding:14px 16px}
.tel-cell .l{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.tel-cell .v{font-family:var(--font-mono);font-weight:500;font-size:1.05rem;color:var(--fg)}
.tel-cell .v small{font-size:.72rem;color:var(--muted);font-weight:400}
.gauge{height:5px;border-radius:3px;background:var(--surface-2);margin-top:8px;overflow:hidden}
.gauge i{display:block;height:100%;border-radius:3px;background:var(--accent-ink)}

@media (max-width:900px){
  .app{grid-template-columns:1fr;height:auto}
  .side{border-right:0;border-bottom:1px solid var(--border);max-height:46vh}
  .map-area{height:62vh;min-height:440px}
  .tel-body{grid-template-columns:repeat(3,1fr)}
  .telemetry .tel-cell:nth-child(n+4){border-top:1px solid var(--border)}
}
@media (max-width:520px){
  .tel-body{grid-template-columns:repeat(2,1fr)}
}

/* ---- Wilma assistant widget ---- */
.wilma-btn{position:absolute;left:16px;bottom:16px;z-index:14;display:flex;align-items:center;gap:10px;
  background:var(--petrol);color:#fff;border:0;border-radius:999px;padding:10px 18px 10px 12px;cursor:pointer;
  box-shadow:var(--shadow-lg);font-family:var(--font-body);font-weight:600;font-size:.9rem;transition:transform .12s}
.wilma-btn:hover{transform:translateY(-2px)}
.wilma-btn .av{width:30px;height:30px;border-radius:50%;background:var(--cyan);color:var(--petrol-deep);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.85rem}
.wilma-btn .av::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid var(--petrol);margin:-18px 0 0 20px}
.wilma-panel{position:absolute;left:16px;bottom:16px;z-index:15;width:min(360px,calc(100% - 32px));
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;max-height:460px;transform:translateY(20px) scale(.96);opacity:0;pointer-events:none;
  transform-origin:bottom left;transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .22s}
.wilma-panel.open{transform:none;opacity:1;pointer-events:auto}
.wp-head{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--border);background:var(--petrol-deep);border-radius:var(--r-lg) var(--r-lg) 0 0}
.wp-head .av{width:34px;height:34px;border-radius:50%;background:var(--cyan);color:var(--petrol-deep);display:grid;place-items:center;font-family:var(--font-display);font-weight:800}
.wp-head .ti{flex:1;color:#fff}
.wp-head .ti b{display:block;font-size:.92rem}
.wp-head .ti span{font-size:.72rem;color:var(--cyan);font-family:var(--font-mono);display:flex;align-items:center;gap:6px}
.wp-head .ti span .d{width:7px;height:7px;border-radius:50%;background:var(--success)}
.wp-head button{background:none;border:0;color:var(--on-dark-mut);cursor:pointer;padding:4px}
.wp-head button:hover{color:#fff}
.wp-body{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;flex:1;min-height:120px}
.wp-qs{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;background:var(--surface)}
.wilma-q{border:1px solid var(--border);background:#fff;border-radius:999px;padding:7px 13px;font-size:.8rem;color:var(--petrol);cursor:pointer;font-family:inherit;font-weight:500;transition:.15s}
.wilma-q:hover{background:var(--surface-2);border-color:var(--cyan)}
@media(max-width:900px){.wilma-panel{max-height:60vh}}

/* ---- full-viewport app shell ---- */
/* height (non min-height): un flex-container con solo min-height ha altezza
   "auto" per l'algoritmo di layout, quindi flex:1 sui figli non ha uno spazio
   definito da riempire e collassa al contenuto (visto con mano: la mappa si
   riduceva a una striscia con una fascia vuota sotto). Con height:100vh lo
   spazio disponibile è definito fin da subito, e .app.app-real riempie
   esattamente il resto sotto nav+banner qualunque sia la loro altezza reale. */
.app-page{display:flex;flex-direction:column;height:100vh}
.app-page .app{height:auto;flex:1;min-height:0}

/* Wilma avatar image in widget */
.wp-head .av,.wilma-btn .av{overflow:visible;position:relative}
.wp-head .av img,.wilma-btn .av img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;border-radius:50%;display:block}
.wilma-btn .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:var(--success);border:2px solid var(--petrol);margin:0}
.wp-msg-av{width:26px;height:26px;border-radius:50%;overflow:hidden;flex-shrink:0}
.wp-msg-av img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}