:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --fg:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --radius:16px;
  --red:#c8102e;
  --blue:#0057b8;
  --yellow:#f2a900;
  --pill:#eef2f7;
  --pillHover:#e6ebf3;
  --pillActive:#ffffff;
  --pillBorder:rgba(15,23,42,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:var(--bg);
  color:var(--fg);
}

a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1200px;margin:0 auto;padding:16px}

.appHeader{
  position:sticky; top:0; z-index:50;
  background:rgba(243,244,246,.85);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.headerInner{display:flex;align-items:center;justify-content:space-between;gap:14px}

.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.brandTitle{font-weight:800;letter-spacing:.2px}
.brandSub{font-size:12px;color:var(--muted);margin-top:2px}
.dots{display:flex;gap:6px;align-items:center;margin-left:8px}
.dot{width:10px;height:10px;border-radius:999px;display:inline-block}
.dot.red{background:var(--red)}
.dot.blue{background:var(--blue)}
.dot.yellow{background:var(--yellow)}

.navArea{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.userBadge{display:flex;align-items:center;gap:10px}
.logo{
  height:34px; width:auto; object-fit:contain;
  background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:4px 6px;
}
.navPills{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background:var(--pill);
  border:1px solid var(--pillBorder);
  color:var(--fg);
  font-weight:600;
  font-size:14px;
  box-shadow:0 1px 0 rgba(15,23,42,.04);
  text-decoration:none !important;
}
.pill:hover{background:var(--pillHover)}
.pill.active{
  background:var(--pillActive);
  border-color:rgba(15,23,42,.18);
}
.pill.danger{border-color:rgba(200,16,46,.25); color:var(--red); background:rgba(200,16,46,.06)}
.pill.danger:hover{background:rgba(200,16,46,.10)}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:#fff;border:1px solid var(--line);
  color:var(--fg);font-weight:600;font-size:13px;
}
.badge.muted{color:var(--muted);font-weight:700}
.badge.offline{background:rgba(200,16,46,.06);border-color:rgba(200,16,46,.25);color:var(--red)}

/* Status/Delta badges */
.badgeGood{background:rgba(16,185,129,.10);border-color:rgba(16,185,129,.22);color:#065f46}
.badgeWarn{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.22);color:#92400e}
.badgeBad{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22);color:#991b1b}

.statusPill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:700;line-height:1}
.statusPill.badgeGood{background:rgba(16,185,129,.10)}
.statusPill.badgeWarn{background:rgba(245,158,11,.12)}
.statusPill.badgeBad{background:rgba(239,68,68,.10)}
.statusDot{width:8px;height:8px;border-radius:999px;background:currentColor;opacity:.75}

.main{padding-top:14px;padding-bottom:40px}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  margin:12px 0;
  box-shadow:var(--shadow);
}
.cardHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.cardTitle{font-size:18px;font-weight:800}
.cardSub{font-size:13px;color:var(--muted)}
.hr{height:1px;background:var(--line);margin:12px 0}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width: 980px){.grid2{grid-template-columns:1fr}}
@media (max-width: 820px){
  .brand{min-width:auto}
  .navArea{gap:8px}
  .logo{height:30px}
  .container{padding:12px}
}

input[type=text],input[type=number],input[type=password],input[type=date],input[type=email],select,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-size:14px;
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:rgba(0,87,184,.55); box-shadow:0 0 0 4px rgba(0,87,184,.12)}
textarea{min-height:90px;resize:vertical}

.formRow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 820px){.formRow{grid-template-columns:1fr}}

.btn,.btn2{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  /*
    Mobile Safari sometimes ends up with white/transparent button labels due to
    browser/extension styles or inherited colors. Force readable defaults.
  */
  color:var(--fg) !important;
  -webkit-text-fill-color: var(--fg) !important; /* iOS Safari */
  text-decoration:none;
  cursor:pointer;
}
.btn2{border-radius:999px;padding:10px 14px}
.btn:hover,.btn2:hover{background:#f8fafc}
.btnPrimary{background:rgba(0,87,184,.08);border-color:rgba(0,87,184,.25);color:var(--blue) !important;-webkit-text-fill-color: var(--blue) !important}
.btnPrimary:hover{background:rgba(0,87,184,.12)}
.btnDanger{background:rgba(200,16,46,.06);border-color:rgba(200,16,46,.25);color:var(--red) !important;-webkit-text-fill-color: var(--red) !important}
.btnDanger:hover{background:rgba(200,16,46,.10)}
.small{font-size:12px;color:var(--muted)}
.muted{color:var(--muted)}

.tableWrap{overflow:auto;border-radius:12px;border:1px solid var(--line);background:#fff}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:10px 10px;border-bottom:1px solid rgba(15,23,42,.08);text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:800;font-size:12px;text-transform:none}
tr:hover td{background:rgba(0,87,184,.03)}

.noticeWarn{border-color:rgba(242,169,0,.35);background:rgba(242,169,0,.10)}


.offlineInline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.assigned-bl{margin-left:10px;font-size:12px;color:var(--muted);white-space:nowrap}
.assigned-bl.is-empty{color:var(--red)}

/* ------------------------------------------------------------
   Responsive UX (Baustelle-first)
   - PC: default
   - Tablet / landscape: compact
   - Phone portrait: card-like tables, big touch targets
------------------------------------------------------------- */

@media (max-width: 980px){
  .pill{padding:9px 12px}
  th,td{padding:9px 9px}
}

/* iPhone/Phone portrait */
@media (max-width: 600px){
  .container{padding:10px}
  .card{padding:14px}

  /* header: stack nicely */
  .headerInner{flex-direction:column;align-items:flex-start}
  .navArea{justify-content:flex-start;width:100%}
  .navPills{gap:8px}
  .pill{width:100%;justify-content:flex-start}

  /* make inputs and buttons more touch friendly */
  input[type=text],input[type=number],input[type=password],input[type=date],input[type=email],select,textarea{font-size:16px}
  .btn,.btn2{width:100%}

  /* project list: table -> cards (only where wrapped with .tableResponsive) */
  .tableResponsive table,
  .tableResponsive thead,
  .tableResponsive tbody,
  .tableResponsive th,
  .tableResponsive td,
  .tableResponsive tr{display:block}
  .tableResponsive thead{display:none}
  .tableResponsive table{font-size:14px}
  .tableResponsive tr{
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
    margin:12px 0;
    background:#fff;
    box-shadow:0 6px 18px rgba(15,23,42,.06);
  }
  .tableResponsive td{border:0;padding:8px 0}
  .tableResponsive td[data-label]::before{
    content: attr(data-label);
    display:block;
    font-size:12px;
    color:var(--muted);
    font-weight:800;
    margin-bottom:4px;
  }

  /* align multi-button rows vertically on mobile */
  .actionRow{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .blAssignRow{flex-direction:column;align-items:stretch}
  .assigned-bl{margin-left:0;white-space:normal}
}

/* Dropdown-style pill menu (used for admin Logs grouping) */
.pillMenu{position:relative;display:inline-block}
.pillMenu > summary{list-style:none}
.pillMenu > summary::-webkit-details-marker{display:none}
.pillMenu[open] > summary.pill{box-shadow:0 10px 30px rgba(15,23,42,.12)}
.pillMenuPanel{
  position:absolute;
  z-index:50;
  right:0;
  top:calc(100% + 8px);
  min-width:190px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.18);
}
.pillSub{
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  color:var(--fg);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
}
.pillSub:hover{background:rgba(15,23,42,.06)}
.pillSub.active{background:rgba(15,23,42,.08)}

@media (max-width: 900px){
  .pillMenu{width:100%}
  .pillMenuPanel{position:static;box-shadow:none;margin-top:8px}
}