/* =========================================================
   site.css (StagePilot – cleaned)
   ========================================================= */

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}

/* =========================================================
   Focus ring (light touch, theme-friendly)
   ========================================================= */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 .1rem rgba(255,255,255,.85), 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* =========================================================
   StagePilot: simple tree (generic)
   ========================================================= */
.sp-tree {
    font-size: 0.95rem;
}

.sp-tree-ul {
    list-style: none;
    padding-left: 0.75rem;
    margin: 0;
}

.sp-tree-li {
    margin: 0;
    padding: 0;
}

.sp-tree-row {
    display: flex;
    gap: .35rem;
    align-items: center;
    padding: .25rem .35rem;
    border-radius: .5rem;
    cursor: pointer;
    user-select: none;
}

    .sp-tree-row:hover {
        background: rgba(var(--bs-primary-rgb), .08);
    }

    .sp-tree-row.active {
        background: rgba(var(--bs-primary-rgb), .14);
        border: 1px solid rgba(var(--bs-primary-rgb), .25);
    }

.sp-tree-caret {
    width: 1rem;
    color: rgba(0,0,0,.55);
    display: inline-block;
    text-align: center;
}

.sp-tree-label {
    flex: 1;
}

.sp-clear-btn {
    width: 40px;
}

    .sp-clear-btn.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

.sp-clickable-row {
    cursor: pointer;
}

    .sp-clickable-row:hover {
        filter: brightness(0.98);
    }

.sp-status-badge {
    background: rgba(var(--bs-primary-rgb), 0.12);
    color: #0b3d6e;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.25);
}

/* =========================================================
   StagePilot: Positionsblatt (DIN A4 Look)
   ========================================================= */

/* “Tisch” / Hintergrund rechts */
.sp-pos-canvas {
    background: rgba(0,0,0,.03);
    border-radius: 0.75rem;
    /* Zentrierung des Sheets */
    text-align: center;
}

/* Scroll Container für rechts (vertikal + horizontal) */
.sp-positions-scroll {
    overflow: auto;
    position: relative; /* sticky-Basis + z-index stacking */
}

/* A4 Sheet */
.sp-pos-sheet {
    /* ✅ Resizable columns via CSS vars (Default-Werte) */
    --sp-grid-gap: 10px;
    --sp-col-pos: 420px;
    --sp-col-qty: 90px;
    --sp-col-unit: 60px;
    --sp-col-days: 90px;
    --sp-col-ep: 110px;
    --sp-col-disc: 90px;
    --sp-col-sum: 120px;
    --sp-col-act: 40px;
    /* Sticky darf nicht durch overflow hidden gestört werden */
    overflow: visible;
    display: inline-block;
    text-align: left;
    width: max-content;
    min-width: 980px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Header row inside sheet */
.sp-pos-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    /* ✅ Jetzt über Variablen (JS kann ändern) */
    grid-template-columns: var(--sp-col-pos) var(--sp-col-qty) var(--sp-col-unit) var(--sp-col-days) var(--sp-col-ep) var(--sp-col-disc) var(--sp-col-sum) var(--sp-col-act);
    gap: var(--sp-grid-gap);
    padding: 10px 12px;
    background: rgba(var(--bs-primary-rgb), .08);
    border-bottom: 1px solid rgba(0,0,0,.08);
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* Header Align */
.sp-pos-h-qty,
.sp-pos-h-unit,
.sp-pos-h-days,
.sp-pos-h-ep,
.sp-pos-h-disc,
.sp-pos-h-sum {
    text-align: right;
}

/* ✅ Resizer-Handles (zwischen den Header-Spalten) */
.sp-col-resizer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px; /* große Hitbox */
    margin-left: -5px; /* zentriert auf der Trennlinie */
    cursor: col-resize;
    z-index: 60;
    user-select: none;
}

    .sp-col-resizer::after {
        content: "";
        position: absolute;
        top: 6px;
        bottom: 6px;
        left: 50%;
        width: 2px;
        transform: translateX(-50%);
        background: rgba(0,0,0,.10);
        border-radius: 2px;
    }

.sp-pos-header:hover .sp-col-resizer::after {
    background: rgba(0,0,0,.14);
}

.sp-col-resizer:hover::after {
    background: rgba(var(--bs-primary-rgb), .55);
}

/* Inner body */
.sp-pos-sheet-body {
    padding: 6px 0;
}

.sp-pos-sheet-inner {
    padding: 0 8px 10px 8px;
}

/* Tree list */
.sp-pos-tree,
.sp-pos-children {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* ✅ FIX: Einrückung darf NICHT die ganze Zeile verschieben! */
.sp-pos-children {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: 0 !important;
}

    .sp-pos-children:not(.is-open) {
        display: none;
    }

.sp-pos-node {
    margin: 0;
    padding: 0;
}

/* Row as “table line” */
.sp-pos-row {
    position: relative;
    display: grid;
    /* ✅ Jetzt über Variablen (JS kann ändern) */
    grid-template-columns: var(--sp-col-pos) var(--sp-col-qty) var(--sp-col-unit) var(--sp-col-days) var(--sp-col-ep) var(--sp-col-disc) var(--sp-col-sum) var(--sp-col-act);
    gap: var(--sp-grid-gap);
    align-items: center;
    padding: 6px 6px;
    border-radius: 8px;
}

    .sp-pos-row:hover {
        background: rgba(var(--bs-primary-rgb), .04);
    }

    /* Drop lines */
    .sp-pos-row.drop-before::before,
    .sp-pos-row.drop-after::after {
        content: "";
        position: absolute;
        left: 6px;
        right: 6px;
        height: 2px;
        background: rgba(var(--bs-primary-rgb), .9);
        border-radius: 2px;
        pointer-events: none;
    }

    .sp-pos-row.drop-before::before {
        top: -1px;
    }

    .sp-pos-row.drop-after::after {
        bottom: -1px;
    }

    .sp-pos-row.drop-into {
        background: rgba(var(--bs-primary-rgb), .09);
        outline: 1px solid rgba(var(--bs-primary-rgb), .22);
    }

/* Left cell: handle/toggle/title */
.sp-pos-col-left {
    display: grid;
    grid-template-columns: 22px 22px 34px 1fr 22px;
    align-items: center;
    column-gap: 8px;
    min-width: 0;
    padding-left: 0;
}

/* Einrückung nur in linker Spalte */
.sp-pos-tree > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 0;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 18px;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 36px;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 54px;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 72px;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 90px;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 108px;
}

.sp-pos-tree > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-children > .sp-pos-node > .sp-pos-row > .sp-pos-col-left {
    padding-left: 126px;
}

/* Handle / Toggle */
.sp-pos-handle {
    cursor: grab;
    user-select: none;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 6px;
}

    .sp-pos-handle:hover {
        background: rgba(var(--bs-primary-rgb), .10);
    }

.sp-pos-toggle {
    border: 0;
    background: transparent;
    color: rgba(0,0,0,.65);
    padding: 0 4px;
    border-radius: 6px;
    line-height: 1;
}

    .sp-pos-toggle:hover {
        background: rgba(var(--bs-primary-rgb), .10);
    }

.sp-pos-toggle-empty {
    width: 22px;
    display: inline-flex;
}

.sp-pos-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Inputs */
.sp-pos-input {
    font-size: .9rem;
    padding: .20rem .35rem;
    height: 28px;
    border-radius: 8px;
}

.sp-pos-col-num .sp-pos-input,
.sp-pos-col-money .sp-pos-input {
    text-align: right;
}

.sp-pos-total {
    font-weight: 600;
}

.is-hidden {
    display: none !important;
}

/* Child dropzone */
.sp-pos-drop-child {
    height: 8px;
    margin-left: 28px;
    margin-right: 6px;
    border-radius: 6px;
}

    .sp-pos-drop-child.dragover {
        background: rgba(var(--bs-primary-rgb), .12);
    }

/* Root drop area */
.sp-pos-root-drop {
    height: 220px;
    margin-top: 10px;
    border-radius: 10px;
}

    .sp-pos-root-drop.dragover {
        background: rgba(var(--bs-primary-rgb), .08);
    }

.sp-pos-empty {
    padding: 14px 10px;
}

/* Drag ghost badge */
.sp-drag-ghost {
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.95);
    border: 1px solid rgba(0,0,0,.12);
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    font-weight: 600;
    font-size: .95rem;
    max-width: 340px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Katalog Bestand (x / y) */
.sp-cat-stock {
    margin-left: auto;
    font-size: .85rem;
    color: rgba(0,0,0,.55);
}

.sp-cat-stock-zero {
    color: #b42318;
    font-weight: 700;
}

.sp-cat-text-zero {
    color: #b42318;
    font-weight: 600;
}

/* Positions Availability Icon (✓ / 🛒) */
.sp-pos-avail-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    font-weight: 800;
    flex: 0 0 auto;
    user-select: none;
    justify-self: end;
}

    .sp-pos-avail-icon.is-ok {
        background: rgba(16, 185, 129, .12);
        color: #047857;
        border: 1px solid rgba(16, 185, 129, .25);
    }

    .sp-pos-avail-icon.is-bad {
        background: rgba(239, 68, 68, .10);
        color: #b42318;
        border: 1px solid rgba(239, 68, 68, .25);
    }

/* FIX: graue gestrichelte Rahmen komplett ausblenden */
.sp-pos-sheet .sp-pos-row,
.sp-pos-sheet .sp-pos-node,
.sp-pos-sheet .sp-pos-drop-child,
.sp-pos-sheet .sp-pos-root-drop {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.sp-pos-sheet .sp-pos-row {
    outline-offset: 0 !important;
}

/* Katalog: Zeilen nicht umbrechen */
.sp-cat-row {
    white-space: nowrap;
}

/* Symbole links sauber ausrichten */
.sp-pos-handle,
.sp-pos-toggle,
.sp-pos-avail-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Nummern-Badge */
.sp-pos-no {
    font-size: .85rem;
    min-width: 34px;
    text-align: right;
}

/* =========================
   Dashboard Gantt
   ========================= */

.sp-gantt-card .card-header {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(6px);
}

.sp-gantt {
    --sp-day-w: 34px;
    --sp-row-h: 34px;
    position: relative;
    overflow: hidden;
}

.sp-gantt-axis {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,.85));
    border-bottom: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
}

.sp-gantt-axis-col {
    flex: 0 0 auto;
    padding: 6px 4px 6px 4px;
    text-align: center;
    border-right: 1px solid rgba(0,0,0,.04);
    color: rgba(0,0,0,.55);
    user-select: none;
}

    .sp-gantt-axis-col.is-weekend {
        background: rgba(13,110,253,.04);
    }

.sp-gantt-axis-day {
    font-weight: 600;
    font-size: .85rem;
    line-height: 1.1;
}

.sp-gantt-axis-dow {
    font-size: .75rem;
    line-height: 1.1;
    opacity: .85;
}

.sp-gantt-body {
    position: relative;
    overflow: auto;
    max-height: 520px; /* Dashboard-tauglich; bei Bedarf anpassen */
    background: #fff;
}

.sp-gantt-rows {
    position: relative;
    min-width: 100%;
}

.sp-gantt-row {
    position: relative;
    height: var(--sp-row-h);
    border-bottom: 1px solid rgba(0,0,0,.04);
    background: repeating-linear-gradient( to right, rgba(0,0,0,.02) 0px, rgba(0,0,0,.02) 1px, transparent 1px, transparent var(--sp-day-w) );
}

.sp-gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 3;
    background: rgba(220,53,69,.55); /* dezent rot */
    box-shadow: 0 0 0 2px rgba(220,53,69,.08);
    pointer-events: none;
}

/* Farbpalette (dezent): 12 Varianten, gleiche Farbe für dispo/event, nur andere Opacity */
.sp-gantt-bar {
    position: absolute;
    top: 7px;
    height: 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: default;
}

.sp-gantt-bar-dispo {
    z-index: 0;
    opacity: .35;
    border: 1px solid rgba(0,0,0,.06);
}

.sp-gantt-bar-event {
    z-index: 1;
    opacity: .92;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

.sp-gantt-badge {
    flex: 0 0 auto;
    font-size: .72rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(0,0,0,.06);
    color: rgba(0,0,0,.75);
}

.sp-gantt-text {
    flex: 1 1 auto;
    font-size: .82rem;
    font-weight: 600;
    color: rgba(0,0,0,.78);
}

/* Palette via --sp-c (0..11) */
.sp-gantt-bar {
    background: hsl(calc(210 + (var(--sp-c) * 12)), 65%, 78%);
}

.sp-gantt-bar-event {
    background: hsl(calc(210 + (var(--sp-c) * 12)), 65%, 72%);
}

.sp-gantt-bar-dispo {
    background: hsl(calc(210 + (var(--sp-c) * 12)), 65%, 72%);
}

/* WarehouseNote unter Position */
.sp-pos-note {
    margin-left: 28px; /* etwas hinter Handle/Toggle */
    margin-top: 6px;
    margin-bottom: 8px;
    max-width: 860px; /* optional */
}

/* Lagernotiz-Button: Standard */
.sp-pos-note-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

    /* Caret (▸/▾) */
    .sp-pos-note-btn .sp-pos-note-caret {
        font-size: 14px;
        line-height: 1;
    }

    /* kleines "i" – standardmäßig versteckt */
    .sp-pos-note-btn .sp-pos-note-ind {
        display: none;
        font-weight: 700;
        font-size: 12px;
        line-height: 1;
        padding: 2px 6px;
        border-radius: 999px;
    }

    /* Wenn Notiz vorhanden: gelber Marker */
    .sp-pos-note-btn.has-note .sp-pos-note-ind {
        display: inline-block;
        background: #fff3cd; /* Bootstrap Warnung hell */
        color: #664d03; /* Bootstrap Warnung dunkel */
        border: 1px solid #ffecb5;
    }

    /* optional: auch der Button selbst minimal wärmer */
    .sp-pos-note-btn.has-note {
        color: #664d03 !important;
    }

.sp-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    font-weight: 800;
    line-height: 1;
    user-select: none;
    border: 1px solid rgba(0,0,0,.08);
}

.sp-ico-ok {
    background: rgba(25,135,84,.12);
    color: #198754;
}
/* grün */
.sp-ico-open {
    background: rgba(220,53,69,.12);
    color: #dc3545;
}
/* rot */
.sp-ico-warn {
    background: rgba(255,193,7,.22);
    color: #b78103;
}
/* gelb ! */
.sp-ico-info {
    background: rgba(13,110,253,.14);
    color: #0d6efd;
}
/* blau i */

.sp-ico span[aria-hidden="true"] {
    transform: translateY(-0.5px);
}

/* Warehouse Process: keine Alarm-Hintergrundfarben pro Zeile (wir arbeiten über Icons) */
table[data-sp-wh-lines="1"] tbody tr.table-danger > *,
table[data-sp-wh-lines="1"] tbody tr.table-warning > *,
table[data-sp-wh-lines="1"] tbody tr.table-info > *,
table[data-sp-wh-lines="1"] tbody tr.table-success > * {
    background-color: transparent !important;
}

/* Optional: falls du eine eigene Klasse nutzt */
table[data-sp-wh-lines="1"] tbody tr.sp-row-alert > * {
    background-color: transparent !important;
}

/* Aktive Zeile (Cursor/Fokus) */
table[data-sp-wh-lines="1"] tbody tr.sp-row-active > * {
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important; /* helles Blau über Bootstrap Primary */
}

/* Warehouse Process: Bootstrap-Table-Variants komplett neutralisieren */
table[data-sp-wh-lines="1"] tbody tr.table-danger,
table[data-sp-wh-lines="1"] tbody tr.table-warning,
table[data-sp-wh-lines="1"] tbody tr.table-info,
table[data-sp-wh-lines="1"] tbody tr.table-success {
    --bs-table-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
    box-shadow: none !important;
}

    table[data-sp-wh-lines="1"] tbody tr.table-danger > *,
    table[data-sp-wh-lines="1"] tbody tr.table-warning > *,
    table[data-sp-wh-lines="1"] tbody tr.table-info > *,
    table[data-sp-wh-lines="1"] tbody tr.table-success > * {
        background-color: transparent !important;
        box-shadow: none !important;
    }

/* Warehouse: Action-Buttons stabil ausrichten */
.sp-wh-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.sp-wh-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr; /* links/rechts fest */
    gap: 6px;
}

    .sp-wh-actions-row .btn {
        width: 100%; /* gleiche Breite, saubere Kante */
    }

/* Platzhalter nimmt die rechte Spalte ein, wenn "In Case" fehlt */
.sp-wh-actions-ph {
    width: 100%;
    height: 30px; /* ungefähr btn-sm Höhe */
    visibility: hidden;
}

/* Warehouse: Actions sauber 2-zeilig ausrichten (oben Actions, unten Delete) */
.sp-wh-actions-grid {
    display: grid !important;
    grid-template-columns: max-content max-content;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 6px;
    justify-content: end;
    align-items: start;
}

.sp-wh-actions-slot {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: end;
}

/* optional: gleiche Buttonbreite je Slot (macht es ruhiger) */
/*
.sp-wh-actions-slot .btn {
    min-width: 105px;
}
*/

/* ===== Warehouse: Action Buttons immer sauber 2x2 ===== */

table[data-sp-wh-lines="1"] td[data-sp-wh-actions-cell="1"] .sp-wh-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 feste Spalten */
    grid-template-rows: auto auto; /* 2 Zeilen */
    gap: 6px;
    width: 100%;
}

table[data-sp-wh-lines="1"] td[data-sp-wh-actions-cell="1"] .sp-wh-actions-slot {
    min-width: 0;
}

/* Platzhalter hält Slot-Höhe/Spaltenbreite stabil, wenn Button fehlt */
table[data-sp-wh-lines="1"] td[data-sp-wh-actions-cell="1"] .sp-wh-actions-ph {
    display: block;
    width: 100%;
    height: 31px; /* passt zu btn-sm */
    visibility: hidden; /* nimmt Platz ein, ist aber unsichtbar */
}

/* Kategorie-Header in Fehlbestand-Listen */
.sp-cat-row td {
    background: rgba(13, 110, 253, 0.08);
    border-top: 1px solid rgba(13, 110, 253, 0.18);
    border-bottom: 1px solid rgba(13, 110, 253, 0.12);
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.sp-cat-label {
    font-weight: 600;
    color: rgba(13, 110, 253, 0.95);
    font-size: 0.95rem;
}