/* =========================================================
   MALERPLUS • WORKER BOTTOM-NAV (Sprint 2026-05-07d)
   ---------------------------------------------------------
   Color-Coded Tiles für Worker/Foreman.
   Active-State: kräftiger Tile-Tint mit Soft-Glow.
   Idle: Icon getönt, Text dezent.
   Glassmorphism-Container kommt aus mp-bottom-nav-premium.css —
   diese Datei tönt nur die fünf Worker-Tiles ein.
   Owner-/Bürokraft-Bottom-Nav bleibt unangetastet.
   ========================================================= */

/* ── Tile-Akzent-Farben (CSS-Custom-Properties) ─────────── */
body.mp-role-worker .bottom-nav .nav-btn,
body.mp-role-foreman .bottom-nav .nav-btn {
  --mp-tile-accent: rgba(15,23,42,.55);
  --mp-tile-accent-soft: rgba(15,23,42,.06);
}

body.mp-role-worker  .bottom-nav .nav-btn[data-nav="view-projekte"],
body.mp-role-foreman .bottom-nav .nav-btn[data-nav="view-projekte"] {
  --mp-tile-accent: #2bb0ff;            /* mp-blue — Cockpit */
  --mp-tile-accent-soft: rgba(43,176,255,.14);
}
body.mp-role-worker  .bottom-nav .nav-btn[data-nav="view-meine-stunden"],
body.mp-role-foreman .bottom-nav .nav-btn[data-nav="view-meine-stunden"] {
  --mp-tile-accent: #10b981;            /* emerald — Zeiten */
  --mp-tile-accent-soft: rgba(16,185,129,.14);
}
body.mp-role-worker  .bottom-nav .nav-btn[data-nav="view-worker-fotos"],
body.mp-role-foreman .bottom-nav .nav-btn[data-nav="view-worker-fotos"] {
  --mp-tile-accent: #ff8a3d;            /* mp-orange — Fotos */
  --mp-tile-accent-soft: rgba(255,138,61,.14);
}
body.mp-role-worker  .bottom-nav .nav-btn[data-nav="view-baustellenchat"],
body.mp-role-foreman .bottom-nav .nav-btn[data-nav="view-baustellenchat"] {
  --mp-tile-accent: #2dd4bf;            /* teal — Chat */
  --mp-tile-accent-soft: rgba(45,212,191,.14);
}
body.mp-role-worker  .bottom-nav .nav-btn[data-nav="view-workerstatus"],
body.mp-role-foreman .bottom-nav .nav-btn[data-nav="view-workerstatus"] {
  --mp-tile-accent: #fbbf24;            /* amber — Status */
  --mp-tile-accent-soft: rgba(251,191,36,.14);
}

/* ── Idle-State: Icon getönt, sanft animiert ─────────── */
body.mp-role-worker .bottom-nav .nav-btn .dash-launch-tile-icon,
body.mp-role-foreman .bottom-nav .nav-btn .dash-launch-tile-icon {
  color: var(--mp-tile-accent);
  opacity: .82;
  transition: none;
}
body.mp-role-worker .bottom-nav .nav-btn:hover .dash-launch-tile-icon,
body.mp-role-foreman .bottom-nav .nav-btn:hover .dash-launch-tile-icon {
  opacity: 1;
  transform: none;
}
body.mp-role-worker .bottom-nav .nav-btn .dash-launch-tile-title,
body.mp-role-foreman .bottom-nav .nav-btn .dash-launch-tile-title {
  color: rgba(var(--mp-t1-0f172a), 0.78);
  font-weight: 600;
  letter-spacing: .01em;
}

/* ── Active-State: Tile-Tint + Soft-Glow ─────────────── */
body.mp-role-worker  .bottom-nav .nav-btn.active,
body.mp-role-worker  .bottom-nav .nav-btn.is-active,
body.mp-role-foreman .bottom-nav .nav-btn.active,
body.mp-role-foreman .bottom-nav .nav-btn.is-active {
  background: linear-gradient(135deg,
    var(--mp-tile-accent),
    color-mix(in srgb, var(--mp-tile-accent) 80%, #1e293b 0%));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--mp-tile-accent) 55%, transparent),
    0 10px 24px color-mix(in srgb, var(--mp-tile-accent) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
}
body.mp-role-worker  .bottom-nav .nav-btn.active .dash-launch-tile-icon,
body.mp-role-worker  .bottom-nav .nav-btn.is-active .dash-launch-tile-icon,
body.mp-role-foreman .bottom-nav .nav-btn.active .dash-launch-tile-icon,
body.mp-role-foreman .bottom-nav .nav-btn.is-active .dash-launch-tile-icon {
  color: #fff;
  opacity: 1;
}
body.mp-role-worker  .bottom-nav .nav-btn.active .dash-launch-tile-title,
body.mp-role-worker  .bottom-nav .nav-btn.is-active .dash-launch-tile-title,
body.mp-role-foreman .bottom-nav .nav-btn.active .dash-launch-tile-title,
body.mp-role-foreman .bottom-nav .nav-btn.is-active .dash-launch-tile-title {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 1px rgba(15,23,42,.18);
}

/* ── Dark/Graphite ──────────────────────────────────── */
html.dark body.mp-role-worker .bottom-nav .nav-btn .dash-launch-tile-icon,
html.dark body.mp-role-foreman .bottom-nav .nav-btn .dash-launch-tile-icon {
  opacity: .78;
}
html.dark body.mp-role-worker .bottom-nav .nav-btn .dash-launch-tile-title,
html.dark body.mp-role-foreman .bottom-nav .nav-btn .dash-launch-tile-title {
  color: rgba(243,246,251,.78);
}
html.dark body.mp-role-worker .bottom-nav .nav-btn:hover .dash-launch-tile-icon,
html.dark body.mp-role-foreman .bottom-nav .nav-btn:hover .dash-launch-tile-icon {
  opacity: 1;
}

/* 30.08.2026 · eigenes, ruhiges Worker-Dock. Die fünf Ziele sind exakt
   die bereits vereinbarten Worker-Funktionen; kein Startmenü und keine
   Chef-Navigation. */
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > :not(.nav-btn),
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav .mp-dsm-start,
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav .mp-dtb,
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav #mpDockKi,
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav [data-mp-dock-extra],
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav .mp-dock-laser,
body:is(.mp-role-worker,.mp-role-foreman) .mp-dsm-panel,
body:is(.mp-role-worker,.mp-role-foreman) .mp-dsm-backdrop {
  display: none !important;
}

body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: auto !important;
  max-width: calc(100vw - 20px) !important;
  min-width: 0 !important;
  padding: 6px max(10px, env(safe-area-inset-right,0px))
           calc(6px + env(safe-area-inset-bottom,0px))
           max(10px, env(safe-area-inset-left,0px)) !important;
  gap: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
}

body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn:is(
  [data-nav="view-projekte"],
  [data-nav="view-meine-stunden"],
  [data-nav="view-worker-fotos"],
  [data-nav="view-baustellenchat"],
  [data-nav="view-workerstatus"]
) {
  display: inline-flex !important;
  flex: 0 0 54px !important;
  width: 54px !important;
  min-width: 54px !important;
  max-width: 62px !important;
  height: 54px !important;
  min-height: 54px !important;
  margin: 0 !important;
  padding: 4px !important;
  border-radius: 16px !important;
  transform: none !important;
  pointer-events: auto !important;
  align-items: center !important;
  justify-content: center !important;
}
/* mp-dock-nav.css nutzt in seiner historischen Sperre :not(#mpDockKi) und
   erhaelt dadurch ID-Spezifitaet. Diese gleich starke, spaeter geladene
   Worker-Regel ist noetig, damit die Allowlist nicht trotz display:flex leer
   bleibt. */
html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed:not(#mpDockKi):not(.mp-dock-laser),
html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed:not(#mpDockKi):not(.mp-dock-laser) {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 4px !important;
}
html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-icon,
html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-icon {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed svg,
html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed svg {
  width: 25px !important;
  height: 25px !important;
  stroke-width: 2 !important;
}

/* MP-20261004-007: Keine Beschriftung für Worker (nur vergrößerte Buttons für Werkstatt/Baustelle) */
html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-text,
html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-text,
html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-title,
html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-title,
html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-title::before,
html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-title::before,
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-workerstatus"] .dash-launch-tile-title,
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-workerstatus"] .dash-launch-tile-title::before,
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav .dash-launch-tile-title {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  height: 0 !important;
  line-height: 0 !important;
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-projekte"] { order:1 !important; }
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-meine-stunden"] { order:2 !important; }
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-worker-fotos"] { order:3 !important; }
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-baustellenchat"] { order:4 !important; }
body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn[data-nav="view-workerstatus"] { order:5 !important; }

body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn:not([data-nav="view-projekte"]):not([data-nav="view-meine-stunden"]):not([data-nav="view-worker-fotos"]):not([data-nav="view-baustellenchat"]):not([data-nav="view-workerstatus"]) {
  display: none !important;
}

@media (max-width: 480px) {
  body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav {
    bottom: max(8px, env(safe-area-inset-bottom,0px)) !important;
    gap: 6px !important;
  }
  body:is(.mp-role-worker,.mp-role-foreman) nav.bottom-nav > .nav-btn:is(
    [data-nav="view-projekte"],
    [data-nav="view-meine-stunden"],
    [data-nav="view-worker-fotos"],
    [data-nav="view-baustellenchat"],
    [data-nav="view-workerstatus"]
  ) {
    flex: 0 0 52px !important;
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 3px !important;
  }
  html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-icon,
  html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed .dash-launch-tile-icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 13px !important;
  }
  html body.mp-role-worker nav.bottom-nav > .nav-btn.mp-worker-dock-fixed svg,
  html body.mp-role-foreman nav.bottom-nav > .nav-btn.mp-worker-dock-fixed svg {
    width: 24px !important;
    height: 24px !important;
  }
}