:root{
 --bg:#070b0a;
 --bgh:#12231c;
 --panel:#ffffff7a;
 --panel2:#ffffff7a;
 --border:#284638;
 --text:#1aa100;
 --black_text:#4c4f4d;
 --muted:#8ca99a;
 --green:#39ff88;
 --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

html,body{
 height:100dvh;
 overflow:hidden;
 background:var(--bg);
 color:var(--text);
 font-family:"Segoe UI",system-ui,sans-serif;
}

header{
 height:60px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0 18px;
 background:linear-gradient(135deg,#102019,#07100c);
 border-bottom:1px solid var(--border);
}

.logo{
 font-size:21px;
 font-weight:700;
}

.top-right{
 display:flex;
 align-items:center;
 gap:12px;
}

.status{
 color:var(--muted);
 font-size:13px;
}

.refresh-btn,.menu-btn{
 background:#102019;
 color:var(--text);
 border:1px solid var(--border);
 border-radius:3px;
 padding:8px 14px;
 cursor:pointer;
}

.menu-btn{
 display:none;
 font-size:22px;
 color:var(--green);
}

.main{
 height:calc(100dvh - 100px);
 position:relative;
}

#map{
 height:100%;
 width:100%;
}


.sidebar{
 position:absolute;
 left:0;
 top:0;
 bottom:0;
 width:330px;
 background:var(--panel);
 border-right:1px solid var(--border);
 z-index:1000;
 overflow:auto;
}

/* ==========================
   DEVICE LIST
   ========================== */

.device{
    margin:6px 8px;
    padding:10px;
    background:#101c17;
    border:1px solid var(--border);
    border-radius:4px;
    cursor:pointer;
    transition:.15s;
}

.device:hover{
    border-color:#3a6b52;
    background:var(--bgh);
}

.device.active{
    border-color:var(--green);
    background:#16291f;
}


.device-title{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-weight:600;
    margin-bottom:6px;
}


.device-title small{
    color:var(--muted);
    font-size:11px;
    font-weight:400;
}


.device-info{
    display:flex;
    gap:12px;
    color:var(--muted);
    font-size:12px;
    white-space:nowrap;
}


/* ==========================
   INFO PANEL NA MAPIE
   ========================== */

.device-header{
    display:flex;
    align-items:center;
    padding:10px;
    border-bottom:1px solid var(--border);
}

.device-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:10px;
    font-size:16px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:4px;
}

.device-name{
    font-size:14px;
    font-weight:600;
}

.device-status{
    margin-top:2px;
    font-size:11px;
    color:var(--muted);
}

.device-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:5px;
    padding:8px;
}

.device-details{
    flex:1;
}

.info-panel{
    position:absolute;
    left:5px;
    top:5px;
    width:319px;
    background:rgba(13,23,19,.05);
    border:1px solid var(--border);
    border-radius:3px;
    z-index:1000;
    box-shadow:var(--shadow);
    backdrop-filter:blur(10px);
    overflow:hidden;
}

.info-box{
    background:var(--panel2);
    border:1px solid var(--border);
    border-radius:3px;
    padding:8px;
    text-align:center;
}

.info-box span{
    display:block;
    font-size:14px;
    margin-bottom:2px;
}

.info-box b{
    display: block;
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 0 8px rgba(110,231,168,.25);
}

.info-box small{
    color:var(--black_text);
    font-size:14px;
}

.panel-toggle{
    width:32px;
    height:32px;
    border:none;
    border-radius:3px;
    background:var(--bg);
    color:var(--green);
    cursor:pointer;
    font-size:16px;
    transition:.2s;
}

.panel-toggle:hover{
    background:var(--bgh);
}

.info-panel.collapsed .device-grid{
    display:none;
}

.search-box{
 padding:12px;
}

.search-box input{
 width:100%;
 padding:12px;
 background:#07100c;
 color:white;
 border:1px solid var(--border);
 border-radius:3px;
}

#error-banner{
 position:absolute;
 top:70px;
 left:50%;
 transform:translateX(-50%);
 z-index:2000;
 display:none;
 padding:10px 15px;
 background:#3a1414;
 color:#ffaaaa;
 border-radius:3px;
}

footer{
 height:40px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:0 15px;
 background:var(--bg);
 border-top:1px solid var(--border);
 color:var(--muted);
 font-size:12px;
}

@media(max-width:900px){

 header{
  height:55px;
 }

 .menu-btn{
  display:block;
 }

 .sidebar{
  left:-330px;
  transition:.3s;
  box-shadow:10px 0 30px rgba(0,0,0,.5);
 }

 .sidebar.open{
  left:0;
 }

 .status{
  display:none;
 }

}

/* ==========================
   LEAFLET ZOOM BUTTONS
   ========================== */

.leaflet-control-zoom {
    border: none !important;
    box-shadow:
        0 6px 20px rgba(0,0,0,.45);

}


.leaflet-touch .leaflet-bar,
.leaflet-touch .leaflet-control-layers {
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow:hidden;
    background: var(--panel);

}


.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-control-layers-toggle {
    background:
        linear-gradient(
            135deg,
            #102019,
            #07100c
        );

    color: var(--green);
    border-bottom:1px solid var(--border);
    width:42px;
    height:42px;
    line-height:42px;
    font-size:24px;
    font-weight:600;
    transition:.2s;

}


.leaflet-touch .leaflet-bar a:hover,
.leaflet-touch .leaflet-control-layers-toggle:hover {
    background:var(--bgh);
    color:white;

}


.leaflet-touch .leaflet-bar a:last-child {
    border-bottom:none;

}


/* położenie - pasuje do telefonu */

.leaflet-top.leaflet-right {
    margin-top:15px;
    margin-left:15px;

}

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0d1713;
}

::-webkit-scrollbar-thumb{
    background:#284638;
    border-radius:3px;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--bgh);
}

/* ==================================================
   OŚ CZASU
   ================================================== */

.timeline-panel{
    position:absolute;
    left:340px;
    right:10px;
    bottom:10px;
    height:168px;
    z-index:1100;

    background:rgba(7,16,12,.94);
    border:1px solid var(--border);
    border-radius:4px;
    box-shadow:0 10px 35px rgba(0,0,0,.55);
    backdrop-filter:blur(12px);

    overflow:hidden;
    transition:
        height .22s ease,
        left .22s ease,
        right .22s ease;
}

.timeline-panel.collapsed{
    height:43px;
}

.timeline-header{
    height:43px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 8px 0 13px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(135deg,#102019,#07100c);
}

.timeline-title{
    min-width:0;
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text);
    font-size:13px;
    font-weight:600;
}

.timeline-title > span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.timeline-icon{
    color:var(--green);
    font-size:18px;
}

.timeline-actions{
    display:flex;
    align-items:center;
    gap:4px;
    flex-shrink:0;
}

.timeline-preset,
.timeline-toggle,
.timeline-reset{
    height:29px;
    border:1px solid var(--border);
    border-radius:3px;
    background:#0d1914;
    color:var(--muted);
    cursor:pointer;
    font-size:11px;
    transition:.15s;
}

.timeline-preset{
    padding:0 9px;
}

.timeline-preset:hover,
.timeline-preset.active,
.timeline-toggle:hover,
.timeline-reset:hover{
    color:var(--green);
    border-color:#3a6b52;
    background:var(--bgh);
}

.timeline-toggle{
    width:31px;
    margin-left:5px;
    color:var(--green);
    font-size:14px;
}

.timeline-body{
    padding:9px 15px 7px;
}

.timeline-info{
    display:grid;
    grid-template-columns:130px 1fr 130px;
    align-items:center;
    color:var(--muted);
    font-size:11px;
}

.timeline-info span:nth-child(2){
    text-align:center;
    color:var(--green);
}

.timeline-info span:last-child{
    text-align:right;
}

.timeline-slider-wrap{
    position:relative;
    height:40px;
    margin:1px 5px 0;
}

.timeline-line,
.timeline-selected{
    position:absolute;
    top:18px;
    height:5px;
    border-radius:5px;
}

.timeline-line{
    left:0;
    right:0;
    background:#1b3027;
    border:1px solid #284638;
}

.timeline-selected{
    left:0;
    right:0;
    background:linear-gradient(90deg,#1aa100,#39ff88);
    box-shadow:0 0 9px rgba(57,255,136,.25);
}

.timeline-range{
    position:absolute;
    left:-5px;
    top:4px;
    width:calc(100% + 10px);
    height:31px;
    margin:0;
    background:transparent;
    pointer-events:none;
    appearance:none;
    -webkit-appearance:none;
}

.timeline-range::-webkit-slider-runnable-track{
    height:5px;
    background:transparent;
}

.timeline-range::-moz-range-track{
    height:5px;
    background:transparent;
}

.timeline-range::-webkit-slider-thumb{
    appearance:none;
    -webkit-appearance:none;
    width:16px;
    height:16px;
    margin-top:-5.5px;
    border-radius:50%;
    background:var(--green);
    border:2px solid #07100c;
    box-shadow:0 0 0 1px #3a6b52, 0 0 10px rgba(57,255,136,.35);
    pointer-events:auto;
    cursor:ew-resize;
}

.timeline-range::-moz-range-thumb{
    width:16px;
    height:16px;
    border-radius:50%;
    background:var(--green);
    border:2px solid #07100c;
    box-shadow:0 0 0 1px #3a6b52, 0 0 10px rgba(57,255,136,.35);
    pointer-events:auto;
    cursor:ew-resize;
}

.timeline-ticks{
    display:flex;
    justify-content:space-between;
    padding:0 2px;
    color:#547064;
    font-size:9px;
}

.timeline-status{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
}

.timeline-reset{
    height:24px;
    padding:0 9px;
}

.timeline-cursor-marker{

    position:absolute;
    top:8px;
    width:2px;
    height:24px;

    background:#ffcc00;

    left:0%;
    z-index:20;

    box-shadow:
        0 0 10px #ffcc00;
}

.cursor-range::-webkit-slider-thumb{

    background:#ffcc00 !important;
}

.timeline-controls{

    display:flex;
    gap:6px;

    margin-top:6px;

    justify-content:center;
}

.timeline-controls button{

    background:#102019;

    border:1px solid #284638;

    color:#39ff88;

    padding:5px 12px;

    cursor:pointer;

    border-radius:3px;
}

.timeline-stats{

    margin-top:8px;

    text-align:center;

    color:#9fb5a7;

    font-size:11px;
}
@media(max-width:900px){
    .timeline-panel{
        left:5px;
        right:5px;
        bottom:5px;
        height:180px;
    }

    .timeline-panel.collapsed{
        height:43px;
    }

    .timeline-actions{
        gap:2px;
    }

    .timeline-preset{
        padding:0 6px;
    }

    .timeline-info{
        grid-template-columns:95px 1fr 95px;
    }
}

@media(max-width:600px){
    .timeline-preset[data-hours="168"]{
        display:none;
    }

    .timeline-title{
        max-width:43%;
    }

    .timeline-body{
        padding-left:10px;
        padding-right:10px;
    }
}