// ═══════════════════════════════════════════════
// FERMENTY — Components
// ═══════════════════════════════════════════════

// ── Cards ────────────────────────────────────
.fermenty-card {
    background-color: var(--surface-card);
    border: $border-width solid $border-color;
    border-radius: $radius-lg;
    padding: $spacing-lg;
    box-shadow: $shadow-card;

    .card-title {
        font-family: $font-brand;
        font-size: $font-size-lg;
        font-weight: $font-weight-medium;
        color: $text-dark;
        margin-bottom: $spacing-md;
    }
}

// ── Stat cards ───────────────────────────────
.fermenty-stat {
    background-color: $green-pale;
    border-radius: $radius-lg;
    padding: $spacing-lg;

    .stat-label {
        font-size: $font-size-xs;
        font-weight: $font-weight-medium;
        color: $text-muted;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: $spacing-xs;
    }

    .stat-value {
        font-size: $font-size-2xl;
        font-weight: $font-weight-semibold;
        color: $text-dark;
        line-height: 1;
    }

    .stat-sub {
        font-size: $font-size-xs;
        color: $text-hint;
        margin-top: $spacing-xs;
    }

    &.stat-orange {
        background-color: $orange-light;

        .stat-value { color: $orange-text; }
    }

    &.stat-neutral {
        background-color: #F1EFE8;
    }
}

// ── Batch items ──────────────────────────────
.batch-item {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
    padding: $spacing-sm 0;
    border-bottom: $border-width solid $green-pale;

    &:last-child { border-bottom: none; }

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

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

    .batch-info {
        flex: 1;
        min-width: 0;

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

        .batch-day {
            font-size: $font-size-xs;
            color: $text-muted;
        }
    }
}

// ── Progress bar ─────────────────────────────
.fermenty-progress {
    height: 4px;
    background-color: $green-pale;
    border-radius: 4px;
    margin-top: $spacing-xs;
    overflow: hidden;

    .fermenty-progress-bar {
        height: 100%;
        background-color: $green-mid;
        border-radius: 4px;
        transition: width 0.4s ease;

        &.orange { background-color: $orange-main; }
        &.gray   { background-color: #B4B2A9; }
    }
}

// ── Active batch cards ───────────────────────

.batch-card-link {
    display: block;
    padding: $spacing-sm;
    border: $border-width solid $green-pale;
    border-radius: $radius-lg;
    background-color: #fff;
    margin-bottom: $spacing-sm;
    transition: background-color 0.12s ease, transform 0.12s ease;

    &:hover {
        background-color: $green-pale;
        transform: translateY(-1px);
    }

    &:last-child { margin-bottom: 0; }

    .batch-actions { display:flex; align-items:center; }

    .batch-item {
        padding: $spacing-xs;
        background-color: $green-bg;
        border-radius: $radius-sm;
        align-items: center;
    }
}

.batch-timeline-bar {
    height: 6px;
    background-color: $green-pale;
    border-radius: 999px;
    overflow: hidden;
}

.batch-timeline-fill {
    height: 100%;
    background: linear-gradient(90deg, $green-mid 0%, $orange-main 80%, #C00000 100%);
    border-radius: 999px;
    transition: width 0.4s ease;

    &.orange { /* kept for backward compatibility */ }
    &.over { box-shadow: 0 0 0 3px rgba(192,0,0,0.06); }
}

.batch-notifs {
    border-top: $border-width solid $green-pale;
    padding-top: $spacing-sm;
    width: 100%;

    .batch-notif {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: $spacing-sm;
        padding: $spacing-xs 0;
        min-width: 0;

        .batch-notif-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: $orange-main;
            margin-top: 0;
            flex-shrink: 0;
        }

        .batch-notif-text {
            flex: 1;
            min-width: 0;
            color: $text-dark;
            font-size: $font-size-sm;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .batch-notif-time {
            color: $text-muted;
            font-size: $font-size-xs;
            white-space: nowrap;
            flex-shrink: 0;
            margin-left: auto;
        }
    }
}

// ── Badges ───────────────────────────────────
.fermenty-badge {
    display: inline-flex;
    align-items: center;
    font-size: $font-size-xs;
    font-weight: $font-weight-medium;
    padding: 3px $spacing-sm;
    border-radius: $radius-pill;
    white-space: nowrap;

    &.badge-active    { background-color: var(--status-active-bg); color: var(--gold-700); }
    &.badge-warn      { background-color: $orange-light;           color: $orange-text; }
    &.badge-completed { background-color: var(--status-rest-bg);   color: var(--teal-500); }
    &.badge-paused    { background-color: var(--paper-2);          color: var(--ink-500); }
    &.badge-failed    { background-color: var(--status-spoil-bg);  color: var(--rust-500); }
    &.badge-free      { background-color: $green-pale;             color: $green-main; }
    &.badge-premium   { background-color: var(--status-active-bg); color: var(--gold-700); }
}

// ── Notifications ────────────────────────────
.fermenty-notif {
    display: flex;
    gap: $spacing-sm;
    padding: $spacing-sm 0;
    border-bottom: $border-width solid $green-pale;
    align-items: flex-start;

    &:last-child { border-bottom: none; }

    .notif-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: $orange-main;
        margin-top: 5px;
        flex-shrink: 0;

        &.read { background-color: $border-color; }
    }

    .notif-body {
        .notif-text {
            font-size: $font-size-md;
            color: $text-mid;
            line-height: 1.45;
        }

        .notif-time {
            font-size: $font-size-xs;
            color: $text-hint;
            margin-top: 2px;
        }
    }
}

// ── Buttons ──────────────────────────────────
// NOTA: No duplicar border-radius — ya lo sobreescribe Bootstrap via $btn-border-radius

.btn-fermenty-primary {
    background-color: $green-mid;
    color: #fff;
    border: none;
    padding: 8px $spacing-xl;
    font-family: $font-ui;
    font-weight: $font-weight-medium;
    font-size: $font-size-md;
    transition: $transition-base;

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

    &:active { transform: scale(0.98); }
}

.btn-fermenty-outline {
    background-color: transparent;
    color: $green-mid;
    border: $border-width solid $green-mid;
    padding: 8px $spacing-xl;
    font-family: $font-ui;
    font-weight: $font-weight-medium;
    font-size: $font-size-md;
    transition: $transition-base;

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

.btn-fermenty-orange {
    background-color: $orange-main;
    color: #fff;
    border: none;
    padding: 8px $spacing-xl;
    font-family: $font-ui;
    font-weight: $font-weight-medium;
    font-size: $font-size-md;
    transition: $transition-base;

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

.btn-fermenty-ghost {
    background-color: transparent;
    color: $text-muted;
    border: $border-width solid $border-color;
    padding: 7px $spacing-lg;
    font-size: $font-size-sm;
    font-family: $font-ui;
    transition: $transition-base;

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

// ── Forms ────────────────────────────────────
.fermenty-form {
    .form-label {
        font-family: $font-ui;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $text-mid;
        margin-bottom: $spacing-xs;
    }

    .form-control,
    .form-select {
        border: $border-width solid $border-color;
        border-radius: $radius-md;
        font-family: $font-ui;
        font-size: $font-size-md;
        color: $text-dark;
        background-color: #fff;
        padding: 9px $spacing-md;
        transition: $transition-base;

        &:focus {
            border-color: $green-mid;
            box-shadow: 0 0 0 3px rgba($green-mid, 0.12);
            outline: none;
        }

        &::placeholder { color: $text-hint; }
    }

    .invalid-feedback {
        font-size: $font-size-xs;
        color: $orange-main;
    }
}

// ── Step guide ───────────────────────────────
.fermenty-step {
    display: flex;
    gap: $spacing-md;
    padding: $spacing-md 0;
    border-bottom: $border-width solid $green-pale;

    &:last-child { border-bottom: none; }

    .step-number {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: $green-pale;
        color: $green-main;
        font-weight: $font-weight-semibold;
        font-size: $font-size-sm;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        &.active {
            background-color: $green-mid;
            color: #fff;
        }

        &.completed {
            background-color: $green-pale;
            color: $green-mid;
        }

        &.skipped {
            background-color: #F0EEE8;
            color: #888;
        }
    }

    .step-body {
        flex: 1;

        .step-title {
            font-size: $font-size-md;
            font-weight: $font-weight-medium;
            color: $text-dark;
        }

        .step-desc {
            font-size: $font-size-sm;
            color: $text-muted;
            margin-top: 3px;
            line-height: 1.5;
        }
    }
}

// ── AI Panel ─────────────────────────────────
// Panel oscuro para el asistente IA — contraste "avanzado"
.fermenty-ai-panel {
    background-color: $text-dark;
    border-radius: $radius-xl;
    padding: $spacing-lg;
    display: flex;
    align-items: flex-start;
    gap: $spacing-md;

    .ai-icon {
        width: 36px;
        height: 36px;
        border-radius: $radius-md;
        background-color: $orange-main;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: #fff;
        font-size: 1rem;
    }

    .ai-label {
        font-size: $font-size-xs;
        font-weight: $font-weight-semibold;
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.07em;
        margin-bottom: 4px;
    }

    .ai-message {
        font-size: $font-size-md;
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.55;
    }

    .ai-action {
        display: inline-block;
        margin-top: $spacing-sm;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: lighten($orange-main, 22%);
        text-decoration: none;
        border-bottom: 1px solid rgba($orange-main, 0.4);
        transition: $transition-fast;

        &:hover {
            color: #fff;
            border-bottom-color: rgba(255, 255, 255, 0.4);
        }
    }
}