// ═══════════════════════════════════════════════
// FERMENTY — Batches
// ═══════════════════════════════════════════════

// ── Filtros ──────────────────────────────────
.batch-filter-btn {
    padding: 6px $spacing-md;
    border-radius: $radius-pill;
    font-size: $font-size-sm;
    font-weight: $font-weight-medium;
    color: $text-muted;
    text-decoration: none;
    border: $border-width solid $border-color;
    background: #fff;
    transition: $transition-base;

    &:hover {
        border-color: $border-strong;
        color: $text-dark;
    }

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

// ── Batch cards ──────────────────────────────
.batch-card {
    background: #fff;
    border: $border-width solid $border-color;
    border-radius: $radius-lg;
    padding: $spacing-lg;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    transition: $transition-base;

    &:hover {
        border-color: $border-strong;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba($green-main, 0.07);
    }

    // Estado visual via border izquierdo
    &.batch-card-active    { border-left: 3px solid $green-mid; }
    &.batch-card-completed { border-left: 3px solid #3A8FA8; }
    &.batch-card-paused    { border-left: 3px solid #B4B2A9; opacity: 0.8; }
    &.batch-card-failed    { border-left: 3px solid $orange-main; opacity: 0.75; }
}

.batch-card-header {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
}

.batch-card-icon {
    width: 40px;
    height: 40px;
    border-radius: $radius-md;
    background: $green-pale;
    color: $green-main;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

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

.batch-card-name {
    font-family: $font-brand;
    font-size: $font-size-lg;
    font-weight: $font-weight-medium;
    color: $text-dark;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.batch-card-type {
    font-size: $font-size-sm;
    color: $text-muted;
}

.batch-card-progress {
    .batch-card-day {
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $text-muted;
    }
}

.batch-card-step {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    background: $green-bg;
    border-radius: $radius-md;
    padding: $spacing-xs $spacing-md;

    .batch-card-step-name {
        font-size: $font-size-sm;
        color: $text-mid;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

#paso-actual {
    scroll-margin-top: #{$navbar-height + 14px};
}

.batch-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: $spacing-sm;
    border-top: $border-width solid $green-pale;

    .batch-card-date {
        font-size: $font-size-xs;
        color: $text-hint;
    }

    .batch-card-rating {
        font-size: $font-size-sm;
        color: $orange-main;
        font-weight: $font-weight-medium;
    }
}

// ── Step highlight ────────────────────────────
.step-active {
    background: $green-bg;
    border-radius: $radius-md;
    padding: $spacing-sm;
    margin: 0 -#{$spacing-sm};
}

// ── Back button ──────────────────────────────
.btn-back {
    font-size: $font-size-sm;
    color: $text-muted;
    text-decoration: none;
    transition: $transition-base;

    &:hover { color: $green-mid; }
}

// ── Ferment selector ─────────────────────────
.ferment-selector-card {
    display: block;
    cursor: pointer;

    .ferment-selector-input { display: none; }

    .ferment-selector-body {
        background: #fff;
        border: $border-width solid $border-color;
        border-radius: $radius-lg;
        padding: $spacing-md;
        text-align: center;
        transition: $transition-base;

        &:hover { border-color: $border-strong; }
    }

    &.selected .ferment-selector-body,
    .ferment-selector-input:checked ~ .ferment-selector-body {
        border-color: $green-mid;
        background: $green-pale;
        border-width: 2px;
    }

    .ferment-selector-letter {
        width: 44px;
        height: 44px;
        border-radius: $radius-md;
        background: $green-pale;
        color: $green-main;
        font-size: 1.2rem;
        font-weight: $font-weight-semibold;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto $spacing-sm;
    }

    &.selected .ferment-selector-letter,
    .ferment-selector-input:checked ~ .ferment-selector-body .ferment-selector-letter {
        background: $green-mid;
        color: #fff;
    }

    .ferment-selector-name {
        font-size: $font-size-sm;
        font-weight: $font-weight-semibold;
        color: $text-dark;
        margin-bottom: 2px;
    }

    .ferment-selector-days {
        font-size: $font-size-xs;
        color: $text-muted;
    }
}

// ── Paginación ───────────────────────────────
.pagination {
    gap: $spacing-xs;

    .page-link {
        border-radius: $radius-md !important;
        border: $border-width solid $border-color;
        color: $text-muted;
        font-family: $font-ui;
        font-size: $font-size-sm;
        padding: 6px 12px;
        transition: $transition-base;

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

    .page-item.active .page-link {
        background: $green-mid;
        border-color: $green-mid;
        color: #fff;
    }

    .page-item.disabled .page-link { opacity: 0.4; }
}

// ── Activity card ────────────────────────────
.batch-activity-card {
    @media (min-width: 1200px) {
        position: sticky;
        top: #{$navbar-height + 24px};
        max-height: calc(100vh - #{$navbar-height + 40px});
        overflow-y: auto;
    }

    .batch-activity-row {
        display: block;
        width: 100%;
        padding: 8px 10px;
        border-radius: $radius-md;
        text-decoration: none;
        margin-bottom: 6px;
        border: $border-width solid transparent;
        transition: $transition-base;

        &:hover {
            transform: translateY(-1px);
            border-color: $border-color;
        }

        .batch-activity-row-title {
            display: block;
            color: $text-dark;
            font-size: $font-size-sm;
            font-weight: $font-weight-medium;
            line-height: 1.35;
            word-break: break-word;
        }

        .batch-activity-row-time {
            display: block;
            color: $text-hint;
            font-size: $font-size-xs;
            margin-top: 3px;
        }

        &.batch-activity-row-log          { background: #FFF5EE; }
        &.batch-activity-row-event        { background: #EEF9F2; }
        &.batch-activity-row-notification { background: #EEF0FF; }
    }
}

.batch-activity-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;

    .batch-activity-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: $font-size-xs;
        color: $text-muted;
    }

    .batch-activity-legend-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;

        &.log          { background: $orange-main; }
        &.event        { background: $green-mid; }
        &.notification { background: #6B8FE8; }
    }
}