/* Step 5: Organisation des Gaines - Tableau amélioré */
.dispatch-table-container {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.07);
    padding: 18px 18px 8px 18px;
    border: 1px solid #e2e8f0;
}

.dispatch-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 1rem;
    background: transparent;
}

.dispatch-table thead th {
    background: #f8fafc;
    color: #1e293b;
    font-weight: 700;
    padding: 12px 8px;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
}

.dispatch-table tbody tr {
    transition: background 0.2s;
}

.dispatch-table tbody tr.draggable-row {
    background: #f9fafb;
    cursor: grab;
}

.dispatch-table tbody tr.draggable-row:hover {
    background: #e0f2fe;
}

.dispatch-table tbody tr.fixed-row {
    background: #f3f4f6;
    color: #888;
}

.dispatch-table td, .dispatch-table th {
    padding: 10px 8px;
    border-bottom: 1px solid #e2e8f0;
}

.dispatch-table td input.circuit-name-input {
    width: 100%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 1rem;
    color: #1e293b;
}

.dispatch-table .tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 600;
    background: #e0e7ef;
    color: #1e293b;
}

.dispatch-table .tag--alim { background: #ffedd5; color: #b45309; }
.dispatch-table .tag--inter { background: #fef9c3; color: #a16207; }
.dispatch-table .tag--prise { background: #dbeafe; color: #2563eb; }
.dispatch-table .tag--volet { background: #bbf7d0; color: #166534; }
.dispatch-table .tag--lampe { background: #f3e8ff; color: #7c3aed; }

.dispatch-table .badge-pos {
    display: inline-block;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.92em;
    font-weight: 600;
}
/* ============================================
   PIEUVRE CONFIGURATOR - Specific Styles
   ============================================ */

/* Page Layout */
.pieuvre-page {
    min-height: 100vh;
    padding-top: 80px;
}

.pieuvre-hero {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-primary) 100%);
}

.pieuvre-hero__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-4);
}

.pieuvre-hero__subtitle {
    font-size: var(--text-lg);
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.pieuvre-container {
    padding: var(--space-8) var(--space-6);
}

/* Steps Progress */
.steps-progress {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-8);
}

.step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
    transition: var(--transition-fast);
}

.step.active {
    background: var(--gradient-primary);
    color: var(--color-bg-primary);
    border-color: transparent;
}

.step.completed {
    background: rgba(0, 255, 136, 0.1);
    border-color: var(--color-accent-success);
    color: var(--color-accent-success);
}

.step__number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
}

.step.active .step__number {
    background: rgba(0, 0, 0, 0.2);
}

.step__label {
    font-size: var(--text-sm);
    font-weight: 500;
}

/* Grid Layout */
.pieuvre-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

/* Config Panel */
.config-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
}

.config-step {
    display: none;
}

.config-step.active {
    display: block;
}

.config-step__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.config-step__desc {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.config-step__actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* Housing Options */
.housing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.housing-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6);
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: var(--transition-fast);
}

.housing-option:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
}

.housing-option.selected {
    border-color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.1);
    box-shadow: var(--shadow-glow);
}

.housing-option__icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
}

.housing-option__name {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.housing-option__rooms {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Rooms List */
.rooms-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.room-card {
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.room-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.room-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
}

.room-card__remove {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 107, 53, 0.1);
    border: 1px solid rgba(255, 107, 53, 0.3);
    border-radius: var(--radius-full);
    color: #ff6b35;
    cursor: pointer;
    transition: var(--transition-fast);
}

.room-card__remove:hover {
    background: rgba(255, 107, 53, 0.2);
}

.room-card__circuits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.circuit-input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
}

.circuit-input__label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.circuit-input__controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.circuit-input__btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-lg);
    cursor: pointer;
    transition: var(--transition-fast);
}

.circuit-input__btn:hover {
    border-color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.1);
}

.circuit-input__value {
    width: 30px;
    text-align: center;
    font-weight: 600;
    color: var(--color-accent-primary);
}

/* Box Options */
.options-section {
    margin-bottom: var(--space-6);
}

.options-section__title {
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-4);
    color: var(--color-text-secondary);
}

.box-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.box-option {
    cursor: pointer;
}

.box-option input {
    display: none;
}

.box-option__content {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: var(--transition-fast);
}

.box-option input:checked+.box-option__content {
    border-color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.05);
}

.box-option__icon {
    font-size: 1.5rem;
}

.box-option__name {
    font-weight: 600;
}

.box-option__desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-left: auto;
}

/* Cable Length & Extra Options */
.form-select {
    width: 100%;
    padding: var(--space-3);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

.extra-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.extra-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.extra-option input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent-primary);
}

/* Summary Card */
.summary-card {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.summary-section {
    margin-bottom: var(--space-6);
}

.summary-section:last-child {
    margin-bottom: 0;
}

.summary-section__title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.summary-item:last-child {
    border-bottom: none;
}

/* Price Panel */
.price-panel {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-6);
    height: fit-content;
    position: sticky;
    top: calc(80px + var(--space-6));
}

.price-panel__title {
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.price-breakdown {
    margin-bottom: var(--space-6);
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.price-row--total {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.price-total {
    color: var(--color-accent-primary);
    font-size: var(--text-2xl);
}

.price-panel__info {
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.price-panel__info p {
    font-size: var(--text-sm);
    color: var(--color-accent-success);
    margin-bottom: var(--space-2);
}

.price-panel__info p:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .pieuvre-grid {
        grid-template-columns: 1fr;
    }

    .price-panel {
        position: static;
    }

    .housing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-progress {
        flex-wrap: wrap;
    }

    .step__label {
        display: none;
    }
}

@media (max-width: 600px) {
    .housing-grid {
        grid-template-columns: 1fr;
    }

    .room-card__circuits {
        grid-template-columns: 1fr;
    }
}

/* Visual Options (Cards) */
.visual-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.visual-option {
    cursor: pointer;
}

.visual-option input {
    display: none;
}

.visual-option__card {
    height: 100%;
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.visual-option input:checked+.visual-option__card {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

.visual-option__image-wrapper {
    height: 180px;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-option__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* or contain depending on image aspect ratio */
}

.visual-option__content {
    padding: var(--space-4);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.visual-option__name {
    font-weight: 700;
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
    color: var(--color-text-primary);
}

.visual-option__desc {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* Section Banners */
.section-banner {
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.section-banner__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Intro Normes */
.norm-intro {
    margin-bottom: var(--space-8);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.norm-intro__img {
    width: 100%;
    height: auto;
    display: block;
}

/* Direct Lines */
.direct-lines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.direct-line-item {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #8b5cf6;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.direct-line-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


.direct-line-select {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #1e293b;
    font-weight: 600;
    padding: 10px 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 120px;
    height: 40px;
}

.direct-line-length {
    min-width: 80px;
    max-width: 100px;
    height: 40px;
    padding: 10px 12px;
    font-size: 0.95rem;
}

.direct-line-select:hover {
    border-color: #8b5cf6;
}

.direct-line-select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.direct-line-remove {
    color: #ef4444;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    font-size: 1.1rem;
}

.direct-line-remove:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .visual-option__image-wrapper {
        height: 140px;
    }
}


/* Technical Configurator Styles */
.room-selector {
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-6);
    color: #333;
    /* Force dark text */
}

.room-add-controls {
    display: flex;
    gap: var(--space-2);
}

/* Room Selector Compact */
.room-selector-compact {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #333;
    /* Force dark text */
}

/* Technical Forms (Step 2) */
.tech-room-card {
    background: #f8f9fa;
    /* Off-white background for room cards */
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    color: #333;
    /* Force dark text */
}

.tech-room-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid #cbd5e0;
    /* Stronger divider */
}

.tech-room-header h3 {
    color: var(--color-primary);
    font-weight: 700;
}

.tech-group {
    background: white;
    /* White cards inside gray room */
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid #cbd5e0;
    /* Stronger border */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    color: #333;
    /* Force dark text */
}

.tech-group-title {
    font-weight: 600;
    margin-bottom: var(--space-3);
    display: flex;
    justify-content: space-between;
    color: var(--color-text-primary);
    font-size: 1.05em;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 8px;
}

.tech-input-row {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-3);
    font-size: 0.95em;
}

.tech-input-row label {
    font-weight: 500;
    color: #4a5568;
}

.tech-input-row input[type='number'] {
    width: 90px;
    padding: 8px;
    border: 1px solid #a0aec0;
    /* Darker border for inputs */
    border-radius: 4px;
    background: #fff;
    font-weight: 600;
    color: var(--color-accent-primary);
}

.tech-input-row input[type='number']:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
    outline: none;
}

/* Visual Box (Step 3) */
.visual-box-container {
    display: flex;
    gap: var(--space-6);
    height: 600px;
}

.circuits-pool {
    width: 300px;
    background: white;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
}

.draggable-item {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: grab;
    font-size: var(--text-sm);
}

.draggable-item:active {
    cursor: grabbing;
}

.box-visualizer {
    flex: 1;
    background: white;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
}

.box-svg-wrapper {
    width: 100%;
    height: 100%;
    padding: 20px;
}

/* SVG Styles */
.port-circle {
    fill: white;
    stroke: #666;
    stroke-width: 2;
    cursor: pointer;
    transition: fill 0.3s;
}

.port-circle:hover {
    fill: #e0e0e0;
}

.port-circle.connected {
    fill: var(--color-accent-primary);
    stroke: var(--color-accent-primary);
}

.port-text {
    font-size: 10px;
    text-anchor: middle;
    dominant-baseline: middle;
    pointer-events: none;
}


/* --- New 4-Step Wizard Styles --- */

/* Identity Section (Step 1) */
.identity-section {
    background: white;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    color: #333;
    /* Force dark text */
}

/* Vertical Visual Options (Step 2) */
.visual-options--vertical {
    display: flex;
    /* Override grid */
    flex-direction: column;
    gap: var(--space-4);
}

.visual-options--vertical .visual-option__card {
    flex-direction: row;
    align-items: center;
    min-height: auto;
    border-width: 1px;
}

.visual-options--vertical .visual-option input:checked+.visual-option__card {
    border-width: 2px;
    background: rgba(0, 212, 255, 0.03);
}

.visual-option__info-tag {
    display: inline-block;
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 5px;
}

/* Step 3: Gauge Header */
.step-header-with-gauge {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-6);
    gap: var(--space-4);
}

.sheath-gauge {
    background: white;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    width: 200px;
}

#gauge-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    text-align: right;
}

.gauge-bar {
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    background: var(--gradient-primary);
    transition: width 0.3s ease;
}

.gauge-fill.warning {
    background: #ff9800;
}

.gauge-fill.error {
    background: #f44336;
}

/* Direct Lines Manager (Step 4) */
.direct-lines-wrapper {
    margin-bottom: var(--space-4);
}

.direct-lines-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: var(--color-bg-tertiary);
    padding: 20px;
    border-radius: 12px 12px 0 0;
    gap: 20px;
}

.direct-lines-header .config-step__title {
    color: var(--color-text-primary) !important;
    margin-bottom: 8px;
}

.direct-lines-header .config-step__desc {
    color: var(--color-text-secondary) !important;
    margin-bottom: 0;
}

.direct-lines-info .info-badge {
    display: inline-block;
    background: rgba(0, 212, 255, 0.15);
    color: var(--color-accent-primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.direct-lines-content {
    background: #ffffff;
    padding: 20px;
    border-radius: 0 0 12px 12px;
    border: 1px solid #e2e8f0;
    border-top: none;
}

.direct-lines-examples {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
    color: #0369a1;
    font-size: 0.9rem;
}

.direct-lines-examples p {
    margin: 0;
}

.direct-lines-manager {
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
}

.btn--dashed {
    width: 100%;
    border: 2px dashed #ccc;
    background: transparent;
    padding: 15px;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn--dashed:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
    background: rgba(0, 212, 255, 0.05);
}

/* Room Selector Compact */
.room-selector-compact {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.room-selector-compact label {
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   CRITICAL CONTRAST FIXES - Force Dark Text on Light Backgrounds
   ========================================================================== */

/* Target all white/light containers */
.identity-section,
.room-selector,
.room-selector-compact,
.tech-room-card,
.tech-group,
.direct-lines-manager,
.sheath-gauge,
.circuits-pool,
.visual-box-container {
    color: #1a1a1a !important;
}

/* Force Headings to be dark in these containers */
.identity-section h1,
.identity-section h2,
.identity-section h3,
.room-selector h3,
.tech-room-card h3,
.tech-group h3,
.direct-lines-manager h3,
.sheath-gauge h3,
.tech-group-title,
.tech-room-header h3 {
    color: #1a1a1a !important;
}

/* Force Inputs and Selects to have high contrast */
.identity-section input,
.identity-section select,
.tech-room-card input,
.tech-room-card select,
.direct-lines-manager input,
.direct-lines-manager select,
.tech-group input,
.tech-group select,
.room-selector input,
.room-selector select,
.room-selector-compact input,
.room-selector-compact select {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
    border: 1px solid #cbd5e0 !important;
}

.tech-input-row input:focus,
.direct-line-select:focus {
    border-color: var(--color-accent-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
}

/* Force Labels and Spans */
.tech-input-row label,
.tech-input-row span,
.tech-group strong,
.direct-line-item label {
    color: #2d3748 !important;
}

/* Specific Fix for Direct Line Select */
.direct-line-select {
    color: #1a1a1a !important;
}

/* Fix Gauge Text */
#gauge-text {
    color: #1a1a1a !important;
}


/* Power Cable Section Fix */
.power-cable-section {
    margin-top: 30px;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 8px;
    color: #1a1a1a !important;
    /* Force dark text */
    border: 1px solid #e2e8f0;
}

.power-cable-section h3 {
    color: #1a1a1a !important;
}

.power-cable-section input {
    background: white !important;
    color: #1a1a1a !important;
    border: 1px solid #ccc !important;
}


/* Fixed Button Contrast for Light Backgrounds */

/* Add Room / Add Command Buttons (initially .btn--secondary) */
.room-add-controls .btn--secondary,
.tech-room-actions .btn--secondary,
.tech-group .btn--secondary {
    background: #e2e8f0 !important;
    /* Light gray */
    color: #1a1a1a !important;
    /* Dark Text */
    border: 1px solid #cbd5e0 !important;
    font-weight: 600 !important;
}

.room-add-controls .btn--secondary:hover,
.tech-room-actions .btn--secondary:hover,
.tech-group .btn--secondary:hover {
    background: #cbd5e0 !important;
    border-color: #a0aec0 !important;
}

/* Outline Buttons (Add Lighting/Socket etc) */
.tech-room-actions .btn--outline {
    border-color: #007bb5 !important;
    /* Darker Blue */
    color: #007bb5 !important;
}

.tech-room-actions .btn--outline:hover {
    background: rgba(0, 123, 181, 0.1) !important;
}

/* Remove 'X' buttons visibility fix */
.tech-group-title button,
.tech-input-row button {
    color: #e53e3e !important;
    /* Red for delete actions */
    font-weight: bold;
}


/* Editable Circuit Name Input */
.circuit-name-input {
    background: transparent;
    border: none;
    border-bottom: 1px dashed #ccc;
    font-size: 1em;
    font-weight: 600;
    color: #1a1a1a;
    padding: 2px 5px;
    width: 60%;
    transition: all 0.2s;
}

.circuit-name-input:focus {
    outline: none;
    border-bottom: 2px solid var(--color-accent-primary);
    background: rgba(255, 255, 255, 0.5);
}

.circuit-name-input::placeholder {
    color: #999;
    font-weight: normal;
}


/* Sticky Action Bar for Circuit Management */
.circuit-actions-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e2e8f0;
}


/* New Global Sticky Header for Step 3 */
.sticky-header-wrapper {
    position: sticky;
    top: 80px;
    z-index: 110;
    background: transparent;
    margin: -20px -20px 20px -20px;
    /* Offset padding */
    padding: 0;
    box-shadow: none;
    border-bottom: none;
}

.sticky-header-wrapper .step-header-with-gauge {
    background: var(--color-bg-tertiary) !important;
    border: none !important;
    padding: 20px !important;
    border-radius: 12px 12px 0 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
}

.sticky-header-wrapper .config-step__title,
.sticky-header-wrapper .config-step__desc {
    color: var(--color-text-primary) !important;
}

.sticky-header-wrapper .config-step__desc {
    color: var(--color-text-secondary) !important;
}

.sticky-header-wrapper .step-header-with-gauge > div {
    color: var(--color-text-primary) !important;
}

.sticky-header-wrapper .sheath-gauge span,
.sticky-header-wrapper #gauge-text {
    color: var(--color-text-primary) !important;
}

.sticky-header-wrapper .sheath-gauge {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border) !important;
}

.sticky-header-wrapper .sheath-gauge .gauge-bar {
    background: var(--color-bg-primary) !important;
}

.sticky-header-wrapper .circuit-actions-bar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.sticky-header-wrapper .circuit-actions-bar span {
    color: #4a5568 !important;
}

/* Boutons colorés pour ajouter des circuits */
#btn-add-light {
    border-color: #f6ad55 !important;
    color: #dd6b20 !important;
    background: white !important;
}

#btn-add-light:hover {
    background: #fffaf0 !important;
    border-color: #ed8936 !important;
}

#btn-add-socket {
    border-color: #63b3ed !important;
    color: #3182ce !important;
    background: white !important;
}

#btn-add-socket:hover {
    background: #ebf8ff !important;
    border-color: #4299e1 !important;
}

#btn-add-volet {
    border-color: #68d391 !important;
    color: #38a169 !important;
    background: white !important;
}

#btn-add-volet:hover {
    background: #f0fff4 !important;
    border-color: #48bb78 !important;
}

/* Reset previous sticky actions bar */
.circuit-actions-bar {
    position: static !important;
    box-shadow: none !important;
    margin: 15px 0 0 0 !important;
    padding: 10px !important;
    border-radius: 8px !important;
    background: white !important;
    border: 1px solid #e2e8f0;
}


/* Print Styles for PDF Export */
@media print {
    body {
        background: white;
        font-size: 12pt;
    }

    /* Hide non-printable elements */
    .step-wizard,
    .navbar,
    .config-step:not(.active),
    .actions-no-print,
    .config-step__actions,
    .step-header,
    .sticky-header-wrapper {
        display: none !important;
    }

    /* Show Summary clearly */
    .config-step.active,
    #technical-summary {
        display: block !important;
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
        border: none;
    }

    .summary-card {
        border: 1px solid #ccc;
        padding: 20px;
    }

    .bom-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    .bom-table th,
    .bom-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    .bom-table th {
        background-color: #f0f0f0 !important;
        -webkit-print-color-adjust: exact;
    }
}

/* Styled Select for Direct Lines (Re-applied) */
.direct-line-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding: 10px 15px;
    font-size: 1rem;
    color: #1a1a1a !important;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    /* URL encoded SVG arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.direct-line-select:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1);
}

/* ============================================ */
/* STEP 3 HEADER - DARK TOP / LIGHT BOTTOM */
/* ============================================ */

/* Force Gauge Text White on dark header */
.step-header-with-gauge #gauge-text {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.step-header-with-gauge .sheath-gauge {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.step-header-with-gauge .gauge-bar {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* ============================================ */
/* PREMIUM REDESIGN STEP 3 (Overrides) */
/* ============================================ */

.tech-rooms-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.tech-group {
    background: white;
    padding: 0 !important;
    /* Remove default padding, handled by children */
    margin-bottom: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
    /* For border-radius */
    color: #333;
}

.tech-group:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tech-group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px !important;
    background: #f8fafc;
    /* Subtle header background */
    border-bottom: 1px solid #e2e8f0 !important;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0 !important;
}

/* Icons & Inputs in Title */
.tech-icon {
    font-size: 1.5rem;
    margin-right: 12px;
}

.circuit-name-input {
    border: 1px solid transparent;
    background: transparent;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    padding: 5px 8px;
    border-radius: 6px;
    flex: 1;
    transition: all 0.2s;
}

.circuit-name-input:hover,
.circuit-name-input:focus {
    background: white;
    border-color: #cbd5e0;
    outline: none;
}

.circuit-name-input::placeholder {
    color: #a0aec0;
    font-weight: 400;
}

/* Content Area */
.tech-group-content {
    padding: 20px !important;
}

/* Sub-sections (Lighting details) */
.tech-sub-section {
    margin-bottom: 20px;
}

.tech-sub-section h5 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #718096;
    margin-bottom: 10px;
    font-weight: 700;
    display: block;
}

/* Input Rows */
.tech-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    background: #ffffff;
    margin-top: 0 !important;
}

.tech-input-row input[type='text'] {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #2d3748;
}

.tech-input-row input[type='text']:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2);
    outline: none;
}

/* Styled Selects */
.tech-input-row select {
    padding: 8px 30px 8px 12px;
    /* Space for arrow */
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background-color: white;
    font-size: 0.95rem;
    color: #2d3748;
    cursor: pointer;
    /* Custom Arrow */
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.tech-input-row select:focus {
    border-color: #4299e1;
    outline: none;
}

/* Delete Buttons */
.btn-delete,
.btn-delete-sm {
    background: transparent;
    border: 1px solid #fed7d7;
    color: #e53e3e;
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.2rem;
    line-height: 1;
    margin: 0 !important;
}

.btn-delete:hover,
.btn-delete-sm:hover {
    background: #fff5f5;
    border-color: #fc8181;
}

/* Remove default number input styling override */
.tech-input-row input[type='number'] {
    /* Reset if any stays */
    border: 1px solid #e2e8f0;
    box-shadow: none;
}

/* Add Buttons (Dashed) */
.btn--dashed {
    width: 100%;
    border: 1px dashed #cbd5e0 !important;
    background: #f8fafc;
    color: #718096;
    font-weight: 500;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn--dashed:hover {
    border-color: #a0aec0 !important;
    background: #edf2f7;
    color: #2d3748;
}

/* ============================================ */
/* STEP 3 ENHANCED DESIGN V2 */
/* ============================================ */

/* Color-coded Circuit Cards */
.tech-group[data-type='lighting'] {
    border-left: 4px solid #f6ad55 !important;
}

.tech-group[data-type='socket'] {
    border-left: 4px solid #63b3ed !important;
}

.tech-group[data-type='volet'] {
    border-left: 4px solid #68d391 !important;
}

/* Enhanced Card Styling */
.tech-group {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.07),
        0 2px 4px -1px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

.tech-group:hover {
    transform: translateY(-4px) !important;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Premium Header */
.tech-group-title {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%) !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 16px 16px 0 0 !important;
}

/* Icon Badge */
.tech-icon {
    font-size: 1.8rem !important;
    background: white;
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-right: 16px !important;
}

/* Circuit Name Input - Modern Style */
.circuit-name-input {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    letter-spacing: -0.02em;
}

/* Content Area with Better Spacing */
.tech-group-content {
    padding: 24px !important;
    background: white;
    border-radius: 0 0 16px 16px;
}

/* Section Headers */
.tech-sub-section h5 {
    font-size: 0.75rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
    padding: 6px 12px;
    background: #f1f5f9;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 16px !important;
}

/* Enhanced Input Rows */
.tech-input-row {
    padding: 12px 16px !important;
    background: #f8fafc !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.tech-input-row:hover {
    background: #f1f5f9 !important;
    border-color: #cbd5e0;
}

/* Modern Inputs */
.tech-input-row input[type='text'] {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.2s;
}

.tech-input-row input[type='text']:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}

/* Modern Selects */
.tech-input-row select {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    padding: 10px 36px 10px 14px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    min-width: 90px;
}

.tech-input-row select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15) !important;
}

/* Refined Delete Button */
.tech-group-title button,
.tech-input-row button {
    background: #fee2e2 !important;
    border: none !important;
    color: #dc2626 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-group-title button:hover,
.tech-input-row button:hover {
    background: #fecaca !important;
    transform: scale(1.05);
}

/* Dashed Add Buttons - More Prominent */
.btn--dashed {
    background: white !important;
    border: 2px dashed #cbd5e0 !important;
    color: #64748b !important;
    padding: 12px 16px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

.btn--dashed:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    background: #eff6ff !important;
}

/* Section Divider */
.tech-sub-section {
    padding-bottom: 20px;
    margin-bottom: 20px !important;
    border-bottom: 1px dashed #e2e8f0;
}

.tech-sub-section:last-child {
    border-bottom: none;
    margin-bottom: 0 !important;
    padding-bottom: 0;
}