:root {
    --sidebar-width: 306px;
    --bg-angle-dark: 145deg;
    --bg-angle-light: 145deg;
}

html[data-bs-theme='dark'] {
    --neo-bg-1: #121212;
    --neo-bg-2: #242424;
    --neo-surface: #1a1a1a;
    --neo-text: #e6e6e6;
    --neo-muted: #a9a9a9;
    --neo-shadow-soft: 9px 9px 18px #0b0b0b, -9px -9px 18px #2d2d2d;
    --neo-shadow-inset: inset 5px 5px 10px #0f0f0f, inset -5px -5px 10px #252525;
}

html[data-bs-theme='light'] {
    --neo-bg-1: rgb(248, 248, 248);
    --neo-bg-2: rgb(236, 236, 236);
    --neo-surface: #efefef;
    --neo-text: #191919;
    --neo-muted: #575757;
    --neo-shadow-soft: 9px 9px 18px #d0d0d0, -9px -9px 18px #ffffff;
    --neo-shadow-inset: inset 5px 5px 10px #d8d8d8, inset -5px -5px 10px #ffffff;
}

.app-body,
.auth-body {
    min-height: 100vh;
    color: var(--neo-text);
    background: linear-gradient(var(--bg-angle-dark), var(--neo-bg-1), var(--neo-bg-2));
}

html[data-bs-theme='light'] .app-body,
html[data-bs-theme='light'] .auth-body {
    background: linear-gradient(var(--bg-angle-light), var(--neo-bg-1), var(--neo-bg-2));
}

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
}

.app-sidebar,
.card,
.auth-card,
.content-header {
    background: var(--neo-surface);
    border: 0 !important;
    box-shadow: var(--neo-shadow-soft);
}

.sidebar-logo {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    background: var(--neo-surface);
    box-shadow: var(--neo-shadow-inset);
    color: var(--neo-text);
}

.sidebar-nav .nav-link {
    color: var(--neo-muted);
    border-radius: 0.8rem;
    padding: 0.62rem 0.78rem;
    margin-bottom: 0.22rem;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
    color: var(--neo-text);
    background: var(--neo-surface);
    box-shadow: var(--neo-shadow-inset);
}

.text-secondary,
.small.text-secondary {
    color: var(--neo-muted) !important;
}

.content-header {
    position: sticky;
    top: 0;
    z-index: 1010;
}

.content-body {
    flex: 1;
    overflow: auto;
    padding-bottom: 2rem;
}

.kpi-card {
    min-height: 110px;
}

.form-control,
.form-select,
.code-area,
.table {
    background: var(--neo-surface);
    border: 0;
    box-shadow: var(--neo-shadow-inset);
    color: var(--neo-text);
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 0.2rem rgba(120, 120, 120, 0.16), var(--neo-shadow-inset);
    color: var(--neo-text);
}

.btn {
    border-radius: 12px;
    border: 0;
}

.btn-primary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-info {
    background: var(--neo-surface);
    color: var(--neo-text);
    box-shadow: var(--neo-shadow-soft);
}

.btn:hover,
.btn:focus {
    color: var(--neo-text);
    box-shadow: var(--neo-shadow-inset);
}

.badge.text-bg-success,
.badge.text-bg-danger {
    background: var(--neo-surface) !important;
    color: var(--neo-text) !important;
    box-shadow: var(--neo-shadow-soft);
}

.code-area {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.85rem;
}

.chart-wrap {
    position: relative;
    height: 320px;
}

@media (max-width: 991px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .app-sidebar {
        position: sticky;
        top: 0;
        z-index: 1030;
    }

    .sidebar-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.4rem;
    }

    .sidebar-nav .nav-link {
        margin: 0;
    }
}

.recipe-row-dnd-enabled {
    cursor: move;
}

.recipe-row-dnd-enabled td {
    vertical-align: middle;
}