/*  =====  RESET =====  */
*{box-sizing:border-box;margin:0;padding:0}
button,input{font:inherit}

/*  =====  CORES (modo escuro) =====  */
:root{
  --bg-main:#111;
  --bg-panel:#222;
  --bg-row:#333;
  --bg-row-hover:#444;
  --brand:#d32f2f;
  --brand-hover:#b71c1c;
  --txt:#fff;
  --txt-muted:#ccc;
}

/*  =====  ESTRUTURA GERAL =====  */
body{
  background:var(--bg-main);
  color:var(--txt);
  font-family:Arial,Helvetica,sans-serif;
  height:100dvh;
}

#app{display:flex;height:100dvh}

/*  =====  LOGIN =====  */
#login{text-align:center;padding-top:60px}
#login .logo{max-width:140px;margin:20px auto 12px;display:block}
#login input{
  width:80%;max-width:320px;margin:8px auto;padding:11px;
  border:1px solid var(--bg-row);border-radius:6px;
  background:var(--bg-row);color:var(--txt);
}
#login input::placeholder{color:var(--txt-muted)}
#login button{
  padding:11px 28px;border:0;border-radius:6px;
  background:var(--brand);color:#fff;cursor:pointer;
  transition:background .25s;
}
#login button:hover{background:var(--brand-hover)}

/*  =====  SIDEBAR =====  */
#sidebar{
  width:260px;background:var(--bg-panel);padding:14px 14px 14px;
  overflow-y:auto;transition:transform .3s ease;
}
#sidebar h3{margin-bottom:8px}
#deviceList{margin-bottom:16px}

/* Linhas de dispositivo */
.device-item{
  background:var(--bg-row);padding:7px;margin:4px 0;border-radius:5px;
  cursor:pointer;transition:background .2s;
}
.device-item:hover{background:var(--bg-row-hover)}

/*  =====  BOTÕES =====  */
button{
  width:100%;margin:4px 0;padding:10px;
  background:var(--brand);border:0;border-radius:5px;
  color:#fff;font-size:14px;cursor:pointer;
  transition:background .25s;
}
button:hover{background:var(--brand-hover)}

/*  =====  MAPA =====  */
#map{flex:1;height:100dvh;min-height:100dvh}

/* Scroll slim no sidebar */
#sidebar::-webkit-scrollbar{width:6px}
#sidebar::-webkit-scrollbar-thumb{background:var(--bg-row-hover);border-radius:3px}

/* Leaflet popup escuro */
.leaflet-popup-content-wrapper{background:#202020;color:#fff}
.leaflet-popup-tip{background:#202020}

/*  =====  BOTÃO ☰ =====  */
.burger{
  position:fixed;top:12px;left:12px;z-index:10001;
  background:var(--brand);border:0;border-radius:6px;
  font-size:26px;line-height:26px;color:#fff;
  padding:6px 14px;cursor:pointer;
}

/*  =====  SIDEBAR COLAPSÁVEL (≤ 1000 px) =====  */
@media(max-width:1000px){
  #sidebar{
    position:absolute;top:0;bottom:0;left:0;
    width:230px;transform:translateX(-105%);
    padding:90px 14px 14px;        /* espaço p/ botão ☰ */
    z-index:9998;
  }
  #sidebar.open{transform:translateX(0)}   /* quando aberto */
  button{font-size:13px}                   /* botões menores */
}