.fab{
position:fixed;

/* 🔥 mutăm mai sus și mai la dreapta */
bottom:100px;
right:15px;

width:60px;
height:60px;

border-radius:50%;
border:none;

background:#2ecc71;
color:white;

font-size:28px;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 4px 12px rgba(0,0,0,0.3);

cursor:pointer;
z-index:999;
}




.addWrap{
position:sticky;
bottom:0;
background:#f4f4f4;
padding:10px;
}

.addBtn{
width:100%;
padding:14px;
border:none;
border-radius:10px;

background:#2ecc71;
color:white;

font-size:16px;
font-weight:bold;

cursor:pointer;
}






.setari-row{
display:flex;
align-items:center;
gap:10px;
background:white;
padding:10px;
margin-bottom:6px;
border-radius:8px;
}

.setari-id{
width:70px;
font-weight:bold;
}

.setari-input{
flex:1;
padding:6px;
border:1px solid #ccc;
border-radius:6px;
}

.delete-btn{
background:#e74c3c;
color:white;
border:none;
padding:6px 10px;
border-radius:6px;
cursor:pointer;
}

.delete-btn:hover{
background:#c0392b;
}































/* POPUP */
.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
display:none;
align-items:center;
justify-content:center;
z-index:2000;
}

.popupBox{
background:white;
padding:20px;
border-radius:12px;
width:300px;
}

.popupBox input{
width:100%;
padding:10px;
margin-top:10px;
border:1px solid #ccc;
border-radius:8px;
}

.popupBtns{
display:flex;
justify-content:space-between;
margin-top:15px;
}

.popupBtns button{
padding:8px 14px;
border:none;
border-radius:8px;
cursor:pointer;
}

.popupBtns .ok{
background:#2ecc71;
color:white;
}







.pageTitle{
text-align:center;

padding:0px 0;   /* 🔥 10px sus / jos */

font-size:20px;
font-weight:600;

color:#2c3e50;




}




.statCard{
background:white;
padding:12px;
margin-bottom:8px;
border-radius:10px;
font-size:16px;
}


















.modeToggle{
  display:flex;
  justify-content:center;
  gap:0;
  background:#ecf0f1;
  border-radius:10px;
  padding:3px;
  width:fit-content;
  margin:0 auto 10px;
}

/* 🔘 buton normal (IMPORTANT) */
.modeToggle button{
  padding:6px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:bold;
  transition:0.2s;

  background:#ffffff;          /* 🔥 apare ca buton */
  border:1px solid #d0d7de;
  color:#444;
}

/* 🔵 activ */
.modeToggle button.active{
  background:#3498db;
  color:#fff;
  border-color:#3498db;
  box-shadow:0 2px 5px rgba(0,0,0,0.15);
}

/* 🟡 hover DOAR pe inactiv */
.modeToggle button:not(.active):hover{
  background:#f2f6fa;
}
.a1{
  color:#3498db;
  font-weight:bold;
}

.e2{
  color:#e67e22;
  font-weight:bold;
}

.modeToggle button.active .a1,
.modeToggle button.active .e2{
  color:#fff;
}

.modeToggle button:not(.active):hover .a1{
  color:#2980b9;
}

.modeToggle button:not(.active):hover .e2{
  color:#d35400;
}

















.timeBlock{
  border:1px solid rgba(255,255,255,0.1);
  padding:10px;
  border-radius:8px;
}

.timeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}

.timeRow:last-child{
  margin-bottom:0;
}

/* cercuri */
.dot{
  width:12px;
  height:12px;
  border-radius:50%;
  display:inline-block;
  margin-right:6px;
}

.dot.on{ background:#2ecc71; 
   
    
    
}
.dot.off{ background:#e74c3c; }











.line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:6px;
  gap:10px; 

}

.line:last-child{
  margin-bottom:10;
}

.line input{
  width:100%;
margin-top:0px;
padding:5px;
border-radius:6px;
border:1px solid #cfcfcf;
background:white;
text-align:center;
font-size:16px;
}




.boxx{
   

flex:1;
background:#efefef;
border-radius:8px;
padding:7px ;

text-align:center;
border:1px solid #d6d6d6;
margin-bottom:10px;
}

.boxx:last-child{
  margin-bottom:0;
}


.nod{
  flex:1;
  background:#efefef;
  border-radius:8px;
  padding:7px;
  border:1px solid #d6d6d6;
  margin-bottom:10px;

  display:flex;          /* IMPORTANT */
  align-items:center;    /* centru pe verticală */
}




.nod:last-child{
  margin-bottom:0;
}

.nodes span{
  width:32px;
  height:32px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  background:#ddd;
}

.nodes{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap:6px;
  width:100%;
}




.nodesTitle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font-weight:bold;
color: #2c80b4;

  margin-right:10px;   /* spațiu între text și grid */
}

.onLabel,
.offLabel{
  width:40px;        /* 🔥 cheie */
  display:inline-block;
  font-weight:bold;
}

.onLabel{
  color:#2ecc71 !important;
  font-weight:bold;
}

.offLabel{
  color:#e74c3c !important;
  font-weight:bold;
}











/* ---------- ID ---------- */

.programId.auto{
  color:#3498db;
  background:none;
}

.programId.event{
  color:#e67e22;
}

.program{
  position:relative;
}

.nodesWrap{
  position:relative;
  z-index:1;
}

.programId{
  position:absolute;
  right:4px;
  bottom:-7px;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
  font-size:45px;
  font-weight:900;

  color:#000;              /* FULL vizibil */
  
  pointer-events:none;
  z-index:0;

  opacity:1;               /* 100% */
}


/* culori pe tip */
.programId.auto{
  color:#3498db;           /* verde puternic */
}

.programId.event{
  color:#e67e22;           /* portocaliu puternic */
}


.nodePlus{
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px;
  background:#ddd;
  cursor:pointer;
}
.programTime{
  background:#DDDDDD;
  color:#000;
  padding:0px 6px 0px 6px;
  border-radius:6px;
  
  margin-left:6px;
}
.programDays{
  background:#DDDDDD;
  color:#000;
  padding:0px 0px;
  border-radius:6px;
  
  margin-left:0px;
}
























.line{
  display:flex;
  align-items:center;
  gap:10px;
}

.timeInput{
  flex:1;
  height:32px;
  padding-right:28px;
}

/* 🔥 icon fix pe input */
.timeWrap{
  position:relative;
  flex:1;
}

.timeWrap input{
  width:100%;
}



.timeInput{
  -webkit-appearance:none;
  appearance:none;

  background-color:#fff;
  padding-right:30px;
}

/* 🔴 Chrome / Android / iOS */
.timeInput::-webkit-calendar-picker-indicator{
  opacity:0;
  position:absolute;
  right:0;
  width:100%;
  height:100%;
}


.timeInput{
  padding-right:36px;
}
.clockIcon{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  pointer-events:none;

  background:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' stroke='%232c80b4' stroke-width='2' fill='none'/>\
<path d='M12 7v5l3 2' stroke='%232c80b4' stroke-width='2' stroke-linecap='round' fill='none'/>\
</svg>") no-repeat center;

  background-size:contain;
}















.addBtnHome{
position:fixed;
bottom:70px;   /* deasupra meniului */
right:20px;

width:60px;
height:60px;

border-radius:50%;
border:none;

font-size:30px;
color:white;

background:#3498db;
box-shadow:0 4px 10px rgba(0,0,0,0.3);

cursor:pointer;
z-index:999;
}


.addBtnHome{
display:none;
}













.timeb{
  
font-weight:bold;
flex:1;
background:#efefef;
border-radius:8px;
padding:5px 12px;
font-size:18px;
text-align:center;
border:1px solid #d6d6d6;
margin-bottom:0px;
}
.programdel{
    margin-top:10px;
background:white;
border-radius:10px;
border:1px solid #ddd;
padding:10px;
}

.danger-zone{
margin-top:0px;
padding:5px;

text-align:center;
}

.danger-title{
color:#888;
font-size:13px;
margin-bottom:10px;
}

.danger-btn{
background:#e74c3c;
color:#fff;
border:none;
padding:10px 20px;
border-radius:8px;
cursor:pointer;
font-weight:bold;
opacity:0.85;
}

.danger-btn:hover{
opacity:1;
}




.popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-box{
background:#2c3e50;
padding:20px;
border-radius:12px;
text-align:center;
width:260px;
}

.popup-text{
color:#fff;
margin-bottom:15px;
}

.popup-buttons{
display:flex;
gap:10px;
}

.popup-buttons button{
flex:1;
padding:8px;
border:none;
border-radius:6px;
cursor:pointer;
}

.popup-buttons .danger{
background:#e74c3c;
color:#fff;
}

#toast{
display:none;
position:fixed;
top:120px;
left:50%;
transform:translate(-50%, -50%);
background:#2ecc71;
color:#fff;
padding:6px 12px;
border-radius:8px;
font-size:12px;
z-index:99999;
white-space:nowrap;
box-shadow:0 3px 8px rgba(0,0,0,0.2);
} 







.prog{
  background:#ddd;
  padding:4px 8px;
  border-radius:12px;
  color:black;
  font-weight:bold;
  font-size:13px;
}





.prog.active{
  background:#2ecc71; /* verde ON */
  color:white;

  box-shadow:0 0 8px rgba(46,204,113,0.8);
}
.buttonsWrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}


.extraPrograms{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  justify-content:center;
  margin-top:6px;
  max-width:100%;
}






.programtop{
background:white;
border-radius:10px;
padding:10px 0px 0px 0px;
}







#editingPreview .nodesRow{
  display:flex;
  justify-content:center;
  align-items:center;
}

#editingPreview .nodesLabel{
  font-size:20px;
  font-weight:700;
  text-align:center;
}
#editingPreview .nodesLabel{
  color:#2c3e50;
}
.program.editing.auto{
  border:2px solid #3498db;
  margin-bottom:0px;
}

.program.editing.event{
  border:2px solid #e67e22;
  margin-bottom:0px;
}












.title{
  position:relative;
}
.title{
font-size:18px;
margin-bottom:10px;
}


.nodeStatus{
  position:absolute;
  top:0px;
  right:0px;

  width:22px;
  height:22px;
font-weight:bold;
  border-radius:50%;
  background:#e0e0e0;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:18px;
  line-height:1;

  pointer-events:none;
}

.nodeStatus.ok{ color:#27ae60; font-weight:900;}
.nodeStatus.warn{ color:#f39c12; font-weight:900; }
.nodeStatus.off{ color:#e74c3c; font-weight:900; }






.box{
width:100%;
box-sizing:border-box;
border-radius:12px;
padding:9px;
text-align:center;




background:#7f8c8d;
color:white;
font-weight:bold;
box-shadow:0 4px 10px rgba(0,0,0,0.25);
}


.box{
  position:relative;
}

.nodeId{
  position:absolute;
  top:5px;
  left:7px;
  font-size:25px;
  font-weight:bold;
  background:#ffffff22;   /* 🔥 soft transparent */
  color:#fff;

  padding:2px 4px;       /* 🔥 mai aerisit */
  border-radius:10px;    /* 🔥 colțuri rotunjite */
  
  
  
  
  
  
}




.controlRow.relayOn{
  background:#1e8449;
}

.controlRow.relayOff{
  background:#7f8c8d;
}











.statTable{
  width:calc(100% - 20px);
  margin:0 10px;
  border-collapse:collapse;
  background:white;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
  table-layout:fixed;
}

.statTable th{
  background:#d8dee6;
  padding:6px 5px;
  font-size:14px;
  line-height:1.05;
  vertical-align:middle;
  text-align:center;
}

.statTable td{
  padding:4px 5px;
  border-bottom:1px solid #e0e0e0;
  font-size:15px;
  line-height:1.05;
  vertical-align:middle;
}

.statTable th:nth-child(1),
.statTable td:nth-child(1){
  width:42%;
  text-align:left;
}

.statTable th:nth-child(2),
.statTable td:nth-child(2){
  width:14%;
  text-align:center;
}

.statTable th:nth-child(3),
.statTable td:nth-child(3){
  width:14%;
  text-align:center;
}

.statTable th:nth-child(4),
.statTable td:nth-child(4){
  width:30%;
  text-align:center;
}

.statNodeName{
  font-weight:bold;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.statIcon{
  font-size:22px;
  font-weight:bold;
}

.statIcon.online{
  color:#00a000;
}

.statIcon.offline{
  color:#e60000;
}

.statIcon.warn{
  color:#f39c12;
}

.relayDot{
  display:inline-block;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#999;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,0.08);
}

.relayDot.on{
  background:#1e8449;
}

.relayDot.off{
  background:#999;
}

.progCell{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}

.progCircle{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:bold;
  background:#dfe6ee;
  color:#333;
}

.progCircle.active{
  background:#3498db;
  color:white;
}

.progCircle.manual{
  background:#f39c12;
  color:white;
}

.progCircle.empty{
  background:#d0d4da;
  color:#555;
}

.instCircle{
  width:28px;
  height:28px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:bold;
  background:#eef3f8;
  color:#222;
}

.lastUpdateRow{
  background:#d8dee6;
  padding:7px 10px !important;
  border-bottom:none !important;
  text-align:right !important;
  font-size:13px !important;
  font-weight:normal !important;
  color:#333;
}







































.activityBox{
  width:calc(100% - 20px);
  margin:14px 10px 0 10px;
  background:white;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

.dayBtns{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px;
}

.dayBtn{
  border:1px solid #ccd2d8;
  background:#fff;
  border-radius:6px;
  padding:6px 12px;
  font-size:13px;
  cursor:pointer;
  min-width:52px;
}

.dayBtn.active{
  background:#2c3e50;
  color:white;
}

.activityGrid{
  display:grid;
  grid-template-columns:44px 1fr;
  border-top:1px solid #e0e0e0;
}

.activityNodeCol{
  background:white;
  border-right:1px solid #e0e0e0;
  z-index:2;
}

.axisTopSpace{
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:12px;
}

.axisBottomSpace{
  height:28px;
}

.activityNodeLabel{
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
  font-size:14px;
  border-top:1px solid #e0e0e0;
}

.activityScroll{
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.timelineInner{
  position:relative;
}

.topAxis,
.bottomAxis{
  position:relative;
  height:30px;
  background:white;
}

.bottomAxis{
  height:28px;
}




.hourLabel{
  position:absolute;
  font-size:12px;
  font-weight:bold;
  white-space:nowrap;
  transform:translateX(-50%);
}
.topAxis .hourLabel{
  top:8px;
}

.bottomAxis .hourLabel{
  top:6px;
}

.activityRows{
  background-image:linear-gradient(
    to right,
    #f8f9fa 0,
    #f8f9fa 50%,
    #eef1f4 50%,
    #eef1f4 100%
  );
  background-size:calc(var(--hourW) * 2) 100%;
}

.activityTrackRow{
  height:25px;
  display:flex;
  align-items:center;
  border-top:1px solid #e0e0e0;
  padding:0;
}

.activityTrack{
  position:relative;
  width:100%;
  height:14px;
  border-radius:4px;
  background:#d8dde2;
  overflow:hidden;
}

.histSeg{
  position:absolute;
  top:0;
  height:100%;
  min-width:2px;
}

.histSeg.on{
  background:#6ac443;
}

.histSeg.manual{
  background:#f39c12;
}

.activityLegend{
  display:flex;
  gap:14px;
  align-items:center;
  padding:10px;
  font-size:13px;
  color:#444;
  flex-wrap:wrap;
  border-top:1px solid #e0e0e0;
}

.activityLegendItem{
  display:flex;
  align-items:center;
  gap:6px;
}

.activityLegendColor{
  width:18px;
  height:12px;
  border-radius:3px;
  display:inline-block;
}

.activityLegendColor.on{
  background:#6ac443;
}

.activityLegendColor.off{
  background:#d8dde2;
}

.activityLegendColor.manual{
  background:#f39c12;
}























.settingsBlock{
  margin:14px;
  background:#ffffff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}

.settingsHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  font-size:18px;
  font-weight:bold;
  cursor:pointer;
  background:#f5f5f5;
  color:#222;
}

#connectArrow{
  font-size:26px;
  line-height:1;
  transition:transform 0.2s ease;
}

#connectArrow.open{
  transform:rotate(90deg);
}

.connectMenu{
  display:none;
  padding:14px;
  background:#fff;
}

.connectMenu.open{
  display:block;
}

.connectStatus{
  background:#eef3f7;
  padding:12px;
  border-radius:10px;
  font-size:14px;
  line-height:1.6;
  margin-bottom:12px;
  color:#222;
}

.connectBtn{
  width:100%;
  border:none;
  border-radius:12px;
  padding:14px;
  margin-top:10px;
  font-size:16px;
  font-weight:bold;
  color:#fff;
  cursor:pointer;
}

.connectBtn.wifi{
  background:#3498db;
}

.connectBtn.bt{
  background:#8e44ad;
}

.connectBtn.reset{
  background:#e74c3c;
}

.settingsSelect{
  width:100%;
  padding:12px;
  margin-top:8px;
  border-radius:10px;
  border:1px solid #ccc;
  font-size:16px;
  box-sizing:border-box;
  background:white;
  color:#222;
}

















.controlRow.relayOn{
  background:#1e8449;
}

.controlRow.relayManualOn{
  background:transparent;
}

.controlRow.relayOff{
  background:transparent;
}



























.nodeTimeBox{
  margin:14px 10px 0 10px;
  background:white;
  border-radius:12px;
  padding:10px;
  box-sizing:border-box;
}

.statSubTitle{
  color:#111;
  font-size:16px;
  font-weight:bold;
  margin:0 0 10px 0;
}

.nodeTimeTable{
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  color:#111;
  font-size:14px;
}

.nodeTimeTable th,
.nodeTimeTable td{
  padding:8px;
  border-bottom:1px solid #e0e0e0;
  text-align:left;
}

.nodeTimeTable th{
  font-weight:bold;
}

.nodeTimeTable th:nth-child(1),
.nodeTimeTable td:nth-child(1){
  width:60%;
}

.nodeTimeTable th:nth-child(2),
.nodeTimeTable td:nth-child(2){
  width:25%;
  text-align:center;
}

.nodeTimeTable th:nth-child(3),
.nodeTimeTable td:nth-child(3){
  width:15%;
  text-align:center;
}

.nodeTimeTable td:first-child{
  font-weight:bold;
}




.nodeClock{
  font-size:12px;
  font-weight:bold;
  color:white;
  line-height:11px;
  margin-top:1px;
   margin-bottom:-5px;
}
















.bluetoothBox{
  margin-top:10px;
}

.btStatus{
  margin:10px 0;
  font-size:15px;
}

.btDeviceList{
  margin-top:10px;
}

.btDevice{
  background:#ecf0f1;
  border-radius:10px;
  padding:12px;
  margin-top:8px;
  font-weight:bold;
  cursor:pointer;
  transition:0.2s;
}

.btDevice:hover{
  background:#dfe6e9;
}














.wifiLocal{
  background:#16a085 !important;
  color:white !important;
}

.localWifiBox{
  margin-top:10px;
  background:#eef3f6;
  border-radius:12px;
  padding:12px;
}

.localInfo{
  font-size:15px;
  margin-bottom:8px;
}

.localInfo b{
  color:#111;
}

.localTestResult{
  margin-top:10px;
  font-weight:bold;
}







.auth-control {
  transition: opacity 0.2s ease;
}

body:not(.logged-in) .auth-control {
  opacity: 0.42;
  cursor: not-allowed !important;
  filter: grayscale(0.7);
  pointer-events: none !important;
  user-select: none;
}