/* =====================================
                        ROOT — DESIGN SYSTEM//#6366f1  #4f46e5 
                      ===================================== */
                        
                  


                      body{
                      background: red;
                      }

                        :root{

                        --primary:#030e42;
                        --primary-hover:#1d1d46; 

                        --bg:#0b1020;
                        --sidebar:#0f172a;
                        --card:#111827;
                        --card-soft:#0f1a33;
                        --input-bg:#020617;

                        --text:#e5e7eb;
                        --text-soft:#9ca3af;

                        --border:rgba(255,255,255,.06);

                        /* 🎨 Kategorie-Farbe — hier zentral ändern (gilt für Lager + Bars) */
                        --category-color: #6484ec;

                        --radius-s:8px;
                        --radius-m:14px;
                        --radius-l:18px;
                        --radius-xl:22px;

                        --shadow-soft:0 8px 24px rgba(0,0,0,.35);
                        --shadow-hover:0 12px 32px rgba(0,0,0,.45);
                        --shadow-focus:0 0 0 3px rgba(99,102,241,.25);

                        --space-xs:6px;
                        --space-s:10px;
                        --space-m:16px;
                        --space-l:24px;
                        --space-xl:36px;
                      }

                      /* Entfernt Mobile Tap-Farben */
                      button{
                        -webkit-tap-highlight-color: transparent;
                      }

                      /* Kein roter Focus */
                      button:focus{
                        outline:none;
                      }

                      /* Nur wenn User wirklich mit Tastatur arbeitet */
                      button:focus-visible{
                        outline:2px solid var(--primary);
                      }


                      /* =====================================
                        RESET
                      ===================================== */

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

                      html,body{
                        margin: 0;
                        overflow:hidden;
                        height:100%;
                        font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
                        background:linear-gradient(180deg,#0b1020,#070c18);
                        color:var(--text);
                      }


                      /* =====================================
                        GLOBAL BUTTON BASE
                      ===================================== */

                      /* =====================================
                        CICON — BUTTON SYSTEM
                      ===================================== */

                      .btn{
                        height:44px;
                        padding:0 18px;

                        border-radius:12px;
                        border:1px solid transparent;

                        font-weight:600;
                        cursor:pointer;

                        display:flex;
                        align-items:center;
                        justify-content:center;

                        transition:.18s ease;

                        white-space:nowrap;
                      }

                      /* verhindert wildes Strecken */
                      .btn:not(.btn-block){
                        width:auto;
                      }

                      /* volle Breite wenn gewünscht */
                      .btn-block{
                        width:100%;
                      }


                      /* PRIMARY (Speichern etc) */

                      .btn-primary{
                        background:var(--primary);
                        color:white;
                      }

                      .btn-primary:hover{
                        background:var(--primary-hover);
                        transform:translateY(-1px);
                      }


                      /* SECONDARY (Abbrechen etc) */

                      .btn-secondary{
                        background:rgba(255,255,255,.04);
                        color:var(--text);
                        border-color:var(--border);
                      }

                      .btn-secondary:hover{
                        background:rgba(255,255,255,.07);
                      }


                      /* GHOST (Korrektur etc) */

                      .btn-ghost{
                        background:transparent;
                        color:var(--text-soft);
                      }

                      .btn-ghost:hover{
                        background:rgba(255,255,255,.05);
                        color:var(--text);
                      }


                      /* 🔥 DANGER — Perfektes Delete Styling */

                      .btn-danger{
                        background:rgba(220,38,38,.12);
                        color:#f87171;
                        border:1px solid rgba(248,113,113,.35);
                      }

                      .btn-danger:hover{
                        background:#dc2626;
                        color:white;
                        border-color:#dc2626;
                        transform:translateY(-1px);
                      }




                      .mainArea {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        min-width: 0;
                        height: 100%;
                        }


                      /* =====================================
                        SIDEBAR — ULTRA SaaS LEVEL
                      ===================================== */

                      .sidebar{
                        position: relativ;
                        width:260px; /* 🔥 breiter = mehr Premium */
                        height:100%;
                        flex-shrink:0;                         
                        overflow-x:hidden;
                        overflow-y:hidden;
                        background:linear-gradient(180deg,#0f172a,#0b1224);
                        border-right:1px solid var(--border);

                        padding:22px 16px;

                        display:flex;
                        flex-direction:column;

                        box-sizing:border-box;
                      }



                      /* =====================================
                        BRAND — KUNDENLOGO OBEN
                      ===================================== */
.sidebarBrand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:18px 14px 10px;
  margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,.05);
  flex-shrink:0;
}

.sidebarBrandText{
  font-size:11px;
  font-weight:600;
  opacity:0.45;
  letter-spacing:0.04em;
  text-align:center;
  color:var(--text);
}

.sidebarBrand img{
  width:160px;
  max-width:100%;
  max-height:80px;
  height:auto;
  object-fit:contain;
  display:block;
}




                      /* =====================================
                        🔥 BUTTON — ULTRA ALIGNMENT FIX
                      ===================================== */

                      .sidebar button{
                        display:flex;
                        align-items:center;
                        justify-content:flex-start;
                        gap:14px;

                        width: 100%;
                        box-sizing: border-box;
                      }

                      .sidebar button svg{
                        width:22px;
                        height:22px;
                        flex-shrink:0;
                      }

                      .sidebar button span{
                        position:relative;
                        top:-1px; /* optional -2px wenn du Perfektion willst */
                      }


                      /* HOVER */

                      .sidebar button:hover{
                        background:rgba(255,255,255,.06);
                        color:var(--text);

                        transform:translateX(6px);
                      }


                      /* ACTIVE — PREMIUM GLOW */

                      .sidebar button.active{

                        background:linear-gradient(135deg,#6366f1,#5856eb);
                        color:white;

                        box-shadow:
                          0 10px 30px rgba(99,102,241,.35),
                          inset 0 0 14px rgba(255,255,255,.08);
                      }

                      /* =====================================
                        LOGO UNTEN
                      ===================================== */

                   .sidebarLogo{
               margin-top:auto;
               padding:14px 14px 20px;
               display:flex;
               flex-direction:column;
               align-items:center;
               gap:6px;
              justify-content:center;
              align-items:center;
              border-top:1px solid rgba(255,255,255,.05);
              flex-shrink:0;
}

                .sidebarLogo img{
                 width:200px;
                max-width:100%;
                 max-height:60px;
                height:auto;
                object-fit:contain;
                display:block;
}

            .sidebarLogo:hover{
               transform:none;
}

.sidebarLogoText{
  font-size:12px;
  font-weight:700;
  opacity:0.6;
  letter-spacing:0.05em;
  text-align:center;
  color:var(--text);
  text-transform:uppercase;
}


                      .sidebar .btn{
                        width:100%;
                        justify-content:flex-start;
                        text-align:left;
                        padding:12px 18px;
                      }

                      .sidebar .btn span{
                        text-align:left;
                      }

                      .sidebar .btn svg{
                        margin-right:14px;
                      }


                      /* =====================================
                        SPLASH — PREMIUM EFFECT
                      ===================================== */

                      #splashScreen{
                        position:fixed;
                        inset:0;

                        display:flex;
                        flex-direction:column;
                        justify-content:center;
                        align-items:center;
                        gap:0;

                        background:#020617;
                        z-index:4000;

                        animation:splashFade .7s ease forwards;
                      }

                      .splashLogo{
                        width:180px;
                        max-width:50%;

                        animation:splashPop 1.2s ease;
                      }





                      /* LOGO POP */

                      @keyframes splashPop{
                        0%{
                          transform:scale(.7);
                          opacity:0;
                        }

                        60%{
                          transform:scale(1.08);
                          opacity:1;
                        }

                        100%{
                          transform:scale(1);
                        }
                      }


                      /* SCREEN FADE */

                      @keyframes splashFade{
                        from{ opacity:0; }
                        to{ opacity:1; }
                      }


                      .iconBtn svg {
                        width: 18px;
                        height: 18px;
                        stroke-width: 2;
                      }

                      /* =====================================
                        TOPBAR
                      ===================================== */

                      .topbar{
                      height:64px;
                      flex-shrink:0;
                      width:100%;
                        
                            
                       height:64px;

                        background:#020617;
                        border-bottom:1px solid var(--border);

                        display:flex;
                        align-items:center;
                        padding:0 24px;

                        z-index:999;
                      }

                      #pageTitle{
                        font-size:25px;
                        font-weight:600;
                      }

                      .menuToggle{
                        display:none;
                        font-size:26px;
                        background:none;
                        border:none;
                        color:white;
                        cursor:pointer;
                      }

                      .hidden{
                        display:none;
                      }


                      /* =====================================
                        MAIN LAYOUT
                      ===================================== */

                      /* ===============================
                        🔥 SAAS ROOT LAYOUT
                        =============================== */

                     #appShell{
                     display:flex;
                     height:100vh;
                     height:100dvh;
                     width:100%;
                     overflow-x:hidden;
}

                     #appMain{
                      flex:1;
                       padding:32px 24px 60px;
                      min-width: 0;
                      margin-left: 0;
                      overflow-y: auto;
                      overflow-x: hidden;
                      scrollbar-width: none; /* Firefox */

}


#appMain::-webkit-scrollbar{
  display: none; /* Chrome, Edge, Safari */
}

                      /* =====================================
                        GRID — LAGER / EDIT
                      ===================================== */

                      .editHeader{
                        display:flex;
                        align-items:center;
                        gap:10px;
                        margin-bottom:14px;
                        padding-bottom:12px;
                        border-bottom:1px solid rgba(255,255,255,0.08);
                      }

                      .editHeaderName{
                        font-size:16px;
                        font-weight:700;
                      }

                      .editHeaderBadge{
                        font-size:11px;
                        background:var(--category-color,#6484ec);
                        color:#fff;
                        padding:2px 8px;
                        border-radius:20px;
                        font-weight:600;
                      }

                      .editGrid{
                        display:grid;
                        grid-template-columns:repeat(6, minmax(0,1fr));
                        gap:12px;
                      }

                      .editGrid > *{
                        min-width:0;
                      }


                      /* =====================================
                        FORM SYSTEM
                      ===================================== */

                      .formField{
                        display:flex;
                        flex-direction:column;
                        gap:6px;
                        width:100%;
                      }

                      .formField label{
                        font-size:13px;
                        opacity:.85;
                      }

                      .formField input,
                      input{
                        padding:11px 12px;
                        border-radius:var(--radius-m);
                        border:1px solid var(--border);
                        background:var(--input-bg);
                        color:var(--text);

                        width:100%;
                        max-width:100%;

                        outline:none;
                        transition:.18s;
                      }

                      .formField input:focus{
                        border-color:var(--primary);
                        box-shadow:var(--shadow-focus);
                      }


                      /* =====================================
                        LOGIN
                      ===================================== */

                      #loginOverlay{
                        position:fixed;
                        inset:0;

                        display:none;
                        justify-content:center;
                        align-items:center;

                        background:#020617;
                        padding:20px;

                        z-index:3000;
                      }

                      .loginBox{
                        width:440px;
                        max-width:94vw;

                        padding:36px 40px 32px;
                        border-radius:var(--radius-xl);

                        background:#0f172a;

                        display:flex;
                        flex-direction:column;
                        gap:0px;

                        box-shadow:0 20px 60px rgba(0,0,0,.6);
                      }

                      .logo{
                        width:400px;
                        margin:0 auto 10px;
                      }

                      /* LOGIN BRAND — ULTRA CLEAN */

                      
                       .loginBrand{
                      width:420px;
                     max-width:95%;
                      display:block;
                    margin: 0 auto 6px;
                    transform: scale(1.3);
                    transform-origin: center top;
                  object-fit: contain;
                 filter:drop-shadow(0 12px 30px rgba(0,0,0,.5));
}

.loginCopyright{
  text-align:center;
  font-size:11px;
  color:#475569;
  margin-bottom:20px;
  line-height:1.6;
}

                    


                      /* LOGIN TITLE */

                      .loginTitle{
                        text-align:center;
                        font-size:26px;
                        font-weight:700;
                        margin-bottom:10px;
                      }

                      
                  

                   .loginSubText{
                     text-align: center;
                       font-size: 11px;
                        color: rgba(255,255,255,0.6);

                      margin-top: 0;
                        margin-bottom: 25px;   

                     letter-spacing: 4px;
                      text-transform: uppercase;
                      opacity: 0.6;
}


              


.loginSubText{
  text-align: center;
  margin-bottom: 20px;
}

/* kleine Headline */
.tagline{
  font-size: 20px;
  opacity: 0.75;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

/* Hauptname */
.brandMain{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 6px;
  margin-bottom: 2px;
}

/* Untertitel */
.brandSub{
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.75;
  letter-spacing: 3px;
}

#changePasswordModal .loginBrand {
  width: 420px;
}

#changePasswordModal img {
  width: 420px !important;
}

                      /* =====================================
                        HISTORY FIX
                      ===================================== */

                      .historyDateHeader{
                        position:sticky;
                        top:64px;
                        background:#020617;
                        padding:12px;
                        z-index:5;
                      }


                      /* =====================================
                        CRITICAL STOCK
                      ===================================== */

                      @keyframes criticalPulse{
                        0%{ box-shadow:0 0 0px rgba(255,80,80,.2); }
                        50%{ box-shadow:0 0 18px rgba(255,80,80,.6); }
                        100%{ box-shadow:0 0 0px rgba(255,80,80,.2); }
                      }

                      .lagerItem.cardCritical{
                        position:relative;
                        overflow:hidden;
                      }

                      .lagerItem.cardCritical::before{
                        content:"";
                        position:absolute;
                        left:0;
                        top:0;
                        bottom:0;

                        width:8px;
                        background:#ff4444;

                        border-radius:var(--radius-xl) 0 0 var(--radius-xl);

                        animation:criticalPulse 1.6s infinite;
                      }





                      /* COLLAPSE */

                      .collapsed{
                        max-height:0;
                        overflow:hidden;
                        opacity:0;
                        transition:.25s ease;
                      }

                      .collapsed.open{
                        max-height:600px;
                        opacity:1;
                        margin-top:12px;
                      }


                      /* COLLAPSE */

                      .addArtikelForm{
                        max-height:0;
                        overflow:hidden;
                        opacity:0;
                        transform:translateY(-10px);

                        transition:.25s;
                        width:100%;
                        box-sizing:border-box;

                      }

                      /* geöffnet */

                      .addArtikelForm.open{
                        max-height:800px;
                        opacity:1;
                        transform:none;
                      }

                      #lagerAdmin{
                      max-width: 100%;
                      padding: 0 20px;
                      }


                    #addArtikelForm .editGrid{
                      display:grid;
                      grid-template-columns: repeat(6, 1fr);
                      gap:12px;
                      width:100%;
                      max-width:100%;
                    }



 /* =====================================
                        MOBILE
/*===================================== */


                    @media(max-width:768px){
                        #addArtikelForm .editGrid{
                       grid-template-columns:1fr 1fr !important;
                     gap:10px;
                       }

                   #addArtikelForm button{
                     width:100%;
                         }
                    }



                    #addArtikelForm button{
                     margin-top:12px;
                    }

                    #addArtikelForm .formField{
                      gap:4px;
                       width:100%;
                      }

                    #addArtikelForm input{
                    width:100%;
                      padding:8px 10px;
                    box-sizing:border-box;
                    }
                      


                    #addArtikelForm label{
                      font-size:12px;
                        opacity:0.7;
                    margin-bottom:4px;
                      }

                    

                   
                  
                      .lagerToast{
                        position: fixed;
                        top: 80px;
                        right: 30px;
                        background: #22c55e;
                        color: white;
                        padding: 12px 18px;
                        border-radius: 8px;
                        font-weight: 600;
                        box-shadow: 0 8px 20px rgba(0,0,0,0.15);
                        opacity: 0;
                        transform: translateY(-10px);
                        transition: all .25s ease;
                        z-index: 9999;
                      }

                      .lagerToast.show{
                        opacity: 1;
                        transform: translateY(0);
                      }

                      .barBookingBox{
                        display:flex !important;
                        align-items:center;
                        gap:8px;
                        width:100%;
                        }

                      .erpSelect,
                      .erpInput {
                        background: #1e293b;
                        color: #fff;
                        border: 1px solid #334155;
                        padding: 6px 8px;
                        border-radius: 8px;
                        font-size: 14px;
                        outline: none;
                      }

                        .barBookingBox .btn{
                        width: auto;
                        padding: 6px 14px;
                        font-size: 13px;
                        white-space: nowrap;
                        flex-shrink: 0;
                    }

                      .barBookingBox .erpSelect {
                        flex: 1;
                        min-width: 80px;
                        max-width: 180px;
                      }

                      .barBookingBox .erpInput {
                        width: 80px;
                        flex-shrink: 0;
                      }

                      .erpSelect:focus,
                      .erpInput:focus {
                        border-color: #3b82f6;
                      }




                      .movementItem{
                        background:#162132;
                        border:1px solid #243248;
                        border-radius:8px;
                        padding:10px 12px;
                        display:flex;
                        justify-content:space-between;
                        align-items:center;
                      }

                      .movementLeft{
                        display:flex;
                        flex-direction:column;
                        gap:4px;
                      }

                      .movementTitle{
                        font-weight:600;
                        display:flex;
                        gap:6px;
                        align-items:center;
                      }

                      .movementTarget{
                        opacity:0.6;
                        font-size:13px;
                      }

                      .movementChange{
                        font-size:13px;
                        opacity:0.7;
                      }

                      .movementRight{
                        display:flex;
                        flex-direction:column;
                        align-items:flex-end;
                        gap:4px;
                      }

                      .movementValue{
                        font-weight:700;
                        font-size:15px;
                      }

                      .movementValue.plus{
                        color:#22c55e;
                      }

                      .movementValue.minus{
                        color:#ef4444;
                      }

                      .movementDate{
                        font-size:12px;
                        opacity:0.6;
                      }


                      .historyPlus{
                        color:#22c55e;
                        font-weight:600;
                      }

                      .historyMinus{
                        color:#ef4444;
                        font-weight:600;
                      }

                      .historyInbound{
                        color:#facc15;
                        font-weight:600;
                      }

                      .historyMeta{
                        font-size:12px;
                        opacity:0.6;
                        margin-top:4px;
                      }


                      .historyMinus { color: #ef4444; }
                      .historyPlus { color: #22c55e; }
                      .historyCorrection { color: #a855f7; }
                      .historyEdit { color: #0ea5e9; }

                      .historyDetail {
                        font-size: 12px;
                        opacity: 0.8;
                        margin-top: 2px;
                      }

                      .globalToast{
                        padding:12px 18px;
                        border-radius:8px;
                        font-weight:600;
                        box-shadow:0 4px 20px rgba(0,0,0,.25);
                        transition:opacity .3s ease;
                        color:white;
                      }

                      .toast-success{
                        background:#16a34a;
                      }

                      .toast-warning{
                        background:#f59e0b;
                      }

                      .toast-error{
                        background:#dc2626;
                      }

                      .lagerToolbar {
                        position: sticky;
                        top: 0;
                        z-index: 20;

                        display: flex;
                        gap: 10px;
                        align-items: center;

                        padding: 12px;
                        background: #0f1b2d;
                        border-bottom: 1px solid rgba(255,255,255,0.05);
                        border-radius: 12px;
                      }

                      .lagerToolbar input,
                      .lagerToolbar select,
                      .lagerToolbar button {
                        background: #16243a;
                        border: 1px solid rgba(255,255,255,0.08);
                        color: white;
                        padding: 6px 10px;
                        border-radius: 6px;
                        cursor: pointer;
                      }

                      .lagerToolbar input{
                       margin-bottom:8px;
                      }


                      .lagerToolbar button.active {
                        background: #f59e0b;
                        color: black;
                      }

.barArtikelRow{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
}

.barArtikelRow .btn{
  width:auto;
  height:30px;
  padding:0 10px;
  font-size:12px;
}

.barArtikelRow input[type="number"]{
  height:30px;
  padding:0 6px;
  font-size:12px;
  width:60px !important;
}

/* delete button sauber */
.barArtikelRow .btn-danger.removeBtn{
  padding:0 10px;
}

 
 



.mobileMenuBtn{
  display:none;
}

/* Desktop */
.barDetailHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}

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

.barDetailTopActions .btn {
  width: auto;
}


/* =====================================
   CICON — MOBILE BUTTON CONSISTENCY
===================================== */
/* Tablet + Mobile: Sidebar als Slide-In (Touch-Geräte ODER kleine Screens) */
@media(max-width:1280px) and (pointer:coarse),
      (max-width:768px){

  .csvOnlyDesktop { display: none !important; }

  /* ===== TOPBAR ===== */
  .topbar{
    left:0;
    width:100%;
    z-index:1101;
    padding-left:72px;
  }

  /* ===== MENU BUTTON ===== */
  .mobileMenuBtn{
    position:fixed;
    top:12px;
    left:12px;
    width:42px;
    height:42px;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(10,18,40,0.95);
    box-shadow:0 4px 16px rgba(0,0,0,0.25);
  }

  .mobileMenuBtn img{
    width:26px;
  }

  /* ===== SIDEBAR ===== */
  .sidebar{
    position:fixed;
    top:0;
    left:-260px;
    width:260px;
    height:100vh;
    height:100dvh;
    display:flex;
    flex-direction:column;
    padding:14px 12px;
    transition:left .25s ease;
    z-index:2000;
    overflow:hidden;
  }

  .sidebarBrand{
    padding: 8px 14px 6px;
    margin-bottom: 8px;
    gap: 3px;
  }

  .sidebarBrand img{
    max-height: 44px;
  }

  .sidebarBrandText{
    font-size: 10px;
  }

  .sidebar .btn{
    padding: 8px 14px;
  }

  .sidebar .btn svg{
    width: 18px;
    height: 18px;
  }

  .sidebarLogo{
    padding: 8px 14px 12px;
    gap: 3px;
  }

  .sidebarLogo img{
    max-height: 36px;
  }

  .sidebarLogoText{
    display: none;
  }

  .sidebar.open{
    left:0;
  }

  .mainArea{
    width:100%;
    margin-left:0;
  }

  #sidebarOverlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.5);
    opacity:0;
    pointer-events:none;
    transition:.25s;
    z-index:1500;
  }

  #sidebarOverlay.active{
    opacity:1;
    pointer-events:auto;
    backdrop-filter:blur(4px);
  }
}

@media(max-width:768px){


  /* =========================================
     🔥 COMPACT CARD (WICHTIGSTER TEIL)
     ========================================= */

  .lagerCard{
    display:grid;
    grid-template-columns: 1fr auto;
    gap:6px;
    padding:10px;
    border-radius:12px;
    margin-bottom:8px;
  }

  /* Titel */
  .lagerTitle{
    font-size:15px;
    grid-column:1;
  }

  /* Kategorie */
  .lagerCategoryBadge{
    font-size:10px;
    padding:2px 6px;
    grid-column:1;
  }

  /* Aktionen rechts */
  .lagerActions{
    grid-column:2;
    display:flex;
    gap:4px;
  }

  .lagerActions .iconBtn{
    width:28px;
    height:28px;
  }

  .lagerActions .iconBtn svg{
    width:13px;
    height:13px;
  }

  /* Bestand + Marge in einer Zeile */
  .lagerInfoRow{
    grid-column:1 / span 2;
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-top:4px;
  }

  .lagerMargin{
    font-size:11px;
    padding:3px 6px;
  }

  /* =========================================
     🔥 BAR BUCHEN INLINE
     ========================================= */

  .barBookingBox{
    display:flex !important;
    align-items:center;
    gap:6px;
    margin-top:6px;
  }

  .barBookingBox .erpSelect,
  .barBookingBox .erpInput{
    font-size:12px;
    padding:6px;
  }

  .barBookingBox .btn{
    font-size:12px;
    padding:6px 8px;
    white-space:nowrap;
  }

  /* =========================================
     🔥 FORM / EDIT
     ========================================= */

  .editGrid{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .editGrid .btn{
    grid-column:span 2;
  }

  /* =========================================
     🔥 FILTER / SEARCH
     ========================================= */

  .filterRow{
    gap:6px;
  }

  .filterRow input,
  .filterRow select{
    font-size:12px;
    padding:8px;
  }

}


#sidebarOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);
  opacity:0;
  pointer-events:none;
  transition:.3s ease;
  z-index:1090;
}

.sidebar.open ~ #sidebarOverlay{
  opacity:1;
  pointer-events:auto;
}

@media(max-width:768px){
  .barDetailHeader {
    flex-direction: column;
    align-items: stretch;
  }

  .barDetailTopActions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .barDetailTopActions .btn {
    width: 100%;
    flex-direction: column;
    height: auto;
    padding: 6px 4px;
    font-size: 10px;
    gap: 3px;
    text-align: center;
    justify-content: center;
    min-height: 0;
  }

  .barDetailTopActions .btn i,
  .barDetailTopActions .btn svg {
    width: 15px;
    height: 15px;
  }

  .barArtikelRow {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .barArtikelRow > div:last-child {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* Mobile */




/* Kompakte Sidebar für kleinere Bildschirmhöhen (Laptop) */
@media (max-height: 820px) {
  .sidebarBrand{
    padding: 10px 14px 8px;
    margin-bottom: 10px;
    gap: 4px;
  }

  .sidebarBrand img{
    max-height: 50px;
  }

  .sidebarBrandText{
    font-size: 10px;
  }

  .sidebar .btn{
    padding: 8px 18px;
  }

  .sidebar .btn svg{
    width: 18px;
    height: 18px;
  }

  .sidebarLogo{
    padding: 10px 14px 14px;
    gap: 4px;
  }

  .sidebarLogo img{
    max-height: 40px;
  }

  .sidebarLogoText{
    font-size: 10px;
  }
}

                      /* ===============================
                        🐎 Mustang Evo – Bars Cards
                      ================================ */

                      .barsGrid{
                        display:grid;
                        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
                        gap:20px;
                      }

                      .barCard{
                        background:#111827;
                        border:1px solid rgba(255,255,255,0.06);
                        border-radius:16px;
                        padding:20px;
                        cursor:pointer;
                        transition:.2s ease;
                        display:flex;
                        flex-direction:column;
                        gap:16px;
                      }

                      .barCard:hover{
                        transform:translateY(-3px);
                        border-color:#6366f1;
                      }

                      .barCardHeader{
                        display:flex;
                        justify-content:space-between;
                        align-items:center;
                      }

                      .barCardBody{
                        display:flex;
                        flex-direction:column;
                        gap:6px;
                        opacity:.8;
                      }

                      .barStatus{
                        padding:4px 10px;
                        border-radius:20px;
                        font-size:12px;
                        font-weight:600;
                      }

                      .barStatus.active{
                        background:#22c55e20;
                        color:#22c55e;
                      }

                      .barStatus.inactive{
                        background:#ef444420;
                        color:#ef4444;
                      }


                    .barArtikelRow{
  padding:14px;
  border:1px solid rgba(255,255,255,0.05);
  border-radius:12px;
  margin-bottom:12px;
  background:#0f172a;
}

                      .lagerCard{
                        width: 100%;
                        box-sizing:border-box;
                        background:#1c2430;
                        border-radius:10px;
                        padding:10px 14px;
                        margin-bottom:6px;
                        box-shadow:0 2px 8px rgba(0,0,0,.2);
                        display:flex;
                        flex-direction: column;
                        transition:.2s ease;

                      }

                      .lagerCard:hover{
                        transform:translateY(-2px);
                      }

                      .cardCritical{
                        border-left:4px solid #ff4444;
                      }



                      .lagerTitle{
                        font-size:1rem;
                        font-weight:600;
                        white-space: normal;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        min-width: 0;
                        }

                      .lagerCategoryBadge{
                        font-size:.7rem;
                        background:#1b0f4ee7;
                        padding:2px 7px;
                        border-radius:20px;
                        opacity:.8;
                      }




                      .iconBtn{
                        background:#2a3444;
                        border:none;
                        padding:4px 6px;
                        border-radius:7px;
                        cursor:pointer;
                        transition:.2s;
                      }

                      .iconBtn:hover{
                        background:#3a465a;
                      }

                      .iconBtn.danger{
                        background:#402a2a;
                      }

                      .lagerInfoRow{
                        display:flex;
                        justify-content:space-between;
                        align-items:center;
                        width:100%;
                        margin-top:6px;
                        flex-wrap:wrap;
                        gap:6px;
                      }

                      .lagerStock{
                        font-size:.85rem;
                      }

                      .stockCritical{
                        color:#ff5a5a;
                      }

                      .minValue{
                        font-size:.75rem;
                        opacity:.6;
                        margin-left:6px;
                      }

                      .lagerMargin{
                        padding:6px 10px;
                        border-radius:10px;
                        font-size:.85rem;
                        font-weight:600;
                      }

                      .marginHigh{
                        background:#153d2b;
                        color:#4cff9a;
                      }

                      .marginMedium{
                        background:#3d3615;
                        color:#ffd84c;
                      }

                      .marginLow{
                        background:#3d1515;
                        color:#ff6b6b;
                      }

                      .lagerAccordion{
                        margin-top:14px;
                        width: 100%;
                        display: none;
                      }

                .lagerAccordion.open{
                      display: block;
                      }


              .iconBtn {
                position: static !important;
                width: auto !important;
                flex: 0 0 auto !important;
              }



        /* =====================================
            ACTION BUTTONS (FIXED!)
        ===================================== */
        /* ===========================
          FINAL LAGER HEADER FIX
        =========================== */


        .lagerActions {
          display: flex !important;
          gap: 8px !important;
          }
          

        .lagerTop {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap:12px;
          width: 100% !important;
          min-width: 0;
        }

        .lagerTitleBlock {
          flex: 1 1 auto !important;
          min-width: 0 !important;
        }

        #lagerContainer > div{
          width:100%;
          box-sizing:border-box;
          display:block;
        }

        .lagerCategory{
          margin: 16px 0 8px 0;
          padding: 4px 16px;
          box-sizing: border-box;
          font-size: 15px;
          font-weight: 600;
          color: var(--category-color);
          border-left: 3px solid var(--category-color);
        }

        #lagerContainer{
          padding: 0 16px;
          box-sizing: border-box;
        } 


        #lagerContainer > form{
          max-width:100%;
          box-sizing: border-box;
        } 

         #lagerContainer > form button{ 
          width:100%;
          box-sizing: border-box;
        } 

        .editActions{
         margin-top:14px;
         display:flex;
         gap:10px;
         }

        .editActions .btn{
         display:flex;
        align-items:center;
        gap:6px;
        }

        .backup-actions{
         display:flex;
         gap:10px;
         margin-top: 20px;
}

#barSort {
  color: #e9e9e9;
  background: #0f172a;
}

#barSort option {
  color: #e6e6e6;
  background: #0f172a;
}

.barKategorie{
  font-size:12px;
  color: #940a0a;
  opacity:0.6;
}


.btn-disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.history-transfer { color: #ef4444; } /* rot */
.history-return { color: #22c55e; } /* grün */
.history-clear { color: #f97316; } /* orange */
.history-close { color: #f59e0b; } /* gelb */
.history-success { color: #22c55e; }
.history-error { color: #ef4444; }
.history-edit { color: #0ea5e9; } /* blau */
.history-create { color: #64748b; }
.history-delete { color: #ef4444; }
.history-correction { color: #a855f7; } /* lila */
.history-inbound { color: #eab308; }
.history-closing { color: #3b82f6; }
.history-default { color: #64748b; }


.user-row {
  padding: 10px 8px;
  border-bottom: 1px solid #334155;
}

.user-row-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-row-top span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.user-row-top .formInput {
  width: 140px;
  flex-shrink: 0;
}

.user-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

@media (min-width: 481px) {
  .user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
  }
  .user-row-top {
    flex: 1;
  }
  .user-row-actions {
    margin-top: 0;
    flex-shrink: 0;
  }
}

@media (max-width: 480px) {
  .user-row {
    border: 1px solid #1e3a5f;
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 12px 12px;
  }
  .user-row-top .formInput {
    width: 120px;
  }
  .user-row-actions {
    justify-content: space-between;
  }
  .user-row-actions .btn {
    font-size: 13px;
    padding: 6px 14px;
  }
}

.page {
  display: none;
}

.page.active {
  display: block;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #020617;
  z-index: 9999;
}

.modal-content {
  background: #0f172a;

  /* 🔥 Wichtigster Fix */
  padding: 55px 30px 35px;

  border-radius: 16px;
  width: 320px;

  box-shadow: 0 20px 60px rgba(0,0,0,0.6);

  text-align: center;


}

.modal-content h3 {
  color: white;
  margin-top: 20px;
  margin-bottom: 5px;
}

.modal-content input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: none;
  margin-bottom: 20px;
  background: #020617;
  color: white;
}

.modal-content button {
  width: 100%;
  padding: 10px;
  border-radius: 8px;

  border: none;
  background: #1a4cff;
  color: white;
  font-weight: 600;
}

.authBtn{
  box-shadow: 0 4px 12px rgba(26,76,255,0.2);
  transition: all 0.2s ease;
}

.authBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(26,76,255,0.3);
}


.shift-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shift-modal-box {
  background: #0f172a;
  padding: 24px;
  border-radius: 12px;
  width: min(600px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
}

.shift-category-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--category-color, #6484ec);
  border-left: 3px solid var(--category-color, #6484ec);
  padding: 4px 0 4px 8px;
  margin: 14px 0 6px;
}

.shift-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
}

.shift-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1e293b;
  border-radius: 8px;
  padding: 6px 10px;
}

.shift-label {
  flex: 1;
  font-size: 13px;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shift-input {
  width: 64px;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid #334155;
  background: #020617;
  color: #fff;
  text-align: right;
  flex-shrink: 0;
}

.shift-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
}

.btn-shift-save {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  background: #22c55e;
  color: white;
  cursor: pointer;
}

.btn-shift-cancel {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  background: transparent;
  color: #cbd5f5;
  cursor: pointer;
}

.formInput {
  padding: 10px 12px;
  border-radius: 10px;
  background: #020617;
  color: #fff;
  border: 1px solid #334155;
  outline: none;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  font-size: 14px;
}

.backup-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #1e293b;
}

.backup-info {
  font-size: 14px;
  color: #e2e8f0;
}

.backup-actions-inline {
  display: flex;
  gap: 8px;
}

.backup-actions-inline .btn {
  padding: 6px 10px;
}

/* =====================================
   KONTO
===================================== */
.konto-block {
  margin-bottom: 20px;
  font-size: 14px;
}

/* =====================================
   KONTO CARDS
===================================== */
.kontoCard {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
}

.kontoCardHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
}

.kontoCardHeader:hover {
  background: rgba(255,255,255,0.04);
}

.kontoCardTitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}

.kontoCardTitle svg {
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.kontoCardArrow {
  font-size: 11px;
  opacity: 0.5;
}

.kontoCardBody {
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.kontoSubHeader {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.7;
  margin-bottom: 8px;
}


#loadingText {
  margin-top: 20px;
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-align: center;
}

.progressBar {
  width: 160px;
  height: 3px;
  background: rgba(255,255,255,0.07);
  border-radius: 10px;
  margin: 14px auto 0;
  overflow: hidden;
}

#progressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6366f1, #818cf8);
  border-radius: 10px;
  transition: width 0.3s ease;
  animation: splashProgress 1.8s ease forwards;
}

@keyframes splashProgress {
  0%   { width: 0%; }
  60%  { width: 80%; }
  100% { width: 100%; }
}

.success-flash {
  animation: successFlash 0.6s ease;
}

@keyframes successFlash {
  0% { background: rgba(34,197,94,0.2); }
  100% { background: transparent; }
}

.success-flash {
  animation: cardFlash 0.8s ease;
}

@keyframes cardFlash {
  0% { box-shadow: 0 0 0 rgba(34,197,94,0); }
  50% { box-shadow: 0 0 20px rgba(34,197,94,0.8); }
  100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
}

.btn i {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: middle;
}

@media(max-width:480px), (max-width:768px) and (pointer:coarse){
  .hideOnMobile{ display:none !important; }
  .ordersHideOnMobile{ display:none !important; }
  .iconBtn{
    width:44px !important;
    height:44px !important;
    font-size:20px !important;
  }
  .iconBtn i, .iconBtn svg{
    width:22px !important;
    height:22px !important;
  }
}

/* ===== ORDERS / EINKAUF ===== */

.ordersBadge{
  display:inline-block;
  background:#1e3a5f;
  color:#60a5fa;
  font-size:13px;
  font-weight:600;
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:16px;
}

.ordersCatHeader{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--category-color,#6484ec);
  border-left:3px solid var(--category-color,#6484ec);
  padding:4px 0 4px 8px;
  margin:18px 0 6px;
  display:flex;
  align-items:center;
  gap:8px;
}

.ordersCatCount{
  background:var(--category-color,#6484ec);
  color:#fff;
  font-size:11px;
  padding:1px 7px;
  border-radius:20px;
}

.ordersTable{
  width:100%;
  border-collapse:collapse;
  border-radius:10px;
  overflow:hidden;
}

.ordersTable thead tr{
  background:#0d1f35;
}

.ordersTable thead th{
  padding:8px 12px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  opacity:.6;
  text-align:left;
}

.ordersTable tbody tr{
  background:#111c2e;
  border-top:1px solid rgba(255,255,255,0.04);
  transition:background .15s;
}

.ordersTable tbody tr:hover{
  background:#162540;
}

.ordersCatRow td{
  background:#0d1f35 !important;
  color:var(--category-color,#6484ec);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  padding:6px 12px !important;
  border-left:3px solid var(--category-color,#6484ec);
}

.ordersCatRow:hover td{
  background:#0d1f35 !important;
}

.ordersTable td{
  padding:8px 12px;
  vertical-align:middle;
}

.ordersArtikelName{
  font-weight:600;
  font-size:14px;
}

.ordersNum{
  font-size:14px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}

.numCritical{
  color:#ef4444;
  font-weight:700;
}

.ordersVorschlag{
  color:#f59e0b;
  font-weight:600;
  text-align:center;
}

.ordersInput{
  width:80px;
  padding:5px 8px;
  border-radius:6px;
  border:1px solid #334155;
  background:#020617;
  color:#fff;
  font-size:14px;
  text-align:right;
}

.ordersBtn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 12px;
  background:#22c55e;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s;
}

.ordersBtn:hover{ background:#16a34a; }
.ordersBtn:disabled{ background:#334155; cursor:not-allowed; }

@media(max-width:768px){
  .ordersTable thead{ display:none; }
  .ordersTable, .ordersTable tbody,
  .ordersTable tr, .ordersTable td{ display:block; width:100%; }
  .ordersTable tr{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
    gap:6px;
    padding:10px;
    margin-bottom:4px;
  }
  .ordersArtikelName{ grid-column:1; grid-row:1; }
  .ordersNum:nth-child(2),
  .ordersNum:nth-child(3){ display:none; }
  .ordersVorschlag{ grid-column:2; grid-row:1; }
  .ordersInput{ width:100%; }
  td:nth-child(5){ grid-column:1; grid-row:2; }
  td:nth-child(6){ grid-column:2; grid-row:2; }
}

.searchBox.hidden{
  display:none;
}

.searchBox{
  position: relative;
  display: flex;
  align-items: center;
}

#lagerSearchClear{
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

#lagerSearchClear:hover{
  color: white;
}

.barCategoryHeader{
  margin-top: 15px;
  margin-bottom: 4px;
  padding: 4px 0 4px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--category-color);
  border-left: 3px solid var(--category-color);
  display: flex;
  align-items: center;
  gap: 6px;
}