:root{--forest-green:#164a41;--mid-green:#3b7d4b;--leaf-green:#6a925a;--tech-green:#8ba992;--accent:#f1b24a;--text:#474747;--bg:#ecece1;--white:#fff;--error-bg:#f47559;--sidebar-width:clamp(220px, 20vw, 272px);--sidebar-collapsed-width:68px;--sidebar-transition:width .3s cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--text);height:100dvh;font-family:system-ui,-apple-system,sans-serif;line-height:1.5;overflow:hidden}.login-wrapper{background:linear-gradient(180deg, var(--forest-green) 0%, var(--leaf-green) 100%);justify-content:center;align-items:center;height:100%;display:flex}.login-card{flex-direction:column;gap:1.5rem;width:320px;padding:2rem;display:flex}.login-card h1{font-size:1.2rem;font-weight:600}.logo-login{width:250px;height:auto;margin:0 auto;display:block}#login-form{flex-direction:column;gap:.75rem;display:flex}#login-form label{color:var(--white);flex-direction:column;gap:.25rem;font-size:.85rem;font-weight:500;display:flex}#login-form input{border:1px solid #ccc;border-radius:16px;padding:.4rem .6rem;font-size:.95rem}#login-form button{background:var(--accent);color:var(--white);cursor:pointer;border:none;border-radius:16px;margin-top:.25rem;padding:.5rem;font-size:.95rem}#login-form button:hover{background:var(--white);color:var(--leaf-green)}.login-error{color:#dc2626;min-height:1em;font-size:.8rem}.app-layout{gap:.75rem;height:100%;padding:.75rem;display:flex}.sidebar{width:var(--sidebar-width);background:linear-gradient(180deg, var(--forest-green) 0%, var(--leaf-green) 100%);color:var(--white);transition:var(--sidebar-transition);border-radius:1rem;flex-direction:column;flex-shrink:0;justify-content:space-between;padding:1.5rem 1.25rem;display:flex;position:relative}.sidebar-top{flex-direction:column;gap:1.5rem;min-width:0;display:flex;overflow:hidden}.sidebar-bottom{flex-direction:column;gap:1rem;min-width:0;display:flex;overflow:hidden}.brand{flex-shrink:0;justify-content:center;display:flex}.logo-full{width:auto;height:30px;display:block}.logo-mark{width:auto;height:30px;display:none}.sidebar-nav{flex-direction:column;gap:.25rem;display:flex}.nav-item{color:#ffffffd9;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;border-radius:.5rem;justify-content:space-between;align-items:center;padding:.65rem .6rem;font-size:.9rem;text-decoration:none;transition:background .15s;display:flex}.nav-item:hover{color:var(--white);background:#ffffff1a}.nav-item.active{color:var(--white);background:#ffffff2e;font-weight:600}.nav-left{align-items:center;gap:.75rem;min-width:0;display:flex}.nav-item svg:not(.nav-arrow){flex-shrink:0;width:18px;height:18px}.nav-label{text-overflow:ellipsis;transition:opacity .2s;overflow:hidden}.nav-arrow{opacity:.7;flex-shrink:0;width:16px;height:16px;transition:transform .25s}.nav-arrow.open{transform:rotate(90deg)}.submenu{flex-direction:column;gap:.15rem;margin-top:.15rem;margin-left:2.25rem;display:none}.submenu.open{display:flex}.submenu-item,.submenu-loading{color:#fffc;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:.375rem;padding:.35rem .5rem;font-size:.85rem;text-decoration:none;overflow:hidden}.submenu-item:hover{color:var(--white);background:#ffffff14}.submenu-loading{cursor:default;font-style:italic}.user-block{align-items:center;gap:.75rem;min-width:0;display:flex}.avatar{background:#fff3;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1rem;font-weight:700;display:flex}.user-name{white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:600;overflow:hidden}.sidebar-links{flex-direction:column;gap:.15rem;display:flex}.sidebar-link{color:#fffc;cursor:pointer;white-space:nowrap;text-align:left;background:0 0;border:none;border-radius:.5rem;align-items:center;gap:.75rem;width:100%;padding:.55rem .6rem;font-size:.875rem;text-decoration:none;transition:background .15s;display:flex}.sidebar-link svg{flex-shrink:0;width:17px;height:17px}.sidebar-link:hover{color:var(--white);background:#ffffff1a}.sidebar-link.active{color:var(--white);font-weight:600}.logout-link{color:#f87171}.logout-link:hover{color:#fca5a5;background:#f8717126}.sidebar-toggle{background:var(--accent);cursor:pointer;z-index:10;border:none;border-radius:6px;justify-content:center;align-items:center;width:26px;height:26px;padding:0;display:flex;position:absolute;top:50%;right:-13px;transform:translateY(-50%);box-shadow:0 2px 8px #0003}.toggle-icon{width:14px;height:14px;color:var(--white);flex-shrink:0;transition:transform .3s}.sidebar.collapsed{width:var(--sidebar-collapsed-width);align-items:center;padding-left:0;padding-right:0}.sidebar.collapsed .sidebar-top,.sidebar.collapsed .sidebar-bottom{align-items:center;width:100%}.sidebar.collapsed .logo-full{display:none}.sidebar.collapsed .logo-mark{display:block}.sidebar.collapsed .nav-item{justify-content:center;width:100%;padding:.65rem}.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-arrow,.sidebar.collapsed .submenu,.sidebar.collapsed .user-name{display:none}.sidebar.collapsed .nav-left{gap:0}.sidebar.collapsed .user-block{justify-content:center}.sidebar.collapsed .sidebar-link{justify-content:center;padding:.55rem}.sidebar.collapsed .toggle-icon{transform:rotate(180deg)}.page-content{flex:1;min-width:0;overflow:auto}.charts-page{grid-template-rows:auto 1fr;gap:1rem;height:100%;padding:1rem 1rem 0;display:grid}.controls{align-items:flex-start;gap:1.5rem;display:flex}.multi-select{flex-direction:column;gap:.25rem;min-width:220px;display:flex;position:relative}.multi-select-label{color:var(--text);-webkit-user-select:none;user-select:none;font-size:.85rem;font-weight:500}.multi-select-label small{color:#888;margin-left:.25rem;font-weight:400}.multi-select-button{background:var(--white);color:var(--text);cursor:pointer;text-align:left;border:1px solid #ccc;border-radius:4px;justify-content:space-between;align-items:center;gap:.5rem;padding:.4rem .6rem;font-family:inherit;font-size:.9rem;font-weight:500;display:flex}.multi-select-button:disabled{opacity:.55;cursor:not-allowed}.multi-select-text{white-space:nowrap;text-overflow:ellipsis;flex:1;overflow:hidden}.multi-select-arrow{flex-shrink:0;width:12px;height:12px;transition:transform .2s}.multi-select-button[aria-expanded=true] .multi-select-arrow{transform:rotate(180deg)}.multi-select-panel{background:var(--white);z-index:1000;border:1px solid #ccc;border-radius:4px;max-height:240px;padding:.25rem;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;box-shadow:0 4px 12px #00000014}.multi-select-option{cursor:pointer;color:var(--text);border-radius:3px;align-items:center;gap:.5rem;padding:.4rem .5rem;font-size:.9rem;font-weight:500;display:flex}.multi-select-option:hover{background:#0000000a}.multi-select-option[hidden]{display:none}.multi-select-option input[type=checkbox]{cursor:pointer;accent-color:var(--leaf-green);margin:0}.multi-select-option input[type=checkbox]:disabled{cursor:not-allowed}.multi-select-option input[type=checkbox]:disabled+span{opacity:.4}.multi-select-empty{color:#999;padding:.5rem;font-size:.85rem;font-style:italic}#chart-container{background:var(--white);border:1px solid #e0e0e0;border-radius:16px;overflow:hidden}.hint{color:#888;justify-content:center;align-items:center;height:100%;font-size:.9rem;display:flex}.hint.error{color:#dc2626}.overview-page{background:var(--forest-green);border-radius:1rem;flex-direction:column;gap:2.5rem;height:100%;margin-left:.75rem;padding:1.5rem 2rem;display:flex;overflow-y:auto}.overview-toolbar{flex-shrink:0;justify-content:flex-end;align-items:center;display:flex}.tile-slider{appearance:none;cursor:pointer;background:#fff3;border-radius:99px;outline:none;width:120px;height:4px}.tile-slider::-webkit-slider-thumb{appearance:none;background:var(--white);cursor:pointer;border-radius:50%;width:14px;height:14px}.tile-slider::-moz-range-thumb{background:var(--white);cursor:pointer;border:none;border-radius:50%;width:14px;height:14px}.site-group{flex-direction:column;gap:1rem;display:flex}.site-name{color:var(--white);letter-spacing:.01em;font-size:1.05rem;font-weight:600}.device-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;display:grid}.device-card{aspect-ratio:1;cursor:pointer;border-radius:.75rem;flex-direction:column;gap:.25rem;padding:1rem;transition:filter .15s;display:flex}.device-card:hover{filter:brightness(1.1)}.device-card--ok{background:var(--leaf-green)}.device-card--alert{background:var(--accent)}.device-card--delayed,.device-card--error{background:var(--error-bg)}.device-serial{color:var(--white);font-size:.85rem;font-weight:700}.device-type{color:#ffffffbf;font-size:.75rem}.device-message{font-size:.8rem}.device-message--ok{color:var(--white)}.device-message--alert{color:var(--accent)}.device-message--delayed,.device-message--error{color:#fff}.device-bars{flex-direction:column;gap:.2rem;margin-top:auto;display:flex}.device-bar-label{color:#fff;margin-top:.3rem;font-size:.65rem;line-height:1.2}.device-bar-track{background:#ffffff4d;border-radius:99px;height:5px;overflow:hidden}.device-bar{border-radius:99px;height:100%;transition:width .3s}.device-bar--time,.device-bar--battery{background:#fff}.device-bar--unknown{background:#fff3}.overview-empty{color:#ffffff80;font-size:.9rem}.devices-page{flex-direction:column;gap:.75rem;height:100%;min-height:0;padding:1rem 1rem 0;display:flex;overflow:hidden}.devices-top-card{background:var(--white);border-radius:.875rem;justify-content:space-between;align-items:center;gap:1rem;padding:1.75rem;display:flex}.devices-left{flex-direction:column;gap:.375rem;display:flex}.devices-location{color:#6b6b6b;align-items:center;gap:.75rem;font-size:.95rem;display:flex}.devices-location-arrow{font-size:.9rem}.devices-title{color:var(--text);margin:0;font-size:1.75rem;font-weight:800}.devices-sub{color:#6b6b6b;margin-top:.375rem;font-size:.95rem;text-decoration:none}.data-list{background:var(--white);border-radius:.875rem;flex:1;min-height:0;padding:0 1.125rem 1.125rem;overflow-y:auto}.list-row{border-bottom:1px solid #0000000a;grid-template-columns:80px 220px 160px 220px 1fr;align-items:center;gap:.75rem;padding:.875rem .625rem;display:grid}.list-row.header-row{background:var(--white);z-index:1;border-bottom:1px solid #0000000f;padding-top:1.125rem;position:sticky;top:0}.list-header{color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.375rem;padding-bottom:.375rem;font-weight:800;display:flex}.list-header.tag-header{cursor:default}.cell{color:var(--text);font-weight:700}.cell.empty{color:#9a9a9a;font-weight:600}.status-dot{border-radius:50%;width:14px;height:14px;display:inline-block}.status-dot--active{background:var(--leaf-green)}.status-dot--inactive{background:var(--accent)}.status-dot--under_maintenance{background:var(--error-bg)}.sort-arrow{width:28px;height:28px;color:var(--text);background:#0000000a;border-radius:6px;justify-content:center;align-items:center;font-size:14px;display:inline-flex}.sort-arrow.active{color:var(--accent)}.tag-pill{color:var(--text);border:1px solid #0000000f;border-radius:999px;padding:.375rem .625rem;font-weight:700;display:inline-block}.search.tag-search{background:0 0;border:1px solid #474747;border-radius:1.25rem;align-items:center;gap:.5rem;width:220px;padding:2px 8px;display:inline-flex}.search.tag-search input{width:100%;color:var(--text);background:0 0;border:none;border-radius:2rem;outline:none;padding:.5rem .75rem;font-size:.875rem;font-weight:700}@media (width<=960px){.list-row{grid-template-columns:60px 1fr;grid-template-areas:"status serial""battery geo""tag tag";grid-auto-rows:auto;gap:.5rem}.list-row>.cell:first-child{grid-area:status}.list-row>.cell:nth-child(2){grid-area:serial}.list-row>.cell:nth-child(3){grid-area:battery}.list-row>.cell:nth-child(4){grid-area:geo}.list-row>.cell:nth-child(5){grid-area:tag}}.map-page{flex-direction:column;gap:.75rem;height:100%;min-height:0;padding:1rem 1rem 0;display:flex}.map-top-card{background:var(--white);border-radius:.875rem;justify-content:space-between;align-items:center;gap:1rem;padding:1.75rem;display:flex}.map-left{flex-direction:column;gap:.375rem;display:flex}.map-location{color:#6b6b6b;align-items:center;gap:.75rem;font-size:.95rem;display:flex}.map-location-arrow{font-size:.9rem}.map-title{color:var(--text);margin:0;font-size:1.75rem;font-weight:800}.map-sub{color:#6b6b6b;margin-top:.375rem;font-size:.95rem;text-decoration:none}.map-area{background:var(--white);border-radius:.875rem;flex:1;min-height:0;position:relative;overflow:hidden}.map-area .leaflet-container{background:var(--white);width:100%;height:100%}.map-marker-dot{background:var(--accent);border:2px solid var(--white);border-radius:50%;box-shadow:0 0 0 1px #00000040}.map-marker-dot--ok{background:var(--leaf-green)}.map-marker-dot--alert{background:var(--accent)}.map-marker-dot--delayed,.map-marker-dot--error{background:var(--error-bg)}.leaflet-popup.device-popup{pointer-events:none}.leaflet-popup.device-popup .leaflet-popup-content-wrapper{background:var(--white);color:var(--text);border:1px solid #e0e0e0;border-radius:.625rem;padding:0;box-shadow:0 4px 16px #0000001f}.leaflet-popup.device-popup .leaflet-popup-content{margin:.75rem;font-family:inherit;line-height:1.2}.leaflet-popup.device-popup .leaflet-popup-tip{background:var(--white);box-shadow:0 4px 16px #0000001f}.device-tooltip-grid{grid-template-columns:1fr 1fr;gap:.5rem 1.25rem;min-width:240px;display:grid}.device-tooltip-cell{flex-direction:column;gap:.1rem;line-height:1.2;display:flex}.device-tooltip-title{color:#888;text-transform:uppercase;letter-spacing:.03em;font-size:.7rem;font-weight:500}.device-tooltip-value{color:var(--text);font-size:.9rem;font-weight:700}.page-placeholder{color:#888;justify-content:center;align-items:center;height:100%;font-size:.9rem;display:flex}