/* Gestaltungsvorgabe: modern und möglichst nah an W3.CSS bleiben.
   Vorhandene W3.CSS-Komponenten und Klassen bevorzugen; eigenes CSS nur für
   notwendige ERP-spezifische Anpassungen. */
body,h1,h2,h3,h4,h5,h6,.w3-wide,a,.w3-sidebar a {font-family: "Inter Tight", sans-serif !important;}

/* Modern mobile navigation icon: asymmetric hamburger morphs into a left arrow. */
.ml-ham-icon {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: #000;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ml-ham-line {
  position: absolute;
  display: block;
  height: 2.5px;
  background: #fff;
  border-radius: 999px;
  transform: rotate(0deg);
  transform-origin: left center;
  transition:
    top 210ms cubic-bezier(.4, 0, .2, 1),
    left 210ms cubic-bezier(.4, 0, .2, 1),
    width 210ms cubic-bezier(.4, 0, .2, 1),
    transform 210ms cubic-bezier(.4, 0, .2, 1);
  will-change: top, left, width, transform;
}
.ml-ham-line-top {
  top: 14px;
  left: 11px;
  width: 22px;
}
.ml-ham-line-middle {
  top: 21px;
  left: 18px;
  width: 15px;
}
.ml-ham-line-bottom {
  top: 28px;
  left: 11px;
  width: 22px;
}
.ml-ham-icon.active .ml-ham-line-top {
  top: 21px;
  left: 11px;
  width: 11.5px;
  transform: rotate(-45deg);
}
.ml-ham-icon.active .ml-ham-line-middle {
  top: 21px;
  left: 11px;
  width: 23px;
}
.ml-ham-icon.active .ml-ham-line-bottom {
  top: 21px;
  left: 11px;
  width: 11.5px;
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .ml-ham-line { transition-duration: 0.01ms; }
}
/* loader */
@keyframes loader-rotate {
 0% {
 transform: rotate(0);
}
 100% {
 transform: rotate(360deg);
}
}
#preloader {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	overflow: visible;
	/*background: #fff;*/
	display: table;
	text-align: center;
}
#preloader_bg {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 99999;
	width: 100%;
	height: 100%;
	overflow: visible;
	background: #fff;
	display: table;
	text-align: center;
}
.loader {
	display: table-cell;
	vertical-align: middle;
	position: relative;
	width: 200px;
	height: 200px;
}
.loader-icon {
	width: 50px;
	height: 50px;
	border: 5px solid #000;
	border-right-color: #eee;
	border-radius: 50%;
	position: relative;
	animation: loader-rotate 1s linear infinite;
	margin: 0 auto;
}
.loader-txt {
	background-color: white;
	margin: 0 auto;
	width: 320px;
	height: 100px;
	border-radius: 4px;
}
.loader-icon-sm {
	width: 36px;
	height: 36px;
	border: 5px solid #000;
	border-right-color: #eee;
	border-radius: 50%;
	position: relative;
	animation: loader-rotate 1s linear infinite;
	margin: 0 auto;
}
.loader-icon-xs {
	width: 30px;
	height: 30px;
	border: 4px solid #000;
	border-right-color: #eee;
	border-radius: 50%;
	position: relative;
	animation: loader-rotate 1s linear infinite;
	margin: 0 auto;
}
.loader-icon-xs-black {
	width: 30px;
	height: 30px;
	border: 4px solid #000;
	border-right-color: #eee;
	border-radius: 50%;
	position: relative;
	animation: loader-rotate 1s linear infinite;
	margin: 0 auto;
}

.eyespan {
	float: right;
	margin-right: 10px;
	margin-top: -45px;
	position: relative;
	z-index: ;
	color: #666;
}
.eyespan:hover {
	float: right;
	margin-right: 10px;
	margin-top: -45px;
	position: relative;
	z-index: ;
	color: #666;
	/*background-color:#d21404;
		border-radius: 50%;*/
		cursor: pointer;
}

.theme-input {
    accent-color: #00ff00;
    height: 26px; /* not needed */
    width: 26px; /* not needed */
	border-radius: 8px;
}

.badge-circle {
  height: 40px;
  width: 40px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: #f3f7f2;
  color: black;
}

.badge-circle-l {
  height: 50px;
  width: 50px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: #f3f7f2;
  color: black;
}

.w3-hover-custom:hover {
    color: #00 !important;
    background-color: #f4f9fa; !important;
}

.w3-seafoam {color:#000 !important; background-color:#9FE2BF !important}

a.ulink:link, a:visited {
text-decoration: none; 
border-bottom:1px solid #009688;
}

a.ulink:hover, a:active {
}

a.ulinkv:link, a:visited {
text-decoration: none; 
border-bottom:1px solid #9c27b0;
}

a.ulinkv:hover, a:active {
}

.dvnfo {
position: fixed;
bottom: 0;
padding: 25px;
margin-left: 5%;
width: 90%;
height: 360px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background: #fff;
margin: 5 auto;
z-index: 3;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: none; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.w3-greyish,
.w3-hover-greyish:hover {
    color: #000 !important;
    background-color: #f3f7f2 !important;
}

.w3-card-border{
    border: 1px solid #f3f7f2;
}
.w3-card-border-red{
    border: 1px solid #ff0000;
}
.w3-card-border-green{
    border: 2px solid #4caf50;
}

You can do this with some CSS animation and keyframes. Take a look what I did here:

https://jsfiddle.net/ko9nx4mt/1/

function changeFavButtonClass(){
  if ( document.getElementById("fav_button_icon").className == 'mdi mdi-48px mdi-star-outline' ){
  document.getElementById("fav_button_icon").className = 'mdi mdi-48px mdi-star';
  }else{
  document.getElementById("fav_button_icon").className = 'mdi mdi-48px mdi-star-outline';
  }
}
.rotate-right{
  animation:rotr 0.5s linear, fade-out 0.25s linear, fade-in 0.25s linear;
}

.rotate-left{
  animation:rotl 0.5s linear, fade-out 0.25s linear, fade-in 0.25s linear;
}

@keyframes rotr {
    from {transform:rotateY(0deg);}
    to {transform:rotateY(180deg);}
}

@keyframes rotl {
    from {transform:rotateY(0deg);}
    to {transform:rotateY(-180deg);}
}

@keyframes fade-out {
  0%    { opacity: 1; }
  20%   { opacity: 0.8; }
  80%   { opacity: 0.2; }
  100%  { opacity: 0; }
}

@keyframes fade-in {
  0%    { opacity: 0; }
  20%   { opacity: 0.2; }
  80%   { opacity: 0.8; }
  100%  { opacity: 1; }
}

.rotate-up{
  animation:rotu 0.5s linear, fade-out 0.25s linear, fade-in 0.25s linear;
}

.rotate-down{
  animation:rotd 0.5s linear, fade-out 0.25s linear, fade-in 0.25s linear;
}

@keyframes rotu {
    from {transform:rotateX(0deg);}
    to {transform:rotateX(180deg);}
}

@keyframes rotd {
    from {transform:rotateX(0deg);}
    to {transform:rotateX(-180deg);}
}

.w3-animate-bottom-back {
    position: fixed;
    animation: animatebottomback 0.2s;
}
@keyframes animatebottomback {
    from {
        bottom: 0;
        opacity: 1;
    }
    to {
        bottom: -300px;
        opacity: 0;
    }
}

* {
  -webkit-tap-highlight-color: transparent;
}

textarea:focus, input:focus{
    outline: none;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50em;
  background: url(/lic/assets/lucide/circle-x.svg) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  pointer-events: none;
  margin-right: 50px;
}

input[type="search"]:focus::-webkit-search-cancel-button {
  opacity: .3;
  pointer-events: all;
}

input[type="search"].dark::-webkit-search-cancel-button {
  filter: invert(1);
}

  .body-no-scroll {
    height: 100vh;
    width: 100vw;
    touch-action: none;
    -webkit-overflow-scrolling: none;
    overflow: hidden;
    overscroll-behavior: none;
  }
  
    .custom-checkbox {
      display: inline-block;
      position: relative;
      padding-left: 30px;
      cursor: pointer;
      font-size: 18px;
      user-select: none;
    }

    /* Hide the native checkbox */
    .custom-checkbox input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

    /* Custom square */
    .checkmark {
      position: absolute;
      top: 0;
      left: 0;
      height: 20px;
      width: 20px;
      background-color: white;
      border: 2px solid black;
      transition: 0.2s;
    }

    /* When checked, change background and show arrow */
    .custom-checkbox input:checked ~ .checkmark {
      background-color: black;
    }

    .checkmark::after {
      content: "";
      position: absolute;
      display: none;
    }

    /* Arrow or checkmark */
    .custom-checkbox input:checked ~ .checkmark::after {
      display: block;
      content: "?"; /* You can use ? or any icon */
      color: white;
      font-size: 14px;
      top: 1px;
      left: 4px;
    }

*:focus {
    outline: none;
}

/* QR code W3.CSS dropdown */
.ed-panel[data-panel="qrcode"] .ed-section,
.ed-panel[id$="_qrcode"] .ed-section {
  overflow: visible;
}

/* The QR action menu needs overflow:visible on the parent section. Without
   clipping, the rectangular section header can paint into the parent's rounded
   top corners and visually interrupt the grey border. Round the header itself
   to the section's inner radius so the top-left/right border stays continuous. */
.ed-panel[data-panel="qrcode"] .ed-section > .ed-section-head,
.ed-panel[id$="_qrcode"] .ed-section > .ed-section-head {
  border-top-left-radius: 11px !important;
  border-top-right-radius: 11px !important;
  background-clip: padding-box !important;
}

/* MLERP three-dot action toggles
   Keep the touch/click target and show only the black ellipsis at rest.
   Hover/keyboard focus uses the same soft round grey feedback as the native
   right-sidebar close control. */
.qr-w3-dropdown-toggle,
.qr-w3-dropdown-toggle:focus,
.qr-w3-dropdown-toggle[aria-expanded="true"],
.qr-w3-dropdown > .qr-w3-dropdown-toggle,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:focus,
.qr-w3-dropdown > .qr-w3-dropdown-toggle[aria-expanded="true"] {
  color: #111 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  border-radius: 999px !important;
  transition: background-color .14s ease, transform .12s ease, opacity .12s ease;
}

.qr-w3-dropdown-toggle:hover,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:hover,
.qr-w3-dropdown-toggle:focus-visible,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:focus-visible {
  color: #111 !important;
  background: #f1f1f1 !important;
  background-color: #f1f1f1 !important;
  border-radius: 999px !important;
}

.qr-w3-dropdown-toggle:active,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:active {
  color: #111 !important;
  background: #e9e9e9 !important;
  background-color: #e9e9e9 !important;
  border-radius: 999px !important;
  transform: scale(.96);
}

.qr-w3-dropdown-toggle > i,
.qr-w3-dropdown-toggle > svg.lucide,
.qr-w3-dropdown-toggle:hover > i,
.qr-w3-dropdown-toggle:hover > svg.lucide,
.qr-w3-dropdown-toggle:focus > i,
.qr-w3-dropdown-toggle:focus > svg.lucide,
.qr-w3-dropdown-toggle:active > i,
.qr-w3-dropdown-toggle:active > svg.lucide,
.qr-w3-dropdown-toggle[aria-expanded="true"] > i,
.qr-w3-dropdown-toggle[aria-expanded="true"] > svg.lucide {
  color: #111 !important;
}

/* Rounded, light W3 dropdown. */
.qr-w3-dropdown-content {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.14) !important;
  font-weight: 400 !important;
}

.qr-w3-dropdown-content .qr-w3-dropdown-item,
.qr-w3-dropdown-content .qr-w3-dropdown-item:hover,
.qr-w3-dropdown-content .qr-w3-dropdown-item:focus {
  font-weight: 400 !important;
}



/* ========================================================================== */
/* MLERP: panel icons/avatar always top-aligned                               */
/* ========================================================================== */
#dvBodyLoader .ml-client-row,
#dvBodyLoader .ml-location-row,
#dvBodyLoader .ml-appointment-row {
  align-items: flex-start !important;
}

#dvBodyLoader .ml-client-avatar,
#dvBodyLoader .ml-location-avatar,
#dvBodyLoader .ml-appointment-avatar,
.ed-avatar {
  align-self: flex-start !important;
  vertical-align: top !important;
}

.ed-hero {
  align-items: flex-start !important;
}

/* Native fallback keeps the same ERP field look if Framework7 Calendar is unavailable. */
input.mlerp-native-date-fallback,
input[type="date"].w3-input,
input[type="datetime-local"].w3-input,
input[type="time"].w3-input {
  border-radius: 4px !important;
  cursor: pointer;
}


.mlerp-date-picker-visible {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}


/* MLERP PDF document preview ------------------------------------------------ */
#mlPdfViewerOverlay.ml-pdf-overlay{position:fixed;inset:0;z-index:2147483000;background:rgba(8,10,14,.82);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s ease;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#mlPdfViewerOverlay.ml-pdf-open{opacity:1;visibility:visible;pointer-events:auto}
.ml-pdf-shell{width:min(1320px,calc(100vw - 48px));height:min(94vh,1080px);background:#f3f4f6;border-radius:22px;overflow:hidden;box-shadow:0 28px 90px rgba(0,0,0,.52);display:flex;flex-direction:column;transform:translateY(18px) scale(.985);opacity:.96;transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .24s ease;border:1px solid rgba(255,255,255,.14)}
#mlPdfViewerOverlay.ml-pdf-open .ml-pdf-shell{transform:translateY(0) scale(1);opacity:1}
.ml-pdf-head{min-height:72px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 14px 11px 18px;flex:0 0 auto}
.ml-pdf-head-text{min-width:0;flex:1}
.ml-pdf-kicker{font-size:11px;line-height:1.25;color:#777;font-weight:700;text-transform:uppercase;letter-spacing:.055em;margin-bottom:4px}.ml-pdf-kicker i{margin-right:6px;color:#9c27b0}
.ml-pdf-title{font-weight:700;font-size:16px;line-height:1.25;color:#171717;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ml-pdf-head-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.ml-pdf-head-btn,.ml-pdf-close{height:42px;border-radius:12px;border:1px solid #dedede;background:#fff;color:#222!important;text-decoration:none!important;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 13px;font-size:13px;font-weight:650;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease}.ml-pdf-head-btn:hover,.ml-pdf-close:hover{background:#f3f3f3;border-color:#ccc}.ml-pdf-head-btn:active,.ml-pdf-close:active{transform:scale(.97)}
.ml-pdf-close{width:42px;padding:0;background:#fff;color:#222!important;border:0;font-size:16px}.ml-pdf-close:hover{background:#f3f4f6;border:0}.ml-pdf-close:focus-visible{outline:2px solid #9c27b0;outline-offset:-3px}
.ml-pdf-stage{position:relative;flex:1;min-height:0;overflow:auto;padding:32px;text-align:center;background:linear-gradient(180deg,#cfd2d6 0%,#bfc3c8 100%);overscroll-behavior:contain;scrollbar-gutter:stable}
.ml-pdf-paper-wrap{min-width:100%;min-height:100%;display:flex;align-items:flex-start;justify-content:center}
.ml-pdf-canvas{display:block;background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.28);border-radius:2px;max-width:none}
.ml-pdf-loading{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;font-size:14px;font-weight:650;color:#333;background:rgba(207,210,214,.86);pointer-events:none;padding:24px}.ml-pdf-loading .ml-pdf-spinner{font-size:23px;color:#9c27b0}
.ml-pdf-error{color:#a40018;background:rgba(255,245,246,.95);pointer-events:auto}.ml-pdf-error i{font-size:26px}
.ml-pdf-controls{min-height:62px;background:#fff;border-top:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;gap:18px;padding:9px 14px;flex:0 0 auto;box-shadow:0 -4px 18px rgba(0,0,0,.04)}
.ml-pdf-control-group{display:flex;align-items:center;gap:7px}
.ml-pdf-control-btn,.ml-pdf-fit-btn{height:40px;border:1px solid #dedede;background:#fff;color:#222;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 13px;font-size:13px;font-weight:650;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.ml-pdf-control-btn{width:40px;padding:0}.ml-pdf-control-btn:hover:not(:disabled),.ml-pdf-fit-btn:hover{background:#f3f3f3;border-color:#c9c9c9}.ml-pdf-control-btn:active:not(:disabled),.ml-pdf-fit-btn:active{transform:scale(.96)}.ml-pdf-control-btn:disabled{opacity:.34;cursor:default}
.ml-pdf-page-info,.ml-pdf-zoom-info{font-size:13px;color:#444;min-width:68px;text-align:center;font-variant-numeric:tabular-nums}.ml-pdf-zoom-info{min-width:58px}
.ed-file-preview{display:inline-flex;align-items:center;gap:7px;border-radius:7px;padding:8px 11px;background:#9c27b0;color:#fff!important;text-decoration:none!important;font-size:15px;font-weight:600}.ed-file-preview i{font-size:15px;line-height:1}.ed-file-preview:hover{background:#7b1fa2;color:#fff!important}
body.ml-pdf-body-open{overflow:hidden!important}
@media(max-width:760px){#mlPdfViewerOverlay.ml-pdf-overlay{padding:0}.ml-pdf-shell{width:100vw;height:100dvh;max-height:none;border-radius:0;border:0}.ml-pdf-head{min-height:64px;padding:9px 9px 9px 13px;gap:8px}.ml-pdf-kicker{display:none}.ml-pdf-title{font-size:14px}.ml-pdf-head-btn{width:40px;padding:0}.ml-pdf-head-btn span{display:none}.ml-pdf-stage{padding:14px 10px}.ml-pdf-controls{min-height:58px;gap:10px;padding:8px}.ml-pdf-fit-btn span{display:none}.ml-pdf-fit-btn{width:40px;padding:0}.ml-pdf-page-info{min-width:60px}.ml-pdf-zoom-info{min-width:52px}}
@media(max-width:410px){.ml-pdf-controls{justify-content:space-between;gap:4px}.ml-pdf-control-group{gap:4px}.ml-pdf-control-btn,.ml-pdf-fit-btn{height:38px;width:38px}.ml-pdf-page-info{min-width:52px;font-size:12px}.ml-pdf-zoom-info{min-width:45px;font-size:12px}}

/* Document download action: used by detail modules that do not define it locally. */
.ed-file-download{display:inline-flex;align-items:center;gap:7px;border-radius:7px;padding:8px 11px;background:#eee;color:#222!important;text-decoration:none!important;font-size:12px;font-weight:600}.ed-file-download:hover{background:#e2e2e2;color:#222!important}


/* ============================================================
   Portal switcher
   ============================================================ */
.ml-mobile-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: -10px;
}

.ml-ham-button {
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.ml-portal-switcher {
  height: 44px;
  min-width: 150px;
  max-width: 240px;
  padding: 0 34px 0 12px;
  border: 1px solid #dedede;
  border-radius: 12px;
  background: #fff;
  color: #111;
  font-family: 'Inter Tight', sans-serif;
  font-size: 15px;
  font-weight: 550;
  outline: none;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
}

.ml-portal-switcher:focus {
  border-color: #9c27b0;
}

.ml-portal-switcher-sidebar {
  width: 100%;
  min-width: 0;
  max-width: 205px;
}

.ml-portal-switcher-mobile {
  width: 100%;
  min-width: 0;
  max-width: 230px;
  height: 42px;
  font-size: 14px;
}

.ml-portal-switcher-header {
  min-width: 190px;
  max-width: 260px;
  width: auto;
}

.ml-portal-title-header {
  margin-left: 250px;
  z-index: 10 !important;
}

.ml-portal-top-cell {
  position: relative;
  height: 50px;
}

.ml-portal-top-switch,
.ml-portal-scan-overlay {
  position: absolute;
  left: 16px;
  right: 4px;
  top: 0;
}

.ml-portal-scan-overlay {
  z-index: 2;
}

.ml-mobile-back-cell {
  overflow: hidden;
  padding-left: 0 !important;
  text-align: left;
}

.ml-mobile-back-cell #dvBack {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.ml-mobile-back-cell #dvBack h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .ml-mobile-top-actions { gap: 5px; }
  .ml-portal-top-switch,
  .ml-portal-scan-overlay {
    left: 8px;
    right: 0;
  }
  .ml-portal-switcher-mobile {
    font-size: 13px;
    padding-left: 8px;
    padding-right: 26px;
  }
}

/* Sidebar portal/account panel */
.ml-portal-account-panel {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  margin-top: -20px;
  padding: 16px 12px 12px;
  border: 1px solid #ccc !important;
  background: #fff;
}

.ml-portal-account-panel-title {
  position: absolute;
  top: -10px;
  left: 12px;
  padding: 0 7px;
  background: #fff;
  color: #757575;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.ml-portal-account-panel .ml-portal-switcher-sidebar {
  width: 100% !important;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 8px 30px 8px 8px;
  border-radius: 4px !important;
  background: #f1f1f1;
  box-shadow: none;
  font-size: 16px !important;
  font-weight: 500 !important;
}

.ml-portal-employee-name {
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 400;
}

/* Calendar color selector used by Order and Appointment forms. */
.lic-calendar-color-picker{display:flex;flex-wrap:wrap;gap:9px;align-items:center;width:100%;padding-top:2px;padding-bottom:3px;box-sizing:border-box}
.lic-calendar-color-picker input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.lic-calendar-color-choice{width:42px;height:42px;border:2px solid transparent!important;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.lic-calendar-color-choice i,
.lic-calendar-color-choice svg.lucide{opacity:0!important;font-size:16px;color:inherit}
.lic-calendar-color-picker input[type="radio"]:checked + .lic-calendar-color-choice{border-color:#111!important;box-shadow:0 0 0 2px #fff inset,0 0 0 1px #111;transform:none}
.lic-calendar-color-picker input[type="radio"]:checked + .lic-calendar-color-choice i,
.lic-calendar-color-picker input[type="radio"]:checked + .lic-calendar-color-choice svg.lucide{opacity:1!important}
.lic-calendar-color-picker input[type="radio"]:focus-visible + .lic-calendar-color-choice{outline:2px solid #111;outline-offset:2px}


/* MLERP datepicker calendar icon inside input */
.mlerp-date-picker-visible {
  padding-right: 42px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  cursor: pointer;
}


/* MLERP: detail action dropdown alignment */
.lic-detail-action-dropdown .qr-w3-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  text-align: left !important;
}

.lic-detail-action-dropdown .qr-w3-dropdown-item > i,
.lic-detail-action-dropdown .qr-w3-dropdown-item > svg.lucide {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 20px !important;
  margin: 0 !important;
  text-align: center !important;
}

/* MLERP: detail actions are pinned to the upper-right corner of every detail hero. */
.ed-hero {
  position: relative !important;
  overflow: visible !important;
}

.ed-hero .ed-name-row {
  padding-right: 150px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.lic-detail-hero-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  margin: 0 !important;
  z-index: 3 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.lic-detail-hero-actions > .qr-w3-dropdown {
  position: relative !important;
  overflow: visible !important;
}

.lic-detail-hero-actions > .qr-w3-dropdown > .qr-w3-dropdown-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 600px) {
  .ed-hero .ed-name-row {
    padding-right: 138px !important;
  }

  .lic-detail-hero-actions {
    top: 12px !important;
    right: 12px !important;
  }
}

/* MLERP list-card action menus */
.lic-list-head-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-left:0;
  flex-shrink:0;
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;
  overflow:visible;
}

/* Keep status + action menu pinned to the upper-right corner of every list panel. */
.ml-client-card,
.ml-location-card,
.ml-appointment-card {
  position:relative !important;
  overflow:visible !important;
}

#dvBodyLoader .ml-client-head,
#dvBodyLoader .ml-location-head,
#dvBodyLoader .ml-appointment-head {
  padding-right:150px;
  box-sizing:border-box;
}

@media (max-width:600px) {
  .lic-list-head-actions {
    top:12px;
    right:12px;
  }
  #dvBodyLoader .ml-client-head,
  #dvBodyLoader .ml-location-head,
  #dvBodyLoader .ml-appointment-head {
    padding-right:138px;
  }
}
.lic-list-action-menu {
  position:relative;
  overflow:visible;
  flex-shrink:0;
}
/* All three-dot action buttons intentionally use the unmodified W3 button sizing.
   This is the same sizing used by /lic/admin/vehicle/detail/. */
.ml-client-card, .ml-location-card, .ml-appointment-card {
  overflow:visible !important;
}


/* ==========================================================================
   MLERP global interface layer order
   Content/card actions < top navigation < sidebar overlay < sidebar.
   Higher application overlays keep their existing levels:
   right sidebar 98/99, bottom sheet 108/109, preloaders/PDF viewer above those.
   ========================================================================== */
.lic-detail-hero-actions,
.lic-list-head-actions {
  z-index: 3 !important;
}

.ml-admin-top-menu,
.ml-portal-title-header {
  z-index: 10 !important;
}

#myOverlay {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0,0,0,.50) !important;
  z-index: 20 !important;
}

#mySidebar {
  z-index: 21 !important;
}


/* Order cards: keep customer/status in the first row, while title and order number
   can use the full content width below. */
#dvBodyLoader .ml-order-card .ml-client-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  column-gap: 12px !important;
  row-gap: 0 !important;
  padding-right: 0 !important;
  width: 100%;
}
#dvBodyLoader .ml-order-card .ml-order-head-main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
#dvBodyLoader .ml-order-card .lic-list-head-actions {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  margin: 0 !important;
}
#dvBodyLoader .ml-order-card .ml-order-title {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}
#dvBodyLoader .ml-order-card .ml-client-type {
  grid-column: 1 / -1;
  justify-self: start;
}

/* Small screens: wrap panel text only at normal word boundaries/spaces. */
@media (max-width: 600px) {
  .ml-client-card .ml-client-name,
  .ml-client-card .ml-order-title,
  .ml-client-card .ml-client-role-item,
  .ml-client-card .ml-client-meta-item span,
  .ml-location-card .ml-location-name,
  .ml-location-card .ml-location-role-item,
  .ml-location-card .ml-location-meta-item span,
  .ml-appointment-card .ml-appointment-name,
  .ml-appointment-card .ml-appointment-meta-item span,
  .ed-hero .ed-name,
  .ed-hero .ed-subtitle-item {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }
}

/* ==========================================================================
   MLERP panel action toggle sizing
   Keep every main three-dot panel action button exactly the same size on
   list panels and detail hero panels. This intentionally does not affect
   document/QR-code dropdown buttons.
   ========================================================================== */
.lic-list-head-actions > .lic-list-action-menu > .qr-w3-dropdown-toggle,
.lic-detail-hero-actions > .qr-w3-dropdown > .qr-w3-dropdown-toggle {
  box-sizing: border-box !important;
  width: 39px !important;
  min-width: 39px !important;
  max-width: 39px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 35px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: top !important;
}

.lic-list-head-actions > .lic-list-action-menu > .qr-w3-dropdown-toggle > i,
.lic-detail-hero-actions > .qr-w3-dropdown > .qr-w3-dropdown-toggle > i {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

/* ==========================================================================
   MLERP detail hero = corresponding search/list card dimensions
   Keep detail panels 1:1 with the cards used on the module search pages.
   ========================================================================== */
.ed-hero {
  background: #f7f7f7 !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.025) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
}

.ed-hero .ed-avatar {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  background: #e5e5e5 !important;
  color: #333 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

.ed-hero .ed-avatar img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}

.ed-hero .ed-hero-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ed-hero .ed-name-row {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.ed-hero .ed-name {
  margin: 0 !important;
  color: #111 !important;
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
  min-width: 0 !important;
}

.ed-hero .ed-status {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  border-radius: 999px !important;
  padding: 4px 8px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  background: #ececec !important;
  color: #444 !important;
}

.ed-hero .ed-status-dot {
  width: 7px !important;
  height: 7px !important;
  min-width: 7px !important;
  border-radius: 50% !important;
  background: #888 !important;
}

.ed-hero .ed-status-active {
  background: #e8f5e9 !important;
  color: #236b2b !important;
}
.ed-hero .ed-status-active .ed-status-dot { background: #3c9a49 !important; }
.ed-hero .ed-status-inactive { background: #eee !important; color: #666 !important; }
.ed-hero .ed-status-deleted { background: #ffebee !important; color: #9d2525 !important; }
.ed-hero .ed-status-deleted .ed-status-dot { background: #cc3939 !important; }

.ed-hero .ed-subtitle {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 16px !important;
  margin-top: 9px !important;
  color: #555 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  min-width: 0 !important;
}

.ed-hero .ed-subtitle-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: #555 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.ed-hero .ed-subtitle-item i {
  width: 14px !important;
  min-width: 14px !important;
  text-align: center !important;
  color: #777 !important;
  flex: 0 0 auto !important;
}

/* Location and appointment search cards use 22px/18px pictogram sizes. */
.ed-hero.ml-detail-icon-22 .ed-avatar { font-size: 22px !important; }

@media (max-width: 600px) {
  .ed-hero {
    padding: 12px !important;
    border-radius: 10px !important;
    gap: 11px !important;
  }

  .ed-hero .ed-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 16px !important;
  }

  .ed-hero.ml-detail-icon-22 .ed-avatar { font-size: 18px !important; }

  .ed-hero .ed-name { font-size: 16px !important; }

  .ed-hero .ed-subtitle {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 5px !important;
  }
}


/* ========================================================================== 
   MLERP document action toggle sizing
   Match the document-tab three-dot button exactly to the main panel action
   toggle used on list/detail panels.
   ========================================================================== */
button.qr-w3-dropdown-toggle[aria-label="Dokument Aktionen"] {
  box-sizing: border-box !important;
  width: 39px !important;
  min-width: 39px !important;
  max-width: 39px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 35px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: top !important;
}

button.qr-w3-dropdown-toggle[aria-label="Dokument Aktionen"] > i {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 14px !important;
}

/* ========================================================================== 
   MLERP native-style save progress modal
   Global for all Erfassen/Bearbeiten save actions.
   ========================================================================== */
[id^="tx_lic_"][id$="_save"] {
  display: none !important;
}

body.ml-save-progress-open {
  overflow: hidden !important;
}

#mlSaveProgressOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147482800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 16, 0.52);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

#mlSaveProgressOverlay.ml-save-progress-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.ml-save-progress-modal {
  position: relative;
  width: min(340px, calc(100vw - 36px));
  box-sizing: border-box;
  padding: 24px 22px 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.24);
  text-align: center;
  transform: translateY(8px) scale(.98);
  transition: transform .18s ease;
}

#mlSaveProgressOverlay.ml-save-progress-open .ml-save-progress-modal {
  transform: translateY(0) scale(1);
}

.ml-save-progress-title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.25;
  color: #1d1d1f;
}

.ml-save-progress-text {
  min-height: 20px;
  margin: 7px 0 15px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: #666;
}

.ml-save-progress-track {
  width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #ececef;
}

.ml-save-progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #9c27b0;
  transition: width .16s ease;
}


@media (max-width: 600px) {
  #mlSaveProgressOverlay {
    padding: 16px;
  }
  .ml-save-progress-modal {
    width: min(330px, calc(100vw - 28px));
    padding: 22px 18px 22px;
    border-radius: 16px;
  }
}

/* ========================================================================== 
   Native-style admin app bar on small screens
   Keep medium/large layouts unchanged. The app bar stays below the sidebar
   overlay (z-index 20) and sidebar (21), preserving the global layer order.
   ========================================================================== */
.ml-admin-top-spacer {
  height: 100px;
}

@media (max-width: 600px) {
  .ml-admin-top-menu {
    min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
    height: calc(58px + env(safe-area-inset-top, 0px));
    overflow: visible !important;
    background: rgba(255, 255, 255, .94) !important;
    border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .045);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }

  .ml-admin-top-menu .ml-admin-top-menu-row {
    position: relative;
    width: 100% !important;
    height: 58px;
    margin-top: 0 !important;
    padding-top: env(safe-area-inset-top, 0px);
  }

  .ml-admin-top-menu .ml-mobile-back-cell {
    position: absolute;
    inset: env(safe-area-inset-top, 0px) 0 auto 0;
    width: 100% !important;
    height: 58px !important;
    padding: 0 !important;
    overflow: visible;
    text-align: center !important;
  }

  .ml-admin-top-menu .ml-mobile-back-cell > .w3-container {
    width: 100%;
    height: 58px;
    padding: 0 !important;
  }

  .ml-admin-top-menu .ml-mobile-back-cell #dvBack {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 58px;
    padding: 0 62px;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center !important;
  }

  .ml-admin-top-menu .ml-mobile-back-cell #dvBack.w3-hide {
    display: none !important;
  }

  .ml-admin-top-menu #dvBack > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 46px;
    min-width: 0;
    color: #111 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  .ml-admin-top-menu #dvBack h4 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 46px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
  }

  .ml-admin-top-menu #dvBack .ml-mobile-header-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ml-admin-top-menu #dvBack h4 > .lucide-chevron-left {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    font-size: 24px !important;
    font-weight: 600;
    line-height: 1;
  }

  .ml-admin-top-menu #dvHam {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 44px !important;
    height: 44px;
    padding: 0 !important;
  }

  .ml-admin-top-menu .ml-mobile-top-actions {
    width: 44px;
    height: 44px;
    margin-top: 0 !important;
    gap: 0;
  }

  .ml-admin-top-menu .ml-ham-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    -webkit-tap-highlight-color: transparent;
  }

  .ml-admin-top-menu .ml-ham-button #hamIcon {
    width: 44px !important;
    height: 44px !important;
  }

  .ml-admin-top-menu .ml-portal-scan-overlay {
    left: 10px;
    right: 62px;
    top: 8px;
    z-index: 3;
  }

  .ml-admin-top-menu .ml-portal-scan-overlay #camera-select {
    height: 42px !important;
    border-radius: 11px !important;
  }

  .ml-admin-top-spacer {
    height: calc(70px + env(safe-area-inset-top, 0px));
  }
}


@media (max-width: 600px) {
  .ml-admin-top-menu #dvBack > a:active {
    opacity: .58;
  }
  .ml-admin-top-menu .ml-ham-button:active {
    transform: scale(.96);
  }
}

/* ========================================================================== 
   Native-style right sidebar (Erfassen / Bearbeiten)
   Header stays compact and app-like; save action is mirrored into a sticky
   bottom action bar while the original module save button remains the source
   of truth for validation/AJAX handlers.
   ========================================================================== */
#myRightOverlay {
  background: rgba(10, 12, 16, .46) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

#myRightSidebar.w3-animate-right {
  animation-duration: .20s !important;
}

#myRightSidebar {
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  box-sizing: border-box;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

#myRightSidebar.right-sidebar-open {
  display: flex !important;
  flex-direction: column;
}

.ml-right-sidebar-header {
  /* Match the fixed top-header back control exactly: 8px from the left edge
     (plus the left safe-area inset on devices that need it). */
  --ml-right-sidebar-header-edge: max(8px, env(safe-area-inset-left, 0px));
  position: sticky;
  top: 0;
  z-index: 6;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  min-height: 58px;
  box-sizing: border-box;
  padding: 0 var(--ml-right-sidebar-header-edge);
  background: rgba(255, 255, 255, .95);
  border-bottom-color: rgba(0, 0, 0, .08) !important;
  box-shadow: 0 1px 10px rgba(0, 0, 0, .045);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

.ml-right-sidebar-close,
.ml-right-sidebar-header-spacer {
  width: 44px;
  height: 44px;
}

.ml-right-sidebar-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #111 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  -webkit-tap-highlight-color: transparent;
}

.ml-right-sidebar-close:hover {
  background: #f1f1f1 !important;
}

.ml-right-sidebar-close:active {
  transform: scale(.96);
  opacity: .68;
}

.ml-right-sidebar-heading {
  min-width: 0;
  text-align: center;
}

.ml-right-sidebar-title {
  position: relative;
  top: 3px;
  display: inline-block;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  color: #111;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Existing callers still inject a plus/edit icon into the title. Keep the
   title API compatible but hide those legacy icons in the native header. */
.ml-right-sidebar-title > i,
.ml-right-sidebar-title > svg.lucide {
  display: none !important;
}

.ml-right-sidebar-subtitle:empty {
  display: none;
}

.ml-right-sidebar-subtitle {
  margin-top: 2px;
  overflow: hidden;
  font-size: 11px !important;
  line-height: 1.15;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ml-right-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px !important;
}

.ml-right-sidebar-footer {
  position: sticky;
  right: auto;
  bottom: 0;
  left: auto;
  z-index: 7;
  display: none;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, .07);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

#myRightSidebar.right-sidebar-open .ml-right-sidebar-footer.ml-has-save {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ml-right-sidebar-action {
  width: auto;
  box-sizing: border-box;
  font-weight: 600 !important;
  text-align: center !important;
}

.ml-right-sidebar-cancel {
  color: #111 !important;
  background: #fff !important;
  border-color: #d3d3d3 !important;
}

.ml-right-sidebar-cancel:hover {
  background: #f1f1f1 !important;
}

.ml-right-sidebar-save:hover,
.ml-right-sidebar-save:focus,
.ml-right-sidebar-save:active {
  color: var(--ml-btn-fg, #fff) !important;
  background-color: var(--ml-btn-bg, #9c27b0) !important;
}


.ml-right-sidebar-save:disabled {
  cursor: default;
  opacity: .62;
}

/* The real module button remains in the DOM so all existing validation,
   upload-progress and AJAX handlers keep working. Only its visual copy is
   hidden while the sticky footer mirrors/activates it. */
.ml-right-sidebar-original-save {
  display: none !important;
}

@media (max-width: 600px) {
  #myRightSidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  .ml-right-sidebar-header {
    min-height: calc(58px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  .ml-right-sidebar-body {
    padding: 18px 16px 24px !important;
  }

  .ml-right-sidebar-footer {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  #myRightSidebar.right-sidebar-open .ml-right-sidebar-footer.ml-has-save {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ml-right-sidebar-action {
    width: 100%;
  }
}

/* ========================================================================== 
   MLERP panel action dropdown stacking
   Closed status/action groups stay on the normal content layer. Only the
   action group whose dropdown is currently open is raised above neighbouring
   cards, so later cards/status buttons can never cover the open menu.
   ========================================================================== */
.lic-list-head-actions,
.lic-detail-hero-actions {
  z-index: 3 !important;
}

.lic-list-head-actions:has(.qr-w3-dropdown-content.w3-show),
.lic-detail-hero-actions:has(.qr-w3-dropdown-content.w3-show) {
  z-index: 7 !important;
}

.lic-list-head-actions .qr-w3-dropdown-content.w3-show,
.lic-detail-hero-actions .qr-w3-dropdown-content.w3-show {
  z-index: 8 !important;
}

/* MLERP mouse-safe action menus (all list and detail cards).
   Pressing a descendant also activates its .w3-ripple ancestor. Its opacity
   change creates a stacking context: a later card may take mouseup, preventing
   the clicked menu item from receiving click. Keep the WHOLE owning card on
   the raised content layer while its menu is open, not just its action group.
   Do not restrict this to dvClient_ / dvLocation_ IDs: orders, appointments,
   employees, resources and detail hero cards share the same interaction.
   Suspend only the ancestor ripple; item/button feedback stays unchanged.
   Layer 7 remains below header 10, navigation 21 and confirmation sheet 109. */
.ml-client-card:has(.qr-w3-dropdown-content.w3-show),
.ml-location-card:has(.qr-w3-dropdown-content.w3-show),
.ml-appointment-card:has(.qr-w3-dropdown-content.w3-show),
.ed-hero:has(.qr-w3-dropdown-content.w3-show) {
  position: relative !important;
  z-index: 7 !important;
  opacity: 1 !important;
}



/* ==========================================================================
   MLERP required-field validation positioning
   Validation text stays attached to its input while scrolling, but remains
   absolute so showing "* Pflichtfeld" never pushes the next field down.
   ========================================================================== */
form td:has(> p[id^="tx_"].w3-text-red[style*="position"]),
form div:has(> p[id^="tx_"].w3-text-red[style*="position"]) {
  position: relative;
}

form p[id^="tx_"].w3-text-red[style*="position"] {
  position: absolute !important;
  left: 0;
  z-index: 2;
  max-width: 100%;
  pointer-events: none;
}

/* ========================================================================== 
   Shared responsive fixed header (26 September 2026).
   Original #dvSearch and add buttons are MOVED, never cloned. Keep this layer
   below navigation/right-sidebar/bottom-sheet overlays and outside .w3-main.
   ========================================================================== */
#mlFixedTopHeader {
  --ml-header-title-gutter: 62px;
  --ml-header-search-height: 48px;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  margin: 0;
  padding: env(safe-area-inset-top, 0px) 0 0;
  box-sizing: border-box;
  z-index: 10 !important;
  overflow: visible !important;
  color: #111;
  background: rgba(255,255,255,.96) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 10px rgba(0,0,0,.045);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
#mlFixedTopHeader.ml-header-has-create { --ml-header-title-gutter: 112px; }
#mlFixedTopHeader [hidden] { display: none !important; }
#mlFixedTopHeader .ml-header-appbar { position: relative; height: 58px; }
#mlFixedTopHeader #dvBack {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  pointer-events: none;
}
#mlFixedTopHeader #dvBack > a {
  display: block;
  width: 100%;
  height: 58px;
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
#mlFixedTopHeader #dvBack h4 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 58px;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 var(--ml-header-title-gutter) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
#mlFixedTopHeader .ml-mobile-header-title {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* The back affordance is a real 44x44 round button at the far left, while the
   page title remains optically centred. Lucide replaces the original <i> with
   an <svg>, so both forms are covered during/after icon rendering. */
#mlFixedTopHeader #dvBack h4 > i,
#mlFixedTopHeader #dvBack h4 > svg.lucide {
  position: absolute;
  left: max(8px, env(safe-area-inset-left, 0px));
  top: 7px;
  display: block;
  box-sizing: content-box;
  width: 24px !important;
  height: 24px !important;
  padding: 10px;
  margin: 0 !important;
  border-radius: 50%;
  background: transparent;
  color: #111 !important;
  font-size: 24px !important;
  cursor: pointer;
  pointer-events: auto;
  transition: background-color .14s ease, transform .12s ease, opacity .12s ease;
}
#mlFixedTopHeader #dvBack h4 > i:hover,
#mlFixedTopHeader #dvBack h4 > svg.lucide:hover,
#mlFixedTopHeader #dvBack > a:focus-visible h4 > i,
#mlFixedTopHeader #dvBack > a:focus-visible h4 > svg.lucide {
  background: #f1f1f1;
}
#mlFixedTopHeader #dvBack h4 > i:active,
#mlFixedTopHeader #dvBack h4 > svg.lucide:active {
  background: #e9e9e9;
  transform: scale(.96);
  opacity: .68;
}
#mlFixedTopHeader #dvBack > a:focus-visible {
  outline: none;
}
#mlFixedTopHeader .ml-header-actions {
  position: absolute;
  right: max(8px, env(safe-area-inset-right, 0px));
  top: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  z-index: 3;
}
#mlFixedTopHeader .ml-header-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  color: #fff !important;
  cursor: pointer;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
#mlFixedTopHeader .ml-ham-button { background: #000 !important; color: #fff !important; }
#mlFixedTopHeader .ml-header-circle:active { transform: scale(.96); }
#mlFixedTopHeader .ml-header-circle:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
#mlFixedTopHeader .ml-header-circle > svg { width: 24px; height: 24px; }
#mlFixedTopHeader .ml-header-circle > svg:not(.ham) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
#mlFixedTopHeader #hamIcon { width: 44px; height: 44px; }
#mlFixedTopHeader .ml-header-create { position: relative; }
#mlFixedTopHeader .ml-header-create-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 210px;
  max-width: calc(100vw - 80px);
  max-height: min(60vh, 360px);
  overflow-y: auto;
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.14);
  background: #fff;
  z-index: 4;
}
#mlHeaderCreateMenu > button,
#mlHeaderCreateMenu > button:hover,
#mlHeaderCreateMenu > button:focus,
#mlHeaderCreateMenu > button:active {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  margin: 0 !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.3;
  text-align: left !important;
  white-space: normal;
  box-shadow: none !important;
  cursor: pointer;
}
#mlHeaderCreateMenu > button:hover,
#mlHeaderCreateMenu > button:focus-visible { background: #f1f1f1 !important; }
#mlHeaderCreateMenu > button:focus-visible { outline: 2px solid #555; outline-offset: -2px; }
#mlHeaderCreateMenu > button > svg {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
#mlFixedTopHeader .ml-header-search-host {
  padding: 2px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
}
#mlFixedTopHeader #dvSearch { width: 100%; padding: 0; margin: 0; cursor: default; }
#mlFixedTopHeader #dvSearch > table,
#mlFixedTopHeader #dvSearch > table > tbody,
#mlFixedTopHeader #dvSearch tr,
#mlFixedTopHeader #dvSearch td {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: 0;
  border-spacing: 0;
}
/* Hide the legacy page-level create buttons before the fixed-header controller
   runs. The controller physically moves these same buttons into the + menu;
   once moved out of #dvSearch this rule no longer applies, so there is no
   duplicate control and no first-paint flash. */
#dvSearch #btnLicEmployeeAdd,
#dvSearch #btnLicClientAdd,
#dvSearch #btnLicLocationAdd,
#dvSearch #btnLicStockAdd,
#dvSearch #btnLicMagazineAdd,
#dvSearch #btnLicVehicleAdd,
#dvSearch #btnLicVehicleMagazineAdd,
#dvSearch #btnLicOrderAdd,
#dvSearch #btnLicAppointmentAdd,
#dvSearch #btnLicCalendarAdd,
#dvSearch #btnLicCalendarAppointmentAdd {
  display: none !important;
}

#mlFixedTopHeader #dvSearch .ml-header-old-action-row { display: none !important; }
#mlFixedTopHeader #ser {
  width: 100%;
  height: var(--ml-header-search-height) !important;
  box-sizing: border-box;
  padding: 0 82px 0 14px !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 400 !important;
}
/* Fixed-header search clear control. Hide the browser-specific native
   cancel button and use one consistently positioned control immediately to
   the left of the search icon. */
#mlFixedTopHeader #ser::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
#mlFixedTopHeader .ml-header-search-clear {
  position: absolute;
  top: 50%;
  right: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #777;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
#mlFixedTopHeader .ml-header-search-clear:hover,
#mlFixedTopHeader .ml-header-search-clear:focus-visible {
  background: #f1f1f1;
  color: #333;
}
#mlFixedTopHeader .ml-header-search-clear:focus-visible {
  outline: 2px solid #555;
  outline-offset: 1px;
}
#mlFixedTopHeader .ml-header-search-clear:active {
  background: #e9e9e9;
  transform: translateY(-50%) scale(.96);
}
#mlFixedTopHeader .ml-header-search-clear > svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
#mlFixedTopHeader #dvSearch .eyespan,
#mlFixedTopHeader #dvSearch .eyespan:hover {
  position: absolute;
  top: 0;
  right: 3px;
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: var(--ml-header-search-height);
  margin: 0;
  border-radius: 9px;
  z-index: 1;
  cursor: pointer;
}
#mlFixedTopHeader #dvSearch .eyespan > i { font-size: 21px !important; }
#mlFixedTopHeader #dvSearch .eyespan:focus-visible { outline: 2px solid #555; outline-offset: -3px; }
#mlFixedTopHeader .ml-header-calendar-views {
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
}
#mlFixedTopHeader .ml-header-calendar-view-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 430px;
  margin-left: auto;
}
#mlFixedTopHeader .ml-header-calendar-view-row > button,
#mlFixedTopHeader .ml-header-calendar-list-wrap > button {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding: 7px 8px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2;
  white-space: nowrap;
}
#mlFixedTopHeader .ml-header-calendar-list-wrap {
  position: relative;
  min-width: 0;
}
#mlFixedTopHeader .ml-header-calendar-list-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 150px;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,.14);
  z-index: 6;
}
#mlFixedTopHeader .ml-header-calendar-list-menu .w3-button {
  min-height: 42px;
  padding: 9px 14px !important;
  border-radius: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
#mlFixedTopHeader .ml-header-calendar-list-menu .w3-button:hover,
#mlFixedTopHeader .ml-header-calendar-list-menu .w3-button:focus-visible {
  background: #f1f1f1 !important;
}
@media (max-width: 600px) {
  #mlFixedTopHeader .ml-header-calendar-view-row { max-width: none; }
}
@media (min-width: 601px) {
  #mlFixedTopHeader .ml-header-calendar-views { padding: 0 20px 14px; }
  #mlFixedTopHeader .ml-header-calendar-view-row > button,
  #mlFixedTopHeader .ml-header-calendar-list-wrap > button {
    min-height: 42px;
    font-size: 14px !important;
  }
}
#mlFixedTopHeader .ml-header-scan {
  position: absolute;
  left: 12px;
  right: 112px;
  top: 8px;
  z-index: 4;
}
#mlFixedTopHeader #camera-select { height: 42px; font-size: 14px; border-radius: 10px; }
.ml-header-layout-spacer { height: var(--ml-fixed-header-height, 59px); }
.ml-header-legacy-spacer,
.ml-header-legacy-top,
.ml-header-empty-toolbar { display: none !important; }
@media (min-width: 601px) {
  #mlFixedTopHeader { --ml-header-search-height: 52px; }
  #mlFixedTopHeader .ml-header-search-host { padding: 2px 20px 14px; }
}
@media (min-width: 993px) {
  #mlFixedTopHeader { left: 250px; }

  /* Prevent the desktop header from flashing at full viewport width before
     JavaScript has measured the actual .w3-main content area. Keep it in the
     layout (visibility, not display:none) so its height can be measured. */
  #mlFixedTopHeader:not([data-ml-positioned="1"]) {
    visibility: hidden;
    opacity: 0;
  }
  #mlFixedTopHeader[data-ml-positioned="1"] {
    visibility: visible;
    opacity: 1;
    transition: opacity .08s ease-out;
  }

  body.ml-header-nav-collapsed #mySidebar { display: none !important; }
  body.ml-header-nav-collapsed .w3-main { margin-left: 0 !important; }
}

/* ========================================================================== 
   MLERP three-dot action toggles: true circular geometry
   All ellipsis action buttons use an equal width/height so the transparent
   button and its grey hover/focus feedback are genuinely 100% round.
   ========================================================================== */
.qr-w3-dropdown-toggle,
.qr-w3-dropdown > .qr-w3-dropdown-toggle,
.lic-list-head-actions > .lic-list-action-menu > .qr-w3-dropdown-toggle,
.lic-detail-hero-actions > .qr-w3-dropdown > .qr-w3-dropdown-toggle,
button.qr-w3-dropdown-toggle[aria-label="Dokument Aktionen"] {
  box-sizing: border-box !important;
  width: 35px !important;
  min-width: 35px !important;
  max-width: 35px !important;
  height: 35px !important;
  min-height: 35px !important;
  max-height: 35px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.qr-w3-dropdown-toggle:hover,
.qr-w3-dropdown-toggle:focus,
.qr-w3-dropdown-toggle:focus-visible,
.qr-w3-dropdown-toggle:active,
.qr-w3-dropdown-toggle[aria-expanded="true"],
.qr-w3-dropdown > .qr-w3-dropdown-toggle:hover,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:focus,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:focus-visible,
.qr-w3-dropdown > .qr-w3-dropdown-toggle:active,
.qr-w3-dropdown > .qr-w3-dropdown-toggle[aria-expanded="true"] {
  border-radius: 50% !important;
}

/* MLERP mobile PDF direct-print support. On touch/mobile browsers the PDF.js
   pages are rendered into this print-only container, then the CURRENT document
   is printed. This avoids Chrome Android opening the raw PDF in a second tab. */
.ml-pdf-mobile-print-area{display:none}
.ml-pdf-head-btn.ml-pdf-print-busy{opacity:.7;cursor:wait;pointer-events:none}
@media print{
  body.ml-pdf-print-mode{overflow:visible!important;background:#fff!important;margin:0!important;padding:0!important}
  body.ml-pdf-print-mode>*:not(#mlPdfMobilePrintArea){display:none!important}
  body.ml-pdf-print-mode #mlPdfMobilePrintArea{display:block!important;position:static!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;background:#fff!important}
  /* Chrome Android can paginate a full-width A4 canvas a fraction of a CSS
     pixel beyond the physical page height. Combined with break-after:page this
     produced an empty sheet after every PDF page (3 PDF pages -> 6 print
     pages). Keep each rendered PDF page indivisible and leave a very small
     print safety margin so rounding can never spill onto the next sheet. */
  body.ml-pdf-print-mode .ml-pdf-print-page{display:block!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:0!important;overflow:hidden!important;font-size:0!important;line-height:0!important;break-inside:avoid-page!important;page-break-inside:avoid!important;break-after:page;page-break-after:always;background:#fff!important}
  body.ml-pdf-print-mode .ml-pdf-print-page:last-child{break-after:auto;page-break-after:auto}
  body.ml-pdf-print-mode .ml-pdf-print-canvas{display:block!important;box-sizing:border-box!important;width:99%!important;height:auto!important;max-width:99%!important;margin:0 auto!important;padding:0!important;box-shadow:none!important;border:0!important}
  @page{margin:0}
}


/* Employee portal: fullscreen scanner for header and order scan buttons.
   Lay out the reader before starting the camera to avoid a black viewport. */
.ml-employee-global-scanner{
  display:none;
}
  body.ml-employee-global-scanner-open{
    overflow:hidden !important;
  }
  .ml-employee-global-scanner.is-open{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    z-index:2147483000 !important;
    background:#000 !important;
    overflow:hidden !important;
  }
  .ml-employee-global-scanner-reader{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    min-width:100vw !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    border:0 !important;
    border-radius:0 !important;
    background:#000 !important;
    overflow:hidden !important;
  }
  #mlEmployeeGlobalQrReader__scan_region{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    background:transparent !important;
    overflow:hidden !important;
  }
  #mlEmployeeGlobalQrReader video{
    display:block !important;
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    background:transparent !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:1 !important;
  }
  /* html5-qrcode may create dashboard/header elements. They are not needed in
     our own fullscreen UI and must never cover the live camera image. */
  #mlEmployeeGlobalQrReader__dashboard,
  #mlEmployeeGlobalQrReader__header_message,
  #mlEmployeeGlobalQrReader__status_span{
    display:none !important;
  }

  /* Visible QR target for the mobile fullscreen scanner. html5-qrcode's own
     scan-box decoration can disappear when its video is forced fullscreen, so
     render the four white corner marks independently above the camera feed. */
  .ml-employee-global-scanner-guide{
    display:block !important;
    position:fixed !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    width:clamp(180px,72vw,320px) !important;
    height:clamp(180px,72vw,320px) !important;
    z-index:2147483001 !important;
    pointer-events:none !important;
  }
  .ml-employee-global-scanner-corner{
    position:absolute !important;
    width:42px !important;
    height:42px !important;
    box-sizing:border-box !important;
  }
  .ml-employee-global-scanner-corner-tl{
    top:0 !important;left:0 !important;
    border-top:4px solid #fff !important;
    border-left:4px solid #fff !important;
    border-top-left-radius:5px !important;
  }
  .ml-employee-global-scanner-corner-tr{
    top:0 !important;right:0 !important;
    border-top:4px solid #fff !important;
    border-right:4px solid #fff !important;
    border-top-right-radius:5px !important;
  }
  .ml-employee-global-scanner-corner-bl{
    bottom:0 !important;left:0 !important;
    border-bottom:4px solid #fff !important;
    border-left:4px solid #fff !important;
    border-bottom-left-radius:5px !important;
  }
  .ml-employee-global-scanner-corner-br{
    bottom:0 !important;right:0 !important;
    border-bottom:4px solid #fff !important;
    border-right:4px solid #fff !important;
    border-bottom-right-radius:5px !important;
  }
  .ml-employee-global-scanner-close{
    position:fixed !important;
    top:18px !important;
    right:18px !important;
    z-index:2147483002 !important;
    width:46px !important;
    height:46px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(0,0,0,.62) !important;
    color:#fff !important;
    font-size:23px !important;
  }
  .ml-employee-global-scanner-status{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    bottom:24px !important;
    z-index:2147483002 !important;
    padding:10px 14px !important;
    border-radius:10px !important;
    background:rgba(0,0,0,.58) !important;
    color:#fff !important;
    text-align:center !important;
    pointer-events:none !important;
  }


/* -------------------------------------------------------------------------
   Unified MLERP photo + video viewer (GLightbox)
   ------------------------------------------------------------------------- */
.glightbox-container{z-index:2147483640!important}
.glightbox-container .goverlay{background:rgba(0,0,0,.94)!important}
.glightbox-container .gcontainer,.glightbox-container .gslider,.glightbox-container .gslide{max-width:100vw!important;max-height:100dvh!important}
.glightbox-container .gslide-media{background:#000!important;box-shadow:none!important}
.glightbox-container .gslide-image img{max-width:96vw!important;max-height:86dvh!important;object-fit:contain!important}
.glightbox-container .gslide-video,.glightbox-container .gvideo-wrapper{max-width:96vw!important;max-height:86dvh!important;background:#000!important}
.glightbox-container .gslide-video video,.glightbox-container .plyr video,.glightbox-container video{position:static!important;inset:auto!important;display:block!important;width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:86dvh!important;object-fit:contain!important;background:#000!important}
.glightbox-container .gslide-title{font-family:"Inter Tight",sans-serif!important;font-size:15px!important;font-weight:600!important}
.glightbox-container .gclose,.glightbox-container .gnext,.glightbox-container .gprev{background:rgba(0,0,0,.56)!important;border-radius:50%!important}
.lic-photo-lightbox,.lic-media-viewer,.lic-media-upload-preview{cursor:zoom-in}
.order-video-preview-wrap.lic-media-upload-preview{cursor:pointer;outline:none}
.order-video-preview-wrap.lic-media-upload-preview:focus-visible{box-shadow:0 0 0 3px rgba(33,150,243,.42)}
.ed-video-open{display:block;position:relative;background:#000;text-decoration:none}
.ed-video-open .ed-video-thumb{display:block!important;position:static!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;min-width:0!important;min-height:0!important;max-width:100%!important;max-height:none!important;object-fit:cover!important;background:#000}
.ed-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;pointer-events:none;box-shadow:0 2px 10px rgba(0,0,0,.25)}
@media(max-width:760px){.glightbox-container .gslide-inner-content{width:100vw!important}.glightbox-container .gslide-image img{max-width:100vw!important;max-height:82dvh!important}.glightbox-container .gslide-video,.glightbox-container .gvideo-wrapper{max-width:100vw!important;max-height:82dvh!important}.glightbox-container .gslide-video video,.glightbox-container .plyr video,.glightbox-container video{max-height:82dvh!important}.glightbox-container .gclose{top:10px!important;right:10px!important}}

/* Upload previews in all current Add/Edit modules open in the unified media viewer. */
.location-photo-preview,.magazine-photo-preview,.stock-photo-preview,.vehicle-photo-preview,.vehicleMagazine-photo-preview,.order-photo-preview,#lic_employee_foto_preview{cursor:zoom-in}


/* Lucide icons ----------------------------------------------------------- */
.ml-icon,
svg.lucide {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
svg.lucide.ml-icon-light {
  stroke-width: 1.6;
}
svg.lucide.ml-icon-2x {
  width: 2em;
  height: 2em;
}
svg.lucide.ml-icon-spin {
  animation: ml-lucide-spin .9s linear infinite;
}
@keyframes ml-lucide-spin {
  to { transform: rotate(360deg); }
}
/* Keep button/menu icons aligned like the former icon font. */
button > svg.lucide,
a > svg.lucide,
.ed-tab > svg.lucide,
.ed-section-head > svg.lucide,
.ed-subtitle-item > svg.lucide {
  flex: 0 0 auto;
}
/* Lucide SVGs inside buttons are decoration only. Keeping pointer events on
   the button fixes icon-only controls (ellipsis menus, right-sidebar X, etc.)
   on both mouse and touch. */
button > svg.lucide {
  pointer-events: none;
}


/* ==========================================================================
   Detail tabs + fixed-header back title (3 October 2026)
   Keep icon/text spacing identical on every AJAX detail page after Lucide
   replaces <i> elements with SVG, and make the centred header title use the
   exact same back link as the round chevron button.
   ========================================================================== */
.ed-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ed-tab > i.ml-icon,
.ed-tab > svg.lucide {
  flex: 0 0 auto;
  margin: 0 !important;
}
.ed-tab > .ed-count {
  margin-left: 0 !important;
}

#mlFixedTopHeader #dvBack .ml-mobile-header-title {
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   MLERP three-dot dropdown columns (3 October 2026)
   Every action row uses one fixed icon column and one text column. This also
   covers dropdowns that do not carry .lic-detail-action-dropdown.
   ========================================================================== */
.qr-w3-dropdown-content .qr-w3-dropdown-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
.qr-w3-dropdown-content .qr-w3-dropdown-item > i.ml-icon,
.qr-w3-dropdown-content .qr-w3-dropdown-item > svg.lucide {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  height: 20px !important;
  margin: 0 !important;
  align-self: center !important;
}


/* MLERP unified checkbox alignment
   All form checkboxes use one baseline: fixed checkbox column, 10px gap and
   text positioned consistently beside the native W3 checkbox. */
.ml-checkbox-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer;
  min-width: 0;
}

.ml-checkbox-label > input[type="checkbox"] {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin: 0 !important;
  vertical-align: middle !important;
}

.ml-checkbox-label > span {
  display: block;
  min-width: 0;
  line-height: 1.35;
  position: relative;
  top: 6px;
}

/* Multi-line checkbox copy (for example the location check-in option) keeps
   the checkbox aligned with the first text line instead of the whole block. */
.ml-checkbox-label-top {
  align-items: flex-start !important;
}

.ml-checkbox-label-top > input[type="checkbox"] {
  align-self: flex-start !important;
  margin-top: 0 !important;
}

.ml-checkbox-label-top > span {
  top: 6px;
}

/* Keep the Startportal radio and text on the same vertical baseline as checkbox copy. */
.ml-portal-main-label > input[type="radio"] {
  position: relative;
  top: 6px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  vertical-align: middle !important;
}

.ml-portal-main-label > span {
  display: block;
  position: relative;
  top: 6px;
}


/* Portal permission rows: keep the already aligned checkbox/text/radio group
   optically centered inside the grey rounded card. */
.ml-portal-permission-row > .ml-checkbox-label,
.ml-portal-permission-row > .ml-portal-main-label {
  position: relative;
  top: -4px;
}

/* Order action cards use the same optical centering as portal permission cards.
   Move only the checkbox/text content, never the grey rounded background itself. */
.order-action-option > input[type="checkbox"],
.order-action-option > span {
  transform: translateY(-4px);
}

/* MLERP add-card buttons (3 October 2026)
   All "+ text" actions inside Add/Edit forms use one calm full-width add row
   instead of a heavy black button. The action remains clearly visible while
   fitting the card-based mobile UI. */
.ml-add-card-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  padding: 11px 16px !important;
  background: #fff !important;
  color: #111 !important;
  border: 1.5px dashed #c8c8c8 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  text-align: center !important;
  line-height: 1.25 !important;
  transition: background-color .15s ease, border-color .15s ease !important;
}

.ml-add-card-button:hover,
.ml-add-card-button:focus-visible {
  background: #f6f6f6 !important;
  color: #111 !important;
  border-color: #8f8f8f !important;
}

.ml-add-card-button:active {
  background: #eeeeee !important;
}

.ml-add-card-button > i.ml-icon,
.ml-add-card-button > svg.lucide {
  flex: 0 0 auto !important;
  width: 19px !important;
  height: 19px !important;
  margin: 0 !important;
  stroke-width: 2 !important;
}

/* Resource add actions inside an employee card also become full-width rows.
   Let the section heading stay on its own line above the add row. */
.order-employee-resource-section .order-card-head {
  flex-wrap: wrap !important;
}

.order-employee-resource-section .order-card-head > .order-card-title {
  flex: 0 0 100% !important;
}

.order-employee-resource-section .order-card-head > .ml-add-card-button {
  flex: 0 0 100% !important;
  margin-top: 8px !important;
}

/* ========================================================================== */
/* MLERP: uniform W3.CSS single-line form control height                      */
/* W3.CSS uses different vertical padding for .w3-input and .w3-select.       */
/* Keep normal ERP form controls pixel-identical without touching textareas,   */
/* checkboxes, file fields or intentionally taller inline-height controls.     */
/* ========================================================================== */
input.w3-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select.w3-select {
  height: 42px;
  box-sizing: border-box;
}

/* ========================================================================== */
/* MLERP compact card actions                                                  */
/* "+ ..." buttons stay full-width add rows. Actions inside an already        */
/* created card are deliberately compact and right aligned.                    */
/* ========================================================================== */
.lic-client-card-head,
.lic-employee-card-head,
.location-card-head,
.magazine-card-head,
.order-card-head,
.stock-card-head,
.vehicle-card-head,
.vehicleMagazine-card-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.lic-client-card-head > :first-child,
.lic-employee-card-head > :first-child,
.location-card-head > :first-child,
.magazine-card-head > :first-child,
.order-card-head > :first-child,
.stock-card-head > :first-child,
.vehicle-card-head > :first-child,
.vehicleMagazine-card-head > :first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.lic-client-card-head > button.w3-red,
.lic-employee-card-head > button.w3-red,
.location-card-head > button.w3-red,
.magazine-card-head > button.w3-red,
.order-card-head > button.w3-red,
.stock-card-head > button.w3-red,
.vehicle-card-head > button.w3-red,
.vehicleMagazine-card-head > button.w3-red {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  min-height: 32px !important;
  margin-left: auto !important;
  padding: 6px 10px !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

.lic-client-card-head > button.w3-red svg,
.lic-employee-card-head > button.w3-red svg,
.location-card-head > button.w3-red svg,
.magazine-card-head > button.w3-red svg,
.order-card-head > button.w3-red svg,
.stock-card-head > button.w3-red svg,
.vehicle-card-head > button.w3-red svg,
.vehicleMagazine-card-head > button.w3-red svg {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
}

/* Employee photo editor: tools and confirmation actions intentionally use
   separate rows. This keeps the controls compact and prevents mobile overflow. */
.ml-employee-photo-crop-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.ml-employee-photo-tool-actions,
.ml-employee-photo-confirm-actions,
.ml-employee-photo-edit-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
}

.ml-employee-photo-tool-actions {
  flex-wrap: wrap;
}

.ml-employee-photo-confirm-actions {
  flex-wrap: wrap;
}

.ml-employee-photo-edit-actions {
  flex-wrap: wrap;
}

.ml-employee-photo-edit-actions #btnEmployeeFotoDelete {
  margin-left: 0 !important;
}

.ml-employee-photo-tool-actions > button,
.ml-employee-photo-confirm-actions > button,
.ml-employee-photo-edit-actions > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  white-space: nowrap !important;
}

.ml-employee-photo-tool-actions #btnEmployeeFotoZoomIn,
.ml-employee-photo-tool-actions #btnEmployeeFotoZoomOut,
.ml-employee-photo-tool-actions #btnEmployeeFotoRotateLeft,
.ml-employee-photo-tool-actions #btnEmployeeFotoRotateRight {
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
}

.ml-employee-photo-confirm-actions #btnEmployeeFotoCrop,
.ml-employee-photo-confirm-actions #btnEmployeeFotoCancel,
.ml-employee-photo-edit-actions #btnEmployeeFotoChange,
.ml-employee-photo-edit-actions #btnEmployeeFotoDelete {
  min-height: 36px !important;
  padding: 7px 11px !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
}

@media (max-width: 600px) {
  .ml-employee-photo-crop-actions,
  .ml-employee-photo-tool-actions,
  .ml-employee-photo-confirm-actions,
  .ml-employee-photo-edit-actions {
    max-width: 100%;
    overflow: visible;
  }

  .ml-employee-photo-confirm-actions {
    width: 100%;
  }

  .ml-employee-photo-confirm-actions #btnEmployeeFotoCrop,
  .ml-employee-photo-confirm-actions #btnEmployeeFotoCancel,
  .ml-employee-photo-edit-actions #btnEmployeeFotoChange,
  .ml-employee-photo-edit-actions #btnEmployeeFotoDelete {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 14px !important;
  }
}


/* ========================================================================== 
   MLERP panel surfaces - clean white style (5 October 2026)
   Keep controls/inputs/buttons unchanged; only card/panel surfaces are unified.
   ========================================================================== */
body #dvBodyLoader .ml-client-card.w3-light-grey,
body .ed-hero,
body .ed-section,
body .ed-section-head,
body .ed-photo-card,
body .ed-video-card,
body .ml-portal-account-panel,
body div.w3-light-grey.w3-round-large,
body label.w3-light-grey.w3-round-large,
body .ml-portal-permission-row,
body .order-action-option {
  background: #fff !important;
  background-color: #fff !important;
  border-color: transparent !important;
}

body #dvBodyLoader .ml-client-card.w3-light-grey,
body .ed-hero,
body .ed-section,
body .ed-photo-card,
body .ed-video-card,
body .ml-portal-account-panel,
body div.w3-light-grey.w3-round-large,
body label.w3-light-grey.w3-round-large,
body .ml-portal-permission-row,
body .order-action-option {
  border-width: 0 !important;
  border-style: none !important;
}

/* Section headers are part of the white panel, not a separate grey strip. */
body .ed-section-head {
  border-bottom-color: transparent !important;
  border-bottom-width: 0 !important;
  box-shadow: none !important;
}

/* Preserve subtle interaction feedback without bringing grey panels back. */
body #dvBodyLoader .ml-client-card.w3-light-grey:hover {
  background: #fff !important;
  background-color: #fff !important;
}

/* ========================================================================== 
   MLERP unified app surface - modern neutral background (5 October 2026)
   Page chrome uses one continuous soft-grey canvas; content panels remain
   white and borderless with a very subtle elevation.
   ========================================================================== */
:root {
  --ml-page-bg: #f5f6f8;
  --ml-panel-bg: #ffffff;
  --ml-panel-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

/* One continuous application canvas on list, detail and dashboard pages. */
html,
body,
body .w3-main,
body #dvBodyLoader {
  background: var(--ml-page-bg) !important;
  background-color: var(--ml-page-bg) !important;
}

/* Fixed page chrome uses exactly the same canvas colour. */
#mlFixedTopHeader,
.ml-admin-top-menu {
  background: var(--ml-page-bg) !important;
  background-color: var(--ml-page-bg) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .025) !important;
}

/* Erfassen/Bearbeiten: sidebar body, fixed header and sticky footer are one
   continuous surface as well. Existing buttons/inputs keep their own colours. */
#myRightSidebar,
#myRightSidebar.w3-white,
.ml-right-sidebar-header,
.ml-right-sidebar-body,
.ml-right-sidebar-footer {
  background: var(--ml-page-bg) !important;
  background-color: var(--ml-page-bg) !important;
}

.ml-right-sidebar-header {
  border-bottom-color: transparent !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .025) !important;
}

.ml-right-sidebar-footer {
  border-top-color: transparent !important;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .025) !important;
}

/* White content surfaces: no visible border, only a subtle modern lift from
   the neutral page background. Section headers stay visually part of the
   parent panel and therefore do not get a separate shadow. */
body #dvBodyLoader .ml-client-card,
body #dvBodyLoader .ml-location-card,
body #dvBodyLoader .ml-appointment-card,
body .ed-hero,
body .ed-section,
body .ed-photo-card,
body .ed-video-card,
body .ml-portal-account-panel,
body div.w3-light-grey.w3-round-large:not(.w3-btn),
body label.w3-light-grey.w3-round-large,
body .ml-portal-permission-row,
body .order-action-option {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
  border-color: transparent !important;
  border-width: 0 !important;
  border-style: none !important;
  box-shadow: var(--ml-panel-shadow) !important;
}

/* Header strips belong to their parent white panel. */
body .ed-section-head {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Keep the list card surface white also during W3/ripple hover states. */
body #dvBodyLoader .ml-client-card:hover,
body #dvBodyLoader .ml-location-card:hover,
body #dvBodyLoader .ml-appointment-card:hover {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
}

/* ========================================================================== 
   MLERP form surfaces - white controls on the neutral app canvas
   Keep the #f5f6f8 application background for page chrome, while all normal
   editable W3 form fields remain clearly separated as white surfaces.
   ========================================================================== */
input.w3-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
select.w3-select,
textarea.w3-input,
#mlFixedTopHeader #ser {
  background: #fff !important;
  background-color: #fff !important;
}

/* ========================================================================== 
   MLERP final white surface + bordered panels + input inner spacing
   5 October 2026
   - White application background everywhere
   - White panels/cards with one consistent grey border
   - Text in all normal form inputs keeps comfortable left/right spacing
   ========================================================================== */
:root {
  --ml-page-bg: #ffffff;
  --ml-panel-bg: #ffffff;
  --ml-panel-border: #d9d9d9;
  --ml-panel-shadow: none;
  --ml-control-pad-x: 12px;
}

/* Global app surface: page, fixed header, main content and edit/add sidebar. */
html,
body,
body .w3-main,
body #dvBodyLoader,
#mlFixedTopHeader,
.ml-admin-top-menu,
#myRightSidebar,
#myRightSidebar.w3-white,
.ml-right-sidebar-header,
.ml-right-sidebar-body,
.ml-right-sidebar-footer {
  background: #fff !important;
  background-color: #fff !important;
}

#mlFixedTopHeader,
.ml-admin-top-menu,
.ml-right-sidebar-header,
.ml-right-sidebar-footer {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Normal text-capable inputs: always give entered/placeholder text space from
   both edges. Exclude controls where horizontal text padding is not relevant. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
textarea.w3-input {
  box-sizing: border-box !important;
  padding-left: var(--ml-control-pad-x) !important;
  padding-right: var(--ml-control-pad-x) !important;
}

/* Native select arrow needs a little more room on the right. */
select.w3-select {
  box-sizing: border-box !important;
  padding-left: var(--ml-control-pad-x) !important;
  padding-right: 36px !important;
}

/* Login password has the eye button inside the right side of the field. */
#lic_employee_password {
  padding-left: var(--ml-control-pad-x) !important;
  padding-right: 48px !important;
}

/* Fixed-header search keeps its own clear/search controls inside the input. */
#mlFixedTopHeader #ser {
  padding: 0 82px 0 14px !important;
}

/* Inputs/selects stay white even where legacy markup still uses w3-my-grey or
   module-specific readonly datepicker rules. */
html body input.w3-input,
html body textarea.w3-input,
html body select.w3-select,
html body #myRightSidebar input.w3-input,
html body #myRightSidebar textarea.w3-input,
html body #myRightSidebar select.w3-select,
html body #mlFixedTopHeader #ser {
  background: #fff !important;
  background-color: #fff !important;
}

/* Core list/detail panels and reusable cards. */
html body #dvBodyLoader .ml-client-card,
html body #dvBodyLoader .ml-location-card,
html body #dvBodyLoader .ml-appointment-card,
html body #dvBodyLoader .ml-order-card,
html body .ed-hero,
html body .ed-section,
html body .ed-photo-card,
html body .ed-video-card,
html body .ed-file-card,
html body .ed-person-card,
html body .ml-portal-account-panel,
html body .ml-portal-permission-row,
html body .order-action-option,
html body .w3-panel.w3-white,
html body .w3-panel.w3-light-grey,
html body div.w3-light-grey.w3-round-large:not(.w3-btn),
html body label.w3-light-grey.w3-round-large {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
  border: 1px solid var(--ml-panel-border) !important;
  border-color: var(--ml-panel-border) !important;
  box-shadow: none !important;
}

/* Add/Edit generated cards, including photo/document/video panels. */
html body .lic-employee-child-card,
html body .lic-employee-file-card,
html body .lic-client-employee-card,
html body .location-upload-card,
html body .stock-upload-card,
html body .magazine-upload-card,
html body .vehicle-upload-card,
html body .vehicleMagazine-upload-card,
html body .order-upload-card,
html body .order-assignment-card,
html body .order-employee-resource-card {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
  border: 1px solid var(--ml-panel-border) !important;
  border-color: var(--ml-panel-border) !important;
  box-shadow: none !important;
}

/* Order module previously forced employee/photo/file/video cards to black
   borders with !important. These higher-specificity rules intentionally win. */
html body #frmLicOrderAdd .order-employee-card,
html body #frmLicOrderAdd .order-photo-card,
html body #frmLicOrderAdd .order-file-card,
html body #frmLicOrderAdd .order-video-card,
html body #frmLicOrderUpdate .order-employee-card,
html body #frmLicOrderUpdate .order-photo-card,
html body #frmLicOrderUpdate .order-file-card,
html body #frmLicOrderUpdate .order-video-card,
html body #frmLicOrderUpdate .order-existing-card {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
  border: 1px solid var(--ml-panel-border) !important;
  border-color: var(--ml-panel-border) !important;
  box-shadow: none !important;
}

/* Section heading stays white; use a light divider only inside the panel. */
html body .ed-section-head {
  background: #fff !important;
  background-color: #fff !important;
  border-bottom: 1px solid #e6e6e6 !important;
  box-shadow: none !important;
}

/* Keep panel hover from reintroducing the old grey background. */
html body #dvBodyLoader .ml-client-card:hover,
html body #dvBodyLoader .ml-location-card:hover,
html body #dvBodyLoader .ml-appointment-card:hover,
html body #dvBodyLoader .ml-order-card:hover {
  background: #fff !important;
  background-color: #fff !important;
}

/* ==========================================================================
   MLERP list + dashboard bordered panels (5 October 2026)
   Lists render into #dvBody (not #dvBodyLoader), so panel classes must be
   styled independently of their AJAX target. Dashboard tiles use the same
   white surface and grey border for one consistent card language.
   ========================================================================== */
html body .ml-client-card,
html body .ml-location-card,
html body .ml-appointment-card,
html body .ml-order-card,
html body .ml-dashboard-panel {
  background: var(--ml-panel-bg) !important;
  background-color: var(--ml-panel-bg) !important;
  border: 1px solid var(--ml-panel-border) !important;
  border-color: var(--ml-panel-border) !important;
  box-shadow: none !important;
}

html body .ml-client-card:hover,
html body .ml-location-card:hover,
html body .ml-appointment-card:hover,
html body .ml-order-card:hover,
html body .ml-dashboard-panel:hover {
  background: #fff !important;
  background-color: #fff !important;
}

/* Dashboard tiles are distinct panels instead of one continuous white block. */
html body .ml-dashboard-panel {
  margin-bottom: 10px !important;
  overflow: hidden;
}

/* Employee navigation: slide the order links down and rotate the caret. */
.ml-employee-orders-nav-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ml-employee-orders-nav-caret {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: transform .18s ease;
}
.ml-employee-orders-nav-toggle[aria-expanded="true"] .ml-employee-orders-nav-caret {
  transform: rotate(180deg);
}
.ml-employee-orders-nav-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .18s ease;
}
.ml-employee-orders-nav-menu[aria-hidden="false"] {
  grid-template-rows: 1fr;
}
.ml-employee-orders-nav-items {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear .18s;
}
.ml-employee-orders-nav-menu[aria-hidden="false"] .ml-employee-orders-nav-items {
  visibility: visible;
  transition-delay: 0s;
}
#mySidebar .ml-employee-orders-nav-items > a {
  padding-left: 32px;
  padding-bottom: 10px;
  font-size: 16px;
}
@media (prefers-reduced-motion: reduce) {
  .ml-employee-orders-nav-caret,
  .ml-employee-orders-nav-menu,
  .ml-employee-orders-nav-items { transition: none; }
}


/* ========================================================================== 
   Add/Edit form section panels (5 October 2026)
   Every h5 subtitle inside a frmLic*Add / frmLic*Update table starts a
   bordered form section. The existing one-column table markup is preserved;
   JS only decorates the rows so validation, uploads and module handlers stay
   untouched.
   ========================================================================== */
form.ml-form-sections-ready table.ml-form-section-table {
  width: 100% !important;
}

form.ml-form-sections-ready tr.ml-form-section-gap > td {
  height: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  line-height: 0 !important;
  font-size: 0 !important;
}

form.ml-form-sections-ready tr.ml-form-section-row > td {
  box-sizing: border-box !important;
  background: #fff !important;
  background-color: #fff !important;
  border-left: 1px solid var(--ml-panel-border) !important;
  border-right: 1px solid var(--ml-panel-border) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

form.ml-form-sections-ready tr.ml-form-section-first > td {
  border-top: 1px solid var(--ml-panel-border) !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  padding-top: 14px !important;
}

form.ml-form-sections-ready tr.ml-form-section-last > td {
  border-bottom: 1px solid var(--ml-panel-border) !important;
  border-bottom-left-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  padding-bottom: 16px !important;
}

form.ml-form-sections-ready tr.ml-form-section-heading > td {
  position: relative !important;
  padding-bottom: 10px !important;
}

/* Section title sits directly in the top border, fieldset/legend style:
   border -- title -- border. The white title background masks the border
   only behind the text while leaving a short line visible on the left. */
form.ml-form-sections-ready tr.ml-form-section-heading h5 {
  position: absolute !important;
  z-index: 2 !important;
  top: 0 !important;
  left: 12px !important;
  transform: translateY(-50%) !important;
  display: inline-block !important;
  width: auto !important;
  max-width: calc(100% - 28px) !important;
  margin: 0 !important;
  padding: 0 8px !important;
  background: #fff !important;
  color: #222 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* The first section should start cleanly below the sidebar header, while all
   later sections use the inserted neutral spacer row. */
form.ml-form-sections-ready table.ml-form-section-table:first-of-type > tbody:first-child > tr.ml-form-section-gap:first-child > td {
  height: 14px !important;
  min-height: 14px !important;
}

@media (max-width: 600px) {
  form.ml-form-sections-ready tr.ml-form-section-row > td {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  form.ml-form-sections-ready tr.ml-form-section-first > td {
    padding-top: 12px !important;
  }
  form.ml-form-sections-ready tr.ml-form-section-last > td {
    padding-bottom: 14px !important;
  }
  form.ml-form-sections-ready tr.ml-form-section-gap > td {
    height: 20px !important;
    min-height: 20px !important;
  }

  form.ml-form-sections-ready table.ml-form-section-table:first-of-type > tbody:first-child > tr.ml-form-section-gap:first-child > td {
    height: 12px !important;
    min-height: 12px !important;
  }
}

/* ========================================================================== 
   MLERP login panel refinements (5 October 2026)
   - Login uses the same 42px control rhythm as the ERP forms.
   ========================================================================== */
/* Login card: same white + grey-border visual language as form sections. */
.ml-login-panel {
  min-width: 0;
  margin: 0 0 20px 0;
  padding: 20px 14px 16px 14px;
  border: 1px solid var(--ml-panel-border, #d9d9d9);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}

.ml-login-panel > legend {
  margin-left: 4px;
  padding: 0 8px;
  background: #fff;
  color: #222;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
}

#frmLogin input.w3-input,
#frmLogin #btnLogin {
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  border-radius: 8px !important;
}

#frmLogin input.w3-input {
  font-size: 16px !important;
  font-weight: 400 !important;
}

#frmLogin #btnLogin {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

#frmLogin #lic_employee_password {
  padding-right: 48px !important;
}

/* Keep the login password eye perfectly centered inside the 42px field.
   This intentionally overrides the legacy global .eyespan negative-margin layout
   only for /lic/login/. */
#frmLogin .ml-login-password-cell {
  position: relative;
}

#frmLogin #iPwdEye,
#frmLogin #iPwdEye:hover {
  float: none !important;
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  width: 32px;
  height: 32px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: #666;
  cursor: pointer;
  z-index: 2;
}

#frmLogin #iPwdEye > svg.lucide {
  display: block;
  margin: 0;
}

@media (max-width: 600px) {
  .ml-login-panel {
    padding: 18px 12px 14px 12px;
  }
}


/* ========================================================================== 
   MLERP fixed chrome separators (5 October 2026)
   Keep fixed/sticky chrome white, but give it a subtle visual edge so the
   header/footer boundary stays clear without adding a shadow.
   ========================================================================== */
#mlFixedTopHeader,
.ml-right-sidebar-header {
  border-bottom: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
}

.ml-right-sidebar-footer {
  border-top: 1px solid #e5e5e5 !important;
  box-shadow: none !important;
}

/* ========================================================================== 
   MLERP final datepicker icon + Hauptfoto alignment (5 October 2026)
   ========================================================================== */
input.mlerp-date-picker-visible,
input.mlerp-f7-calendar-input.mlerp-date-picker-visible {
  padding-right: 42px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
}

.ml-main-photo-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}
.ml-main-photo-label > input[type="checkbox"] {
  align-self: center !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
}
.ml-main-photo-label > span {
  display: flex !important;
  align-items: center !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  transform: none !important;
  line-height: 1.25 !important;
}

#btnEmployeeFotoCrop:disabled {
  cursor: wait !important;
  opacity: .72 !important;
}

/* ========================================================================== 
   MLERP final native select caret - match the working Portal select
   5 October 2026
   Use the browser/W3.CSS native dropdown indicator everywhere instead of
   drawing our own SVG/gradient caret. This is the same mechanism that remains
   visible in the left-sidebar Portal selector.
   ========================================================================== */
html body select:not([multiple]) {
  -webkit-appearance: menulist !important;
  -moz-appearance: menulist !important;
  appearance: auto !important;
  box-sizing: border-box !important;
  background-color: #fff !important;
  background-image: none !important;
  background-repeat: initial !important;
  background-position: initial !important;
  background-size: initial !important;
  padding-left: var(--ml-control-pad-x, 12px) !important;
  padding-right: 12px !important;
}

html body select.w3-select:not([multiple]) {
  height: 42px !important;
  min-height: 42px !important;
}



/* ==========================================================================
   MLERP final datepicker chrome (6 October 2026)
   Keep every visible date/date-time picker white, with the calendar icon
   anchored at the far right and enough text room for the icon.
   ========================================================================== */
html body input.mlerp-date-picker-visible,
html body #myRightSidebar input.mlerp-date-picker-visible,
html body html body input.mlerp-f7-calendar-input.mlerp-date-picker-visible {
  padding-left: var(--ml-control-pad-x, 12px) !important;
  padding-right: 42px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
}

/* ========================================================================== 
   MLERP required-field error presentation (6 October 2026)
   Required validation is shown on the field label + field border only.
   The old redundant "* Pflichtfeld" line underneath the control is hidden.
   Other validation messages (e.g. date-range errors) remain visible.
   ========================================================================== */
form[id^="frmLic"] .ml-required-label-error {
  color: #f44336 !important;
}

form[id^="frmLic"] .w3-border-red {
  border-color: #f44336 !important;
}

form[id^="frmLic"] p[id^="tx_"].ml-required-message-hidden {
  display: none !important;
}


/* ========================================================================== 
   MLERP Framework7 Calendar integration (6 October 2026)
   Framework7 Calendar is the ERP date/date-time picker engine.
   ========================================================================== */
html body input.mlerp-f7-calendar-source {
  display: none !important;
}

html body input.mlerp-f7-calendar-input {
  display: block !important;
  width: 100% !important;
  height: 42px !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
  padding-left: var(--ml-control-pad-x, 12px) !important;
  padding-right: 42px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 11h18'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  cursor: pointer !important;
}

#mlFramework7CalendarApp.ml-f7-calendar-root {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 2147483000 !important;
  background: transparent !important;
  pointer-events: none !important;
}

#mlFramework7CalendarApp .calendar,
#mlFramework7CalendarApp .calendar-modal,
#mlFramework7CalendarApp .popover,
#mlFramework7CalendarApp .sheet-modal,
#mlFramework7CalendarApp .modal-backdrop,
#mlFramework7CalendarApp .sheet-backdrop,
#mlFramework7CalendarApp .popover-backdrop,
#mlFramework7CalendarApp .calendar-backdrop {
  pointer-events: auto !important;
}

#mlFramework7CalendarApp .mlerp-f7-calendar {
  font-family: inherit !important;
}

#mlFramework7CalendarApp .calendar-year-selector,
#mlFramework7CalendarApp .calendar-month-selector {
  font-weight: 600 !important;
}

/* Keep Framework7 Calendar above the ERP fixed header, sidebars and bottom sheets. */
#mlFramework7CalendarApp .popover,
#mlFramework7CalendarApp .sheet-modal,
#mlFramework7CalendarApp .calendar-modal,
#mlFramework7CalendarApp .modal-backdrop,
#mlFramework7CalendarApp .sheet-backdrop,
#mlFramework7CalendarApp .popover-backdrop,
#mlFramework7CalendarApp .calendar-backdrop {
  z-index: 2147483100 !important;
}


/* Keep the built-in month/year selectors visibly tappable on every screen. */
#mlFramework7CalendarApp .calendar-month-selector .current-month-value,
#mlFramework7CalendarApp .calendar-year-selector .current-year-value {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 64px !important;
  min-height: 32px !important;
  font-weight: 700 !important;
}

#mlFramework7CalendarApp .calendar-year-selector {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========================================================================== 
   MLERP Framework7 Calendar visual theme (6 October 2026)
   Framework7 remains the calendar engine only. Its visual language is
   deliberately flattened to match the ERP: Inter Tight, white surfaces,
   grey borders, 10px radii, no glass/shadows and compact controls.
   ========================================================================== */
#mlFramework7CalendarApp {
  --f7-font-family: "Inter Tight", sans-serif;
  --f7-theme-color: var(--ml-btn-bg, #9c27b0);
  --f7-bars-bg-color: #ffffff;
  --f7-bars-text-color: #222222;
  --f7-bars-link-color: #222222;
  --f7-bars-border-color: #e5e5e5;
  --f7-toolbar-bg-color: #ffffff;
  --f7-toolbar-text-color: #222222;
  --f7-toolbar-link-color: #222222;
  --f7-sheet-bg-color: #ffffff;
  --f7-sheet-border-color: var(--ml-panel-border, #d9d9d9);
  --f7-popover-bg-color: #ffffff;
  --f7-popover-border-radius: 10px;
  --f7-popover-box-shadow: none;
  --f7-glass-bg-color: #ffffff;
  --f7-glass-shadow: none;

  --f7-calendar-sheet-bg-color: #ffffff;
  --f7-calendar-sheet-border-color: var(--ml-panel-border, #d9d9d9);
  --f7-calendar-modal-bg-color: #ffffff;
  --f7-calendar-modal-border-radius: 10px;
  --f7-calendar-modal-box-shadow: none;
  --f7-calendar-header-bg-color: #ffffff;
  --f7-calendar-header-text-color: #222222;
  --f7-calendar-header-link-color: #222222;
  --f7-calendar-header-height: 50px;
  --f7-calendar-header-font-size: 16px;
  --f7-calendar-header-font-weight: 700;
  --f7-calendar-header-padding: 0 14px;
  --f7-calendar-footer-bg-color: #ffffff;
  --f7-calendar-footer-text-color: #222222;
  --f7-calendar-footer-border-color: #e5e5e5;
  --f7-calendar-footer-link-color: var(--ml-btn-bg, #9c27b0);
  --f7-calendar-footer-height: 54px;
  --f7-calendar-footer-padding: 0 12px;
  --f7-calendar-footer-font-size: 15px;
  --f7-calendar-week-header-bg-color: #ffffff;
  --f7-calendar-week-header-text-color: #666666;
  --f7-calendar-week-header-height: 30px;
  --f7-calendar-week-header-font-size: 12px;
  --f7-calendar-day-text-color: #222222;
  --f7-calendar-day-font-size: 15px;
  --f7-calendar-day-size: 34px;
  --f7-calendar-prev-next-text-color: #b5b5b5;
  --f7-calendar-disabled-text-color: #c8c8c8;
  --f7-calendar-today-text-color: #222222;
  --f7-calendar-today-bg-color: #ffffff;
  --f7-calendar-selected-text-color: #000000;
  --f7-calendar-selected-bg-color: #f1f1f1; /* W3.CSS w3-light-grey */
  --f7-calendar-picker-font-size: 15px;
  --f7-calendar-picker-selected-text-color: #222222;
  --f7-calendar-picker-hover-bg-color: #f7f7f7;
  --f7-calendar-picker-pressed-bg-color: #f1f1f1;
  --f7-calendar-time-selector-font-size: 15px;
  --f7-calendar-time-selector-height: 40px;
  --f7-calendar-time-selector-bg-color: #ffffff;

  --f7-picker-sheet-bg-color: #ffffff;
  --f7-picker-item-selected-bg-color: #f5f5f5;
  --f7-picker-item-selected-text-color: #222222;
  --f7-picker-item-text-color: #555555;
  --f7-picker-divider-text-color: #222222;

  color: #222222 !important;
  font-family: "Inter Tight", sans-serif !important;
}

#mlFramework7CalendarApp,
#mlFramework7CalendarApp * {
  font-family: "Inter Tight", sans-serif !important;
  text-shadow: none !important;
}

/* Kill the iOS 26 glass/elevation treatment inside our isolated calendar app. */
#mlFramework7CalendarApp .calendar,
#mlFramework7CalendarApp .calendar-modal,
#mlFramework7CalendarApp .calendar-sheet,
#mlFramework7CalendarApp .calendar-popover,
#mlFramework7CalendarApp .sheet-modal,
#mlFramework7CalendarApp .sheet-modal-inner,
#mlFramework7CalendarApp .popover,
#mlFramework7CalendarApp .popover-inner,
#mlFramework7CalendarApp .picker,
#mlFramework7CalendarApp .picker-columns,
#mlFramework7CalendarApp .toolbar,
#mlFramework7CalendarApp .calendar-header,
#mlFramework7CalendarApp .calendar-footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: none !important;
  filter: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#mlFramework7CalendarApp .calendar-modal,
#mlFramework7CalendarApp .calendar-popover .calendar,
#mlFramework7CalendarApp .popover,
#mlFramework7CalendarApp .picker-popover {
  border: 1px solid var(--ml-panel-border, #d9d9d9) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Desktop popover and nested month/year/time popovers use the same panel edge. */
#mlFramework7CalendarApp .popover-inner {
  border-radius: 9px !important;
  overflow: hidden !important;
}

#mlFramework7CalendarApp .popover-angle,
#mlFramework7CalendarApp .popover-angle:before,
#mlFramework7CalendarApp .popover-angle:after {
  box-shadow: none !important;
  filter: none !important;
}

#mlFramework7CalendarApp .popover-angle:after {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* Small-screen sheet: white card with an explicit edge, never a floating shadow. */
#mlFramework7CalendarApp .sheet-modal.calendar-sheet,
#mlFramework7CalendarApp .calendar-sheet.sheet-modal,
#mlFramework7CalendarApp .sheet-modal.mlerp-f7-calendar {
  border-top: 1px solid var(--ml-panel-border, #d9d9d9) !important;
  border-left: 1px solid var(--ml-panel-border, #d9d9d9) !important;
  border-right: 1px solid var(--ml-panel-border, #d9d9d9) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0 !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .modal-backdrop,
#mlFramework7CalendarApp .sheet-backdrop,
#mlFramework7CalendarApp .popover-backdrop,
#mlFramework7CalendarApp .calendar-backdrop {
  background: rgba(0, 0, 0, .20) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Title row: same compact white header language as the ERP fixed/sidebar headers. */
#mlFramework7CalendarApp .calendar-header {
  box-sizing: border-box !important;
  color: #222222 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* Month/year toolbar becomes two clean bordered controls. */
#mlFramework7CalendarApp .calendar .toolbar,
#mlFramework7CalendarApp .mlerp-f7-calendar .toolbar {
  min-height: 52px !important;
  height: 52px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  box-sizing: border-box !important;
}

#mlFramework7CalendarApp .calendar .toolbar-inner,
#mlFramework7CalendarApp .mlerp-f7-calendar .toolbar-inner {
  min-height: 52px !important;
  padding: 7px 12px !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#mlFramework7CalendarApp .calendar-month-selector,
#mlFramework7CalendarApp .calendar-year-selector {
  width: calc(50% - 4px) !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 2px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid var(--ml-panel-border, #d9d9d9) !important;
  border-radius: 8px !important;
  color: #222222 !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-month-selector .current-month-value,
#mlFramework7CalendarApp .calendar-year-selector .current-year-value {
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 4px !important;
  color: #222222 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  background: transparent !important;
}

#mlFramework7CalendarApp .calendar-month-selector a,
#mlFramework7CalendarApp .calendar-year-selector a,
#mlFramework7CalendarApp .calendar-month-selector .link,
#mlFramework7CalendarApp .calendar-year-selector .link {
  min-width: 34px !important;
  width: 34px !important;
  min-height: 34px !important;
  height: 34px !important;
  color: #555555 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-month-selector a:hover,
#mlFramework7CalendarApp .calendar-year-selector a:hover,
#mlFramework7CalendarApp .calendar-month-selector a:focus-visible,
#mlFramework7CalendarApp .calendar-year-selector a:focus-visible {
  background: #f5f5f5 !important;
  color: #222222 !important;
}

/* Week labels and date grid: plain white, no row stripes or glass separators. */
#mlFramework7CalendarApp .calendar-week-header {
  background: #ffffff !important;
  border-bottom: 1px solid #eeeeee !important;
  color: #666666 !important;
  font-weight: 600 !important;
}

#mlFramework7CalendarApp .calendar-week-day {
  color: #666666 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#mlFramework7CalendarApp .calendar-months,
#mlFramework7CalendarApp .calendar-months-wrapper,
#mlFramework7CalendarApp .calendar-month,
#mlFramework7CalendarApp .calendar-row {
  background: #ffffff !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-row:before,
#mlFramework7CalendarApp .calendar-row:after {
  display: none !important;
}

#mlFramework7CalendarApp .calendar-day {
  color: #222222 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

#mlFramework7CalendarApp .calendar-day-prev,
#mlFramework7CalendarApp .calendar-day-next {
  color: #b5b5b5 !important;
}

#mlFramework7CalendarApp .calendar-day-disabled {
  color: #c8c8c8 !important;
  opacity: 1 !important;
}

#mlFramework7CalendarApp .calendar-day .calendar-day-number {
  width: 34px !important;
  height: 34px !important;
  line-height: 32px !important;
  box-sizing: border-box !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: inherit !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-day:not(.calendar-day-disabled):hover .calendar-day-number {
  border-color: var(--ml-panel-border, #d9d9d9) !important;
  background: #f8f8f8 !important;
}

#mlFramework7CalendarApp .calendar-day-today .calendar-day-number {
  color: #222222 !important;
  background: #ffffff !important;
  border-color: #bdbdbd !important;
  font-weight: 700 !important;
}

#mlFramework7CalendarApp .calendar-day-selected .calendar-day-number,
#mlFramework7CalendarApp .calendar-day-selected.calendar-day-today .calendar-day-number {
  color: #000000 !important;
  background: #f1f1f1 !important; /* w3-light-grey */
  border-color: #f1f1f1 !important;
  font-weight: 700 !important;
}

/* Month/year picker and time picker popovers inherit the same flat ERP controls. */
#mlFramework7CalendarApp .calendar-picker,
#mlFramework7CalendarApp .calendar-picker-wrapper,
#mlFramework7CalendarApp .calendar-month-picker,
#mlFramework7CalendarApp .calendar-year-picker,
#mlFramework7CalendarApp .calendar-time-picker,
#mlFramework7CalendarApp .picker,
#mlFramework7CalendarApp .picker-columns {
  background: #ffffff !important;
  color: #222222 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#mlFramework7CalendarApp .calendar-picker-item,
#mlFramework7CalendarApp .picker-item {
  color: #444444 !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-picker-item-selected,
#mlFramework7CalendarApp .calendar-picker-item-current,
#mlFramework7CalendarApp .picker-item-selected {
  color: #222222 !important;
  background: #f5f5f5 !important;
  font-weight: 700 !important;
}

#mlFramework7CalendarApp .calendar-time-selector {
  min-height: 48px !important;
  padding: 6px 12px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border-top: 1px solid #eeeeee !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-time-selector a,
#mlFramework7CalendarApp .calendar-time-selector .link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  color: #222222 !important;
  border: 1px solid var(--ml-panel-border, #d9d9d9) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

/* Footer action is a compact MLERP action button, not an iOS text link. */
#mlFramework7CalendarApp .calendar-footer {
  border-top: 1px solid #e5e5e5 !important;
  box-sizing: border-box !important;
}

#mlFramework7CalendarApp .calendar-footer a,
#mlFramework7CalendarApp .calendar-footer .link {
  min-width: 86px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 0 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  background: var(--ml-btn-bg, #9c27b0) !important;
  color: var(--ml-btn-fg, #ffffff) !important;
  border: 1px solid var(--ml-btn-bg, #9c27b0) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#mlFramework7CalendarApp .calendar-footer a:hover,
#mlFramework7CalendarApp .calendar-footer a:focus-visible {
  opacity: .92 !important;
}

/* Framework7 can add decorative pseudo-elements/hairlines. Keep the calendar
   intentionally flat; explicit MLERP borders above provide all separators. */
#mlFramework7CalendarApp .calendar-header:before,
#mlFramework7CalendarApp .calendar-header:after,
#mlFramework7CalendarApp .calendar-footer:before,
#mlFramework7CalendarApp .calendar-footer:after,
#mlFramework7CalendarApp .toolbar:before,
#mlFramework7CalendarApp .toolbar:after,
#mlFramework7CalendarApp .sheet-modal:before,
#mlFramework7CalendarApp .sheet-modal:after {
  box-shadow: none !important;
}

@media (max-width: 600px) {
  #mlFramework7CalendarApp .sheet-modal.calendar-sheet,
  #mlFramework7CalendarApp .calendar-sheet.sheet-modal,
  #mlFramework7CalendarApp .sheet-modal.mlerp-f7-calendar {
    width: 100% !important;
    max-width: 100% !important;
  }

  #mlFramework7CalendarApp .calendar-header {
    min-height: 48px !important;
    height: 48px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #mlFramework7CalendarApp .calendar .toolbar,
  #mlFramework7CalendarApp .mlerp-f7-calendar .toolbar,
  #mlFramework7CalendarApp .calendar .toolbar-inner,
  #mlFramework7CalendarApp .mlerp-f7-calendar .toolbar-inner {
    min-height: 50px !important;
    height: 50px !important;
  }

  #mlFramework7CalendarApp .calendar .toolbar-inner,
  #mlFramework7CalendarApp .mlerp-f7-calendar .toolbar-inner {
    padding: 6px 10px !important;
  }

  #mlFramework7CalendarApp .calendar-month-selector,
  #mlFramework7CalendarApp .calendar-year-selector {
    min-height: 36px !important;
    height: 36px !important;
  }

  #mlFramework7CalendarApp .calendar-day .calendar-day-number {
    width: 36px !important;
    height: 36px !important;
    line-height: 34px !important;
  }
}

/* ========================================================================== 
   MLERP Framework7 Calendar centered mobile modal (6 October 2026)
   Small screens use Framework7 customModal rather than the default sheet.
   The modal keeps the same flat MLERP panel language and exposes one X only.
   ========================================================================== */
@media (max-width: 600px) {
  #mlFramework7CalendarApp .calendar-modal.mlerp-f7-calendar,
  #mlFramework7CalendarApp .modal.calendar-modal.mlerp-f7-calendar {
    width: calc(100vw - 24px) !important;
    max-width: 390px !important;
    max-height: calc(100vh - 32px) !important;
    background: #ffffff !important;
    border: 1px solid var(--ml-panel-border, #d9d9d9) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  #mlFramework7CalendarApp .calendar-modal.mlerp-f7-calendar .calendar-header {
    position: relative !important;
    padding-left: 86px !important;
    padding-right: 86px !important;
    text-align: center !important;
  }

  #mlFramework7CalendarApp .calendar-modal.mlerp-f7-calendar .calendar-footer {
    display: none !important;
  }

}

/* Calendar selection actions: X closes, checkmark confirms a selected value.
   Both buttons remain visible above the calendar on mobile and desktop. */
#mlFramework7CalendarApp .mlerp-calendar-with-actions .calendar-header {
  padding-right: 86px !important;
  padding-left: 86px !important;
}

html body #mlFramework7CalendarApp .mlerp-calendar-close,
html body #mlFramework7CalendarApp .mlerp-calendar-confirm {
  position: absolute !important;
  top: 5px !important;
  transform: none !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  font-family: "Inter Tight", sans-serif !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  z-index: 50 !important;
}

html body #mlFramework7CalendarApp .mlerp-calendar-close {
  right: 10px !important;
  color: #222222 !important;
  font-size: 27px !important;
  font-weight: 400 !important;
}

html body #mlFramework7CalendarApp .mlerp-calendar-confirm {
  right: 48px !important;
  color: #111111 !important;
}

/* The same Lucide check as the calendar colour picker, centred at the
   identical top position and inside the identical 34px target as X. */
html body #mlFramework7CalendarApp .mlerp-calendar-confirm > svg.lucide-check {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  display: block !important;
  fill: none !important;
  color: #111111 !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  margin: 0 !important;
  transform: translateY(2px) !important;
}

html body #mlFramework7CalendarApp .mlerp-calendar-confirm[hidden] {
  display: none !important;
}

html body #mlFramework7CalendarApp .mlerp-calendar-close:hover,
html body #mlFramework7CalendarApp .mlerp-calendar-close:focus-visible,
html body #mlFramework7CalendarApp .mlerp-calendar-confirm:hover,
html body #mlFramework7CalendarApp .mlerp-calendar-confirm:focus-visible {
  background: #f5f5f5 !important;
  outline: none !important;
}

/* Calendar colour swatches: make each 42px tile a clean, reliable tap target. */
.lic-calendar-color-choice {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.lic-calendar-color-choice > * {
  pointer-events: none !important;
}

/* ========================================================================== 
   MLERP order service planner (Admin / Auftrag / Leistungen)
   Metadata-driven service/item/group UI, 12 October 2026.
   ========================================================================== */
#frmLicOrderAdd .order-service-card,
#frmLicOrderUpdate .order-service-card {
  margin-top: 12px;
  padding: 14px;
  background: #fff;
  border: 1px solid #cccccc;
  border-radius: 10px;
  box-shadow: none;
}

#frmLicOrderAdd .order-service-item-card,
#frmLicOrderUpdate .order-service-item-card {
  margin-top: 14px;
  padding: 14px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  box-shadow: none;
}

#frmLicOrderAdd .order-service-group-card,
#frmLicOrderUpdate .order-service-group-card {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  box-shadow: none;
}

#frmLicOrderAdd .order-service-field,
#frmLicOrderUpdate .order-service-field {
  margin-top: 16px;
}

#frmLicOrderAdd .order-service-item-fields > .order-service-field:first-child,
#frmLicOrderUpdate .order-service-item-fields > .order-service-field:first-child,
#frmLicOrderAdd .order-service-group-fields > .order-service-field:first-child,
#frmLicOrderUpdate .order-service-group-fields > .order-service-field:first-child {
  margin-top: 18px;
}

#frmLicOrderAdd .order-service-field .w3-input,
#frmLicOrderAdd .order-service-field .w3-select,
#frmLicOrderUpdate .order-service-field .w3-input,
#frmLicOrderUpdate .order-service-field .w3-select,
#frmLicOrderAdd .order-service-select,
#frmLicOrderAdd .order-service-item-select,
#frmLicOrderUpdate .order-service-select,
#frmLicOrderUpdate .order-service-item-select {
  background: #fff !important;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
}

#frmLicOrderAdd .order-service-checkbox-panel,
#frmLicOrderUpdate .order-service-checkbox-panel {
  min-height: 42px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff !important;
  border: 1px solid #d9d9d9;
  box-sizing: border-box;
}

#frmLicOrderAdd .order-service-card-error,
#frmLicOrderUpdate .order-service-card-error {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
}

#frmLicOrderAdd .ml-service-invalid > .order-card-head .order-card-title,
#frmLicOrderUpdate .ml-service-invalid > .order-card-head .order-card-title,
#frmLicOrderAdd .order-service-field.ml-service-invalid > .ed-label,
#frmLicOrderUpdate .order-service-field.ml-service-invalid > .ed-label {
  color: #f44336 !important;
}

#frmLicOrderAdd .order-service-loading,
#frmLicOrderUpdate .order-service-loading {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#frmLicOrderAdd .order-service-no-fields,
#frmLicOrderUpdate .order-service-no-fields {
  padding: 10px 0 2px;
  font-size: 14px;
}


/* Work page: W3 full-width buttons on small screens only; larger sizes
   must use content width even when a global button style sets width:100%. */
@media (max-width:600px) {
  html body button.w3-btn.ml-employee-mobile-block:not([hidden]) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 44px;
    padding: 10px 16px;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
  }
}
@media (min-width:601px) {
  html body button.w3-btn.ml-employee-mobile-block:not([hidden]) {
    display: inline-block !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 0 0 auto !important;
    align-self: flex-start;
    box-sizing: border-box;
    white-space: normal;
  }
}


.ml-employee-work-scan-message {
  margin: 10px 0 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.ml-employee-work-scan-message[hidden] { display: none !important; }

/* Employee collection requirements and local scan status. */
.ml-employee-required-objects{overflow-wrap:anywhere;line-height:1.5;}
.ml-employee-required-objects ul{padding-left:20px;}
.ml-employee-required-objects li+li{margin-top:6px;}
.ml-employee-object-type{font-weight:600;}
.ml-employee-resource-card{padding:14px;}
/* Employee order card styles: /lic/employee/inc/order_styles.asp.
   Included with the employee pages so the layout also survives stale CSS caches. */

/* Issue58: + Gruppe is not an action in order Add/Edit; preserve existing groups. */
#frmLicOrderAdd .btnOrderServiceGroupAdd,
#frmLicOrderUpdate .btnOrderServiceGroupAdd { display:none !important; }

/* Issue90: subdued numerical counters in the Admin dashboard and left sidebar.
   The numbers stay plain text, with consistent numeric widths and hierarchy. */
html body .ml-dashboard-panel .ml-admin-dash-count {
  color: #6b7280;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html body #mySidebar .ml-admin-sidebar-count {
  float: right;
  margin-top: 2px;
  color: #6b7280;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Issue92: centered photo select control in the employee Add/Edit forms.
   Do not give the button full width; preserve w3-hide when an image exists. */
html body .lic-employee-photo-select-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
}
html body .lic-employee-photo-select-row > #btnEmployeeFotoAdd:not(.w3-hide) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto !important;
  flex: 0 0 auto;
}

/* Issue91/92: document actions stay in the sidebar and match the 32px
   compact delete button (size, corner radius and 8px separation). */
html body .lic-employee-file-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
html body .lic-employee-file-actions {
  display: flex;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
}
html body .lic-employee-file-actions > .w3-btn {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  box-sizing: border-box;
  height: 32px !important;
  min-height: 32px !important;
  padding: 6px 5px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: #f1f1f1 !important;
  background-color: #f1f1f1 !important;
  color: #222 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 600 !important;
  white-space: nowrap;
}
html body .lic-employee-file-actions > .w3-btn:hover,
html body .lic-employee-file-actions > .w3-btn:focus-visible {
  background: #e4e4e7 !important;
  background-color: #e4e4e7 !important;
}
html body .lic-employee-file-actions > .w3-btn .ml-icon {
  flex-shrink: 0;
}
html body .lic-employee-file-selected-name {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 8px 0 4px;
  font-size: 14px;
  line-height: 1.4;
  color: #4b5563;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
}
html body .lic-employee-file-meta {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* Issue93: employee document sharing is an unboxed checkbox/text row.
   Retain the portal-permission font and purple checked control, without
   adding a panel or selected-background around the entire option. */
html body .lic-employee-file-share {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0;
  margin-top: 12px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: #111 !important;
  cursor: pointer;
}
html body .lic-employee-file-share > input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0 !important;
  position: relative;
  top: 1px; /* Issue95: 1px further down for text alignment. */
  accent-color: #9c27b0;
}
html body .lic-employee-file-share > span {
  display: block;
  min-width: 0;
  font-size: 15px;
  font-weight: 500;
  color: #111 !important;
  position: relative;
  top: 2px;
}

/* Employee photo preview: the Add and Update forms share the same centered
   crop tools and compact, neutrally styled change/delete buttons. */
html body #frmLicEmployeeAdd #lic_employee_foto_preview_area,
html body #frmLicEmployeeUpdate .lic-employee-photo-update-preview {
  width: 100%;
  min-width: 0;
  text-align: center;
}
html body #frmLicEmployeeUpdate .lic-employee-photo-update-preview > .lic-photo-lightbox {
  display: inline-block;
  max-width: 100%;
}
html body #frmLicEmployeeAdd #lic_employee_foto_preview,
html body #frmLicEmployeeUpdate #lic_employee_foto_preview {
  max-width: 100%;
}
html body #frmLicEmployeeAdd .ml-employee-photo-edit-actions,
html body #frmLicEmployeeUpdate .ml-employee-photo-edit-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
html body #frmLicEmployeeAdd .ml-employee-photo-edit-actions > button,
html body #frmLicEmployeeUpdate .ml-employee-photo-edit-actions > button {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 6px 4px !important;
  box-sizing: border-box;
  background: #f1f1f1 !important;
  color: #111 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  gap: 4px;
  white-space: nowrap;
}
html body #frmLicEmployeeAdd .ml-employee-photo-edit-actions > button:hover,
html body #frmLicEmployeeUpdate .ml-employee-photo-edit-actions > button:hover {
  background: #e4e4e7 !important;
}
html body #frmLicEmployeeAdd .ml-employee-photo-edit-actions > button > .ml-icon,
html body #frmLicEmployeeAdd .ml-employee-photo-edit-actions > button > svg.lucide,
html body #frmLicEmployeeUpdate .ml-employee-photo-edit-actions > button > .ml-icon,
html body #frmLicEmployeeUpdate .ml-employee-photo-edit-actions > button > svg.lucide {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  align-self: center;
  margin: 0 !important;
  vertical-align: middle;
}

/* Issue101: use the same +2px typography as the photo confirmation
   buttons on small screens (12px -> 14px for all four actions). */
@media (max-width: 600px) {
  html body #frmLicEmployeeAdd .ml-employee-photo-edit-actions > button,
  html body #frmLicEmployeeUpdate .ml-employee-photo-edit-actions > button {
    font-size: 14px !important;
  }
}

/* MLERP Issue102: light-grey compact, centered photo and document pickers on
   the Admin Add/Edit forms. The file inputs and upload JS remain unchanged. */
html body .lic-employee-photo-select-row > #btnEmployeeFotoAdd:not(.w3-hide) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
  background: #f1f1f1 !important;
  color: #111 !important;
  border: 1px solid #d1d5db !important;
}
html body .lic-employee-photo-select-row > #btnEmployeeFotoAdd:not(.w3-hide):hover,
html body .lic-employee-photo-select-row > #btnEmployeeFotoAdd:not(.w3-hide):focus-visible {
  background: #e4e4e7 !important;
}
html body .lic-employee-photo-select-row > #btnEmployeeFotoAdd .ml-icon,
html body .lic-employee-photo-select-row > #btnEmployeeFotoAdd svg.lucide {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  align-self: center;
}
/* One common class on the photo/document choose buttons in Location, Vehicle,
   Vehicle-Magazine, Stock, Magazine and Order Add/Edit. No blanket w3-btn rules. */
html body button.ml-upload-select-button:not(.btnEmployeeFileSelect) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-height: 36px !important;
  padding: 7px 14px !important;
  margin: 8px auto 0 !important;
  border-radius: 8px !important;
  box-sizing: border-box;
  background: #f1f1f1 !important;
  color: #111 !important;
  font-weight: 600 !important;
  border: 1px solid #d1d5db !important;
  white-space: normal;
  text-align: center;
}
html body button.ml-upload-select-button:not(.btnEmployeeFileSelect):hover,
html body button.ml-upload-select-button:not(.btnEmployeeFileSelect):focus-visible {
  background: #e4e4e7 !important;
}
/* Keep the selected filename beneath the centered picker, even on mobile. */
html body button.ml-upload-select-button + span {
  display: block;
  margin: 6px 0 0;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: break-all;
}
html body button.ml-upload-select-button + span + br {
  display: none;
}
/* New employee document cards: centered, light-grey, natural-width choose button.
   Existing documents keep their established side-by-side 50/50 actions. */
html body .lic-employee-file-card:not([data-file-id]) .lic-employee-file-actions,
html body .lic-employee-file-card[data-file-id="0"] .lic-employee-file-actions {
  justify-content: center;
}
html body .lic-employee-file-actions > button.ml-upload-select-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 7px 14px !important;
  background: #f1f1f1 !important;
  background-color: #f1f1f1 !important;
  color: #111 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  text-align: center;
  white-space: normal;
}
html body .lic-employee-file-actions > button.ml-upload-select-button:hover,
html body .lic-employee-file-actions > button.ml-upload-select-button:focus-visible {
  background: #e4e4e7 !important;
  background-color: #e4e4e7 !important;
  border-color: #d1d5db !important;
}

/* MLERP Issue96: align status and action menus with titles in admin cards. */
/* The AJAX cards render inside #dvBody, not #dvBodyLoader. Their previous
   avatar-centering rules lowered the title while actions were pinned to the top.
   Give titles and actions the same grid row. Grid also prevents overlapping
   long names and the status/menu on narrow screens. */
#dvBody .ml-client-card .ml-client-row,
#dvBody .ml-location-card .ml-location-row,
#dvBody .ml-appointment-card .ml-appointment-row {
  align-items: flex-start !important;
}

#dvBody .ml-client-card .ml-client-head,
#dvBody .ml-location-card .ml-location-head,
#dvBody .ml-appointment-card .ml-appointment-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: start !important;
  column-gap: 8px !important;
  padding-right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

#dvBody .ml-client-card .ml-client-head > :first-child,
#dvBody .ml-location-card .ml-location-head > :first-child,
#dvBody .ml-appointment-card .ml-appointment-head > :first-child {
  grid-column: 1;
  grid-row: 1;
  min-width: 0 !important;
  padding-top: 6px !important;
}

#dvBody .ml-client-card .lic-list-head-actions,
#dvBody .ml-location-card .lic-list-head-actions,
#dvBody .ml-appointment-card .lic-list-head-actions {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
}

/* Orders contain additional rows within their header; keep them full width. */
#dvBody .ml-order-card .ml-client-head > .ml-order-title,
#dvBody .ml-order-card .ml-client-head > .ml-client-type {
  grid-column: 1 / -1 !important;
  width: auto !important;
  justify-self: start;
}

/* The same top-row alignment on every admin detail hero, not the employee
   self-service profile (which is loaded into #dvProfileBody). */
#dvBody .ed-hero .ed-name-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) max-content !important;
  align-items: start !important;
  column-gap: 8px !important;
  padding-right: 0 !important;
  width: 100% !important;
}
#dvBody .ed-hero .ed-name-row > .ed-name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0 !important;
  padding-top: 6px !important;
}
#dvBody .ed-hero .ed-name-row > .lic-detail-hero-actions {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  align-self: start !important;
  justify-self: end !important;
  margin: 0 !important;
}

/* Issue99: keep the visible "Angemeldet bleiben" checkbox gently rounded,
   without changing checkboxes on other pages. */
.ml-login-panel .custom-checkbox .checkmark {
  border-radius: 4px;
}