:root{
  --bg:#ffffff;
  --surface:#f7f8fa;
  --border:#e5e7eb;
  --blue:#2563eb;
  --green:#22c55e;
  --red:#ef4444;
  --shadow:0 1px 3px rgba(0,0,0,0.08);
  --radius:6px;
  --text:#111827;
  --muted:#6b7280;

  /* HEADER THEME */
  --header-bg:#0b2a6f;       /* dark blue */
  --header-text:#e5e7eb;     /* light gray */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(circle at top left, var(--app-bg-glow-1), transparent 28%),
    radial-gradient(circle at bottom right, var(--app-bg-glow-2), transparent 26%),
    linear-gradient(135deg, var(--app-bg-1) 0%, var(--app-bg-2) 45%, var(--app-bg-3) 100%);
  color:var(--text);
  background-attachment:fixed;
}

a{color:inherit;text-decoration:none}
h1{font-size:20px;margin:0 0 4px}
.small{font-size:12px}
.muted{color:var(--muted)}
.big{font-size:18px;font-weight:700}
.kpi{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

.app{min-height:100vh}
.app.sidebar-open{padding-left:260px}
.app.sidebar-open .main{
  flex:1;
  min-width:0;
  background:transparent;
}

.main{
  min-width:0;
  width:100%;
  background:transparent;
}

.sidebar{
  position:fixed;
  left:0; top:0; bottom:0;
  z-index:1300;
  width:300px;
  background:#ffffff;
  border-right:1px solid var(--border);
  padding:14px 12px;
  overflow:auto;
  overflow-x:hidden;
  pointer-events:auto;
  transform:translateX(-110%);
  transition:transform .22s ease;
}

.kk-dd-item.active{
  background: rgba(37,99,235,.12);
}
.app.sidebar-open .sidebar{ transform:translateX(0); }
.sidebar.hidden{ transform:translateX(-110%); }
.sidebar.hidden{display:none}
.sidebar.collapsed{width:72px}
.sidebar .brand{display:flex;gap:10px;align-items:center;padding:10px;border-radius:var(--radius)}
.brand-mark{
  width:40px;height:40px;border-radius:10px;
  background:var(--blue);color:white;display:flex;align-items:center;justify-content:center;font-weight:800;
}
.brand-title{font-weight:800}
.brand-sub{font-size:12px;color:var(--muted)}
.nav{margin-top:10px;display:flex;flex-direction:column;gap:4px}

.nav-group-toggle{
  width:100%;
  background:transparent;
  border:0;
  color:var(--muted);
  padding:10px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  font-weight:700;
  text-transform:none;
}
.nav-group-toggle .chev{margin-left:auto; opacity:.7}
.nav-group-toggle.open{color:var(--text)}
.nav-group{display:none; padding-left:6px}
.nav-group.open{display:block}
.nav-item{
  display:flex;gap:10px;align-items:center;
  padding:10px;border-radius:10px;
  border:1px solid transparent;
}
.nav-item:hover{background:#fff;border-color:var(--border)}
.nav-item.active{background:#fff;border-color:rgba(37,99,235,.25)}
.nav-ico{width:26px;text-align:center}
.nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .brand-text{display:none}
.nav-section{margin:10px 10px 4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

.sidebar-footer{margin-top:12px;padding:10px}

.main{min-width:0;width:100%;}
.topbar{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.18);
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(7,17,31,.62);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.topbar-center{display:flex;justify-content:center;align-items:center;min-width:0}
.topbar-center .segmented{max-width:100%; overflow:auto}
.topbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.userchip{padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:12px}

.container{padding:10px 12px;max-width:1600px;margin:0 auto}
.container.wide{padding:8px;max-width:none}

.card{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.55);
  border-radius:var(--radius);
  box-shadow:
    0 12px 30px rgba(15,23,42,.10),
    0 4px 14px rgba(15,23,42,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:12px;
}
.card.tight{padding:8px}
.card + .card{margin-top:12px}
.card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}

.grid2{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px;margin-top:12px}
.header-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:12px}
.bestellung-kpis{grid-template-columns:repeat(6, minmax(0,1fr));   align-items:center;
  justify-content:center;}
.mini.card{padding:10px;align-items:center;}
.row{display:flex;align-items:center}
.wrap{flex-wrap:wrap}
.gap{gap:10px}

/* ===========================
   BUTTONS
   =========================== */

/* Default button = green (your latest request) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:140px;
  height:46px;
  padding:0 16px;
  border-radius:14px;
  border:1px solid #16a34a;
  background:linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
  color:#ffffff;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .08s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.btn:hover{
  background:linear-gradient(180deg, #2dd46a 0%, #16a34a 100%);
  border-color:#16a34a;
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

.btn.tiny{
  min-width:auto;
  height:34px;
  padding:0 10px;
  font-size:12px;
  border-radius:10px;
}

.btn.full{
  width:100%;
}

/* dark blue version */
.btn.primary{
  border:1px solid #1d4ed8;
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color:#ffffff;
  box-shadow:0 10px 22px rgba(37,99,235,.22);
}

.btn.primary:hover{
  background:linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  border-color:#1d4ed8;
  box-shadow:0 14px 28px rgba(37,99,235,.26);
}

.btn.primary:active{
  box-shadow:0 6px 14px rgba(37,99,235,.18);
}

.btn.danger{
  border:1px solid #fda4af;
  background:#fd1f1f;
  color:#ffffff;
  box-shadow:0 10px 22px rgba(244,63,94,.10);
}

.btn.danger:hover{
  background:#fda4af;
  border-color:#fd1f1f;
  box-shadow:0 14px 28px rgba(244,63,94,.14);
}

.btn.danger:active{
  box-shadow:0 6px 14px rgba(244,63,94,.10);
}


/* Icon button */
.btn.icon{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:10px}
.btn.icon.edit{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25);color:#7f1d1d}
.btn.icon.edit:hover{border-color:rgba(239,68,68,.45)}

.iconbtn{
  border:1px solid var(--border);
  background:#fff;
  width:36px;height:36px;border-radius:10px;
  cursor:pointer;
}
.iconbtn:hover{border-color:#cbd5e1}

/* Pills */
.pill{
  border:1px solid var(--border);
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
}
.pill.active{border-color:rgba(37,99,235,.35);background:rgba(37,99,235,.08)}
.pill.small{padding:4px 8px;font-size:11px}
.pill.ok{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.25)}
.pill.warn{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25)}

/* ===========================
   INPUTS
   =========================== */
/* ===========================
   INPUTS / DATE / SELECT / SEARCH
   Fancy topbar controls
   =========================== */

.input{
  height:44px;
  border:1px solid #dbe3ee;
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding:0 14px;
  border-radius:14px;
  outline:none;
  font-size:14px;
  font-weight:700;
  color:#0f172a;
  box-shadow:
    0 4px 14px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .08s ease,
    background .18s ease;
}

.input:hover{
  border-color:#cbd5e1;
  background:linear-gradient(180deg, #ffffff 0%, #fdfefe 100%);
}

.input:focus{
  border-color:#2563eb;
  box-shadow:
    0 0 0 4px rgba(37,99,235,.12),
    0 8px 20px rgba(37,99,235,.08);
  background:#ffffff;
}

.input.small{
  height:34px;
  padding:0 10px;
  font-size:12px;
  border-radius:10px;
}

.input.bad{
  border-color:rgba(239,68,68,.55);
  box-shadow:
    0 0 0 4px rgba(239,68,68,.10),
    0 6px 16px rgba(239,68,68,.08);
}

/* Fancy select */
select.input{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding-right:42px;
  border-radius:14px;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%2364758b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat, no-repeat;
  background-position:0 0, right 14px center;
  background-size:auto, 14px 14px;
}

/* Fancy date input */
input[type="date"].input{
  min-width:160px;
  position:relative;
  cursor:pointer;
}

input[type="date"].input::-webkit-calendar-picker-indicator{
  opacity:.75;
  cursor:pointer;
  filter:contrast(1.05);
}

input[type="date"].input:hover::-webkit-calendar-picker-indicator{
  opacity:1;
}

/* Search box */
.searchbox{
  position:relative;
  display:flex;
  align-items:center;
  min-width:240px;
}

.searchbox .input{
  width:100%;
  padding-right:38px;
}

/* Clear button */
.clearbtn{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  border-radius:999px;
  border:1px solid #dbe3ee;
  background:linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:15px;
  color:#64748b;
  line-height:1;
  padding:0;
  z-index:5;
  box-shadow:0 4px 10px rgba(15,23,42,.06);
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .08s ease,
    box-shadow .18s ease;
}

.clearbtn:hover{
  background:linear-gradient(180deg, #ffffff 0%, #eaf2ff 100%);
  color:#0f172a;
  border-color:#bfdbfe;
  transform:translateY(-50%) scale(1.04);
  box-shadow:0 8px 18px rgba(37,99,235,.10);
}

.searchbox .clearbtn.show{
  display:flex;
  align-items:center;
  justify-content:center;
}

.field label{display:block;font-size:12px;color:var(--muted);margin:0 0 6px}
.field{margin:0}

.error{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);padding:10px;border-radius:10px;color:#7f1d1d}
.success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.25);padding:10px;border-radius:10px;color:#14532d}

/* ===========================
   TABLES
   =========================== */
.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  max-height:calc(100vh - 230px);
  width:100%;
  -webkit-overflow-scrolling:touch;
}
.table{
  width:max-content;
  min-width:unset;
  border-collapse:separate;
  border-spacing:0;
  table-layout:auto;
  font-size:20px;
  font-weight:700;
}

.table th,
.table td{
  border-bottom:1px solid #dfe5ec;
  border-right:1px solid #e8edf3;
  padding:6px 8px;
  vertical-align:middle;
  background:#ffffff;
  min-width:1px !important;
  width:1% !important;
  white-space:nowrap;
  text-align:center;
  font-size:20px;
  font-weight:700;
}


.table th:first-child,
.table td:first-child{
  border-left:1px solid #e8edf3;
}

/* ✅ ONLY FIRST HEADER ROW STICKY */
.table thead tr:first-child th{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--header-bg) !important;
  color:var(--header-text) !important;
  font-weight:800;
  font-size:20px;
  box-shadow:0 2px 0 rgba(0,0,0,.04);
}

.table thead tr.sumrow th{
  position:static !important;
  top:auto !important;
  z-index:auto !important;
  background:#3e434c !important;
  color:#ffffff !important;
  border-bottom:1px solid #2f343c !important;
  border-right:1px solid #2f343c !important;
  font-size:22px;
  font-weight:800;
}

.sumrow th{
  background:#3e434c !important;
  color:#ffffff !important;
  border-bottom:1px solid #2f343c !important;
  border-right:1px solid #2f343c !important;
  font-size:20px;
}

.sumrow th:first-child{
  border-left:1px solid #2f343c !important;
  font-size:20px;
}

.sumcell{
  font-weight:800;
  color:#ffffff !important;
  background:#3e434c !important;
  border-bottom:1px solid #2f343c !important;
  border-right:1px solid #2f343c !important;
  font-size:20px;
}

/* ===== SUMROW (Total row) white borders ===== */
#ordersTable thead tr.sumrow th{
  border-right:1px solid #fff !important;
  border-bottom:1px solid #fff !important;
      font-size: 20px;
}

/* left edge so the first cell is also separated */
#ordersTable thead tr.sumrow th:first-child{
  border-left:1px solid #fff !important;
      font-size: 20px;
}

/* IMPORTANT: frozen columns in sumrow must stay gray (your .left0... makes them white) */
#ordersTable thead tr.sumrow th.left0,
#ordersTable thead tr.sumrow th.left1,
#ordersTable thead tr.sumrow th.left2,
#ordersTable thead tr.sumrow th.left3,
#ordersTable thead tr.sumrow th.left4{
  background:#3e434c !important;
  color:#ffffff !important;
  font-size:20px;
}

/* Row visuals */
.table td select, .table td input{margin-left:auto;margin-right:auto;    font-size: 20px;}
.table tbody tr td{
  background:#ffffff !important;
}
.table td.ro{background:var(--surface);color:#111827;font-weight:800;    font-size: 24px;}
.table td.editable{cursor:text}
.table td.editable.saving{opacity:.6}
.table td.editable.saved{box-shadow:inset 0 0 0 2px rgba(34,197,94,.35)}
.table td.editable.err{box-shadow:inset 0 0 0 2px rgba(239,68,68,.35)}



/* Frozen header cells keep same header colors */
.table thead tr:first-child th.left0,
.table thead tr:first-child th.left1,
.table thead tr:first-child th.left2,
.table thead tr:first-child th.left3,
.table thead tr:first-child th.left4{
  background:var(--header-bg) !important;
  color:var(--header-text) !important;
  z-index:7;
      font-size: 20px;
}

/* Visual separation for frozen block */
.left4{box-shadow:2px 0 0 var(--border)}

/* Group borders */
.group-col{
  border-left:2px solid #c7cdd8 !important;
  border-right:2px solid #c7cdd8 !important;
}

/* Tahmin highlighted columns */
.thick-col{
  border-left:3px solid #111827 !important;
  border-right:3px solid #111827 !important;
}

.cell-red{background:rgba(239,68,68,.12) !important}
.cell-green{background:rgba(34,197,94,.10) !important}
.cell-blue{background:rgba(37,99,235,.10) !important}

/* Price cell */
.pricecell{display:flex;align-items:center;gap:8px}
.pricecell.hl{
  background: rgba(255, 120, 0, .18);
  border-radius: 10px;
  padding: 6px;
}

.chk{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);user-select:none}
.chk input{width:14px;height:14px}

.row-actions{min-width:90px}

/* ======================================
   ROW HIGHLIGHT (Bestellung & other tables)
   ====================================== */
#ordersTable tbody tr.k-selected > td {
  background: rgba(37, 99, 235, .14) !important;
  border-right: 1px solid #ffffff !important;
  border-bottom: 1px solid #ffffff !important;
        font-size: 24px;
        
  font-weight: 800 !important;
}

/* keep thick black borders even when row is selected or hovered */
#ordersTable tbody tr.k-selected > td.thick-end,
#ordersTable tbody tr.k-hover > td.thick-end {
  border-right: 4px solid #000 !important;
}

#ordersTable tbody tr.k-selected > td.thick-start,
#ordersTable tbody tr.k-hover > td.thick-start {
  border-left: 4px solid #000 !important;
}
/* Modals */
.modal{
  position:fixed;inset:0;display:none;
  background:rgba(17,24,39,.35);
  z-index:50;
  padding:16px;
}
.modal.open{display:flex;align-items:center;justify-content:center}
.modal-card{width:min(900px, 100%);max-height:90vh;overflow:auto}
.modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.modal-title{font-size:16px;font-weight:900}
.modal-scroll{padding-bottom:14px}
.suggest{position:relative}
.suggest .item{
  border:1px solid var(--border);background:#fff;border-radius:10px;
  padding:8px 10px;margin-top:6px;cursor:pointer;
}
.suggest .item:hover{border-color:#cbd5e1}

/* Footer */
.footer-note{padding:14px;color:var(--muted);font-size:12px}

/* Login */
.login-body{
  background:linear-gradient(180deg, #fff, #f7f8fa);
  display:flex;align-items:center;justify-content:center;
  padding:16px;
}
.login-card{width:min(440px, 100%)}
.login-brand{font-size:20px;font-weight:900}
.login-sub{color:var(--muted);margin:2px 0 12px}

/* Print */
@media print{
  body{background:#fff}
  .sidebar,.topbar,.footer-note{display:none !important}
  .container{padding:0}
  .card{box-shadow:none;border:none;background:#fff;padding:0}
  .table-wrap{border:none}
  .print-header{margin-bottom:8px}
}

/* Responsive */
@media (max-width: 1100px){
  .header-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 820px){
  .grid2{grid-template-columns:1fr}
  .header-grid{grid-template-columns:1fr}
  .left1,.left2,.left3,.left4{position:static}
  .left0{position:static}
}

/* Sidebar responsiveness */
.sidebar.hidden{transform:translateX(-110%);}
.sidebar{transform:translateX(0); transition:transform .18s ease, width .18s ease;}
.app{position:relative}
.overlay{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.22);
  z-index:1200;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
@media (max-width: 980px){
  .sidebar{position:fixed; left:0; top:0; bottom:0; z-index:1200; background:#ffffff;}
  .main{margin-left:0;}
  .app.sidebar-open{padding-left:0;}
}

/* Search UI */
.searchwrap{
  position:relative;
}

.searchwrap input{
  padding-right:34px;
}

.tb-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.topbar form.tb-actions,
.topbar .tb-actions{
  margin:0;
}

/* Fancy custom dropdown / autocomplete panels */
.suggestions,
.zr-suggest,
.kk-dd-panel,
.suggest{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border:1px solid #dbe3ee;
  border-radius:18px !important;
  box-shadow:
    0 18px 40px rgba(15,23,42,.12),
    0 4px 14px rgba(15,23,42,.05);
  overflow:hidden;
}

.suggestion-item,
.zr-suggest .zr-item,
.kk-dd-item,
.suggest .item{
  padding:12px 14px;
  border-bottom:1px solid #eef2f7;
  transition:background .16s ease, transform .08s ease;
}

.suggestion-item:last-child,
.zr-suggest .zr-item:last-child,
.kk-dd-item:last-child,
.suggest .item:last-child{
  border-bottom:none;
}

.suggestion-item:hover,
.zr-suggest .zr-item:hover,
.kk-dd-item:hover,
.suggest .item:hover{
  background:rgba(37,99,235,.07);
}

.suggestion-main,
.zr-suggest .zr-title,
.suggest .item{
  font-weight:800;
  color:#0f172a;
}

.suggestion-sub,
.zr-suggest .zr-sub,
.kk-dd-item .city{
  font-size:12px;
  color:#64748b;
}
/* Misc */
tr.row-missing td{background:rgba(239,68,68,.08) !important}

.lang-footer{display:flex; gap:8px; align-items:center}
.langbtn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border);
  background:#fff; padding:6px 10px; border-radius:999px;
  cursor:pointer; font-weight:700;
}
.langbtn.active{border-color:var(--blue); color:var(--blue)}
.logoutbtn{margin-left:auto}

.logoutbtn{
  background:rgba(239,68,68,.10) !important;
  border-color:rgba(239,68,68,.25) !important;
  color:#991b1b !important;
  display:flex;align-items:center;gap:8px;justify-content:center
}
.logoutbtn:hover{filter:brightness(.98)}

.brand-role{font-size:12px;color:#6b7280;margin-top:2px}
.logout-ico{width:18px;height:18px;display:inline-block}
.langbtn .flag{font-size:16px;line-height:1}
.langbtn .lbl{font-weight:600}

/* Topbar blocks (some pages use these) */
.topbar{position:sticky; top:0; z-index:1100; background:var(--bg); border-bottom:1px solid var(--border); padding:10px 14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; isolation:isolate; pointer-events:auto}
.topbar-left{display:flex; align-items:center; gap:10px}
.topbar-title{font-weight:800}
.tb-actions{display:flex; align-items:center; gap:10px}
.topbar-left{position:relative;z-index:12}
.topbar-center{min-width:0;overflow:hidden;position:relative;z-index:1}
.topbar-right{position:relative;z-index:2}
#sidebarToggle{position:relative;z-index:13}


/* Topbar city / bestellung tabs - modern */
.segmented{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:22px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:
    0 12px 30px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
  overflow-x:auto;
  overflow-y:hidden;
  max-width:100%;
  scrollbar-width:none;
}

.segmented::-webkit-scrollbar{
  display:none;
}

.segbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  color:#334155;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .08s ease;
}

.segbtn:hover{
  background:rgba(37,99,235,.08);
  color:#0f172a;
  border-color:rgba(37,99,235,.12);
  transform:translateY(-1px);
}

.segbtn:active{
  transform:translateY(0);
}

.segbtn.active{
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color:#ffffff;
  border-color:#1d4ed8;
  box-shadow:
    0 10px 22px rgba(37,99,235,.22),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.segbtn.active:hover{
  background:linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%);
  color:#ffffff;
  border-color:#1d4ed8;
}
.datepill{display:inline-flex; align-items:center; padding:8px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-weight:800; font-size:13px; white-space:nowrap}
@media (max-width: 980px){
  .tb-actions{flex-wrap:wrap}
  .segmented{width:100%; overflow:auto}
}

/* Pencil */
.iconpencil{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border:1px solid #ffd6d6;
  background:#fff5f5;
  border-radius:8px;
  cursor:pointer;
}
.pencil-ico{width:18px;height:18px; fill:#FA5252}
.col-edit{width:44px}
.topbar{isolation:isolate}
.topbar-left{position:relative;z-index:1002;pointer-events:auto}
.topbar-center{position:relative;z-index:1}
.topbar-right{position:relative;z-index:2}
.topbar-center{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}

.topbar-center .segmented{
  max-width:min(100%, 980px);
}
#sidebarToggle{position:relative;z-index:1003;pointer-events:auto}
.segmented{position:relative;z-index:1}


.datepill{gap:8px}
.datepill-day{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:30px;
  border-radius:999px;
  background:#e5e7eb;
  color:#111827;
  font-weight:900;
}
.datepill-date{font-weight:800}

#ordersTable td.hl,
#ordersTable td.editable.hl,
#ordersTable td.pricecell.hl{
  background:#fff3b0 !important;
  color:#111827;
}
#ordersTable tr.active td.hl,
#ordersTable tr.k-hover td.hl{
  background:#ffe58f !important;
  color:#111827;
}

.bestellung-total{
  white-space:nowrap;
  font-weight:800;
  background:#f8fafc;
}


/* Bestellung sticky first 2 rows */
#ordersTable thead th{position:sticky;top:0;z-index:8;background:#f8fafc}
#ordersTable thead tr.sumrow th{background:#eef2f7}
#ordersTable thead tr:first-child th.left0,
#ordersTable thead tr:first-child th.left1,
#ordersTable thead tr:first-child th.left2,
#ordersTable thead tr:first-child th.left3,
#ordersTable thead tr:first-child th.left4{z-index:10}
#ordersTable thead tr.sumrow th.left0,
#ordersTable thead tr.sumrow th.left1,
#ordersTable thead tr.sumrow th.left2,
#ordersTable thead tr.sumrow th.left3,
#ordersTable thead tr.sumrow th.left4{z-index:9}
#ordersTable td.editable:focus, #ordersTable select.statusSel:focus{outline:2px solid rgba(37,99,235,.25);outline-offset:-2px}
@media (max-width: 1100px){
  .bestellung-kpis{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 700px){
  .bestellung-kpis{grid-template-columns:repeat(2, minmax(0,1fr));}
}


/* Bestellung fixes v6 */
.bestellung-kpis{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr)) !important;
  gap:8px;
}
.bestellung-kpis .mini.card{min-width:0}
.bestellung-kpis .big{
  font-size:clamp(12px, 1.35vw, 18px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#ordersTable td.editable{
  white-space:nowrap;
  overflow:hidden;
}
#ordersTable td.editable br,
#ordersTable td.editable div,
#ordersTable td.editable p{display:none}

#ordersTable thead tr:first-child th,
#ordersTable thead tr.sumrow th{
  left:auto !important;
}
#ordersTable thead tr:first-child th{
  position:sticky;
  top:0;
  z-index:12;
}
#ordersTable thead tr.sumrow th{
  z-index:11 !important;
}
#ordersTable thead tr:first-child th.left0,
#ordersTable thead tr:first-child th.left1,
#ordersTable thead tr:first-child th.left2,
#ordersTable thead tr:first-child th.left3,
#ordersTable thead tr:first-child th.left4,
#ordersTable thead tr.sumrow th.left0,
#ordersTable thead tr.sumrow th.left1,
#ordersTable thead tr.sumrow th.left2,
#ordersTable thead tr.sumrow th.left3,
#ordersTable thead tr.sumrow th.left4{
  left:auto !important;
}

/* keep thick black borders on total row */
#ordersTable  thead tr.sumrow th.thick-end {
  border-right: 4px solid #000 !important;
}

#ordersTable  thead tr.sumrow th.thick-start {
  border-left: 4px solid #000 !important;
}

@media (max-width: 1100px){
  .bestellung-kpis{grid-template-columns:repeat(6, minmax(0,1fr)) !important;}
}
@media (max-width: 700px){
  .bestellung-kpis{grid-template-columns:repeat(6, minmax(0,1fr)) !important;}
  .bestellung-kpis .mini.card{padding:6px;}
  .bestellung-kpis .kpi{font-size:10px;}
}


/* Highlight and thick product separators */
.cell-hl{background:rgba(255,120,0,.18) !important;}
.cell-light-red{background:rgba(239,68,68,.16) !important;}
.table th.thick-col,
.table td.thick-col{border-left:4px solid #000 !important;border-right:0 !important;}
.table th.thick-col + th.thick-col,
.table td.thick-col + td.thick-col{border-left-width:4px !important;}
.table th.thick-col:last-child,
.table td.thick-col:last-child{border-right:4px solid #000 !important;}


/* =========================================================
   MISSING BESTELLUNG / SHARED PAGE FIXES
   Add this at the END of styles.css
   ========================================================= */

/* 1) Status colors on Bestellung
   JS should add:
   - status-t  -> light red
   - status-k  -> light green
   Only first 4 cells are colored
*/
#ordersTable tbody tr.status-t > td:nth-child(-n+4){
  background: rgba(239, 68, 68, .14) !important;
}

#ordersTable tbody tr.status-k > td:nth-child(-n+4){
  background: rgba(34, 197, 94, .14) !important;
}

#ordersTable tbody tr.k-hover.status-t > td:nth-child(-n+4),
#ordersTable tbody tr.k-selected.status-t > td:nth-child(-n+4){
  background: rgba(239, 68, 68, .18) !important;
}

#ordersTable tbody tr.k-hover.status-k > td:nth-child(-n+4),
#ordersTable tbody tr.k-selected.status-k > td:nth-child(-n+4){
  background: rgba(34, 197, 94, .18) !important;
}


/* 2) G.Fladen filled cell highlight
   JS / page code should add class: gfladen-filled
*/
#ordersTable td.gfladen-filled,
#tahminTable td.gfladen-filled,
.table td.gfladen-filled{
  background: rgba(239, 68, 68, .16) !important;
  color: #111827 !important;
}


/* 3) Thick black border helpers
   Use these when page code decides where group starts/ends:
   - thick-start = black border on left
   - thick-end   = black border on right

   This is better than applying left+right on every column,
   because when two special columns stand next to each other,
   you only want one black border between them.
*/
.table th.thick-start,
.table td.thick-start{
  border-left: 4px solid #000 !important;
}

.table th.thick-end,
.table td.thick-end{
  border-right: 4px solid #000 !important;
}

/* Bestellung: first visible columns fit content exactly */
#ordersTable{
  table-layout: auto !important;
}

#ordersTable th.left1,
#ordersTable td.left1,
#ordersTable th.left2,
#ordersTable td.left2,
#ordersTable th.left3,
#ordersTable td.left3,
#ordersTable th.left4,
#ordersTable td.left4{
  width: 1% !important;
  min-width: unset !important;
  max-width: none !important;
  white-space: nowrap !important;
}

/* optional: remove extra forced width from all frozen left cells */
#ordersTable th.left0,
#ordersTable td.left0,
#ordersTable th.left1,
#ordersTable td.left1,
#ordersTable th.left2,
#ordersTable td.left2,
#ordersTable th.left3,
#ordersTable td.left3,
#ordersTable th.left4,
#ordersTable td.left4{
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   Bestellung: hide Kunden ID column
   --------------------------------------------------------- */
#ordersTable th.left0,
#ordersTable td.left0{
  display:none !important;
}

/* ---------------------------------------------------------
   Bestellung: if row has content from Notizen to last column,
   color the left block up to Hinweis in light green
   Hidden Kunden-ID is still counted, so use first 5 cells.
   --------------------------------------------------------- */
#ordersTable tbody tr.row-started > td:nth-child(-n+6){
  background: rgba(34, 197, 94, .14) !important;
}

#ordersTable tbody tr.k-hover.row-started > td:nth-child(-n+6),
#ordersTable tbody tr.k-selected.row-started > td:nth-child(-n+6){
  background: rgba(34, 197, 94, .18) !important;
}



/* Full-height table pages */
.page-fill{
  padding:8px;
  max-width:none;
  height:calc(100vh - 64px);
  display:flex;
  flex-direction:column;
  min-height:0;
}

.page-fill-card{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.page-fill-card > .table-wrap{
  flex:1 1 auto;
  min-height:0;
  height:auto !important;
  max-height:none !important;
  overflow:auto !important;
  width:100%;
}


/* =========================================================
   MODERN FANCY SIDEBAR
   Put this AFTER your existing sidebar CSS
   ========================================================= */

:root{
  --sb-bg:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(34,197,94,.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  --sb-border: rgba(148,163,184,.20);
  --sb-shadow:
    0 22px 60px rgba(15,23,42,.18),
    0 8px 24px rgba(15,23,42,.08);
  --sb-item-hover: rgba(37,99,235,.08);
  --sb-item-active:
    linear-gradient(180deg, rgba(37,99,235,.14) 0%, rgba(29,78,216,.10) 100%);
  --sb-text: #0f172a;
  --sb-muted: #64748b;
  --sb-white: #ffffff;
}

/* Sidebar shell */
.sidebar{
  width:320px;
  padding:18px 14px;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  box-shadow:var(--sb-shadow);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:rgba(148,163,184,.35) transparent;
}

.sidebar::-webkit-scrollbar{
  width:8px;
}

.sidebar::-webkit-scrollbar-track{
  background:transparent;
}

.sidebar::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.35);
  border-radius:999px;
}

/* Brand */
.sidebar .brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.85) 100%);
  box-shadow:
    0 14px 34px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  margin-bottom:16px;
}

.brand-mark{
  width:52px;
  height:52px;
  border-radius:18px;
  background:
    linear-gradient(135deg, #2563eb 0%, #1d4ed8 45%, #22c55e 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  letter-spacing:.03em;
  box-shadow:
    0 14px 26px rgba(37,99,235,.28),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.brand-title{
  font-size:16px;
  font-weight:900;
  color:var(--sb-text);
  letter-spacing:-.01em;
}

.brand-sub{
  margin-top:3px;
  font-size:12px;
  color:var(--sb-muted);
  font-weight:700;
}

.brand-role{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#1d4ed8;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(37,99,235,.12);
}

/* Nav */
.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}

.nav-section{
  margin:12px 10px 4px;
  font-size:11px;
  font-weight:900;
  color:#94a3b8;
  text-transform:uppercase;
  letter-spacing:.12em;
}

/* Links */
.nav-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid transparent;
  color:var(--sb-text);
  background:transparent;
  transition:
    transform .12s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease;
}

.nav-item::before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:transparent;
  transition:background .18s ease, box-shadow .18s ease;
}

.nav-item:hover{
  background:var(--sb-item-hover);
  border-color:rgba(37,99,235,.10);
  transform:translateX(2px);
}

.nav-item.active{
  background:var(--sb-item-active);
  border-color:rgba(37,99,235,.16);
  color:#0b3aa7;
  box-shadow:
    0 10px 22px rgba(37,99,235,.10),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.nav-item.active::before{
  background:linear-gradient(180deg, #2563eb 0%, #22c55e 100%);
  box-shadow:0 0 12px rgba(37,99,235,.22);
}

.nav-ico{
  width:28px;
  min-width:28px;
  text-align:center;
  font-size:18px;
  line-height:1;
  filter:saturate(1.05);
}

.nav-label{
  font-size:14px;
  font-weight:800;
  color:inherit;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Group button */
.nav-group-toggle{
  width:100%;
  min-height:48px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--sb-text);
  cursor:pointer;
  transition:
    transform .12s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.nav-group-toggle:hover{
  background:var(--sb-item-hover);
  border-color:rgba(37,99,235,.10);
  transform:translateX(2px);
}

.nav-group-toggle.open{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

.nav-group-toggle .nav-label{
  text-align:left;
}

.nav-group-toggle .chev{
  margin-left:auto;
  font-size:14px;
  color:#64748b;
  transition:transform .18s ease, color .18s ease;
}

.nav-group-toggle.open .chev{
  transform:rotate(180deg);
  color:#2563eb;
}

/* Group children */
.nav-group{
  display:none;
  margin:4px 0 8px 16px;
  padding:8px;
  border-left:1px dashed rgba(148,163,184,.35);
  border-radius:0 0 0 12px;
}

.nav-group.open{
  display:block;
}

.nav-group .nav-item{
  min-height:42px;
  border-radius:14px;
  padding-left:12px;
  background:rgba(255,255,255,.52);
}

.nav-group .nav-item .nav-ico{
  font-size:15px;
  width:24px;
  min-width:24px;
}

/* Footer */
.sidebar-footer{
  margin-top:18px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.65);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(248,250,252,.86) 100%);
  box-shadow:
    0 14px 34px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.lang-footer{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.langbtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid #dbe3ee;
  background:#ffffff;
  color:#334155;
  font-weight:800;
  transition:
    transform .12s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.langbtn:hover{
  transform:translateY(-1px);
  border-color:#bfdbfe;
  background:#f8fbff;
  box-shadow:0 10px 20px rgba(37,99,235,.08);
}

.langbtn.active{
  color:#1d4ed8;
  border-color:rgba(37,99,235,.22);
  background:linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  box-shadow:0 10px 20px rgba(37,99,235,.10);
}

.langbtn .flag{
  font-size:16px;
  line-height:1;
}

.langbtn .lbl{
  font-size:13px;
  font-weight:900;
}

/* Logout */
.logoutbtn{
  margin-left:auto;
  min-width:auto !important;
  height:40px;
  padding:0 14px !important;
  border-radius:14px !important;
  border:1px solid rgba(244,63,94,.20) !important;
  background:linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%) !important;
  color:#be123c !important;
  box-shadow:0 10px 22px rgba(244,63,94,.10);
}

.logoutbtn:hover{
  background:linear-gradient(180deg, #ffe4e6 0%, #fecdd3 100%) !important;
  border-color:#fb7185 !important;
  transform:translateY(-1px);
}

.logout-ico{
  width:18px;
  height:18px;
  object-fit:contain;
}

/* Collapsed sidebar */
.sidebar.collapsed{
  width:88px;
  padding-left:10px;
  padding-right:10px;
}

.sidebar.collapsed .brand{
  justify-content:center;
  padding:12px 8px;
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .chev,
.sidebar.collapsed .sidebar-footer{
  display:none !important;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-group-toggle{
  justify-content:center;
  padding:0;
}

.sidebar.collapsed .nav-group{
  display:none !important;
}

/* Mobile */
@media (max-width: 980px){
  .sidebar{
    width:300px;
    border-right:1px solid rgba(148,163,184,.22);
    box-shadow:
      0 30px 60px rgba(15,23,42,.28),
      0 12px 30px rgba(15,23,42,.12);
  }
}



/* =========================================================
   FANCY SIDEBAR + BURGER BEHAVIOR
   ========================================================= */

.sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  z-index:1400;
  width:310px;
  padding:18px 14px;
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.12), transparent 24%),
    radial-gradient(circle at bottom right, rgba(34,197,94,.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border-right:1px solid rgba(148,163,184,.22);
  box-shadow:
    0 24px 60px rgba(15,23,42,.20),
    0 10px 28px rgba(15,23,42,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow-y:auto;
  overflow-x:hidden;
  transform:translateX(-110%);
  transition:transform .22s ease, width .18s ease;
}

.app.sidebar-open .sidebar{
  transform:translateX(0);
}

.sidebar.hidden{
  display:block !important;
  transform:translateX(-110%);
}

.sidebar.collapsed{
  width:84px;
  padding-left:10px;
  padding-right:10px;
}

.sidebar.collapsed .brand-text,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .chev,
.sidebar.collapsed .sidebar-footer{
  display:none !important;
}

.sidebar.collapsed .brand{
  justify-content:center;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .nav-group-toggle{
  justify-content:center;
  padding-left:0;
  padding-right:0;
}

.sidebar.collapsed .nav-group{
  display:none !important;
}

.sidebar .brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.7);
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.88) 100%);
  box-shadow:
    0 12px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
  margin-bottom:16px;
}

.brand-mark{
  width:52px;
  height:52px;
  border-radius:18px;
  background:linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #22c55e 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:18px;
  box-shadow:0 14px 26px rgba(37,99,235,.26);
}

.brand-title{
  font-size:16px;
  font-weight:900;
  color:#0f172a;
}

.brand-sub{
  font-size:12px;
  color:#64748b;
  font-weight:700;
  margin-top:2px;
}

.brand-role{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  color:#1d4ed8;
  font-size:11px;
  font-weight:800;
  border:1px solid rgba(37,99,235,.12);
}

.nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.nav-item,
.nav-group-toggle{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:0 14px;
  border-radius:16px;
  border:1px solid transparent;
  background:transparent;
  color:#0f172a;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .10s ease,
    box-shadow .18s ease;
}

.nav-item::before{
  content:"";
  position:absolute;
  left:8px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background:transparent;
  transition:background .18s ease, box-shadow .18s ease;
}

.nav-item:hover,
.nav-group-toggle:hover{
  background:rgba(37,99,235,.08);
  border-color:rgba(37,99,235,.10);
  transform:translateX(2px);
}

.nav-item.active{
  background:linear-gradient(180deg, rgba(37,99,235,.14) 0%, rgba(29,78,216,.10) 100%);
  border-color:rgba(37,99,235,.16);
  color:#0b3aa7;
  box-shadow:
    0 10px 20px rgba(37,99,235,.10),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.nav-item.active::before{
  background:linear-gradient(180deg, #2563eb 0%, #22c55e 100%);
  box-shadow:0 0 10px rgba(37,99,235,.22);
}

.nav-ico{
  width:28px;
  min-width:28px;
  text-align:center;
  font-size:18px;
  line-height:1;
}

.nav-label{
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-group-toggle .chev{
  margin-left:auto;
  color:#64748b;
  transition:transform .18s ease;
}

.nav-group-toggle.open .chev{
  transform:rotate(180deg);
}

.nav-group{
  display:none;
  margin:4px 0 8px 16px;
  padding:8px;
  border-left:1px dashed rgba(148,163,184,.35);
}

.nav-group.open{
  display:block;
}

.nav-group .nav-item{
  min-height:42px;
  border-radius:14px;
  background:rgba(255,255,255,.55);
}

.sidebar-footer{
  margin-top:18px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.65);
  background:linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,250,252,.88) 100%);
  box-shadow:
    0 12px 28px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.85);
}

.sidebar-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.25);
  z-index:1350;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.app.sidebar-open .sidebar-overlay{
  opacity:1;
  pointer-events:auto;
}



/* =========================
   MODERN LOGIN PAGE
   ========================= */

:root{
  --login-bg-1:#07111f;
  --login-bg-2:#0c1f38;
  --login-bg-3:#10294a;
  --login-accent:#22c55e;
  --login-accent-2:#16a34a;
  --login-text:#f8fafc;
  --login-muted:rgba(255,255,255,.72);
  --login-border:rgba(255,255,255,.14);
  --login-glass:rgba(255,255,255,.10);
  --login-glass-strong:rgba(255,255,255,.16);
  --login-shadow:0 30px 80px rgba(0,0,0,.38);
}

html, body{
  min-height:100%;
}

body.login-page{
  margin:0;
  font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--login-text);
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(56,189,248,.18), transparent 26%),
    linear-gradient(135deg, var(--login-bg-1) 0%, var(--login-bg-2) 45%, var(--login-bg-3) 100%);
  overflow:hidden;
  position:relative;
}

.login-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.login-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 85%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.45), transparent 85%);
}

.login-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(20px);
  opacity:.85;
  animation:loginFloat 10s ease-in-out infinite;
}

.orb-1{
  width:300px;
  height:300px;
  top:-80px;
  left:-60px;
  background:radial-gradient(circle, rgba(34,197,94,.45) 0%, rgba(34,197,94,.08) 65%, transparent 75%);
}

.orb-2{
  width:380px;
  height:380px;
  right:-80px;
  top:8%;
  background:radial-gradient(circle, rgba(59,130,246,.42) 0%, rgba(59,130,246,.08) 65%, transparent 75%);
  animation-delay:1.5s;
}

.orb-3{
  width:260px;
  height:260px;
  left:20%;
  bottom:-60px;
  background:radial-gradient(circle, rgba(168,85,247,.35) 0%, rgba(168,85,247,.07) 65%, transparent 75%);
  animation-delay:3s;
}

@keyframes loginFloat{
  0%,100%{ transform:translateY(0) translateX(0) scale(1); }
  50%{ transform:translateY(-14px) translateX(8px) scale(1.03); }
}

.login-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}

.login-panel{
  width:100%;
  max-width:460px;
  padding:34px 30px 28px;
  border:1px solid var(--login-border);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08));
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--login-shadow);
  position:relative;
}

.login-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.35), rgba(255,255,255,.06));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
}

.login-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:var(--login-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:18px;
}

.login-brand-wrap{
  margin-bottom:26px;
}

.login-brand{
  font-size:34px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:10px;
}

.login-sub{
  font-size:15px;
  line-height:1.6;
  color:var(--login-muted);
  max-width:340px;
}

.login-form{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.modern-field{
  margin:0;
}

.modern-field label{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.88);
}

.modern-field input{
  width:100%;
  height:54px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:0 16px;
  font-size:15px;
  box-sizing:border-box;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}

.modern-field input::placeholder{
  color:rgba(255,255,255,.42);
}

.modern-field input:focus{
  border-color:rgba(34,197,94,.75);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 4px rgba(34,197,94,.14);
  transform:translateY(-1px);
}

.login-lang-switch{
  display:flex;
  gap:10px;
  margin-top:2px;
}

.lang-chip{
  min-width:72px;
  height:42px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
  border:1px solid rgba(255,255,255,.10);
}

.lang-chip:hover{
  background:rgba(255,255,255,.14);
  transform:translateY(-1px);
}

.lang-chip.active{
  background:linear-gradient(135deg, var(--login-accent), var(--login-accent-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(34,197,94,.28);
}

.login-error{
  border:1px solid rgba(248,113,113,.28);
  background:rgba(239,68,68,.12);
  color:#fecaca;
  border-radius:16px;
  padding:12px 14px;
  font-size:14px;
  font-weight:600;
}

.login-submit{
  width:100%;
  height:56px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg, var(--login-accent), var(--login-accent-2));
  color:#fff;
  font-size:16px;
  font-weight:800;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
  box-shadow:0 16px 34px rgba(34,197,94,.28);
  margin-top:4px;
}

.login-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 42px rgba(34,197,94,.34);
  filter:brightness(1.03);
}

.login-submit:active{
  transform:translateY(0);
}

@media (max-width: 560px){
  .login-panel{
    max-width:100%;
    padding:26px 18px 22px;
    border-radius:24px;
  }

  .login-brand{
    font-size:28px;
  }

  .login-sub{
    font-size:14px;
  }

  .modern-field input{
    height:50px;
  }

  .login-submit{
    height:52px;
  }
}



.hesab-col-yellow{
  background:#fff8db !important;
}