/* styles.css volle Datei – unverändert, nur ergänzt um Badges etc. */
:root{
  --bg:#f6f7fb; 
  --panel:#ffffff;
  --fg:#111827;
  --muted:#6b7280;
  --brand:#2563eb; 
  --brand-2:#1e40af;
  --ok:#16a34a; 
  --err:#ef4444;
  --bd:#dfe3ea;
  --rowNew:#fff3f3;
  --rowDone:#eefaf1;

  --control-bg:#ffffff;
  --control-border:#cad4e1;
  --control-hover:#b7c3d4;
  --topbar-bg:#ffffff;
  --nav-active:#f1f5f9;
  --overlay:#00000088;
}
html[data-theme="dark"]{
  --bg:#0f1115; 
  --panel:#151821; 
  --muted:#98a2b3; 
  --fg:#e5e7eb; 
  --brand:#3b82f6; 
  --brand-2:#1e40af;
  --ok:#16a34a; 
  --err:#ef4444; 
  --bd:#222638; 
  --rowNew:#1a1a25; 
  --rowDone:#102015;

  --control-bg:#0d1018;
  --control-border:#2a3150;
  --control-hover:#3b425f;
  --topbar-bg:#0d1018;
  --nav-active:#0d1018;
  --overlay:#0000008c;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{ background:var(--bg); color:var(--fg); font:14px/1.4 system-ui,Segoe UI,Roboto,Arial; }
#app{ display:flex; height:100vh; overflow:hidden; }

#sidebar{
  width:280px; min-width:220px; background:var(--panel); border-right:1px solid var(--bd);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
#sidebar.collapsed{ width:72px; min-width:72px; }
#sidebar .brand{ font-weight:700; padding:16px 16px 8px 16px; }

.hamburger{ margin:0 16px 8px 16px; width:40px; height:32px; border:1px solid var(--control-border); background:var(--control-bg); color:inherit; border-radius:8px; cursor:pointer; }

.nav{ display:flex; flex-direction:column; gap:6px; padding:8px; overflow:auto; }

.nav-btn{
  display:flex; align-items:center; gap:10px;
  text-align:left; padding:10px 12px; background:transparent; border:1px solid var(--control-border); color:inherit;
  border-radius:10px; cursor:pointer; white-space:nowrap;
}
.nav-btn .icon{ width:22px; text-align:center; flex:0 0 22px; font-size:18px; line-height:1; }
.nav-btn .label{ flex:1 1 auto; min-width:0; }
.nav-btn.active{ background:var(--nav-active); border-color:var(--control-hover); }

#sidebar.collapsed .nav-btn{ justify-content:center; padding:10px; }
#sidebar.collapsed .nav-btn .label{ display:none; }

.admin-only{ display:none; }
.role-admin .admin-only{ display:block; }

.sidebar-footer{ margin-top:auto; padding:12px; border-top:1px solid var(--bd); display:flex; flex-direction:column; gap:8px; }
.who{ color:var(--muted); font-size:12px; line-height:1.3; word-break:break-word; }
.logout-btn{ width:100%; display:flex; align-items:center; justify-content:center; gap:8px; }
.logout-btn .icon{ font-size:16px; }
.branding{ color:var(--muted); font-size:12px; margin-top:4px; text-align:center; }
.link-muted{ color:var(--muted); text-decoration:none; }
.link-muted:hover{ color:var(--brand); text-decoration:underline; }
 .lager-frame{ width:100%; min-height:60vh; height:auto; border:0; border-radius:12px; }

#sidebar.collapsed .who{ display:none; }
#sidebar.collapsed .branding{ display:none; }
#sidebar.collapsed .logout-btn{ padding:8px; }
#sidebar.collapsed .logout-btn .label{ display:none; }

#content{ flex:1; display:flex; flex-direction:column; overflow:hidden; }
.topbar{ padding:10px 16px; border-bottom:1px solid var(--bd); background:var(--topbar-bg); display:flex; gap:10px; align-items:center; justify-content:space-between; }
#clock{ color:var(--muted); }

.view{ display:none; height:100%; padding:14px; overflow:hidden; }
.view.active{ display:block; }
.row{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
input, select{
  background:var(--control-bg); color:inherit; border:1px solid var(--control-border); border-radius:8px; padding:8px 10px;
}
.btn{ background:var(--control-bg); color:inherit; border:1px solid var(--control-border); padding:8px 12px; border-radius:8px; cursor:pointer; }
.btn:hover{ border-color:var(--control-hover); }
.btn-primary{ background:var(--brand); border-color:var(--brand-2); color:#fff; }
.btn-light{ background:var(--control-bg); }
.btn-pill{
  border-radius:999px;
  padding:6px 12px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  font-size:12px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:inherit;
}
.btn-pill:hover{
  background:var(--nav-active);
  border-color:var(--control-hover);
}
html[data-theme="dark"] .btn-pill{
  color:#f3f4f6;
  border-color:#374151;
  background:#1f2937;
}
html[data-theme="dark"] .btn-pill:hover{
  background:#374151;
}
.btn-primary.btn-pill{
  background:var(--brand);
  border-color:var(--brand-2);
  color:#fff;
}
.fleet-grid{
  align-items:flex-end;
  gap:12px;
}
.fleet-field{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:150px;
}
.fleet-field label{
  font-size:12px;
  color:var(--muted);
}
.fleet-btn{
  align-self:flex-end;
  min-width:auto;
}
html[data-theme="dark"] .btn-primary.btn-pill{
  color:#fff;
  border-color:#1d4ed8;
  background:#2563eb;
}
a.btn-pill, a.btn-pill:visited{ text-decoration:none; color:inherit; display:inline-block; }
a.btn-pill:hover{ color:inherit; }

input[type="file"]{
  font:inherit;
}
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button{
  border-radius:999px;
  padding:6px 12px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:inherit;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover{
  background:var(--nav-active);
  border-color:var(--control-hover);
}

.scroll{ overflow:auto; height:calc(100% - 96px); border:1px solid var(--bd); border-radius:12px; padding:10px; }
.tablebox{
  margin-top:12px;
  background:var(--panel);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:8px;
  overflow:auto;
}
.tablebox table{
  width:100%;
  border-collapse:collapse;
}
.tablebox-wide table{
  min-width:980px;
}
.view #perm-roles,
.view #perm-users{
  overflow:auto;
  max-height:calc(100vh - 220px);
}

table{ width:100%; border-collapse:collapse; }
th, td{ border-bottom:1px solid var(--bd); padding:8px; text-align:left; vertical-align:top; }
th{ color:var(--muted); }

.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--overlay); z-index:1000; }
.overlay.hidden{ display:none; }
.overlay-card{
  background:var(--control-bg);
  color:inherit;
  border:1px solid var(--bd);
  border-radius:12px;
  width:min(480px,92vw);
  max-height:80vh;
  padding:16px;
  overflow:auto;
}
.overlay-card.acc-card{
  width:min(1100px,96vw);
  max-height:88vh;
}
.sig-canvas{
  border:1px solid var(--bd);
  border-radius:8px;
  background:#fff;
  touch-action: none;
  max-width:100%;
}
.sig-box{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sig-actions{
  align-items:center;
}
.login-form{ display:flex; flex-direction:column; gap:8px; }
.login-actions{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; }

.tabs{ display:flex; gap:6px; margin:10px 0; }
.tab-btn{ padding:8px 12px; border:1px solid var(--bd); background:var(--control-bg); border-radius:8px; cursor:pointer; }
.tab-btn.active{ background:var(--nav-active); border-color:var(--control-hover); }
.tab{ display:none; }
.tab.active{ display:block; }
.two-cols{ display:grid; grid-template-columns: 320px 1fr; gap:12px; }
.list{ border:1px solid var(--bd); border-radius:12px; padding:8px; }
.list .item{ padding:8px; border:1px solid var(--bd); border-radius:8px; margin-bottom:6px; cursor:pointer; }
.list .item.active{ background:var(--nav-active); }

.pin{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:8px; background:#666; }
.pin.green{ background:var(--ok); }
.pin.red{ background:var(--err); }

iframe{ width:100%; height:72vh; border:none; border-radius:12px; }

.status-new{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1.6;
  color:#b91c1c; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.25);
}
.status-done{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1.6;
  color:#166534; background:rgba(22,163,74,.12); border:1px solid rgba(22,163,74,.25);
}
.status-assigned{
  display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1.6;
  color:#92400e; background:rgba(251,191,36,.2); border:1px solid rgba(251,191,36,.4);
}

tr.row-new{ background:var(--rowNew); }
tr.row-done{ background:var(--rowDone); }

.mappe-controls{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.mappe-target-box{ border:1px solid var(--bd); border-radius:12px; padding:12px; background:var(--panel); flex:1 1 320px; min-width:260px; }
.mappe-target-summary{ font-weight:600; margin-bottom:8px; }
.mappe-target-grid{
  border:1px solid var(--bd); border-radius:10px; padding:8px; background:var(--control-bg);
  max-height:230px; overflow:auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:6px;
}
.mappe-target-grid label{ display:flex; align-items:center; gap:6px; font-size:13px; }
.mappe-target-grid input{ width:auto; margin:0; }
.hint{ display:block; margin-top:6px; font-size:12px; color:var(--muted); }
.mappe-upload{ display:flex; flex-direction:column; gap:8px; min-width:220px; }
.panel{ border:1px solid var(--bd); border-radius:12px; padding:12px; background:var(--panel); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.mappe-reads-mask{
  position:fixed; inset:0; background:var(--overlay); z-index:1200;
}
.mappe-reads{
  position:fixed; right:24px; top:80px; width:min(420px,90vw); max-height:80vh;
  overflow:auto; z-index:1210; margin-top:0;
  box-shadow:0 15px 55px rgba(15,16,26,.45);
}
.mappe-reads.hidden,
.mappe-reads-mask.hidden{ display:none; }
.badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; border:1px solid var(--bd); }
.badge.ok{ color:var(--ok); background:rgba(22,163,74,.12); border-color:rgba(22,163,74,.3); }
.badge.pending{ color:var(--err); background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.3); }

@media (max-width:900px){
  .mappe-controls{ flex-direction:column; }
}