/* STAFF-REDESIGN-5Z-A – kleine Abschlussrunde / Feinschliff
   Kein Funktionsumbau: nur UI-Glättung für Menü, Geräteseite, MA-Bereich und Rücksprünge. */

/* Mobile Menü: etwas klarer, weniger gedrängt */
.staffQuickMenu .menuItem{
  position:relative;
  min-height:44px;
  transition:background .14s ease,border-color .14s ease,transform .12s ease;
}
.staffQuickMenu .menuItem:active{transform:scale(.985)}
.staffQuickMenu .menuItem b{display:block;letter-spacing:-.01em}
.staffQuickMenu .menuGroupTitle{color:rgba(229,236,247,.60)}
.staffQuickMenu #menuDeviceStatusBtn b::after{
  content:'Status prüfen';
  display:block;
  margin-top:2px;
  color:rgba(168,176,189,.82);
  font-size:10px;
  line-height:1.1;
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
}
.staffQuickMenu #menuRefreshBtn b::after{
  content:'ohne App-Neustart';
  display:block;
  margin-top:2px;
  color:rgba(168,176,189,.82);
  font-size:10px;
  line-height:1.1;
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
}
.staffQuickMenu #logoutBtn b::after{
  content:'Sitzung beenden';
  display:block;
  margin-top:2px;
  color:rgba(255,185,185,.86);
  font-size:10px;
  line-height:1.1;
  font-weight:750;
  letter-spacing:0;
  text-transform:none;
}

/* Mitarbeiter-Bereich: keine Geräteoptik mehr, nur Schicht/Kasse */
#screenStaff .screen-title h2,
#screenDevice .screen-title h2{
  font-size:24px;
  line-height:1.05;
  letter-spacing:-.045em;
}
#screenStaff .screen-title p,
#screenDevice .screen-title p{
  font-size:13px;
  line-height:1.35;
  max-width:310px;
}
#screenStaff .ma-history-panel{margin-bottom:18px;}
#screenStaff .ma-empty-state,
#screenDevice .alert-sub{
  border:1px dashed rgba(255,255,255,.14);
  border-radius:15px;
  padding:13px 14px;
  background:rgba(255,255,255,.024);
}

/* Geräteseite: wirkt als eigene Seite, nicht als MA-Unterblock */
#screenDevice .device-page-card{
  border-color:rgba(245,196,0,.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(245,196,0,.10), transparent 42%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.024)),
    var(--panel);
}
#screenDevice .ma-device-panel{
  border:0;
  background:transparent;
  padding:0;
  box-shadow:none;
}
#screenDevice .ma-device-head{
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#screenDevice .ma-device-head h3{font-size:19px;}
#screenDevice .ma-device-actions .btn{
  min-height:44px;
  border-radius:14px;
}
#screenDevice .ma-device-actions .btn:first-child{
  background:rgba(245,196,0,.12);
  border-color:rgba(245,196,0,.28);
  color:var(--yellow);
}

/* Buttons und Rücksprungflächen weniger wuchtig */
#screenStaff .back-btn,
#screenDevice .back-btn{
  min-height:36px;
  padding:8px 11px;
  border-radius:12px;
  font-size:12px;
}
#screenStaff .ma-shift-form .btn.full,
#screenStaff #staffHistoryBtn{
  box-shadow:0 10px 28px rgba(0,0,0,.20);
}

/* Mini-Stabilität: Fokus sichtbar, aber nicht Browser-blau */
#screenStaff button:focus-visible,
#screenDevice button:focus-visible,
.staffQuickMenu .menuItem:focus-visible{
  outline:2px solid rgba(245,196,0,.42);
  outline-offset:2px;
}

@media (max-width:430px){
  #screenStaff .screen-title h2,
  #screenDevice .screen-title h2{font-size:22px;}
  #screenStaff .screen-title,
  #screenDevice .screen-title{gap:10px;}
  .staffQuickMenu .menuItem{min-height:42px;}
  .staffQuickMenu #menuDeviceStatusBtn b::after,
  .staffQuickMenu #menuRefreshBtn b::after,
  .staffQuickMenu #logoutBtn b::after{font-size:9.5px;}
}