/* Surface and hero layout */

:root {
    --craft-card-radius: var(--bs-border-radius-xl, 1.25rem);
    --craft-hero-shadow: var(--bs-box-shadow-lg, 0 1.5rem 3rem rgb(0 0 0 / 20%));
    --craft-hero-bg: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.92) 0%,
        rgba(var(--bs-secondary-rgb, var(--bs-primary-rgb)), 0.85) 100%
    );
    --craft-hero-fg: var(--bs-light, #f8f9fa);
    --craft-hero-muted: rgba(var(--bs-light-rgb), 0.75);
    --craft-glass-bg: rgba(var(--bs-light-rgb), 0.12);
    --craft-glass-border: rgba(var(--bs-light-rgb), 0.28);
    --craft-glass-shadow: 0 20px 48px -18px rgb(17 24 39 / 45%);
    --craft-warning-bg: var(--bs-warning-bg-subtle, rgba(var(--bs-warning-rgb), 0.16));
    --craft-warning-border: var(--bs-warning-border-subtle, rgba(var(--bs-warning-rgb), 0.38));
    --craft-warning-text: var(--bs-warning-text-emphasis, var(--bs-warning));
    --craft-cta-gradient: linear-gradient(
        135deg,
        rgba(var(--bs-warning-rgb), 0.9),
        rgba(var(--bs-danger-rgb), 0.85)
    );
}

[data-bs-theme="dark"] {
    --craft-hero-shadow: 0 1.5rem 3rem rgb(0 0 0 / 45%);
    --craft-hero-muted: rgba(var(--bs-light-rgb), 0.65);
    --craft-glass-bg: rgba(var(--bs-light-rgb), 0.18);
    --craft-glass-border: rgba(var(--bs-light-rgb), 0.35);
    --craft-glass-shadow: 0 22px 52px -18px rgb(0 0 0 / 65%);
}

.craft-bp-surface {
    background: var(--bs-body-bg);
    min-height: 100vh;
}

.craft-hero {
    background: var(--craft-hero-bg);
    border-radius: var(--craft-card-radius);
    box-shadow: var(--craft-hero-shadow);
    color: var(--craft-hero-fg);
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem);
}

.dev-alert {
    border-radius: calc(var(--craft-card-radius) - 0.35rem);
    border: 1px solid var(--craft-warning-border);
    background: var(--craft-warning-bg);
    color: var(--craft-warning-text);
    box-shadow: 0 10px 24px rgba(var(--bs-warning-rgb), 0.18);
}

.dev-alert i {
    color: rgba(var(--bs-warning-rgb), 0.9);
}

.craft-hero .header-bg {
    color: rgba(var(--bs-light-rgb), 0.22);
    font-size: clamp(6rem, 12vw, 8rem);
}

[data-bs-theme="dark"] .craft-hero .header-bg {
    color: rgba(var(--bs-light-rgb), 0.18);
}

.craft-hero__content {
    position: relative;
    z-index: 1;
}

.blueprint-icon {
    width: 68px;
    height: 68px;
    border-radius: calc(var(--craft-card-radius) - 0.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--bs-light-rgb), 0.18);
    border: 1px solid rgba(var(--bs-light-rgb), 0.35);
    backdrop-filter: blur(6px);
}

.blueprint-icon img {
    width: 60px;
    height: 60px;
    border-radius: calc(var(--craft-card-radius) - 0.75rem);
    object-fit: cover;
    background: rgba(var(--bs-light-rgb), 0.25);
}

.blueprint-icon .fallback {
    display: none;
    align-items: center;
    justify-content: center;
    color: rgba(var(--bs-light-rgb), 0.9);
    font-size: 1.5rem;
    width: 100%;
    height: 100%;
}

.hero-eyebrow {
    letter-spacing: 0.18em;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--craft-hero-muted);
}

.hero-title i {
    color: rgba(var(--bs-light-rgb), 0.82);
}

.hero-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: var(--craft-hero-fg);
}

.hero-subtitle {
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    color: var(--craft-hero-muted);
}

.hero-chip-row {
    gap: 0.65rem;
}

.hero-headline {
    flex-wrap: wrap;
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(var(--bs-light-rgb), 0.12);
    border: 1px solid rgba(var(--bs-light-rgb), 0.24);
    color: rgba(var(--bs-light-rgb), 0.92);
    backdrop-filter: blur(6px);
    font-size: 0.85rem;
    flex: 1 1 180px;
}

.hero-chip i {
    color: rgba(var(--bs-light-rgb), 0.95);
}

.hero-chip-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: rgba(var(--bs-light-rgb), 0.7);
}

.hero-chip-value {
    font-weight: 700;
    color: var(--craft-hero-fg);
}

.hero-kpi-row {
    gap: 1.5rem;
}

.hero-kpi {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 1.1rem;
    border-radius: 1rem;
    background: rgba(var(--bs-light-rgb), 0.14);
    border: 1px solid rgba(var(--bs-light-rgb), 0.25);
    min-width: 160px;
}

.hero-kpi.positive {
    border-color: rgba(var(--bs-success-rgb), 0.55);
    background: linear-gradient(
        135deg,
        rgba(var(--bs-primary-rgb), 0.18),
        rgba(var(--bs-success-rgb), 0.24)
    );
}

.hero-kpi.negative {
    border-color: rgba(var(--bs-danger-rgb), 0.55);
    background: linear-gradient(
        135deg,
        rgba(var(--bs-warning-rgb), 0.2),
        rgba(var(--bs-danger-rgb), 0.24)
    );
}

.hero-kpi-label {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.65rem;
    color: rgba(var(--bs-light-rgb), 0.7);
}

.hero-kpi-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--craft-hero-fg);
}

.glass-panel {
    background: var(--craft-glass-bg);
    border-radius: 1.25rem;
    border: 1px solid var(--craft-glass-border);
    backdrop-filter: blur(12px);
    box-shadow: var(--craft-glass-shadow);
    color: rgba(var(--bs-light-rgb), 0.95);
}

.hero-panel-title {
    letter-spacing: 0.18em;
}

.hero-action-buttons .btn {
    border-radius: 999px;
    font-weight: 600;
    border-width: 1px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-action-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}

#recalcNowBtn {
    background: var(--craft-cta-gradient);
    border: none;
}

#recalcNowBtn.pulse {
    animation: recalcPulse 0.6s ease;
}

@keyframes recalcPulse {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    }
    50% {
        transform: translateY(-2px) scale(1.05);
        box-shadow: 0 18px 35px rgba(249, 115, 22, 0.35);
    }
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    }
}

#simulationStatus {
    font-weight: 600;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
}

#bpTabs-loading {
    border-radius: 1.25rem;
    border: 1px solid rgb(250 204 21 / 40%) !important;
    background: linear-gradient(135deg, #fff7d6, #fee4a4) !important;
    box-shadow: 0 14px 32px rgb(250 204 21 / 35%);
}

.blueprint-main {
    position: relative;
    z-index: 2;
}

@media (max-width: 991.98px) {
    .craft-hero__panel {
        margin-top: 1rem;
    }

    .hero-headline {
        flex-direction: column;
    }

    .hero-kpi {
        min-width: calc(50% - 0.75rem);
    }

    .hero-chip {
        flex: 1 1 calc(50% - 0.75rem);
        justify-content: flex-start;
    }

    .blueprint-tabs {
        gap: 0.75rem !important;
    }

    .blueprint-tab {
        min-height: 86px;
        padding: 0.7rem 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .hero-chip {
        flex: 1 1 100%;
    }

    .hero-kpi {
        min-width: 100%;
    }

    .blueprint-tabs {
        gap: 0.6rem !important;
        padding-bottom: 0.25rem;
    }

    .blueprint-tab {
        min-height: 80px;
        padding: 0.65rem 0.75rem;
    }

    .blueprint-tab .tab-title {
        font-size: 0.95rem;
    }

    .blueprint-tab .tab-subtitle {
        font-size: 0.65rem;
    }
}

/* Enhanced tree styling */
details {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--bs-border-color);
}

details summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

details summary:hover {
    background-color: var(--bs-secondary-bg);
}

.summary-icon i {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}

details[open] summary .summary-icon i {
    transform: rotate(90deg);
}

/* Blueprint navigation */
.blueprint-tabs {
    gap: 1rem !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 0.35rem;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.blueprint-tab {
    background: var(--bs-body-bg);
    border-radius: 1.25rem;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    min-height: 96px;
    box-shadow: 0 10px 24px rgb(15 23 42 / 10%);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    flex: 0 0 auto;
    width: auto;
}

.blueprint-tab:focus {
    outline: 2px solid rgba(79, 140, 255, 0.4);
    outline-offset: 2px;
}

.blueprint-tab .tab-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(79, 140, 255, 0.14);
    color: #3b82f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.blueprint-tab .tab-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.2;
}

.blueprint-tab .tab-title {
    font-weight: 600;
    font-size: 1rem;
}

.blueprint-tab .tab-subtitle {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.blueprint-tab:not(.active):hover {
    transform: translateY(-4px);
    border-color: rgba(79, 140, 255, 0.4);
    box-shadow: 0 16px 32px rgb(15 23 42 / 14%);
}

.blueprint-tab.active {
    color: #fff;
    box-shadow: 0 18px 36px rgb(79 140 255 / 30%);
    transform: translateY(-3px);
    border-color: transparent;
}

.blueprint-tab.active .tab-subtitle {
    color: rgba(255, 255, 255, 0.75);
}

.blueprint-tab.active .tab-icon {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

#materials-tab.blueprint-tab .tab-icon { background: rgba(2, 132, 199, 0.13); color: #0369a1; }
#tree-tab.blueprint-tab .tab-icon { background: rgba(22, 163, 74, 0.14); color: #15803d; }
#cycles-tab.blueprint-tab .tab-icon { background: rgba(100, 116, 139, 0.14); color: #475569; }
#financial-tab.blueprint-tab .tab-icon { background: rgba(251, 191, 36, 0.18); color: #b45309; }
#needed-tab.blueprint-tab .tab-icon { background: rgba(2, 132, 199, 0.13); color: #0369a1; }
#config-tab.blueprint-tab .tab-icon { background: rgba(220, 38, 38, 0.16); color: #b91c1c; }

#materials-tab.blueprint-tab.active { background: linear-gradient(135deg, #0284c7, #38bdf8); }
#tree-tab.blueprint-tab.active { background: linear-gradient(135deg, #16a34a, #4ade80); }
#cycles-tab.blueprint-tab.active { background: linear-gradient(135deg, #334155, #64748b); }
#financial-tab.blueprint-tab.active { background: linear-gradient(135deg, #facc15, #fbbf24); color: #1f2937; }
#financial-tab.blueprint-tab.active .tab-title,
#financial-tab.blueprint-tab.active .tab-subtitle,
#financial-tab.blueprint-tab.active .tab-icon { color: #1f2937; }
#needed-tab.blueprint-tab.active { background: linear-gradient(135deg, #0ea5e9, #38bdf8); }
#config-tab.blueprint-tab.active { background: linear-gradient(135deg, #dc2626, #fb7185); }
#financial-tab.blueprint-tab.active .tab-icon {
    background: rgba(255, 255, 255, 0.32);
}

/* Tab intro cards */
.card-intro {
    background: linear-gradient(135deg, rgba(241, 245, 249, 0.9), rgba(255, 255, 255, 0.95));
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    border-radius: 1.1rem !important;
}

.card-intro .card-body {
    padding: 1.25rem 1.5rem;
}

.tab-intro-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.tab-intro h3 {
    letter-spacing: 0.1em;
}

/* Harmonisation des backgrounds pour chaque onglet CraftBP */

#tab-materials .card,
#tab-tree .card,
#tab-cycles .card,
#tab-financial .card,
#tab-needed .card,
#tab-config .card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgb(15 23 42 / 12%);
}

/* Card headers avec les couleurs correspondantes aux nav-items mais plus claires */
#tab-materials .card-header {
    background: linear-gradient(90deg, #38bdf8 0%, #7dd3fc 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

#tab-tree .card-header {
    background: linear-gradient(90deg, #4ade80 0%, #86efac 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

#tab-cycles .card-header {
    background: linear-gradient(90deg, #94a3b8 0%, #cbd5e1 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

#tab-financial .card-header {
    background: linear-gradient(90deg, #fcd34d 0%, #fde68a 100%) !important;
    color: #000 !important;
    border-bottom: none !important;
}

#tab-needed .card-header {
    background: linear-gradient(90deg, #38bdf8 0%, #7dd3fc 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

#tab-config .card-header {
    background: linear-gradient(90deg, #fb7185 0%, #fca5a5 100%) !important;
    color: #fff !important;
    border-bottom: none !important;
}

/* Financial tab column width standardization */
#tab-financial .table {
    table-layout: fixed;
    width: 100%;
}

input.real-price.is-manual,
input.sale-price-unit.is-manual {
    background: #fff7ed;
    border-color: #fb923c !important;
    box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.18);
    color: #9a3412;
}

#tab-financial tr.has-manual {
    background: rgba(251, 191, 36, 0.11);
}

#tab-financial tr.has-manual td {
    position: relative;
}

#tab-financial tr.has-manual td:first-child::before {
    content: "Manual";
    position: absolute;
    top: -0.6rem;
    left: 0;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: rgba(251, 191, 36, 0.9);
    color: #78350f;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(180, 83, 9, 0.22);
}

#tab-financial .table th,
#tab-financial .table td {
    width: 20%; /* 5 colonnes = 20% chacune */
    word-wrap: break-word;
    overflow-wrap: break-word;
    vertical-align: middle;
}

#tab-financial .table thead th {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

/* Ajustement spécifique pour la première colonne (nom des items) qui peut être plus large */
#tab-financial .table th:first-child,
#tab-financial .table td:first-child {
    width: 30%;
    min-width: 200px; /* Largeur minimale pour les noms longs */
}

/* Les autres colonnes se partagent l'espace restant */
#tab-financial .table th:not(:first-child),
#tab-financial .table td:not(:first-child) {
    width: 17.5%; /* (100% - 30%) / 4 = 17.5% */
}

/* Style pour les badges de nom d'item */
#tab-financial .badge {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    word-break: break-word;
    line-height: 1.2;
}

/* Amélioration pour les badges avec du texte très long */
#tab-financial .badge:hover {
    white-space: normal;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    z-index: 1000;
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Assurer que le tableau reste lisible avec les longs noms */
#tab-financial .table-responsive {
    overflow-x: auto;
    min-height: 200px;
}

/* Responsive behavior pour les petits écrans */
@media (max-width: 768px) {
    #tab-financial .table {
        table-layout: auto; /* Retour au comportement auto sur mobile */
    }

    #tab-financial .table th,
    #tab-financial .table td {
        width: auto;
        min-width: 80px;
    }
}

/* Production cycles tab enhancements */
#tab-cycles .cycles-enhanced {
    background: #fefefe;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

#tab-cycles .cycles-overview {
    background: linear-gradient(135deg, rgba(148, 163, 184, 0.15), rgba(148, 163, 184, 0));
}

#tab-cycles .cycles-stat-tile {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#tab-cycles .cycles-stat-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

#tab-cycles .cycles-stat-label {
    letter-spacing: 0.08em;
    font-size: 0.7rem;
}

#tab-cycles .cycles-stat-value {
    font-size: 1.85rem;
    font-weight: 700;
    color: #1f2937;
}

#tab-cycles .cycles-stat-meta {
    font-size: 0.8rem;
}

#tab-cycles .cycles-toolbar {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

#tab-cycles .cycles-toolbar .btn {
    border-radius: 8px;
}

#tab-cycles .filters-row input {
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.3);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#tab-cycles .filters-row input:focus {
    background: #ffffff;
    border-color: #64748b;
    box-shadow: 0 0 0 0.2rem rgba(100, 116, 139, 0.25);
}

#tab-cycles #cycles-table tbody tr {
    transition: background 0.15s ease;
}

#tab-cycles #cycles-table tbody tr:hover {
    background: rgba(148, 163, 184, 0.12);
}

#tab-cycles .cycles-insights {
    background: #f1f5f9;
}

#tab-cycles .cycles-insight-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#tab-cycles .cycles-insight-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.cursor-pointer {
    cursor: pointer !important;
}

.badge-cycle {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
}

.badge-output {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}

.badge-surplus {
    background: linear-gradient(135deg, #fcd34d, #f97316);
    color: #7c2d12;
}

#tab-cycles .cycles-insight-card .badge {
    font-size: 0.85rem;
}

#tab-cycles .cycles-insight-card .text-muted {
    color: #475569 !important;
}
