/* ─────────────────────────────────────────────────────────
   WorkDash — Mobile-first Stylesheet
   ───────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  --bg:          #0f1117;
  --bg-card:     #1a1d27;
  --bg-nav:      #13151f;
  --bg-input:    #232634;
  --border:      #2d3148;
  --text:        #e2e4ef;
  --text-muted:  #7279a0;
  --accent:      #5b7cf6;
  --accent-hover:#4a68e0;
  --success:     #3cb87a;
  --danger:      #e05c5c;
  --warning:     #e0a020;
  --radius:      10px;
  --shadow:      0 2px 12px rgba(0,0,0,.35);
}

[data-theme="light"] {
  --bg:          #f0f2f8;
  --bg-card:     #ffffff;
  --bg-nav:      #ffffff;
  --bg-input:    #e8eaf2;
  --border:      #d0d4e8;
  --text:        #1a1d2e;
  --text-muted:  #6b7194;
  --accent:      #4a68e0;
  --accent-hover:#3a55c8;
  --success:     #2ea065;
  --danger:      #d04040;
  --warning:     #c07010;
  --radius:      10px;
  --shadow:      0 2px 12px rgba(0,0,0,.10);
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

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

/* ─── DEPLOYMENT-BANNER (Staging / Dev) ───────────────────
   Sichtbar nur wenn app_settings['deployment.environment_label']
   gesetzt ist. Dezent oben über der Navbar — Warnzeichen-orange,
   sticky damit man's auch nach Scrollen sieht. */
.deployment-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(220, 140, 30, 0.95);
  color: #fff;
  text-align: center;
  font-weight: 600;
  font-size: 0.85em;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ─── NAVBAR ──────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  height: 52px;
  background: var(--bg-nav);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.navbar-brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  margin-right: 8px;
}
.navbar-brand:hover { text-decoration: none; color: var(--accent); }

.navbar-links {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-link {
  padding: 5px 12px;
  border-radius: 7px;
  color: var(--text-muted);
  font-size: 14px;
  transition: background .15s, color .15s;
}
.nav-link:hover, .nav-link.active {
  background: rgba(91,124,246,.15);
  color: var(--accent);
  text-decoration: none;
}

.navbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.user-menu { position: relative; }

.user-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background .15s, color .15s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.user-menu-btn:hover { background: var(--bg-input); color: var(--text); }
.user-menu-caret { font-size: 10px; opacity: .6; }

.user-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  min-width: 160px;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  z-index: 300;
  overflow: hidden;
}
.user-dd-item {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  text-decoration: none;
  transition: background .12s;
}
.user-dd-item:hover { background: var(--bg-input); text-decoration: none; }
.user-dd-divider { height: 1px; background: var(--border); margin: 2px 0; }
.user-dd-danger { color: var(--danger); }
.user-dd-danger:hover { background: rgba(224,92,92,.1); }
.user-dd-theme-btn {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  gap: 0;
}

.session-countdown {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
  transition: color .3s, border-color .3s, background .3s;
}
.session-warning {
  color: #e0a020;
  border-color: rgba(224,160,32,.5);
  background: rgba(224,160,32,.1);
}
.session-critical {
  color: #e05c5c;
  border-color: rgba(224,92,92,.5);
  background: rgba(224,92,92,.1);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

/* ─── MOBILE BOTTOM NAVIGATION ────────────────────────── */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 680px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 72px;
    background: var(--bg-nav);
    border-top: 1px solid var(--border);
    z-index: 200;
    align-items: stretch;
    /* iOS Home-Indicator-Safe-Area unten freihalten */
    padding-bottom: env(safe-area-inset-bottom);
  }
}

.mbn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 12px;
  transition: background .15s, color .15s;
  padding: 8px 2px;
}
.mbn-item:hover   { background: rgba(91,124,246,.1); text-decoration: none; }
.mbn-active       { color: var(--accent); }
.mbn-icon         { font-size: 22px; line-height: 1; }
.mbn-label        { line-height: 1; white-space: nowrap; }

/* Remote Hands leicht hervorgehoben */
.mbn-primary      { color: var(--text); }
.mbn-primary .mbn-icon { font-size: 24px; }
.mbn-primary.mbn-active { color: var(--accent); }

/* ─── FLASH MESSAGES ──────────────────────────────────── */
/* Flash-Container "schwebend" am oberen Bildschirmrand — damit Bestätigungen
   und Fehler-Meldungen auch dann sichtbar sind, wenn man weit unten auf
   der Seite scrollt (z.B. tief im Admin-Bereich). Auto-Fade nach 4s
   bleibt in app.js. */
.flash-container {
  position: fixed;
  top: 60px;            /* unter der 52px hohen sticky Navbar */
  right: 16px;
  left: auto;
  width: auto;
  max-width: 480px;
  z-index: 500;
  padding: 0;
  pointer-events: none; /* Klicks gehen durch leere Bereiche durch */
}
.flash-container .flash {
  pointer-events: auto;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
@media (max-width: 680px) {
  .flash-container {
    left: 8px;
    right: 8px;
    max-width: none;
  }
}

.flash {
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  font-size: 14px;
  transition: opacity .4s;
}
.flash-success { background: rgba(60,184,122,.18); border: 1px solid rgba(60,184,122,.4); color: #6feab0; }
.flash-error   { background: rgba(224,92,92,.18);  border: 1px solid rgba(224,92,92,.4);  color: #f09090; }
.flash-warning { background: rgba(224,160,32,.18); border: 1px solid rgba(224,160,32,.4); color: #f0c060; }

/* ─── MAIN CONTENT ────────────────────────────────────── */
.main-content {
  padding: 20px 16px 40px;
}

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.page-title { font-size: 20px; font-weight: 600; }
.page-date  { color: var(--text-muted); font-size: 14px; }

/* ─── DASHBOARD LAYOUT ────────────────────────────────── */
.dashboard-layout {
  display: block;
}
.dashboard-main {
  width: 100%;
  min-width: 0;
}

/* ─── LIVE FEED (Modal) ───────────────────────────────── */
.btn-feed {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 6px 10px;
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.btn-feed:hover { background: var(--hover-bg); color: var(--text); }

.feed-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: .4;
  transition: background .4s, opacity .4s;
  flex-shrink: 0;
  display: inline-block;
}
.feed-dot-new {
  background: var(--success);
  opacity: 1;
}

.feed-sidebar-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.feed-sidebar-body::-webkit-scrollbar { width: 5px; }
.feed-sidebar-body::-webkit-scrollbar-track { background: transparent; }
.feed-sidebar-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.feed-sidebar-list {
  display: flex;
  flex-direction: column;
}
.feed-loading, .feed-empty {
  padding: 20px 14px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
}

.feed-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(45,49,72,.5);
  transition: background .2s;
}
.feed-sidebar-item:last-child { border-bottom: none; }
.feed-sidebar-item:hover { background: var(--bg-input); }

@keyframes feedFlash {
  0%   { background: rgba(60,184,122,.18); }
  100% { background: transparent; }
}
.feed-item-new {
  animation: feedFlash 1.8s ease-out forwards;
}

.fsi-icon  { font-size: 17px; line-height: 1.3; flex-shrink: 0; }
.fsi-body  { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fsi-text  { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsi-meta  { font-size: 11px; color: var(--text-muted); }
.fsi-time  { font-size: 11px; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; padding-top: 2px; }
.fsi-del {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  opacity: .35;
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.fsi-del:hover { opacity: 1; color: var(--danger); }

/* ─── COLUMNS / CARDS ─────────────────────────────────── */
.columns {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 260px;
  min-width: 240px;
}

/* ── Mobile: horizontales Scroll-Snap ───────────────────── */
/* Swipe-Hinweis (nur Mobile) */
.col-swipe-hint { display: none; }

@keyframes swipe-pulse {
  0%, 100% { opacity: 0.9; }
  50%       { opacity: 0.35; }
}

@media (max-width: 680px) {
  .columns-wrapper .columns {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 12px;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .columns-wrapper .columns::-webkit-scrollbar { display: none; }
  .columns-wrapper .column {
    flex: 0 0 91vw !important;
    max-width: 91vw !important;
    min-width: 0 !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .col-swipe-hint {
    display: block;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.04em;
    animation: swipe-pulse 2s ease-in-out infinite;
    pointer-events: none;
  }
}

.column-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-left: 4px;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--card-color, var(--accent));
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.card-icon  { font-size: 20px; line-height: 1; }
.card-title { font-weight: 600; font-size: 15px; }
.card-desc    { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; }
.card-overdue { font-size: 12px; color: #e0a030; margin: -4px 0 10px; font-weight: 500; }

/* Erledigte Karten */
.card-done {
  opacity: .55;
  transition: opacity .4s, max-height .5s ease, padding .5s ease,
              margin .5s ease, border-width .5s ease;
}
.card-done-hidden {
  max-height: 0 !important;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-width: 0 !important;
  opacity: 0;
}

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── BUTTONS ─────────────────────────────────────────── */
.btn {
  border: none;
  border-radius: 7px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { filter: brightness(1.15); }
.btn:disabled { opacity: .65; cursor: default; }

.btn-run     { background: var(--accent); color: #fff; }
.btn-log     { background: var(--bg-input); color: var(--text); border: 1px solid var(--border); }
.btn-done    { background: var(--success); color: #fff; }
.btn-pending { background: #2c5bcc; color: #fff; }
.btn-local   { background: #5c6e2c; color: #d4eaa0; border: 1px solid #7a9040; }

/* Generic primary */
.btn-primary {
  display: inline-block;
  padding: 9px 20px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.btn-primary:hover { background: var(--accent-hover); text-decoration: none; }
.btn-full { width: 100%; text-align: center; }

/* Danger */
.btn-danger-sm {
  padding: 4px 10px;
  background: rgba(224,92,92,.2);
  border: 1px solid rgba(224,92,92,.4);
  color: #f09090;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
}
.btn-danger-sm:hover { background: rgba(224,92,92,.35); }

/* Toggle */
.btn-toggle {
  padding: 4px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.btn-toggle:hover { background: var(--border); }

/* ─── LOGIN ───────────────────────────────────────────── */
.login-wrap {
  min-height: calc(100vh - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 36px 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow);
}
.login-logo  { font-size: 40px; text-align: center; margin-bottom: 8px; }
.login-title { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 4px; }
.login-sub   { text-align: center; color: var(--text-muted); margin-bottom: 24px; }

/* ─── FORMS ───────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 160px;
}
.form-group label { font-size: 13px; color: var(--text-muted); }
.form-group-wide  { flex: 2 1 240px; }
.form-group-full  { flex: 1 1 100%; }
.form-group-check { justify-content: flex-end; padding-bottom: 4px; }

.form-input {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 8px 12px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.form-input:focus { border-color: var(--accent); }
.form-input-sm    { max-width: 100px; }
.form-input-color { padding: 2px 6px; height: 38px; cursor: pointer; }

/* Browser rendern <select> minimal anders als <input> wegen interner
   Line-Height-Logik. Explizite Höhe damit beide in Filter-Bars und
   Form-Rows gleich aussehen. */
select.form-input {
  height: 38px;
}

.form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.select-inline { display: inline-block; width: auto; padding: 5px 10px; }

/* ─── PERIOD SELECTOR ─────────────────────────────────── */
.period-selector { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); }

/* ─── STATS ───────────────────────────────────────────── */
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.stats-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  flex: 1 1 280px;
  min-width: 0;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stats-card-wide { flex: 2 1 480px; }
.stats-card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.stats-loading { color: var(--text-muted); font-size: 14px; }
.stats-empty { color: var(--text-muted); font-size: 14px; }
.error-text { color: #f09090; }

.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.stats-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.stats-table td { padding: 8px 10px; border-bottom: 1px solid rgba(45,49,72,.5); }
.stats-table tr:last-child td { border-bottom: none; }
.stats-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.table-scroll { overflow-x: auto; }

/* ─── STATS RECENT FEED (scrollbar) ──────────────────── */
.stats-feed-scroll {
  max-height: 520px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.stats-feed-scroll::-webkit-scrollbar { width: 5px; }
.stats-feed-scroll::-webkit-scrollbar-track { background: transparent; }
.stats-feed-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ─── ACTIVITY FEED ───────────────────────────────────── */
.feed { display: flex; flex-direction: column; gap: 6px; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-input);
  border-radius: 8px;
  font-size: 13px;
}
.feed-icon  { font-size: 18px; flex-shrink: 0; }
.feed-body  { display: flex; flex-direction: column; flex: 1; gap: 2px; min-width: 0; }
.feed-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-meta  { color: var(--text-muted); font-size: 12px; }
.feed-time  { color: var(--text-muted); font-size: 12px; white-space: nowrap; flex-shrink: 0; }

/* ─── ADMIN ───────────────────────────────────────────── */
.admin-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}
.admin-section-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Admin-Sektionen sind <details>-Elemente — Standard-Marker entfernen,
   eigener Drehpfeil als ::before. Wenn geschlossen, kein Bottom-Margin
   für den Titel (damit zugeklappte Sektionen kompakter aussehen). */
details.admin-section > summary.admin-section-title {
  cursor: pointer;
  list-style: none;
  user-select: none;
  margin-bottom: 0;
}
details.admin-section[open] > summary.admin-section-title {
  margin-bottom: 16px;
}
details.admin-section > summary.admin-section-title::-webkit-details-marker {
  display: none;
}
details.admin-section > summary.admin-section-title::before {
  content: '▶';
  display: inline-block;
  margin-right: 8px;
  font-size: 0.75em;
  color: var(--text-muted);
  transition: transform .15s ease;
}
details.admin-section[open] > summary.admin-section-title::before {
  transform: rotate(90deg);
}
details.admin-section > summary.admin-section-title:hover {
  color: var(--accent);
}

/* ── Admin-Aktivitätslog ──────────────────────────────────── */
.al-row {
  display: grid;
  grid-template-columns: 130px 110px 140px 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.al-row:last-child { border-bottom: none; }
.al-row:hover { background: var(--bg-input); }
.al-ts     { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.al-user   { font-weight: 500; }
.al-action { color: var(--accent); }
.al-detail { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#alList::-webkit-scrollbar { width: 5px; }
#alList::-webkit-scrollbar-track { background: transparent; }
#alList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

@media (max-width: 640px) {
  .al-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .al-ts     { grid-column: 1; grid-row: 1; }
  .al-user   { grid-column: 2; grid-row: 1; text-align: right; }
  .al-action { grid-column: 1; grid-row: 2; }
  .al-detail { grid-column: 2; grid-row: 2; text-align: right; }
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 16px;
}
.admin-table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.admin-table td { padding: 9px 10px; border-bottom: 1px solid rgba(45,49,72,.5); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: none; }
.row-inactive { opacity: .5; }

/* Karten-Filterleiste */
.admin-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.admin-filter-select { flex: 0 0 auto; width: auto; min-width: 180px; }
.admin-filter-search { flex: 1 1 200px; min-width: 140px; }
.admin-filter-count  { font-size: 13px; white-space: nowrap; }

.admin-add-form {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 12px;
}
.admin-add-form summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--accent);
  list-style: none;
  padding: 2px 0;
}
.admin-add-form summary::-webkit-details-marker { display: none; }
.admin-add-form[open] summary { margin-bottom: 16px; }

.inline-form { display: flex; flex-direction: column; gap: 0; }

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.badge-todo   { background: rgba(60,184,122,.2);  color: #6feab0; }
.badge-script { background: rgba(91,124,246,.2);  color: #9ab4ff; }

/* Edit-Button (klein, inline) */
.btn-edit-sm {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(91,124,246,.15);
  border: 1px solid rgba(91,124,246,.35);
  color: #9ab4ff;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.btn-edit-sm:hover { background: rgba(91,124,246,.28); text-decoration: none; }

.btn-ok-sm {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(34,197,94,.15);
  border: 1px solid rgba(34,197,94,.4);
  color: #4ade80;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
}
.btn-ok-sm:hover { background: rgba(34,197,94,.28); text-decoration: none; }

/* Aktions-Zelle (mehrere Buttons nebeneinander) */
.td-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.td-actions form { margin: 0; }

/* Edit-Seiten */
.edit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 760px;
  box-shadow: var(--shadow);
}
.edit-card-meta {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.btn-cancel {
  color: var(--text-muted);
  font-size: 14px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  text-decoration: none;
}
.btn-cancel:hover { background: var(--bg-input); text-decoration: none; color: var(--text); }

/* ─── FORCED PASSWORD BANNER ──────────────────────────── */
.forced-banner {
  background: rgba(224,160,32,.15);
  border: 1px solid rgba(224,160,32,.4);
  color: #f0c060;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

/* ─── NOTE BAR ────────────────────────────────────────── */
.note-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
}
.note-input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
}
.note-input:focus { border-color: var(--accent); }
.btn-note {
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.btn-note-done { background: var(--success) !important; color: #fff !important; border-color: var(--success) !important; }
.btn-show-done {
  background: var(--bg-input);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 13px;
  white-space: nowrap;
}
.btn-show-done:hover { color: var(--text); border-color: var(--accent); }

/* Zeitplan-Checkboxen in Admin-Formularen */
.schedule-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
}
.schedule-check-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.schedule-check-item input[type="checkbox"] { cursor: pointer; }
.schedule-group {
  margin-top: 10px;
  padding: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.schedule-group-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

/* ─── MODAL ───────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: flex; align-items: flex-end;
  z-index: 500;
  padding: 0;
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  width: 100%;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 15px;
}
.modal-close {
  background: none; border: none;
  color: var(--text-muted); font-size: 22px;
  cursor: pointer; line-height: 1;
}
.modal-close:hover { color: var(--text); }
.log-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  font-size: 12px;
  font-family: 'SF Mono', 'Fira Mono', 'Menlo', monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: #b8c0e0;
  background: #0d0f1a;
  margin: 0;
}

/* ─── CUSTOMER AUTOCOMPLETE DROPDOWN ─────────────────── */
.cust-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-input);
  border: 1px solid var(--accent);
  border-top: none;
  border-radius: 0 0 8px 8px;
  z-index: 300;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.cust-option {
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(45,49,72,.4);
}
.cust-option:last-child { border-bottom: none; }
.cust-option:hover, .cust-option:active { background: var(--border); color: var(--text); }

/* ─── DRAG HANDLE + DRAG STATES ──────────────────────── */
.card-drag-handle {
  font-size: 16px;
  color: var(--text-muted);
  opacity: 0;
  cursor: grab;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity .15s;
  margin-right: 4px;
  user-select: none;
}
.card-draggable:hover .card-drag-handle { opacity: .5; }
.card-draggable:hover .card-drag-handle:hover { opacity: 1; }
.card-draggable { cursor: default; }
.card-dragging  { opacity: .4; }
.proj-draggable:hover .proj-drag-handle { opacity: .5; }
.proj-draggable:hover .proj-drag-handle:hover { opacity: 1; }
.proj-draggable { cursor: default; }
.card-drag-over-top { box-shadow: 0 -3px 0 0 var(--accent); }
.card-drag-over-bot { box-shadow: 0  3px 0 0 var(--accent); }

/* ─── CARD DELETE BUTTON ──────────────────────────────── */
.btn-card-del {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: .3;
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.btn-card-del:hover { opacity: 1; color: var(--danger); }

.btn-card-edit {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: .3;
  transition: opacity .15s, color .15s;
  flex-shrink: 0;
}
.btn-card-edit:hover { opacity: 1; color: var(--accent); }

/* ─── DUE UNTIL BADGE ─────────────────────────────────── */
.card-due-until {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
  opacity: .8;
}

/* ─── UPCOMING CARDS (Vorschau-Modus) ─────────────────── */
.card-upcoming {
  opacity: .55;
  border-style: dashed;
  border-color: var(--border);
}
.card-upcoming-label {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0 0;
  font-style: italic;
}

/* ─── PREVIEW BANNER ───────────────────────────────────── */
.preview-banner {
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 6px;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.preview-banner a {
  color: #fff;
  text-decoration: underline;
  white-space: nowrap;
}
.btn-preview-active {
  background: var(--accent);
  color: #fff !important;
}

/* ─── ADD CARD BUTTON (bottom of column) ──────────────── */
.btn-add-card {
  display: block;
  width: 100%;
  padding: 8px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s, background .15s;
  margin-top: 4px;
}
.btn-add-card:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(91,124,246,.07);
}

/* ─── MODAL BODY (for forms, not log) ────────────────── */
.modal-body {
  padding: 20px 22px 8px;
  overflow-y: auto;
}

/* ─── EMPTY STATE ─────────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state p { margin-bottom: 16px; }

/* ─── UTILS ───────────────────────────────────────────── */
.text-muted  { color: var(--text-muted); font-size: 13px; }
.hide-mobile { display: inline-flex; }
@media (max-width: 680px) { .hide-mobile { display: none !important; } }

/* ─── FOOTER ──────────────────────────────────────────── */
.app-footer {
  text-align: center;
  padding: 16px 16px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  margin-top: 20px;
  opacity: .6;
}
@media (max-width: 680px) {
  .app-footer { padding-bottom: 88px; }
}

/* Footer-Versionslink */
.footer-version-link {
  color: var(--text-muted);
  font-weight: 600;
  text-decoration: none;
  opacity: .85;
  transition: opacity .15s;
}
.footer-version-link:hover { opacity: 1; text-decoration: underline; }

/* ─── CHANGELOG-SEITE ─────────────────────────────────── */
.cl-wrapper {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 40px;
}
.cl-entry {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.cl-entry-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
}
.cl-entry-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--border);
}
.cl-entry-current .cl-entry-header {
  background: rgba(79,124,172,.12);
}
.cl-version {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}
.cl-badge {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
}
.cl-date {
  margin-left: auto;
  font-size: 13px;
  color: var(--text-muted);
}
.cl-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 10px 0 2px;
}
.cl-section-label:first-child { margin-top: 0; }
.cl-item {
  display: flex;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
}
.cl-bullet {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.cl-text { color: var(--text); }

/* ─── REPORTING-SEITE ─────────────────────────────────── */
.report-intro {
  max-width: 720px;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 28px;
  line-height: 1.6;
}

.report-periods {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.report-period-card {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 260px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
  box-shadow: var(--shadow);
}
.report-period-card:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
  transform: translateY(-1px);
  text-decoration: none;
}
.rpc-icon   { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.rpc-label  { font-size: 16px; font-weight: 700; color: var(--text); }
.rpc-sub    { font-size: 12px; color: var(--text-muted); }
.rpc-action {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

.report-custom {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 560px;
  margin-bottom: 24px;
  box-shadow: var(--shadow);
}
.report-custom-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
  color: var(--text);
}
.report-custom-form { margin: 0; }
.report-custom-fields {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.report-custom-fields .form-group { flex: 1 1 140px; margin: 0; }
.report-custom-btn { white-space: nowrap; height: 38px; padding: 0 18px; }

.report-hint {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  max-width: 680px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.report-hint strong { color: var(--text); }
.report-hint p { margin-bottom: 8px; }
.report-hint p:last-child { margin-bottom: 0; }
.report-cmd {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: 'SF Mono', 'Fira Mono', 'Menlo', monospace;
  font-size: 12px;
  color: #b8c0e0;
  margin: 6px 0 10px;
  overflow-x: auto;
}

/* ── Mobile-Menü (Hamburger) ──────────────────────────── */
/* Default: versteckt — wird nur im Mobile-Media-Query unten sichtbar. */
.mobile-menu {
  display: none;
  position: relative;
}
.mobile-menu-btn {
  background: var(--bg-input, #2a2a2a);
  color: var(--text);
  border: 1px solid var(--border, #444);
  padding: 6px 12px;
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.mobile-menu-btn:hover {
  background: var(--bg-card);
}
.mobile-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--bg-card, #1e1e1e);
  border: 1px solid var(--border, #444);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  z-index: 1000;
  padding: 4px 0;
}
.mobile-menu-dropdown .mm-item {
  display: block;
  padding: 10px 14px;
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
}
.mobile-menu-dropdown .mm-item:hover {
  background: var(--bg-input);
}

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 680px) {
  .navbar-links { display: none; }
  .mobile-menu  { display: block; }

  /* Logout aus Desktop-Nav auf Mobile ausblenden — Profil ist in Bottom Nav */
  .logout-link  { display: none; }

  /* Platz für die Bottom Navigation Bar */
  .main-content { padding-bottom: 88px; }

  .column { flex: 1 1 100%; max-width: 100%; }

  .modal-overlay { align-items: flex-end; }
  .modal { max-height: 80vh; border-radius: 14px 14px 0 0; }

  .stats-card { flex: 1 1 100%; }

  .admin-table th:nth-child(4),
  .admin-table td:nth-child(4) { display: none; }
}

@media (min-width: 681px) {
  .mobile-menu { display: none !important; }
  .modal-overlay { align-items: center; padding: 20px; }
  .modal {
    border-radius: 14px;
    width: 100%;
    max-width: 760px;
    margin: auto;
  }
}

@media (min-width: 900px) {
  .main-content { padding: 28px 32px 24px; }
}

@media (min-width: 1600px) {
  .main-content { padding: 28px 48px 60px; }
}

/* ─── PROJEKTE ────────────────────────────────────────── */

/* Tab-Navigation */
.proj-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
}
.proj-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 8px 18px;
  font-size: 14px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.proj-tab:hover { color: var(--text); }
.proj-tab-active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; font-weight: 600; }

/* Projekt-Karten (Übersichtsseite) */
.proj-list { display: flex; flex-direction: column; gap: 12px; }
.proj-card-link { text-decoration: none; color: inherit; display: block; }
.proj-card-link:hover, .proj-card-link:hover * { text-decoration: none; }
.proj-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: box-shadow .15s;
}
.proj-card-link:hover .proj-card { box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.proj-card-overdue { border-left: 3px solid var(--danger); }
.proj-card-archived { opacity: .75; }
.proj-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.proj-card-title { font-weight: 600; font-size: 15px; }
.proj-card-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.proj-card-meta { font-size: 12px; color: var(--text-muted); margin-top: 8px; }

/* Badges */
.proj-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.proj-badge-overdue { background: rgba(220,53,69,.15); color: var(--danger); }
.proj-badge-due     { background: rgba(255,193,7,.15);  color: #b8860b; }
.proj-badge-done    { background: rgba(40,167,69,.15);  color: #28a745; }
.proj-badge-info    { background: var(--hover-bg);      color: var(--text-muted); }

/* Fortschrittsbalken */
.proj-progress { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.proj-progress-bar-wrap {
  flex: 1;
  min-width: 80px;
  height: 6px;
  background: var(--hover-bg);
  border-radius: 3px;
  overflow: hidden;
}
.proj-progress-bar-wrap-lg { height: 10px; border-radius: 5px; }
.proj-progress-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .3s ease;
}
.proj-progress-bar-done { background: #28a745; }
.proj-progress-text { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* Projekt-Detailseite */
.proj-detail-header {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.proj-detail-desc { margin: 0 0 6px; font-size: 14px; }
.proj-detail-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.proj-detail-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.proj-detail-progress { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Aufgabenliste */
.proj-task-list { display: flex; flex-direction: column; gap: 8px; }
.proj-task {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  transition: opacity .2s;
}
.proj-task-done { opacity: .55; }
.proj-task-overdue { border-left: 3px solid var(--danger); }
.proj-task-check { flex-shrink: 0; padding-top: 2px; }
.proj-check-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: background .15s, border-color .15s;
  color: #fff;
}
.proj-check-btn:hover { border-color: var(--accent); background: var(--hover-bg); }
.proj-check-btn-done { background: #28a745; border-color: #28a745; }
.proj-check-btn-disabled { border-color: var(--border); cursor: default; color: var(--text-muted); }
.proj-task-body { flex: 1; min-width: 0; }
.proj-task-title { font-weight: 500; font-size: 14px; }
.proj-task-desc  { font-size: 13px; margin-top: 2px; }
.proj-task-meta  { font-size: 12px; margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.proj-task-actions { flex-shrink: 0; display: flex; gap: 6px; align-items: center; }
.proj-task-drag {
  flex-shrink: 0;
  cursor: grab;
  color: var(--text-muted);
  font-size: 18px;
  padding: 0 4px;
  user-select: none;
  line-height: 1;
}
.proj-task-drag:active { cursor: grabbing; }
.proj-task.drag-ghost  { opacity: 0.4; }
.proj-task.drag-over   { box-shadow: 0 -2px 0 0 var(--accent); }

/* Rück-Button */
.btn-back {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 6px;
}
.btn-back:hover { color: var(--text); }

/* Dashboard-Projektkarte */
.proj-dash-card-link { text-decoration: none; color: inherit; display: block; margin-bottom: 10px; }
.proj-dash-card-link:hover, .proj-dash-card-link:hover * { text-decoration: none; }
.proj-dash-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  transition: box-shadow .15s;
}
.proj-dash-card-link:hover .proj-dash-card { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.proj-dash-card-overdue { border-left: 3px solid var(--danger); }
.proj-dash-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.proj-dash-desc  { font-size: 12px; margin-bottom: 6px; }
.proj-dash-progress { display: flex; align-items: center; gap: 8px; }

/* ═══ Cross-Connects (XC) ═══════════════════════════════ */

/* Warn-Leiste mit Badges */
.xc-warnbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.xc-warnbadge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.xc-warnbadge:hover { border-color: var(--accent); }
.xc-warnbadge .warn-count {
  font-weight: 700;
  min-width: 1.6em;
  text-align: center;
}
.xc-warnbadge.warn-empty { opacity: 0.55; cursor: default; }
.xc-warnbadge.warn-empty:hover { border-color: var(--border); }
.xc-warnbadge.warn-active {
  border-color: var(--warning);
}
.xc-warnbadge.warn-active .warn-count { color: var(--warning); }
.xc-warnbadge.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.xc-warnbadge.active .warn-count { color: white; }

/* Status-Badge in Listenzeile + Header */
.xc-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--bg-input);
  color: var(--text-muted);
  vertical-align: middle;
}
.xc-status-angefragt                    { background:#7a7a7a22; color:#999; }
.xc-status-kunden_bestaetigung_erhalten { background:#5b7cf622; color:#5b7cf6; }
.xc-status-bestellt_beim_rz             { background:#5b7cf622; color:#5b7cf6; }
.xc-status-aktiv                        { background:#3cb87a22; color:#3cb87a; }
.xc-status-vom_kunden_gekuendigt        { background:#e0a02022; color:#e0a020; }
.xc-status-beim_rz_gekuendigt           { background:#e0a02022; color:#e0a020; }
.xc-status-kuendigung_bestaetigt        { background:#e0a02022; color:#e0a020; }
.xc-status-eingestellt                  { background:#7a7a7a22; color:#999; }
.xc-status-on_hold                      { background:#e0a02022; color:#e0a020; }
.xc-status-storno                       { background:#e05c5c22; color:#e05c5c; }

/* Summen-Zeile am Ende der XC-Liste */
.xc-list-totals td {
  background: var(--bg-input);
  border-top: 2px solid var(--border);
  font-size: 0.92em;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
.xc-total-label {
  color: var(--text-muted);
  font-weight: normal;
  font-size: 0.85em;
  margin-right: 4px;
}

/* Medium-Badge (LWL/Kupfer) in der Bezeichnungs-Spalte */
.xc-medium {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
}
.xc-medium-lwl_sm      { background: #5b7cf622; color: #5b7cf6; }
.xc-medium-lwl_mm      { background: #5b7cf622; color: #7a93f8; }
.xc-medium-lwl_unknown { background: #7279a022; color: #7279a0; }
.xc-medium-copper      { background: #c8761022; color: #c87610; }

/* Warn-Indikator in Tabellenzeile */
.xc-warn-dot {
  display: inline-block;
  margin-left: 4px;
  color: var(--warning);
  font-size: 14px;
  cursor: help;
}

/* Tabs für XC-Detail */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
}
.tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.tab-panel h4 {
  margin: 14px 0 8px 0;
  font-size: 13px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tab-panel h4:first-child { margin-top: 0; }

/* ─── XC-Liste auf Mobile ───────────────────────────────
   Auf schmalen Screens fressen Warn-Badges, Dropdown-Filter und die
   Status-Spalte zu viel Platz. Wir behalten nur die Volltextsuche
   und blenden alles andere aus. Im Detail-Tab bleibt die Warnbar
   (xc-warnbar OHNE .xc-warnbar-list) sichtbar.
   --------------------------------------------------------------- */
@media (max-width: 680px) {
  .xc-warnbar-list {
    display: none;
  }

  .xc-filter-bar select,
  .xc-filter-bar .admin-filter-count {
    display: none;
  }
  .xc-filter-bar .admin-filter-search {
    flex: 1 1 100%;
  }

  /* Status-Spalte (1. Spalte) — Header + alle Body-Zellen ausblenden */
  .xc-list-table thead th:first-child,
  .xc-list-table tbody td:first-child {
    display: none;
  }
}


/* ── Customer Autocomplete ─────────────────────────────────── */
.cust-ac {
  position: relative;
}
.cust-ac-display {
  width: 100%;
}
.cust-ac-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  margin-top: 2px;
}
.cust-ac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #eee);
  font-size: 14px;
}
.cust-ac-item:last-child {
  border-bottom: none;
}
.cust-ac-item:hover,
.cust-ac-item.active {
  background: var(--bg-input, #f0f4ff);
}
.cust-ac-num {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 0.85em;
  color: var(--text-muted);
  margin-right: 8px;
  min-width: 60px;
}
.cust-ac-email {
  color: var(--text-muted);
  font-size: 0.85em;
}
.cust-ac-inactive {
  color: var(--warning, #c80);
  font-size: 0.9em;
}
.cust-ac-local {
  color: var(--accent);
  font-size: 0.85em;
}
.cust-ac-empty {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ── Supplier-Autocomplete (analog cust-ac, eigener Namespace) ──── */
[data-sup-ac] { position: relative; display: block; }
.sup-ac-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  margin-top: 2px;
}
.sup-ac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border, #eee);
  font-size: 14px;
}
.sup-ac-item:last-child { border-bottom: none; }
.sup-ac-item:hover, .sup-ac-item.active {
  background: var(--bg-input, #f0f4ff);
}
.sup-ac-num {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 0.85em;
  color: var(--text-muted);
  margin-right: 8px;
  min-width: 60px;
}
.sup-ac-inactive {
  color: var(--warning, #c80);
  font-size: 0.9em;
}
.sup-ac-empty {
  padding: 10px 12px;
  color: var(--text-muted);
  font-size: 13px;
  font-style: italic;
}

/* ── DE-Date-Input: Markierung wenn Format ungültig ──────── */
[data-de-date] { display: inline-block; width: 100%; }
.de-date-invalid {
  border-color: #c44 !important;
  background: rgba(196,68,68,0.06);
}

/* ── Sub-Nav (für Customer-Cockpit und ggf. weitere Sub-Module) ───── */
.subnav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  /* Sticky direkt unter der Hauptnav (52px hoch), damit man beim Scrollen
     immer Zugriff auf Home / Sub-Nav-Punkte hat — auf Desktop und Mobile. */
  position: sticky;
  top: 52px;
  z-index: 99;
}
.subnav-link {
  color: var(--text);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.subnav-link:hover {
  background: var(--bg-input);
}
.subnav-link.active {
  background: var(--accent);
  color: #fff;
}
.subnav-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--border, rgba(120,120,120,0.3));
  margin: 0 4px;
  vertical-align: middle;
}
.subnav-count {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 4px;
  background: var(--accent, #5378d2);
  color: #fff;
  border-radius: 9px;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.4;
}
.subnav-link.active .subnav-count {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.subnav-home {
  color: var(--text-muted);
  font-weight: 500;
}
.subnav-home:hover {
  color: var(--text);
}
.subnav-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}

/* Im Sub-Kontext (z.B. /kunden) ausgegrautes Hauptmenü-Verhalten:
   Hauptnav bleibt sichtbar und klickbar (Variante B), aber Bottom-Nav
   verschwindet — das Sub-Cockpit hat seine eigene Navigation. */
body[data-subcontext] .mobile-bottom-nav {
  display: none !important;
}
body[data-subcontext] .main-content {
  /* Padding-Bottom für die Bottom-Nav nicht mehr nötig */
  padding-bottom: 24px !important;
}

@media (max-width: 680px) {
  .subnav {
    padding: 6px 12px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .subnav-link {
    padding: 5px 10px;
    font-size: 13px;
  }
}

/* ─── Kunden-Cockpit: Sticky-Wrapper (Subnav + Globale Suche) ─────────── */
/* Wrapper hält Subnav und Such-Bar zusammen sticky am oberen Rand.
   Die innere Subnav verliert ihre eigene sticky-Positionierung, damit
   sie nicht innerhalb des Wrappers wandert. */
.subctx-sticky {
  position: sticky;
  top: 52px;                /* unter der Hauptnav (52px hoch) */
  z-index: 99;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.subnav.subnav-in-sticky {
  position: static;
  top: auto;
  border-bottom: 1px solid var(--border);
}

/* Such-Bar unterhalb der Subnav */
.subctx-search-bar {
  position: relative;
  padding: 8px 24px;
  background: var(--bg-card);
}
.subctx-search-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
}
.subctx-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(91,124,246,.18);
}

/* Ergebnis-Dropdown als Overlay — schiebt den Page-Content NICHT. */
.subctx-search-results {
  position: absolute;
  top: calc(100% - 4px);
  left: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: calc(100vh - 200px);
  overflow-y: auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
  z-index: 101;
}
.gks-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 14px 4px;
  background: var(--bg-card);
  position: sticky;
  top: 0;
}
.gks-item {
  display: block;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background .12s;
}
.gks-item:last-child { border-bottom: none; }
.gks-item:hover,
.gks-item.active {
  background: var(--bg-input);
  text-decoration: none;
}
.gks-item.active {
  box-shadow: inset 3px 0 0 var(--accent);
}
.gks-name {
  font-weight: 600;
  font-size: 14px;
}
.gks-meta {
  color: var(--text-muted);
  font-size: 12px;
  margin-top: 2px;
}
.gks-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}

@media (max-width: 680px) {
  .subctx-search-bar {
    padding: 6px 12px;
  }
  .subctx-search-input {
    font-size: 13px;
    padding: 6px 10px;
  }
  .subctx-search-results {
    left: 12px;
    right: 12px;
  }
}