:root{color-scheme:light;--bg:#f7f9fc;--panel:#fff;--text:#23343d;--muted:#61727c;--line:#dae3ea;--primary:#165b73;--onprimary:#fff;--surface:#edf3f6;--teal:#0d827f;--rust:#bc7c24;--info:#d5edf5;--shadow:0 2px 14px #243e4b0b;font-family:Roboto,"Segoe UI",Arial,sans-serif;font-size:15px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}.layout{min-height:100vh;display:grid;grid-template-columns:250px minmax(0,1fr)}.sidebar{background:var(--panel);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:29px}.brand{display:flex;gap:10px;align-items:center;padding:6px 8px}.brand img{width:37px;height:37px}.brand strong{font-size:16px;display:block}.brand small{color:var(--muted);display:block;margin-top:3px}.sidebar nav{display:grid;gap:5px}.navlink{background:transparent;border:0;border-radius:12px;display:flex;gap:12px;align-items:center;padding:13px 16px;font-size:14px;color:var(--text);font-weight:600;text-align:left;cursor:pointer}.navlink:hover,.navlink.active{background:var(--surface);color:var(--primary)}.symbol{font-size:21px;font-weight:400;width:23px;text-align:center}.sidebar-bottom{margin-top:auto;padding:15px;font-size:12px;color:var(--muted);line-height:1.8}.dot{display:inline-block;width:9px;height:9px;background:#2ca39e;border-radius:50%;margin-right:5px}.sidebar-bottom small{padding-left:18px}.page{min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;padding:25px clamp(18px,4vw,40px) 13px;gap:15px}.topbar h1{margin:0;font-size:25px;letter-spacing:-.5px}.topbar p{margin:7px 0 0;font-size:13px;color:var(--muted)}.topactions{display:flex;align-items:center;gap:10px}.chip,.badge,.userpill{border-radius:99px;padding:7px 11px;background:var(--surface);color:var(--primary);font-size:12px;font-weight:700;white-space:nowrap}.badge.info{background:var(--info);color:#135270}.badge.neutral{background:var(--surface);color:var(--muted)}.iconbutton{border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:9px 13px;color:var(--text);cursor:pointer}.notice{margin:0 clamp(18px,4vw,40px) 12px;background:var(--surface);padding:11px 15px;border-radius:12px;font-size:13px;color:var(--muted)}.notice.error{background:#fae3de;color:#8d271e}.notice.success{background:#def0e8;color:#215c45}main{padding:0 clamp(18px,4vw,40px) 40px;max-width:1500px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:22px;margin-bottom:20px;box-shadow:var(--shadow);min-width:0}.panel h2{font-size:17px;margin:0 0 8px}.panel h3{font-size:15px}.panel p{margin:6px 0 15px}.panelheader{display:flex;justify-content:space-between;gap:14px;align-items:start;margin-bottom:13px}.panelheader p{color:var(--muted);font-size:13px;margin:4px 0 0}.fields{display:flex;align-items:end;flex-wrap:wrap;gap:11px}.fields label{flex:1 1 142px}.authfields label:first-child{flex:2 1 250px}.fields label,section label{color:var(--text);font-size:12px;font-weight:600;display:block}.fields input,.fields select,.panel input,.panel select{margin-top:7px;width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:11px 10px;font-size:13px;min-height:42px;max-width:100%}button.primary,button.secondary{border:0;border-radius:11px;padding:12px 18px;font-size:13px;font-weight:650;cursor:pointer;min-height:42px}button.primary{background:var(--primary);color:var(--onprimary)}button.secondary{background:var(--surface);color:var(--primary)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #40a9ca;outline-offset:2px}.small{font-size:12px!important}.muted{color:var(--muted)!important}.tab{display:none}.tab.active{display:block}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:18px}.metric{border:1px solid var(--line);border-radius:17px;background:var(--panel);padding:19px;min-width:0}.metric small{font-size:12px;color:var(--muted);display:block}.metric strong{display:block;font-size:26px;margin:8px 0;line-height:1.15}.metric span{font-size:11px;color:var(--muted)}.table-scroller{overflow:auto;max-height:440px}table{border-collapse:collapse;width:100%;font-size:12px;white-space:nowrap}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);font-weight:600;background:var(--panel);position:sticky;top:0}tr:hover td{background:var(--surface)}tr.clickable{cursor:pointer}.chartwrap{min-height:245px;width:100%;overflow:auto;padding:6px 0}.chartwrap.empty{color:var(--muted);display:flex;align-items:center;justify-content:center}.chartwrap svg{min-width:620px;display:block;width:100%;height:auto}.chartpoint{cursor:pointer;stroke:var(--panel);stroke-width:2;fill:#257dac}.chartpoint:focus{outline:none;stroke:#ffad42;stroke-width:3}.chartpoint:hover{r:6}.chartpoint.invalid{fill:#c4cbd0}.charttick{fill:var(--muted);font-size:11px}.gridline{stroke:var(--line);stroke-dasharray:3 5}.legend{display:flex;flex-wrap:wrap;gap:18px;font-size:12px;color:var(--muted)}.legendmark{width:13px;height:3px;display:inline-block;vertical-align:middle;margin-right:6px;background:#257dac}.legendmark.rust{background:#bc7c24}.legendmark.teal{background:#15857c}.codeblock{max-height:460px;overflow:auto;padding:15px;background:var(--surface);border-radius:11px;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--text);font-size:12px}.refreshstate{font-size:12px;color:var(--muted)}.switchline{display:flex;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:18px 5px;align-items:center}.switchline strong{font-size:14px}.switchline p{font-size:12px;color:var(--muted);margin:5px 0 0}.switchline input{width:130px!important;flex:none}.mapbox{height:400px;margin-top:15px;background:var(--surface);border-radius:14px;overflow:hidden;display:flex;justify-content:center;align-items:center;color:var(--muted)}.mapbox iframe{width:100%;height:100%;border:0}.popup-backdrop{position:fixed;inset:0;z-index:20;background:#10242b70;display:flex;align-items:center;justify-content:center;padding:15px}.popup-backdrop.hidden{display:none}.popup{position:relative;background:var(--panel);color:var(--text);border-radius:20px;max-width:480px;width:100%;padding:26px;box-shadow:0 14px 40px #0003}.popup h2{margin:0 0 14px}.popup dl{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0}.popup dt{font-size:12px;color:var(--muted);margin:4px 0}.popup dd{font-size:14px;font-weight:700;margin:0 0 7px}.popup-close{position:absolute;top:12px;right:12px;border:none;background:var(--surface);color:var(--text);border-radius:50%;font-size:20px;width:33px;height:33px;cursor:pointer}footer{padding:7px 40px 25px;color:var(--muted);font-size:11px}.mobile-only{display:none}body.dark{color-scheme:dark;--bg:#10191d;--panel:#1c2b31;--text:#e3edf0;--muted:#a4b7bd;--line:#34474f;--primary:#9fd7ea;--onprimary:#103849;--surface:#263c45;--info:#234754;--shadow:none}.dark .brand strong{color:var(--text)}.dark button.primary{background:#8bcfdf;color:#0c3648}.dark .notice.error{background:#602c2c;color:#ffe3dd}.dark .notice.success{background:#26493f;color:#cff7e8}@media(max-width:1080px){.layout{grid-template-columns:206px minmax(0,1fr)}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar{padding:17px 8px}}@media(max-width:730px){.layout{display:block}.sidebar{display:none;position:fixed;z-index:12;top:0;bottom:0;width:255px;box-shadow:0 8px 30px #0003}.sidebar.open{display:flex}.mobile-only{display:inline-block}.topbar{padding-top:20px}.topbar h1{font-size:19px}.userpill{display:none}.topactions{gap:5px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:15px}.metric{padding:14px}.metric strong{font-size:22px}footer{padding-left:18px}.popup dl{grid-template-columns:1fr 1fr}}@media(max-width:420px){.metrics{grid-template-columns:1fr 1fr}.fields label{flex-basis:100%}.panelheader{flex-wrap:wrap}}

.doccards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:18px 0}.methoddoc{padding:18px;border:1px solid var(--border,#cbd5e1);border-radius:14px;background:var(--panel,#fff)}.methoddoc li{margin:.35rem 0}.contract-toggle{display:flex;gap:12px;align-items:center;padding:16px;margin:12px 0;border:1px solid #93a5b4;border-radius:12px}.contract-toggle input{width:20px;height:20px;accent-color:#156b82}.methoddoc ul{padding-left:20px}

/* Kommunikation: kompakte Nachrichteneingabe und mobile Empfängerliste */
#messages label, #supportBackdrop label { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
#messages textarea, #supportBackdrop textarea { width:100%; min-height:96px; padding:10px; border-radius:10px; border:1px solid var(--border, #bac6cc); background:var(--surface, #fff); color:inherit; font:inherit; }
#messages input[type=checkbox] { width:18px; height:18px; }
#supportBackdrop .popup {max-width:550px; max-height:92vh; overflow-y:auto;}
@media (max-width:650px){#supportButton{font-size:12px;padding:8px 10px;}#messages .table-scroller{overflow-x:auto;}}

/* Admin report selection and preview */
.report-user-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px;margin:12px 0 18px;max-height:360px;overflow:auto}
.report-user{display:flex!important;align-items:flex-start;gap:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;min-width:0}
.report-user input[type=checkbox]{width:18px!important;height:18px;min-height:18px;flex:none;margin:2px 0 0;accent-color:var(--teal)}
.report-user span{display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere}
.report-user small{font-size:11px;color:var(--muted);font-weight:400}
.report-filters{margin-bottom:14px}
.report-preview{margin-top:12px}
.report-preview table{white-space:normal;min-width:620px}
.report-preview td details{margin-top:5px;font-size:11px;color:var(--muted)}
.report-preview td summary{cursor:pointer;color:var(--primary)}
#reportIntegrationStatus{margin:12px 0 16px}
button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:650px){.report-user-list{grid-template-columns:1fr}.report-preview .table-scroller{overflow-x:auto}}

/* Dragino LSN50V2 interval controls */
#lorawan .notice{margin:12px 0 15px;padding:12px 14px;border-radius:11px}
#lorawan .notice.success{background:#def0e8;color:#215c45}
#lorawan .fields{margin:12px 0}
#lorawanDeviceList input[type=checkbox]{width:18px;height:18px;min-height:18px;margin:0;accent-color:var(--primary)}
#lorawanDeviceList table,#lorawanPayloadTable table,#lorawanRecent table{white-space:normal;min-width:720px}
#lorawanRules table{min-width:570px}
#lorawanRules select{margin:0;min-width:120px}
#lorawanRules button{padding:8px 11px;min-height:34px}
#lorawan code{background:var(--surface);padding:3px 6px;border-radius:5px;overflow-wrap:anywhere}
#lorawanPayloadPreview{overflow-wrap:anywhere}

/* Secure integration settings */
#integrations .fields{margin:12px 0}
#integrations .notice{margin:10px 0 15px;padding:12px 14px;border-radius:11px;overflow-wrap:anywhere}
#integrations .checkboxlabel{display:flex;align-items:center;gap:8px;flex:1 1 190px;padding:8px 4px}
#integrations .checkboxlabel input[type=checkbox]{width:18px;min-height:18px;height:18px;margin:0;flex:none;accent-color:var(--primary)}
#integrations .switchline input[type=checkbox]{width:22px!important;height:22px;min-height:22px;accent-color:var(--primary)}
#integrations code{background:var(--surface);padding:3px 6px;border-radius:5px;overflow-wrap:anywhere}


/* Role-preview control and road-priority test view */
.preview-control{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:700;color:var(--muted);min-width:150px;}
.preview-control select{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:9px;padding:8px 10px;min-height:36px;max-width:180px;font-size:12px;}
.role-preview-notice{border:1px solid var(--line);background:var(--surface);overflow-wrap:anywhere;}
#priorities .notice{margin:12px 0;padding:11px 14px;}
#priorities .fields{margin:12px 0;}
#priorityReason{min-width:220px;}
#priorityResults{white-space:normal;}
#priorityResults td{vertical-align:top;min-width:110px;max-width:340px;white-space:normal;overflow-wrap:anywhere;}
#priorityResults td:first-child{min-width:48px;}
#priorityResults button{min-height:34px;padding:8px 11px;}
#useradmin .metrics{margin-top:14px;}
#useradmin .panel p{line-height:1.55;}
@media(max-width:900px){.topactions{flex-wrap:wrap;justify-content:flex-end}.preview-control{min-width:125px}.preview-control select{max-width:145px;}}
@media(max-width:650px){.preview-control{font-size:10px;}.preview-control select{max-width:130px;padding:7px;}}

/* White-label: partner accent, preserving contrast in dark mode. */
:root{--tenant-accent:#146277}
body:not(.dark) {--primary:var(--tenant-accent)}
body.dark {--primary:color-mix(in srgb,var(--tenant-accent),white 55%)}
.dark button.primary{background:var(--primary);color:#10191d}
.brand img{object-fit:contain;border-radius:5px}
#localLoginPanel{border-left:4px solid var(--tenant-accent)}
#directory .table-scroller{margin:15px 0}
#directory .fields{margin:13px 0}
#directory table{min-width:450px}
#useradmin .fields{margin:12px 0}
[hidden]{display:none!important}

/* Street segment editor — map-first and browser-operable */
.street-map-shell{position:relative;margin:12px 0 8px;min-height:480px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#dce7e7}
.street-map{height:520px;width:100%;position:relative;overflow:hidden;touch-action:none;cursor:grab;user-select:none}
.street-map:active{cursor:grabbing}
.street-map-tiles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.street-map-tiles img{position:absolute;width:256px;height:256px;max-width:none;user-select:none;pointer-events:none}
.street-map-overlay{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.street-map-overlay [data-street-id]{pointer-events:stroke}
.street-map-controls{position:absolute;left:12px;top:12px;z-index:3;display:flex;flex-direction:column;box-shadow:0 2px 5px #0003}
.street-map-controls button{width:41px;height:41px;border:1px solid #adb9be;background:white;color:#152d36;font-size:24px;font-weight:600;cursor:pointer}
.street-map-attribution{position:absolute;right:0;bottom:0;z-index:2;background:#fffffff0;padding:3px 7px;font-size:11px;color:#182c36}
.street-map-attribution a{color:#13567c}
.street-toolbar{margin:10px 0;align-items:center}
#streetMapNotice{margin:12px 0}
.street-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:9px}
.street-list-entry{background:var(--surface);color:var(--text);text-align:left;border:1px solid var(--line);padding:12px;border-radius:12px;display:flex;align-items:center;gap:10px;cursor:pointer}
.street-list-entry.chosen{outline:2px solid var(--primary)}
.street-list-entry span:last-child{display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere;min-width:0}
.street-list-entry small{font-size:11px;color:var(--muted)}
.street-priority{border-radius:7px;padding:7px;color:#fff;font-weight:700}
.street-priority-A{background:#bf3541}.street-priority-B{background:#e77d22}.street-priority-C{background:#0a8b94}.street-priority-D{background:#657998}
#streetEditorPanel .fields{margin:12px 0}
.role-switch{display:flex;gap:3px;padding:3px;border-radius:11px;background:var(--surface)}
.role-switch button{border:0;background:transparent;color:var(--text);border-radius:9px;font-size:11px;padding:10px 9px;white-space:nowrap;cursor:pointer}
.role-switch button.selected{background:var(--panel);color:var(--primary);box-shadow:0 1px 5px #0002;font-weight:700}
@media(max-width:1360px){.role-switch{display:none!important}}
@media(max-width:650px){.street-map{height:420px}.street-map-shell{min-height:390px}}
