/* StagePilot UI Theme - "Skyline Warm"
   Warmes Blau + Blaugrau Sidebar + Weißflächen
   Bootstrap 5.3 (CSS variables) friendly
*/

/* =========================
   THEME VARIABLES
   ========================= */
:root,
[data-bs-theme="light"] {
    --sp-primary: #3f6fe8;
    --sp-primary-600: #315dd2;
    --sp-primary-100: #edf3ff;
    --sp-bg: #f6f8fc;
    --sp-surface: #ffffff;
    --sp-surface-2: #f1f4fa;
    --sp-border: #dde5f2;
    --sp-border-2: #cfd9ea;
    --sp-text: #0f1a2a;
    --sp-muted: #5e6b82;
    --sp-sidebar-bg: #eef3fb;
    --sp-sidebar-border: #d7e2f4;
    --sp-radius: 14px;
    --sp-shadow-sm: 0 1px 10px rgba(20, 34, 60, .06);
    --sp-shadow-md: 0 8px 30px rgba(20, 34, 60, .10);
    /* Bootstrap overrides */
    --bs-body-bg: var(--sp-bg);
    --bs-body-color: var(--sp-text);
    --bs-secondary-color: var(--sp-muted);
    --bs-border-color: var(--sp-border);
    --bs-primary: var(--sp-primary);
    --bs-primary-rgb: 63, 111, 232;
    --bs-link-color: var(--sp-primary);
    --bs-link-hover-color: var(--sp-primary-600);
    --bs-border-radius: var(--sp-radius);
    --bs-border-radius-sm: 10px;
    --bs-border-radius-lg: 18px;
    --bs-focus-ring-color: rgba(63, 111, 232, .25);
}

/* =========================
   BASE
   ========================= */
html, body {
    background: var(--sp-bg);
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

.container-fluid, .container {
    max-width: 1600px;
}

/* =========================
   CARDS
   ========================= */
.card {
    border: 1px solid var(--sp-border);
    box-shadow: var(--sp-shadow-sm);
    background: var(--sp-surface);
}

.card-header,
.card-footer {
    background: linear-gradient(180deg, var(--sp-surface), var(--sp-surface-2));
    border-color: var(--sp-border);
}

/* =========================
   BUTTONS
   ========================= */
.btn {
    border-radius: 12px;
}

.btn-primary {
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(63, 111, 232, .18);
    position: relative;
    isolation: isolate;
}

    .btn-primary:hover {
        box-shadow: 0 10px 22px rgba(63, 111, 232, .24);
        transform: translateY(-1px);
        transition: transform .10s ease, box-shadow .12s ease;
    }

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

    .btn-primary::after {
        content: "";
        position: absolute;
        inset: -8px;
        border-radius: calc(12px + 10px);
        background: radial-gradient(circle at 30% 30%, rgba(63, 111, 232, 0.35), rgba(63, 111, 232, 0.00) 60%);
        opacity: 0;
        transition: opacity .18s ease;
        z-index: -1;
        filter: blur(10px);
    }

    .btn-primary:hover::after,
    .btn-primary:focus-visible::after {
        opacity: 1;
    }

.btn-outline-primary {
    border-color: rgba(63, 111, 232, .40);
}

.btn-outline-secondary {
    border-color: var(--sp-border-2);
}

/* =========================
   FORMS
   ========================= */
.form-control, .form-select {
    border-color: var(--sp-border);
    border-radius: 12px;
    background: var(--sp-surface);
}

    .form-control:focus, .form-select:focus {
        border-color: rgba(63, 111, 232, .55);
        box-shadow: 0 0 0 .25rem rgba(63, 111, 232, .12);
    }

.form-text {
    color: var(--sp-muted);
}

/* =========================
   TABLES
   ========================= */
.table {
    --bs-table-bg: transparent;
}

    .table thead th {
        color: var(--sp-muted);
        font-weight: 600;
        border-bottom: 1px solid var(--sp-border);
    }

    .table tbody tr {
        border-color: var(--sp-border);
    }

.table-hover tbody tr:hover {
    background: rgba(63, 111, 232, .05);
}

/* =========================
   BADGES
   ========================= */
.badge {
    border-radius: 999px;
    font-weight: 600;
}

    .badge.text-bg-light {
        background: rgba(15, 26, 42, .06) !important;
        color: var(--sp-text) !important;
    }

/* =========================
   TOPBAR / NAV
   ========================= */
.navbar, .sp-topbar {
    background: var(--sp-surface) !important;
    border-bottom: 1px solid var(--sp-border);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: .02em;
}

.nav-link {
    border-radius: 10px;
}

    .nav-link:hover {
        background: rgba(63, 111, 232, .06);
    }

    .nav-link.active {
        background: rgba(63, 111, 232, .12);
        color: var(--sp-primary) !important;
    }

/* Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--sp-border);
}

    .nav-tabs .nav-link {
        border: 0;
        color: var(--sp-muted);
        padding: .55rem .9rem;
    }

        .nav-tabs .nav-link.active {
            color: var(--sp-text);
            background: var(--sp-surface);
            box-shadow: inset 0 -2px 0 var(--sp-primary);
        }

/* =========================
   MODALS
   ========================= */
.modal-content {
    border: 1px solid var(--sp-border);
    border-radius: 18px;
    box-shadow: var(--sp-shadow-md);
}

.modal-header {
    background: linear-gradient(180deg, var(--sp-surface), var(--sp-surface-2));
    border-bottom: 1px solid var(--sp-border);
}

.modal-footer {
    border-top: 1px solid var(--sp-border);
}

/* =========================
   SIDEBAR
   ========================= */
.sp-sidebar {
    background: var(--sp-sidebar-bg) !important;
    border-right: 1px solid var(--sp-sidebar-border) !important;
}

    .sp-sidebar .nav-link {
        color: var(--sp-text);
        position: relative;
        padding-left: 14px;
    }

        .sp-sidebar .nav-link:hover {
            background: rgba(63, 111, 232, .08);
        }

        .sp-sidebar .nav-link.active {
            background: rgba(63, 111, 232, .14);
            color: var(--sp-primary) !important;
            font-weight: 600;
        }

        .sp-sidebar .nav-link::before {
            content: "";
            position: absolute;
            left: 6px;
            top: 8px;
            bottom: 8px;
            width: 4px;
            border-radius: 999px;
            background: transparent;
            opacity: 0;
            transition: opacity .12s ease, background-color .12s ease;
        }

        .sp-sidebar .nav-link.active::before {
            background: var(--sp-primary);
            opacity: 1;
        }

        .sp-sidebar .nav-link:hover::before {
            background: rgba(63, 111, 232, .45);
            opacity: 1;
        }

    .sp-sidebar .text-muted {
        color: var(--sp-muted) !important;
    }

/* =========================================================
   POSITIONS UI (Katalog links / Positionsbaum rechts)
   ========================================================= */

/* Grid */
.sp-positions-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
}

@media (max-width: 992px) {
    .sp-positions-grid {
        grid-template-columns: 1fr;
    }
}

/* Scrollflächen */
.sp-positions-scroll {
    max-height: calc(100vh - 260px);
    overflow: auto;
}

/* Accordion (WICHTIG: ID passt zu deinem HTML: spCatalogAcc) */
#spCatalogAcc .accordion-item {
    border: 0;
    background: transparent;
}

#spCatalogAcc .accordion-button {
    padding: .55rem .75rem;
    border-radius: 12px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

    #spCatalogAcc .accordion-button:not(.collapsed) {
        background: rgba(255,255,255,.94);
    }

    #spCatalogAcc .accordion-button:focus {
        box-shadow: 0 0 0 .2rem rgba(63,111,232,.14);
    }

#spCatalogAcc .accordion-body {
    padding: .5rem;
}

/* ===== Catalog Tree (Warengruppen etc.) ===== */
.sp-cat-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sp-cat-li {
    margin: 0;
}

/* Zeile: soll klickbar + dragbar sein */
.sp-cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 12px;
    cursor: grab; /* zeigt Drag */
    user-select: none;
    transition: background .12s ease, box-shadow .12s ease;
}

    .sp-cat-row:active {
        cursor: grabbing;
    }

    .sp-cat-row:hover {
        background: rgba(63,111,232,.08);
    }

.sp-cat-caret {
    width: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    justify-content: center;
    opacity: .82;
    color: #64748b;
}

.sp-cat-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-cat-children {
    list-style: none;
    padding-left: 18px;
    margin: 0;
    display: none;
}

    .sp-cat-children.open {
        display: block;
    }

/* Offen/geschlossen deutlich sichtbar */
.sp-cat-li.is-open > .sp-cat-row {
    background: rgba(40, 90, 200, .10);
    box-shadow: inset 3px 0 0 rgba(40, 90, 200, .55);
}

/* ===== Dropzones ===== */

/* große Root-Dropzone (rechts) */
#sp-positions-tree {
    border-radius: 14px;
    min-height: 240px;
    padding: 10px;
    border: 1px dashed rgba(0,0,0,.18);
    background: rgba(255,255,255,.65);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

/* kleine Dropzones unter einer Position */
[data-sp-dropzone="1"] {
    border-radius: 12px;
    min-height: auto;
    border: 1px dashed rgba(0,0,0,.18);
    background: rgba(255,255,255,.75);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

    /* Dragover (einmal, sauber) */
    #sp-positions-tree.dragover,
    [data-sp-dropzone="1"].dragover {
        border-color: rgba(40, 90, 200, .55) !important;
        background: rgba(40, 90, 200, .06) !important;
        box-shadow: 0 14px 34px rgba(0,0,0,.10), 0 0 22px rgba(40, 90, 200, .12);
    }

/* Positions tree basic look */
.sp-pos-tree {
    list-style: none;
    margin: 0;
    padding-left: 14px;
}

.sp-pos-node {
    margin: 8px 0;
}

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

/* Nimmt Platz ein, ist aber unsichtbar (für Service-Discount-Spalte) */
.sp-pos-placeholder {
    visibility: hidden;
    pointer-events: none;
}

    /* optional: falls Inputs trotzdem minimal Höhe beeinflussen sollen */
    .sp-pos-placeholder input {
        visibility: hidden;
    }

.sp-pos-placeholder {
    visibility: hidden;
    pointer-events: none;
}

    .sp-pos-placeholder input {
        visibility: hidden;
    }

/* Drag “Badge” mit Titel */
.sp-drag-ghost {
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: rgba(20, 80, 160, .92);
    color: #fff;
    font-size: .85rem;
    box-shadow: 0 8px 22px rgba(0,0,0,.22);
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Row Drop Styles:
   before/after hast du vermutlich schon als Linie –
   drop-into ist der "Focus" beim Einhängen als Kind */
.sp-pos-row.drop-into {
    background: rgba(var(--bs-primary-rgb), .10);
    outline: 2px solid rgba(var(--bs-primary-rgb), .35);
    outline-offset: -2px;
    border-radius: .5rem;
}

.sp-supplier-picker .list-group-item {
    cursor: pointer;
}

    .sp-supplier-picker .list-group-item:hover {
        background: rgba(0,0,0,.04);
    }

/* Action-Spalte generell etwas vom Preis weg schieben */
.sp-pos-row .sp-pos-col-actions {
    padding-left: 14px !important; /* Abstand zur Preis-Spalte */
    gap: 8px !important;
    align-items: center !important;
}

    /* Nur das Notiz/Info-Icon noch ein Stück weiter weg */
    .sp-pos-row .sp-pos-col-actions [data-sp-pos-note-toggle="1"] {
        margin-left: 6px !important;
    }

    /* Optional: auch der Papierkorb etwas Luft */
    .sp-pos-row .sp-pos-col-actions [data-sp-pos-delete="1"] {
        margin-left: 2px !important;
    }

/* Preis-Spalte rechts etwas Innenabstand geben */
.sp-pos-row .sp-pos-col-total {
    padding-right: 12px !important;
}

/* Info-Indikator (gelb) */
.sp-note-indicator {
    background: #ffe9a8;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 999px;
    line-height: 1;
    font-weight: 700;
    font-size: 12px;
    padding: 4px 7px;
    color: #5a4a00;
}

/* bisschen Abstand zum Papierkorb */
.sp-pos-col-actions .sp-note-indicator {
    margin-right: 6px;
}