// ═══════════════════════════════════════════════
// FERMENTY — Layout (navbar, sidebar, footer)
// ═══════════════════════════════════════════════

// ── Navbar ───────────────────────────────────
.fermenty-navbar {
    // Dashboard topbar: light, flat, hairline border (Scheme 2 Web Dashboard).
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--border-subtle);
    height: $navbar-height;
    padding: 0 $spacing-xl;
    font-family: $font-ui;

    .navbar-brand {
        color: var(--green-700);
        font-family: $font-brand;
        font-size: $font-size-xl;
        font-weight: $font-weight-semibold;

        .brand-dot { color: var(--accent-bright); }

        &:hover { color: var(--green-700); }
    }

    .nav-link {
        color: var(--text-secondary);
        font-size: $font-size-md;
        transition: $transition-base;
        padding: $spacing-xs $spacing-sm;
        border-radius: $radius-sm;

        &:hover,
        &.active {
            color: var(--green-700);
            background-color: var(--green-050);
        }
    }

    .btn-new-batch {
        background-color: $orange-main;
        color: #fff;
        border: none;
        border-radius: $radius-pill;
        padding: 6px $spacing-lg;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        font-family: $font-ui;
        transition: $transition-base;

        &:hover {
            background-color: $orange-hover;
            color: #fff;
        }
    }

    .dropdown-menu {
        background-color: var(--surface-card);
        border: 1px solid var(--border-subtle);
        box-shadow: var(--shadow-lg);
        border-radius: $radius-md;

        .dropdown-item {
            color: var(--text-secondary);
            font-size: $font-size-md;

            &:hover,
            &:focus {
                color: var(--green-700);
                background-color: var(--green-050);
            }
        }

        .dropdown-divider {
            border-color: var(--border-subtle);
        }
    }

    .navbar-toggler {
        border-color: var(--border-default);
        padding: 4px 8px;
    }

    // Slim dashboard search (desktop)
    .navbar-search {
        position: relative;
        min-width: 280px;

        input {
            width: 100%;
            border: 1.5px solid var(--border-default);
            border-radius: $radius-pill;
            background: var(--bg-canvas);
            padding: 7px 14px 7px 36px;
            font-size: $font-size-sm;
            color: var(--text-primary);

            &:focus { outline: none; border-color: var(--green-500); box-shadow: var(--ring-accent); }
            &::placeholder { color: var(--text-hint); }
        }
        i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 13px; }
    }
}

// ── Mobile navbar ────────────────────────────
@media (max-width: 991.98px) {
    .fermenty-navbar {
        .navbar-collapse {
            background-color: var(--surface-card);
            padding: $spacing-sm;
            border-top: 1px solid var(--border-subtle);
            margin-top: 4px;
            border-radius: 0 0 $radius-md $radius-md;
            box-shadow: var(--shadow-md);
        }

        .nav-link {
            color: var(--text-secondary) !important;
            padding: 10px $spacing-md;
            border-radius: $radius-md;

            &:hover,
            &.active {
                background-color: var(--green-050);
                color: var(--green-700) !important;
            }
        }

        .btn-new-batch {
            display: inline-block;
            margin: $spacing-xs $spacing-sm;
        }
    }

    .navbar-mobile-divider {
        height: 1px;
        background: var(--border-subtle);
        margin: $spacing-xs $spacing-sm;
    }
}

// ── Sidebar ──────────────────────────────────
.fermenty-sidebar {
    width: $sidebar-width;
    min-height: calc(100vh - #{$navbar-height});
    background-color: var(--surface-card);
    border-right: $border-width solid var(--border-subtle);
    padding: $spacing-md 0;
    flex-shrink: 0;
    transition: transform 0.25s ease, width 0.25s ease;

    .sidebar-section-label {
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        color: $text-hint;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: $spacing-md $spacing-lg $spacing-xs;
    }

    .sidebar-item {
        display: flex;
        align-items: center;
        gap: $spacing-sm;
        padding: 9px $spacing-lg;
        font-size: $font-size-md;
        color: $text-muted;
        text-decoration: none;
        transition: $transition-base;
        border-left: 3px solid transparent;
        border-radius: 0 $radius-sm $radius-sm 0;

        &:hover {
            background-color: $green-pale;
            color: $text-dark;
        }

        &.active {
            background-color: $green-pale;
            color: $text-dark;
            font-weight: $font-weight-medium;
            border-left-color: $green-mid;
        }

        .sidebar-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: currentColor;
            opacity: 0.4;
            flex-shrink: 0;
        }

        &.active .sidebar-dot {
            opacity: 1;
            background-color: $green-mid;
        }
    }

    .sidebar-divider {
        height: 1px;
        background-color: var(--border-subtle);
        margin: $spacing-sm 0;
    }

    // API / sensors promo (Scheme 2 Web Dashboard)
    .sidebar-promo {
        margin: auto $spacing-md $spacing-md;
        background: var(--green-800);
        color: var(--text-on-dark);
        border-radius: $radius-lg;
        padding: $spacing-md;

        .sp-icon { color: var(--lime-400); font-size: 1.15rem; }
        .sp-title { font-family: $font-brand; font-weight: $font-weight-bold; font-size: 0.95rem; margin: 8px 0 5px; line-height: 1.25; }
        .sp-text { font-size: 0.75rem; color: rgba(234, 240, 228, 0.7); margin-bottom: 10px; line-height: 1.4; }
    }
}

// Sidebar en móvil — oculto, se muestra con clase JS
@media (max-width: 991.98px) {
    .fermenty-sidebar {
        position: fixed;
        top: $navbar-height;
        left: 0;
        height: calc(100vh - #{$navbar-height});
        z-index: 200;
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);

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

    // Overlay oscuro detrás del sidebar móvil
    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        top: $navbar-height;
        background: rgba(0, 0, 0, 0.35);
        z-index: 199;

        &.active { display: block; }
    }
}

// ── Page wrapper ─────────────────────────────
.fermenty-wrapper {
    display: flex;
    min-height: calc(100vh - #{$navbar-height});
}

.fermenty-main {
    flex: 1;
    padding: $spacing-lg;
    background-color: $green-page;
    min-width: 0;  // evita overflow en flexbox

    @media (max-width: 576px) {
        padding: $spacing-lg $spacing-md;
    }
}

// ── Premium bar ──────────────────────────────
.fermenty-premium-bar {
    background-color: $orange-light;
    border-top: $border-width solid $orange-border;
    padding: $spacing-xs $spacing-xl;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $spacing-md;

    p {
        font-size: $font-size-sm;
        color: $orange-text;
        margin: 0;
    }

    .btn-premium {
        background-color: $orange-main;
        color: #fff;
        border: none;
        border-radius: $radius-pill;
        padding: 5px $spacing-md;
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        font-family: $font-ui;
        transition: $transition-base;
        white-space: nowrap;
        flex-shrink: 0;

        &:hover {
            background-color: $orange-hover;
            color: #fff;
        }
    }

    @media (max-width: 576px) {
        padding: $spacing-xs $spacing-md;

        p { font-size: $font-size-xs; }
    }
}

// ── Footer ───────────────────────────────────
.fermenty-footer {
    background-color: $green-dark;
    padding: $spacing-md $spacing-xl;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $spacing-md;
    flex-wrap: wrap;

    p {
        font-size: $font-size-sm;
        color: rgba(255, 255, 255, 0.45);
        margin: 0;
    }

    a {
        color: $green-light;
        text-decoration: none;

        &:hover { color: #fff; }
    }
}

// ── Flash messages ───────────────────────────
.fermenty-flash {
    padding: $spacing-sm $spacing-xl;

    @media (max-width: 576px) {
        padding: $spacing-sm $spacing-md;
    }

    .alert {
        border-radius: $radius-md;
        font-size: $font-size-md;
        border: $border-width solid transparent;

        &.alert-success {
            background-color: $green-pale;
            color: $text-dark;
            border-color: $border-color;
        }

        &.alert-danger {
            background-color: #FDECEA;
            color: #7A1A1A;
            border-color: #F5B8B8;
        }

        &.alert-warning {
            background-color: $orange-light;
            color: $orange-text;
            border-color: $orange-border;
        }
    }
}

// ── Scroll to top ────────────────────────────
#scrollTop {
    position: fixed;
    bottom: $spacing-xl;
    right: $spacing-lg;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: $green-main;
    color: #fff;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    transition: $transition-base;
    z-index: 999;

    &:hover {
        background: $green-mid;
        transform: translateY(-2px);
    }

    // En móvil, sube para no tapar la nav bottom si la hubiera
    @media (max-width: 576px) {
        bottom: $spacing-lg;
        right: $spacing-md;
    }
}