:root{
  --header-height:64px;
  --label-width:140px;
  --day-width:1440px;
  --timeline-total-width:12960px;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  overflow-x:hidden;
}

body{
 margin:0;
 background:linear-gradient(180deg,#0b1220,#0a0f1a);
 color:#e5e7eb;
 font-family:Inter,Segoe UI,Arial;
 letter-spacing:.2px;
 padding-top:64px;
}

/* ===== HEADER ===== */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f172a;
  border-bottom: 1px solid #1e293b;

  z-index: 10000;
}

h1{
 margin:0;
 font-size:20px;
 font-weight:600;
}

/* ===== BUTTONS ===== */
button{
 background:#2563eb;
 border:none;
 padding:8px 16px;
 border-radius:8px;
 color:white;
 font-weight:600;
 cursor:pointer;
 transition:.2s ease;
}
button:hover{
 background:#1d4ed8;
 box-shadow:0 0 10px rgba(37,99,235,.5);
 transform:translateY(-1px);
}

/* ===== INFO BAR ===== */
#infoBar{
 background:#0f172a;
 padding:10px 24px;
 font-size:13px;
 border-bottom:1px solid #1e293b;
 display:flex;
 flex-wrap:wrap;
 gap:16px;
}


.timeHeader{
  position:relative;
  height:48px;
  background:#0b1220;
  border-bottom:1px solid #1e293b;
  width:var(--timeline-total-width);
  min-width:var(--timeline-total-width);
}
.hour{
 position:absolute;
 top:4px;
 font-size:11px;
 color:#94a3af;
}
.gridLine{
 position:absolute;
 top:0;
 bottom:0;
 width:1px;
 background:#1e293b;
}
.nowLine{
 position:absolute;
 top:0;
 bottom:0;
 width:2px;
 background:#ef4444;
 box-shadow:0 0 8px rgba(239,68,68,.8);
}
.dateSwitchLine{
 position:absolute;
 top:0;
 bottom:0;
 width:2px;
 background:#475569;
 opacity:.9;
 pointer-events:none;
}

/* ===== ROWS ===== */
.row{
  display:flex;
  position:relative;
  height:50px;
  border-bottom:1px solid #1e293b;
  width:100%;
}
.dateRow{
  height:30px;
}
.rowTimeline{
  position:relative;
  width:var(--timeline-total-width);
  min-width:var(--timeline-total-width);
  flex-shrink:0;
}
.dateHeader{
  position:relative;
  height:30px;
  background:#0b1220;
  border-bottom:1px solid #1e293b;
  width:var(--timeline-total-width);
  min-width:var(--timeline-total-width);
}
.row:nth-child(even){
 background:rgba(15,23,42,.5);
}
.label{
  position:sticky;
  left:0;
  z-index:50;

  width:var(--label-width);
  min-width:var(--label-width);
  flex-shrink:0;

  background:#0f172a;
  border-right:1px solid #1e293b;

  display:flex;
  align-items:center;
  padding-left:12px;
  font-weight:600;
  color:#cbd5e1;
  margin-left:calc(-1 * var(--label-width)); 
}

/* ===== BARS ===== */
.bar{
 position:absolute;
 height:30px;
 top:10px;
 border-radius:8px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:12px;
 font-weight:600;
 padding:0 10px;
 cursor:grab;
 box-shadow:0 2px 10px rgba(0,0,0,.5);
 transition:
   background-color .15s ease,
   border-color .15s ease,
   box-shadow .15s ease,
   filter .15s ease;
}
.bar:hover{
 filter:brightness(1.1);
}
.bar.modified{
 outline:3px solid #38bdf8;
 outline-offset:3px;
 box-shadow:
   0 0 0 4px rgba(56,189,248,.4),
   0 0 30px rgba(56,189,248,.9),
   0 12px 30px rgba(0,0,0,.8);
 z-index:500;
}

/* Skalierung nur wenn nicht deaktiviert */
body:not(.drag-scale-disabled) .bar.modified{
 transform:scale(1.03);
}

/* Fallback waehrend Maustaste gedrueckt */
.bar:active{
 outline:3px solid #38bdf8;
 outline-offset:3px;
}
.resizeHandle{
 position:absolute;
 right:0;
 top:0;
 width:10px;
 height:100%;
 cursor:ew-resize;
}

/* ===== STATUS COLORS ===== */
.green{
 background:linear-gradient(90deg,#15803d,#16a34a);
}
.orange{
 background:linear-gradient(90deg,#b45309,#f59e0b);
}
.red{
 background:linear-gradient(90deg,#991b1b,#ef4444);
}
.gray{
 background:linear-gradient(90deg,#334155,#475569);
 border:1px solid rgba(148,163,184,.25);
 color:#cbd5e1;
}

/* ===== MODALS ===== */
.modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.85);
 display:flex;
 align-items:center;
 justify-content:center;
 backdrop-filter:blur(4px);
}
.box{
 background:#0f172a;
 padding:24px;
 border-radius:12px;
 width:900px;
 border:1px solid #1e293b;
 box-shadow:0 20px 50px rgba(0,0,0,.6);
 max-height:85vh;
 overflow:auto;
}

/* ===== PRIORITY LIST ===== */
.priority{
 padding:8px;
 background:#111827;
 margin-bottom:6px;
 border-radius:6px;
 cursor:grab;
 transition:.15s ease;
}
.priority:hover{
 background:#1e293b;
}
.priority.dragover{
 background:#1d4ed8;
}

/* ===== INPUTS ===== */
select,input{
 width:100%;
 padding:10px;
 margin-bottom:10px;
 background:#020617;
 color:white;
 border:1px solid #1e293b;
 border-radius:8px;
}

/* ===== STATUS GLOW ===== */
.red{
 box-shadow:0 0 12px rgba(239,68,68,.7);
}
.orange{
 box-shadow:0 0 8px rgba(245,158,11,.4);
}
.gray{
 box-shadow:
   0 0 0 1px rgba(148,163,184,.15),
   0 2px 10px rgba(0,0,0,.45);
}

/* ===== TYPOGRAPHY ===== */
h3{
 font-size:16px;
 font-weight:600;
 margin-bottom:12px;
 color:#cbd5e1;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{
 width:8px;
 height:8px;
}
::-webkit-scrollbar-track{
 background:#0f172a;
}
::-webkit-scrollbar-thumb{
 background:#1e293b;
 border-radius:4px;
}
::-webkit-scrollbar-thumb:hover{
 background:#334155;
}
.bar.modified .resizeHandle{
 background:rgba(255,255,255,.15);
}
.bar{
 cursor:grab;
}
.bar.modified{
 cursor:grabbing;
}
 .bar.modified {
  outline:3px solid #38bdf8;
  outline-offset:3px;
  z-index:1000;
}
/* ===== ENTERPRISE KPI PANEL ===== */
.kpi-panel{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
 gap:12px;
 padding:16px 24px;
 background:#0f172a;
 border-bottom:1px solid #1e293b;
}

.kpi-card{
 background:#111827;
 border:1px solid #1e293b;
 border-radius:12px;
 padding:14px;
 display:flex;
 flex-direction:column;
 gap:6px;
 transition:.2s ease;
}

.kpi-card:hover{
 transform:translateY(-2px);
 box-shadow:0 10px 25px rgba(0,0,0,.4);
}

.kpi-title{
 font-size:11px;
 color:#94a3af;
 text-transform:uppercase;
 letter-spacing:.8px;
}

.kpi-value{
 font-size:20px;
 font-weight:700;
}

.kpi-green{ color:#16a34a; }
.kpi-orange{ color:#f59e0b; }
.kpi-red{
 color:#ef4444;
 animation:pulse 1.5s infinite;
}
/* ===== MINI CHART ===== */
#miniChartWrapper{
 padding:16px 24px;
 background:#0b1220;
 border-bottom:1px solid #1e293b;
}

#miniChart{
 width:100%;
 height:120px;
}
/* ===== MINI CHART CLEAN ===== */
#miniChartWrapper{
 padding:20px 24px;
 background:#0b1220;
 border-bottom:1px solid #1e293b;
}

.chart-header{
 font-size:13px;
 color:#94a3af;
 margin-bottom:10px;
 text-transform:uppercase;
 letter-spacing:.8px;
}

#miniChart{
 width:100%;
 height:140px;
 display:block;
 background:linear-gradient(180deg,#020617,#0a1426);
 border-radius:8px;
 border:1px solid #1e293b;
}
/* ===== TOOLTIP ===== */
.tooltip{
 position:fixed;
 background:#0f172a;
 border:1px solid #1e293b;
 padding:8px 10px;
 border-radius:8px;
 font-size:12px;
 color:#e5e7eb;
 pointer-events:none;
 z-index:100001; 
 box-shadow:0 10px 30px rgba(0,0,0,.6);
 opacity:0;
 transition:.15s ease;
}
.tooltip.visible{
 opacity:1;
}
/* ===== FLOATING CONTROL BAR ===== */

#controlBar{
 position:relative;
 top:auto;
 right:auto;
 display:flex;
 gap:12px;
}

#controlBar button{
 backdrop-filter:blur(10px);
 background:rgba(37,99,235,.9);
 border:1px solid rgba(255,255,255,.1);
}

/* ===== STICKY MODE ===== */

.sticky-active #infoBar{
 position:sticky;
 top:0;
 z-index:1000;
}

.sticky-active #miniChartWrapper{
 position:sticky;
 top:120px;
 z-index:900;
}
/* ===== LEITSTAND FIXIERTER BEREICH ===== */

#leitstandTop{
  position:relative;
  z-index:2000;
  background:#0b1220;
  padding-bottom:8px;
  border-bottom:1px solid #1e293b;
}

/* harte visuelle Kante */
#leitstandTop::after{
 content:"";
 display:block;
 height:14px;
 background:linear-gradient(
   to bottom,
   rgba(0, 0, 0, 0.6),
   rgba(245, 23, 23, 0)
 );
}

/* ===== RASTER BEREICH ===== */

#rasterSection{
 background:#020617;
 border-top:1px solid #111827;
}

/* ===== ENTERPRISE MODALS ===== */

.modal{
 position:fixed;
 inset:0;
 background:rgba(0,0,0,.75);
 display:flex;
 align-items:center;
 justify-content:center;
 backdrop-filter:blur(6px);
 z-index:99999;

 opacity:0;
 pointer-events:none;
 transition:opacity .25s ease;
}

.modal.active{
 opacity:1;
 pointer-events:auto;
}

/* Modal Box */

.modal .box{
 position:relative;
 z-index:100000;

 background:rgba(15,23,42,.85);
 backdrop-filter:blur(18px);
 border:1px solid rgba(255,255,255,.05);
 border-radius:14px;
 padding:24px;

 box-shadow:
   0 25px 60px rgba(0,0,0,.7),
   0 0 0 1px rgba(255,255,255,.03);

 transform:scale(.95);
 transition:transform .25s ease;
}

.modal.active .box{
 transform:scale(1);
}
.modal.warn{
 background:rgba(0,0,0,.85);
}

.modal.warn .box{
 border:1px solid rgba(239,68,68,.3);
 box-shadow:
   0 25px 60px rgba(0,0,0,.8),
   0 0 40px rgba(239,68,68,.3);
}
.tooltip{
 z-index: 10000;
}
.bar {
  user-select: none;
  -webkit-user-select: none;
  position:absolute;
}
.sideMenu{
  position:fixed;
  top:64px;
  left:0;
  width:300px;
  height:calc(100% - 64px);

  transform:translateX(-100%);
  transition:transform .3s ease;

  pointer-events:none;
  z-index:9000;
}

.sideMenu.open{
  transform:translateX(0);
  pointer-events:auto;  
}
.headerLeft{
  display:flex;
  align-items:center;
  gap:16px;
}

.menuIcon{
  cursor:pointer;
  font-size:22px;
  padding:6px 10px;
  border-radius:8px;
  transition:.2s ease;
}

.menuIcon:hover{
  background:rgba(255,255,255,.08);
}
.menuIcon.open{
  transform:rotate(90deg);
}
.menuSection{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.menuSection label{
  font-size:13px;
  cursor:pointer;
}

.sideMenu hr{
  border:0;
  border-top:1px solid #1e293b;
  margin:20px 0;
}
body.menu-push #board{
  transform:translateX(300px);
  transition:transform .3s ease;
}

body.menu-push #leitstandTop{
  transform:translateX(300px);
  transition:transform .3s ease;
}

body {
  margin: 0;
  overflow-y: auto;
}

#rasterSection {
  background:#020617;
  border-top:1px solid #111827;
}

#board{
  position:relative;
  width:var(--timeline-total-width);
  min-width:var(--timeline-total-width);
}
#timelineScroll{
  position:relative;
  width:100%;
  margin:0 auto;
  overflow-x:auto;
  overflow-y:hidden;
  
}
.dateLabel{
 position:absolute;
 top:6px;
 font-size:11px;
 color:#64748b;
}
.timelineHoverLine{
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,.8);
  pointer-events:none;
  z-index:1500;
  opacity:0;
  visibility:hidden;
  transform:scaleY(.9);
  transform-origin:center top;
  transition:
    opacity .16s ease,
    transform .16s cubic-bezier(.22,.61,.36,1),
    visibility .16s ease;
}
.timelineHoverLine.visible{
  opacity:1;
  visibility:visible;
  transform:scaleY(1);
}

/* ===== SAP FIORI STYLE LAYOUT (DARK BLUE) ===== */
:root{
  --sap-shell-h:56px;
  --pin-header-h:56px;
  --pin-leitstand-h:0px;
  --pin-stack-h:56px;
  --sap-nav-width:268px;
  --sap-bg:#070d1a;
  --sap-surface:#0f1a2e;
  --sap-surface-2:#13213a;
  --sap-surface-3:#182a46;
  --sap-border:#2a4063;
  --sap-text:#e6eefc;
  --sap-muted:#9fb3d1;
  --sap-accent:#1f7ae0;
  --sap-accent-strong:#0f4ea2;
  --sap-focus:rgba(31,122,224,.32);
  --sap-danger:#ef4444;
  --sap-success:#22c55e;
  --sap-warning:#f59e0b;
  --now-line-color:#0992c2;
  --now-line-glow:rgba(9,146,194,.68);
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --radius-s:8px;
  --radius-m:12px;
  --radius-l:14px;
  --elev-1:0 2px 8px rgba(3,8,20,.24);
  --elev-2:0 8px 22px rgba(2,10,26,.44);
}

body{
  font-family:"72","Segoe UI",system-ui,-apple-system,sans-serif;
  letter-spacing:0;
  color:var(--sap-text);
  background:
    radial-gradient(920px 560px at 10% -10%, rgba(31,122,224,.24), transparent 60%),
    radial-gradient(900px 620px at 90% -20%, rgba(11,45,114,.35), transparent 62%),
    linear-gradient(180deg,#060d1a,#081226 45%,#09162b);
  padding-top:var(--sap-shell-h);
}

header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--sap-shell-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-4);
  padding:0 var(--space-4);
  background:#05164d;
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 18px rgba(2,8,20,.45);
  z-index:20000;
}

header::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:#f6b100;
}

.headerLeft{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.menuIcon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  font-size:22px;
  color:#ffffff;
  background:transparent;
  border:0;
}

.menuIcon:hover{
  background:transparent;
  color:#f6b100;
}

.sapBrand{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}

h1{
  margin:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:.03em;
  color:#ffffff;
  white-space:nowrap;
  text-transform:uppercase;
}

.sapTopRight{
  display:flex;
  align-items:center;
  gap:var(--space-3);
}

.sapDateInput{
  margin:0;
  width:132px;
  min-width:132px;
  height:24px;
  padding:0 0 2px;
  border-radius:0;
  background:transparent;
  color:#f5f8ff;
  border:0;
  border-bottom:1px solid rgba(197,216,245,.72);
  font-size:13px;
}

.sapDateInput:focus{
  border-bottom-color:#f6b100;
}

.sapDateInput::-webkit-calendar-picker-indicator{
  filter:invert(1) brightness(1.6);
  opacity:.9;
}

#controlBar{
  display:flex;
  gap:var(--space-2);
  position:relative;
  top:auto;
  right:auto;
}

button{
  height:34px;
  background:linear-gradient(180deg,#1f7ae0,#165ebf);
  color:#f7fbff;
  border:1px solid #7ca9e4;
  border-radius:var(--radius-s);
  padding:0 14px;
  font-weight:600;
  box-shadow:none;
}

button:hover{
  background:linear-gradient(180deg,#2a8cf6,#1a6bd2);
  border-color:#9fc3f0;
  box-shadow:none;
  transform:none;
}

header #controlBar button{
  height:32px;
  width:34px;
  min-width:34px;
  padding:0;
  background:transparent;
  color:#ffffff;
  border:0;
  border-radius:8px;
  box-shadow:none;
}

header #controlBar button:hover{
  background:transparent;
  border-color:transparent;
  color:#f6b100;
}

#btnPinLayout,
#btnRowLock{
  font-size:16px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
}

#btnAddEntry{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
}

#btnAddEntry .addIcon,
#btnPinLayout .lockIcon,
#btnRowLock .rowLockIcon{
  width:19px;
  height:19px;
  display:block;
}

#btnPinLayout.active,
#btnRowLock.active{
  background:transparent;
  border-color:transparent;
  color:#f6b100;
}

#btnPinLayout .lockClosed{
  display:none;
}

#btnPinLayout.active .lockOpen{
  display:none;
}

#btnPinLayout.active .lockClosed{
  display:block;
}

.sideMenu{
  top:var(--sap-shell-h);
  left:0;
  width:min(420px, calc(100vw - 12px));
  max-width:420px;
  height:calc(100vh - var(--sap-shell-h));
  transform:translateX(-100%);
  pointer-events:none;
  background:#05164d;
  border-right:1px solid var(--sap-border);
  border-radius:0 12px 12px 0;
  box-shadow:var(--elev-2);
  padding:var(--space-2);
  overflow-y:auto;
  overflow-x:hidden;
  transition:transform .22s ease;
  z-index:10001;
}

.sideMenu.open{
  transform:translateX(0);
  pointer-events:auto;
}

.menuSingle{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.menuNavHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
}

.menuNavClose{
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  border-radius:8px;
  font-size:18px;
  line-height:1;
  background:transparent;
  border:1px solid #4f7ab1;
  color:#deebff;
  box-shadow:none;
}

.menuNavClose:hover{
  background:rgba(31,122,224,.14);
  border-color:#82b3ef;
  box-shadow:none;
  transform:none;
}

.menuPanelBlock{
  border:1px solid var(--sap-border);
  border-radius:10px;
  background:#10213b;
  padding:10px;
}

.menuPanelBlock .menuHint{
  margin:0 0 10px;
}

.menuAccordion{
  border:1px solid var(--sap-border);
  border-radius:10px;
  background:#10213b;
  overflow:hidden;
}

.menuAccordion summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:10px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  color:#dbe8fb;
}

.menuAccordion summary::-webkit-details-marker{
  display:none;
}

.menuAccordion summary::after{
  content:"\203A";
  font-size:16px;
  line-height:1;
  color:#9db4d8;
  transform:rotate(0deg);
  transition:transform .2s ease;
}

.menuAccordion[open] summary::after{
  transform:rotate(90deg);
}

.menuAccordion[open] summary{
  border-bottom:1px solid rgba(125,160,206,.26);
  background:#143057;
}

.menuAccordionBody{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .22s ease,
    opacity .18s ease;
}

.menuAccordionBody > .menuPanelBlock{
  overflow:hidden;
  border:0;
  border-radius:0;
}

.menuAccordion[open] .menuAccordionBody{
  grid-template-rows:1fr;
  opacity:1;
}

.menuSection{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
}

.menuSection label{
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:var(--space-2) 10px;
  border-radius:var(--radius-s);
  color:var(--sap-text);
  font-size:13px;
}

.menuSection label:hover{
  background:rgba(31,122,224,.14);
}

.menuSection input,
.menuSection input[type="checkbox"]{
  width:auto;
  margin:0;
}

.menuPanelHead{
  margin:0 0 var(--space-3);
  padding:10px;
  border:1px solid var(--sap-border);
  border-radius:10px;
  background:#10213b;
}

.menuPanelTitle{
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#dbe8fb;
  margin:0 0 6px;
}

.menuHint{
  margin:0;
  color:#9db4d8;
  font-size:12px;
  line-height:1.35;
}

.menuPanelHead .menuHint{
  margin:0;
}

.menuPanelHead .menuQuickRow{
  margin-top:10px;
}

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

.menuQuickBtn{
  height:30px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid #375c8e;
  background:#143057;
  color:#deebff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

.menuQuickBtn:hover{
  background:#1a3e70;
  border-color:#4f7ab1;
}

.menuQuickBtn.active{
  background:#23518f;
  border-color:#82b3ef;
  color:#ffffff;
}

.kpiToggleGrid{
  margin:0;
}

.kpiToggleGrid label{
  font-size:12px;
}

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

.nowColorBtn{
  height:30px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid #375c8e;
  background:#143057;
  color:#deebff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

.nowColorBtn:hover{
  background:#1a3e70;
  border-color:#4f7ab1;
}

.nowColorBtn.active{
  background:#23518f;
  border-color:#82b3ef;
  color:#ffffff;
}

.nowColorPickerWrap{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--sap-border);
  border-radius:8px;
  background:#10213b;
}

.nowColorPickerWrap label{
  font-size:12px;
  color:#cfe0fb;
}

#nowLineColorPicker{
  width:38px;
  height:28px;
  padding:0;
  border:1px solid #4a6a95;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
}

#nowLineColorPicker::-webkit-color-swatch-wrapper{
  padding:0;
}

#nowLineColorPicker::-webkit-color-swatch{
  border:none;
  border-radius:4px;
}

#areas,
#areasModal{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.areaDropdown{
  border:1px solid rgba(125,160,206,.26);
  border-radius:8px;
  background:#0f2039;
  overflow:hidden;
}

.areaDropdown summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px 10px;
  padding-right:24px;
  position:relative;
}

.areaDropdown summary::-webkit-details-marker{
  display:none;
}

.areaDropdown summary::after{
  content:"▾";
  position:absolute;
  right:10px;
  top:10px;
  font-size:11px;
  color:#a9c2e4;
  transition:transform .16s ease;
}

.areaDropdown:not([open]) summary::after{
  transform:rotate(-90deg);
}

.areaDropdown[open] summary{
  background:#173661;
}

.areaSummaryTitle{
  font-size:12px;
  font-weight:700;
  color:#e8f2ff;
}

.areaSummaryMeta{
  font-size:11px;
  color:#a9c2e4;
}

.areaContent{
  padding:10px;
  border-top:1px solid rgba(125,160,206,.2);
}

.areaFieldGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

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

.areaField span{
  font-size:11px;
  color:#a9c2e4;
}

.areaFieldWide{
  grid-column:1 / -1;
}

.areaActionRow{
  margin-top:8px;
}

.areaActionBtn{
  height:28px;
  border-radius:7px;
  padding:0 10px;
  font-size:11px;
  font-weight:700;
  background:#1a3e70;
  border:1px solid #4f7ab1;
  color:#deebff;
}

.areaActionBtn:hover{
  background:#23518f;
  border-color:#82b3ef;
}

.areaPriorityTitle{
  margin:10px 0 6px;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#9db4d8;
}

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

.areaPriorityList .priority{
  margin-bottom:0;
}

.menuBackdrop{
  position:fixed;
  left:0;
  right:0;
  top:var(--sap-shell-h);
  bottom:0;
  background:linear-gradient(180deg, rgba(2,8,18,.24), rgba(2,8,18,.42));
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:10000;
}

.menuBackdrop.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Fix fuer fehlerhafte Balken-Position bei altem Push-Layout */
body.menu-push #board,
body.menu-push #leitstandTop{
  transform:none !important;
  transition:none !important;
}

#leitstandTop,
#rasterSection{
  margin-left:0;
  width:100%;
}

#leitstandTop{
  padding:8px var(--space-4) 6px;
  border-bottom:none;
}

#leitstandTop::after{
  display:none;
}

#infoBar{
  background:transparent;
  border:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:var(--space-2);
}

.kpi-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:2px;
  flex:0 0 auto;
  min-width:104px;
  min-height:74px;
  padding:9px 11px;
  background:#0f1d34;
  border:1px solid rgba(124,163,214,.32);
  border-radius:10px;
  box-shadow:none;
}

.kpi-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, rgba(31,122,224,.9), rgba(10,196,224,.75));
  opacity:.9;
}

.kpi-card:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(2,8,20,.28);
  background:#132542;
}

.kpi-card.tone-green::before{
  background:linear-gradient(90deg, rgba(34,197,94,.95), rgba(110,231,183,.8));
}

.kpi-card.tone-orange::before{
  background:linear-gradient(90deg, rgba(245,158,11,.95), rgba(251,191,36,.8));
}

.kpi-card.tone-red::before{
  background:linear-gradient(90deg, rgba(239,68,68,.95), rgba(248,113,113,.8));
}

.kpi-card.tone-blue::before{
  background:linear-gradient(90deg, rgba(31,122,224,.95), rgba(10,196,224,.8));
}

.kpi-title{
  color:#c8daf6;
  letter-spacing:.03em;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  margin-bottom:3px;
  line-height:1.3;
  opacity:.98;
}

.kpi-value{
  color:var(--sap-text);
  font-size:30px;
  font-weight:700;
  letter-spacing:0;
  line-height:1;
}

.kpi-value.kpi-green{
  color:#22c55e;
}

.kpi-value.kpi-orange{
  color:#f59e0b;
}

.kpi-value.kpi-red{
  color:#ef4444;
  animation:none;
}

.kpi-card[data-kpi-key]{
  cursor:pointer;
}

.kpi-card[data-kpi-key]:focus-visible{
  outline:2px solid #6cc3ff;
  outline-offset:1px;
}

.kpiDrilldownBox{
  width:min(1080px, calc(100vw - 36px));
  max-height:min(86vh, 900px);
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 20px;
}

.kpiDrilldownHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.kpiDrilldownHead h3{
  margin:0;
  font-size:18px;
  color:#f7fbff;
}

.kpiDrilldownSub{
  margin-top:3px;
  font-size:12px;
  color:#acc2e6;
}

.kpiDrilldownClose{
  width:32px;
  min-width:32px;
  height:32px;
  padding:0;
  border-radius:8px;
  border:1px solid rgba(144,177,223,.45);
  background:#102342;
  color:#f7fbff;
  font-size:20px;
  line-height:1;
}

.kpiDrilldownClose:hover{
  background:#173059;
  border-color:#9ec3f0;
}

.kpiDrilldownSummary{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(125,165,222,.44);
  background:linear-gradient(
    180deg,
    rgba(16,35,66,.92),
    rgba(13,29,54,.92)
  );
}

.kpiDrilldownValue{
  font-size:28px;
  font-weight:700;
  color:#f7fbff;
  line-height:1.05;
}

.kpiDrilldownMeta{
  font-size:12px;
  color:#acc2e6;
  text-align:right;
}

.kpiDrilldownBody{
  min-height:180px;
  overflow:auto;
  border:1px solid rgba(110,147,203,.35);
  border-radius:10px;
  background:#0c1730;
}

.kpiDetailTable{
  width:100%;
  border-collapse:collapse;
}

.kpiDetailTable th{
  position:sticky;
  top:0;
  z-index:1;
  padding:10px 12px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  text-align:left;
  color:#c9dcfa;
  background:#102342;
  border-bottom:1px solid rgba(141,178,230,.44);
}

.kpiDetailTable td{
  padding:10px 12px;
  border-bottom:1px solid rgba(113,149,205,.2);
  color:#ecf3ff;
  font-size:13px;
  white-space:nowrap;
}

.kpiDetailTable tr:last-child td{
  border-bottom:0;
}

.kpiDetailTable td.kpiTableFiliale{
  font-weight:600;
  color:#f8fbff;
}

.kpiDetailTable td.kpiTableRow{
  color:#b7cdf2;
}

.kpiChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:86px;
  padding:2px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  font-weight:700;
}

.kpiChip.green{
  color:#dcfce7;
  background:rgba(34,197,94,.16);
  border-color:rgba(110,231,183,.4);
}

.kpiChip.orange{
  color:#fef3c7;
  background:rgba(245,158,11,.18);
  border-color:rgba(252,211,77,.45);
}

.kpiChip.red{
  color:#fee2e2;
  background:rgba(239,68,68,.2);
  border-color:rgba(248,113,113,.46);
}

.kpiChip.gray{
  color:#e2e8f0;
  background:rgba(100,116,139,.24);
  border-color:rgba(148,163,184,.45);
}

.kpiChip.blue{
  color:#dbeafe;
  background:rgba(59,130,246,.2);
  border-color:rgba(147,197,253,.45);
}

.kpiRowGrid{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:14px;
}

.kpiRowTag{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:8px;
  background:#102342;
  border:1px solid rgba(125,165,222,.45);
  color:#eaf2ff;
  font-size:13px;
  font-weight:600;
}

.kpiDetailEmpty{
  padding:20px 14px;
  color:#b7cae6;
  font-size:13px;
}

#miniChartWrapper{
  margin-top:var(--space-2);
  padding:10px 12px;
  background:var(--sap-surface);
  border:1px solid var(--sap-border);
  border-radius:var(--radius-m);
  box-shadow:none;
}

#miniChart{
  background:#0c1730;
  border:1px solid var(--sap-border);
  border-radius:var(--radius-s);
}

#rasterSection{
  padding:4px var(--space-4) var(--space-4);
}

#board{
  position:relative;
  width:var(--timeline-total-width);
  min-width:var(--timeline-total-width);
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(156,194,242,.62);
  background:linear-gradient(
    180deg,
    rgba(8,19,38,.34) 0%,
    rgba(8,19,38,0) 42%
  );
}

#board::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:8px;
  background:linear-gradient(
    180deg,
    rgba(8,18,35,.95) 0%,
    rgba(8,18,35,0) 100%
  );
  pointer-events:none;
}

#timelineScroll{
  position:relative;
  width:100%;
  margin:0;
  overflow-x:auto;
  overflow-y:hidden;
  background:
    linear-gradient(180deg, #12294b 0%, #0f213e 45%, #0c1a31 100%);
  border:1px solid rgba(125,165,222,.72);
  border-radius:14px;
  box-shadow:
    0 0 0 1px rgba(72,113,178,.36),
    0 10px 24px rgba(2,8,20,.34),
    inset 0 1px 0 rgba(203,227,255,.08),
    inset 0 -1px 0 rgba(52,81,126,.62);
  cursor:grab;
}

#timelineScroll.is-panning{
  cursor:grabbing;
}

#timelineScroll::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, #0ac4e0 0%, #2c83e8 52%, #72b2ff 100%);
  pointer-events:none;
}

#timelineScroll::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(116,152,206,.42);
  pointer-events:none;
}

body.is-board-panning{
  user-select:none;
}

body.pin-layout #leitstandTop{
  position:fixed;
  top:var(--pin-header-h);
  left:0;
  right:0;
  z-index:19000;
}

body.pin-layout #rasterSection{
  margin-top:var(--pin-leitstand-h);
}

body.pin-layout #timelineScroll{
  max-height:calc(100vh - var(--pin-stack-h) - 10px);
  overflow-y:auto;
  overscroll-behavior:contain;
}

body.pin-layout #timelineScroll > .row.dateRow{
  position:sticky;
  top:0;
  z-index:1705;
}

body.pin-layout #timelineScroll > .row.timeAxisRow{
  position:sticky;
  top:30px;
  z-index:1704;
}

body.pin-layout #timelineScroll > .row.dateRow,
body.pin-layout #timelineScroll > .row.timeAxisRow{
  box-shadow:0 1px 0 rgba(80,113,160,.5);
}

.timeHeader,
.dateHeader{
  border-bottom:1px solid rgba(97,131,178,.45);
}

.dateHeader{
  background:linear-gradient(180deg,#19355e,#142a4b);
}

.timeHeader{
  background:linear-gradient(180deg,#15305b,#112648);
  box-shadow:
    inset 0 -1px 0 rgba(88,126,180,.52),
    0 10px 14px -12px rgba(3,8,20,.95);
}

.gridLine{
  background:rgba(182,206,238,.3);
}

.dateSwitchLine{
  background:#a2c1ea;
  width:2px;
  box-shadow:0 0 8px rgba(162,193,234,.42);
}

.row{
  border-bottom:1px solid rgba(74,105,149,.38);
}

.row:nth-child(even){
  background:#102039;
}

.row:hover{
  background:#152b4c;
}

#board .row{
  border-bottom:1px solid rgba(64,94,134,.38);
}

#board .row:nth-child(even){
  background:#0d1b31;
}

#board .row:hover{
  background:#122543;
}

.label{
  background:var(--sap-surface);
  border-right:1px solid var(--sap-border);
  color:var(--sap-text);
  backdrop-filter:none;
  font-size:13px;
  letter-spacing:.01em;
}

.hour,
.dateLabel,
.chart-header{
  color:#bdd2f0;
}

.hour{
  font-weight:600;
  letter-spacing:.02em;
}

.dateLabel{
  color:#d1e2fb;
  font-weight:600;
}

.bar{
  top:9px;
  height:32px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 3px 10px rgba(3,8,20,.45);
  border-radius:var(--radius-s);
  will-change:left,width;
}

.bar.modified{
  outline:2px solid rgba(10,196,224,.9);
  outline-offset:2px;
  box-shadow:
    0 0 0 2px rgba(10,196,224,.22),
    0 6px 18px rgba(3,8,20,.55);
}

.bar.green{
  background:var(--sap-success);
  color:#ffffff;
}
.bar.orange{
  background:var(--sap-warning);
  color:#1F2937;
}
.bar.red{
  background:var(--sap-danger);
  color:#ffffff;
}
.bar.gray{
  background:#64748B;
  color:#E2E8F0;
  border-color:rgba(226,232,240,.28);
}

.nowLine,
.timelineHoverLine{
  background:var(--now-line-color);
  box-shadow:0 0 8px var(--now-line-glow);
}

.timelineHoverLine.visible{
  animation:nowLineReveal .18s cubic-bezier(.2,.7,.2,1) 1 both;
}

@keyframes nowLineReveal{
  0%{
    opacity:0;
    transform:scaleY(.88);
  }
  100%{
    opacity:1;
    transform:scaleY(1);
  }
}

select,input{
  background:#102342;
  color:var(--sap-text);
  border:1px solid #2f4d79;
  border-radius:var(--radius-s);
}

select:focus,input:focus{
  outline:none;
  border-color:var(--sap-accent);
  box-shadow:0 0 0 2px var(--sap-focus);
}

.modal{
  background:rgba(3,8,18,.66);
  backdrop-filter:blur(2px);
}

.modal .box{
  background:var(--sap-surface);
  border:1px solid var(--sap-border);
  border-radius:var(--radius-l);
  box-shadow:var(--elev-2);
}

.tooltip{
  background:var(--sap-surface);
  border:1px solid var(--sap-border);
  color:var(--sap-text);
  border-radius:var(--radius-s);
}

.toastHost{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:30000;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
}

.toast{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
  min-width:180px;
  max-width:340px;
  padding:9px 12px;
  border-radius:8px;
  font-size:13px;
  color:#eaf2ff;
  background:#102342;
  border:1px solid rgba(141,178,230,.45);
  box-shadow:0 8px 20px rgba(3,8,20,.35);
}

.toast.visible{
  opacity:1;
  transform:translateY(0);
}

.toast.toast-warn{
  border-color:rgba(245,158,11,.55);
  color:#ffe8bf;
}

.toast.toast-error{
  border-color:rgba(239,68,68,.55);
  color:#ffd8d8;
}

button:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid #6cc3ff;
  outline-offset:1px;
}

::-webkit-scrollbar-track{
  background:#091427;
}

::-webkit-scrollbar-thumb{
  background:#2a4b79;
}

::-webkit-scrollbar-thumb:hover{
  background:#3a6299;
}


.rowLockList{
  margin-top:10px;
  max-height:300px;
  overflow:auto;
  border:1px solid rgba(125,165,222,.35);
  border-radius:10px;
  background:#0c1730;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rowLockItem{
  width:100%;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  border:1px solid rgba(125,165,222,.22);
  background:#102342;
  color:#eaf2ff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  box-shadow:none;
  transform:none;
}

.rowLockItem:hover{
  background:#173059;
  box-shadow:none;
  transform:none;
}

.rowLockItem.locked{
  border-color:rgba(239,68,68,.36);
  background:rgba(239,68,68,.12);
}

.rowLockName{
  font-weight:600;
  letter-spacing:.01em;
}

.rowLockMeta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:#b9c7dc;
  font-size:11px;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.rowLockIndicator{
  width:8px;
  height:8px;
  border-radius:999px;
  background:#5f7598;
}

.rowLockItem.locked .rowLockIndicator{
  background:#ef4444;
  box-shadow:0 0 8px rgba(239,68,68,.45);
}

.rowLockItem.locked .rowLockState{
  color:#fecaca;
}

.rowLockActions{
  margin-top:12px;
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.row-locked{
  border-bottom-color:rgba(239,68,68,.34) !important;
}

.row-locked .rowTimeline{
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(239,68,68,.11) 0,
      rgba(239,68,68,.11) 12px,
      rgba(239,68,68,.05) 12px,
      rgba(239,68,68,.05) 24px
    );
}

.label-locked{
  color:#fca5a5;
}

.rowLockBadge{
  position:sticky;
  left:10px;
  top:9px;
  height:32px;
  min-width:108px;
  padding:0 12px;
  border-radius:8px;
  border:1px solid rgba(248,113,113,.44);
  background:#ef4444;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
  pointer-events:none;
  opacity:0;
  transform:translateY(2px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;
  z-index:12;
}

.rowLockBadge.visible{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (max-width:1100px){
  header{
    padding:0 var(--space-2);
    gap:var(--space-2);
  }

  .sapDateInput{
    display:none;
  }

  #controlBar button{
    padding:0 10px;
  }

  .sideMenu{
    left:0;
    width:100%;
    max-width:none;
    height:calc(100vh - var(--sap-shell-h));
    border-radius:0;
  }

  .menuQuickRow{
    grid-template-columns:1fr;
  }

  .nowColorRow{
    grid-template-columns:1fr;
  }

  .areaFieldGrid{
    grid-template-columns:1fr;
  }

  #mainMenu{
    transform:translateX(-100%);
    pointer-events:none;
  }

  #mainMenu.open{
    transform:translateX(0);
    pointer-events:auto;
  }

  #leitstandTop,
  #rasterSection{
    margin-left:0;
    width:100%;
  }
}