/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   Layout principal
   ============================================================ */

*[b-68w61ze9hm] {
    box-sizing: border-box;
}


/* ============================================================
   APPLICATION
   ============================================================ */

.miradore-app[b-68w61ze9hm] {
    min-height: 100vh;
    display: flex;
    background: #f5f7fb;
    color: #172033;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar[b-68w61ze9hm] {
    width: 270px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    padding: 22px 16px 18px;
    background: radial-gradient( circle at 20% 0%, rgba(37, 99, 235, 0.22), transparent 30% ), linear-gradient( 180deg, #111c33 0%, #0c1629 55%, #08111f 100% );
    color: white;
    border-right: 1px solid rgba(255,255,255,0.06);
    z-index: 100;
}


/* ============================================================
   LOGO / MARQUE
   ============================================================ */

.brand[b-68w61ze9hm] {
    min-height: 74px;
    display: flex;
    align-items: center;
    padding: 4px 8px 20px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}


.brand-logo[b-68w61ze9hm] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow( 0 5px 14px rgba(37, 99, 235, 0.28) );
}


.brand-text[b-68w61ze9hm] {
    margin-left: 13px;
    min-width: 0;
}


.brand-name[b-68w61ze9hm] {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 1.6px;
    line-height: 1.1;
}


.brand-subtitle[b-68w61ze9hm] {
    margin-top: 5px;
    color: #8291aa;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.main-navigation[b-68w61ze9hm] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}


.nav-section-title[b-68w61ze9hm] {
    padding: 12px 12px 8px;
    color: #60718f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.4px;
}


    .nav-section-title.secondary[b-68w61ze9hm] {
        margin-top: 22px;
    }


/* IMPORTANT :
   ::deep permet au CSS isolé Blazor d'atteindre le <a>
   généré par NavLink.
*/

[b-68w61ze9hm] .nav-item {
    position: relative;
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 3px 0;
    padding: 0 13px;
    border-radius: 11px;
    color: #aebbd0;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}


    [b-68w61ze9hm] .nav-item:hover {
        color: #ffffff;
        background: rgba(255,255,255,0.06);
        transform: translateX(2px);
    }


    [b-68w61ze9hm] .nav-item.active {
        color: #ffffff;
        background: linear-gradient( 90deg, rgba(37, 99, 235, 0.30), rgba(37, 99, 235, 0.12) );
        box-shadow: inset 0 0 0 1px rgba(96,165,250,0.10);
    }


        [b-68w61ze9hm] .nav-item.active::before {
            content: "";
            position: absolute;
            left: 0;
            width: 3px;
            height: 24px;
            border-radius: 0 4px 4px 0;
            background: #3b82f6;
            box-shadow: 0 0 12px rgba(59,130,246,0.65);
        }


.nav-icon[b-68w61ze9hm] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #7588a8;
    font-size: 18px;
    transition: color 0.18s ease;
}


[b-68w61ze9hm] .nav-item:hover .nav-icon,
[b-68w61ze9hm] .nav-item.active .nav-icon {
    color: #60a5fa;
}


/* ============================================================
   BAS DE SIDEBAR
   ============================================================ */

.sidebar-bottom[b-68w61ze9hm] {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}


.version[b-68w61ze9hm] {
    margin-top: 12px;
    padding: 0 13px;
    color: #53627a;
    font-size: 10px;
    font-weight: 600;
}


    .version span[b-68w61ze9hm] {
        margin-left: 5px;
        color: #70819d;
    }


/* ============================================================
   ZONE PRINCIPALE
   ============================================================ */

.main-area[b-68w61ze9hm] {
    width: calc(100% - 270px);
    min-height: 100vh;
    margin-left: 270px;
    display: flex;
    flex-direction: column;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar[b-68w61ze9hm] {
    height: 76px;
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #e7ebf2;
    z-index: 80;
}


.topbar-left[b-68w61ze9hm],
.topbar-right[b-68w61ze9hm] {
    display: flex;
    align-items: center;
}


.environment[b-68w61ze9hm] {
    display: flex;
    align-items: center;
    gap: 11px;
}


.environment-dot[b-68w61ze9hm] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.10);
}


.environment > div[b-68w61ze9hm] {
    display: flex;
    flex-direction: column;
}


.environment-label[b-68w61ze9hm] {
    margin-bottom: 2px;
    color: #98a2b3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
}


.environment strong[b-68w61ze9hm] {
    color: #182235;
    font-size: 13px;
    font-weight: 700;
}


/* ============================================================
   TOPBAR DROITE
   ============================================================ */

.topbar-right[b-68w61ze9hm] {
    gap: 14px;
}


.topbar-action[b-68w61ze9hm] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4e9f1;
    border-radius: 10px;
    background: #ffffff;
    color: #667085;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}


    .topbar-action:hover[b-68w61ze9hm] {
        background: #f8fafc;
        border-color: #d5dce8;
        transform: translateY(-1px);
    }


.user-separator[b-68w61ze9hm] {
    width: 1px;
    height: 30px;
    background: #e7ebf2;
}


/* ============================================================
   UTILISATEUR
   ============================================================ */

.user-area[b-68w61ze9hm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 7px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease;
}


    .user-area:hover[b-68w61ze9hm] {
        background: #f5f7fa;
    }


.user-avatar[b-68w61ze9hm] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: linear-gradient( 145deg, #2563eb, #1d4ed8 );
    color: white;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(37,99,235,0.20);
}


.user-information[b-68w61ze9hm] {
    min-width: 105px;
    display: flex;
    flex-direction: column;
}


    .user-information strong[b-68w61ze9hm] {
        color: #1d2939;
        font-size: 12px;
        font-weight: 700;
    }


    .user-information span[b-68w61ze9hm] {
        margin-top: 2px;
        color: #98a2b3;
        font-size: 10px;
    }


.user-arrow[b-68w61ze9hm] {
    color: #98a2b3;
    font-size: 12px;
}


/* ============================================================
   CONTENU PRINCIPAL
   ============================================================ */

.content-area[b-68w61ze9hm] {
    flex: 1;
    width: 100%;
    padding: 30px;
    background: radial-gradient( circle at 100% 0%, rgba(37,99,235,0.035), transparent 28% ), #f5f7fb;
}


/* ============================================================
   SCROLLBAR SIDEBAR
   ============================================================ */

.main-navigation[b-68w61ze9hm]::-webkit-scrollbar {
    width: 4px;
}


.main-navigation[b-68w61ze9hm]::-webkit-scrollbar-track {
    background: transparent;
}


.main-navigation[b-68w61ze9hm]::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 10px;
}


/* ============================================================
   ERREUR BLAZOR
   ============================================================ */

#blazor-error-ui[b-68w61ze9hm] {
    color-scheme: light only;
    display: none;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 14px 50px 14px 18px;
    background: #ffffff;
    color: #344054;
    border: 1px solid #f1c9c9;
    border-left: 4px solid #dc2626;
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(15,23,42,0.16);
    z-index: 1000;
}


    #blazor-error-ui .reload[b-68w61ze9hm] {
        margin-left: 8px;
        color: #2563eb;
        font-weight: 700;
        text-decoration: none;
    }


    #blazor-error-ui .dismiss[b-68w61ze9hm] {
        position: absolute;
        right: 16px;
        top: 12px;
        cursor: pointer;
        color: #667085;
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1000px) {

    .sidebar[b-68w61ze9hm] {
        width: 230px;
    }


    .main-area[b-68w61ze9hm] {
        width: calc(100% - 230px);
        margin-left: 230px;
    }


    .brand-subtitle[b-68w61ze9hm] {
        display: none;
    }


    .content-area[b-68w61ze9hm] {
        padding: 22px;
    }
}


@media (max-width: 760px) {

    .sidebar[b-68w61ze9hm] {
        width: 74px;
        padding-left: 10px;
        padding-right: 10px;
    }


    .main-area[b-68w61ze9hm] {
        width: calc(100% - 74px);
        margin-left: 74px;
    }


    .brand[b-68w61ze9hm] {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }


    .brand-logo[b-68w61ze9hm] {
        width: 42px;
        height: 42px;
    }


    .brand-text[b-68w61ze9hm],
    .nav-section-title[b-68w61ze9hm],
    [b-68w61ze9hm] .nav-item span:not(.nav-icon),
    .version[b-68w61ze9hm] {
        display: none;
    }


    [b-68w61ze9hm] .nav-item {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }


    .nav-icon[b-68w61ze9hm] {
        width: 28px;
    }


    .topbar[b-68w61ze9hm] {
        height: 68px;
        padding: 0 18px;
    }


    .environment-label[b-68w61ze9hm],
    .user-information[b-68w61ze9hm],
    .user-arrow[b-68w61ze9hm],
    .user-separator[b-68w61ze9hm] {
        display: none;
    }


    .content-area[b-68w61ze9hm] {
        padding: 18px;
    }
}
/* /Components/Pages/BonLivraison.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   BON DE LIVRAISON
   ============================================================ */

.bl-screen[b-v9uuqq0teq] {
    min-height: 100vh;
    padding: 26px;
    box-sizing: border-box;
    background: #eef2f7;
    color: #1d2939;
    font-family: "Segoe UI", Arial, sans-serif;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.bl-actions[b-v9uuqq0teq] {
    width: min(100%, 980px);
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0 auto 18px;
    padding: 12px 15px;
    box-sizing: border-box;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
}

.bl-actions-left[b-v9uuqq0teq],
.bl-actions-right[b-v9uuqq0teq] {
    display: flex;
    align-items: center;
    gap: 9px;
}

    .bl-actions-left > div:last-child[b-v9uuqq0teq] {
        display: flex;
        flex-direction: column;
    }

.actions-eyebrow[b-v9uuqq0teq] {
    margin-bottom: 2px;
    color: #2563eb;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 1px;
}

.bl-actions-left strong[b-v9uuqq0teq] {
    color: #344054;
    font-size: 10px;
}

.back-button[b-v9uuqq0teq] {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e0e6ee;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 15px;
    cursor: pointer;
}

.secondary-action[b-v9uuqq0teq],
.primary-action[b-v9uuqq0teq] {
    height: 39px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 750;
    cursor: pointer;
}

.secondary-action[b-v9uuqq0teq] {
    border: 1px solid #dfe5ed;
    background: #ffffff;
    color: #475467;
}

.primary-action[b-v9uuqq0teq] {
    border: none;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.18);
}


/* ============================================================
   AIDE PDF
   ============================================================ */

.pdf-help[b-v9uuqq0teq] {
    width: min(100%, 980px);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 14px;
    padding: 10px 13px;
    box-sizing: border-box;
    border: 1px solid #bfdbfe;
    border-radius: 9px;
    background: #eff6ff;
}

    .pdf-help strong[b-v9uuqq0teq] {
        color: #1d4ed8;
        font-size: 8.5px;
    }

    .pdf-help span[b-v9uuqq0teq] {
        color: #475467;
        font-size: 8px;
    }


/* ============================================================
   DOCUMENT A4
   ============================================================ */

.delivery-note[b-v9uuqq0teq] {
    width: 794px;
    min-height: 1123px;
    margin: 0 auto;
    padding: 48px 52px 38px;
    box-sizing: border-box;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}


/* ============================================================
   ENTETE
   ============================================================ */

.document-header[b-v9uuqq0teq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 35px;
}

.company-zone[b-v9uuqq0teq] {
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.company-logo[b-v9uuqq0teq] {
    width: 135px;
    height: 70px;
    object-fit: contain;
    object-position: left center;
}

.company-logo-placeholder[b-v9uuqq0teq] {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
    font-weight: 850;
}

.company-information[b-v9uuqq0teq] {
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

.company-name[b-v9uuqq0teq] {
    margin-bottom: 4px;
    color: #101828;
    font-size: 15px;
    font-weight: 850;
}

.company-information span[b-v9uuqq0teq] {
    margin-top: 2px;
    color: #667085;
    font-size: 7.5px;
    line-height: 1.35;
}

.company-information .legal-name[b-v9uuqq0teq] {
    margin-bottom: 2px;
    color: #475467;
    font-size: 8px;
    font-weight: 650;
}

.document-title-zone[b-v9uuqq0teq] {
    min-width: 235px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.document-type[b-v9uuqq0teq] {
    color: #98a2b3;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.3px;
}

.document-title-zone > strong[b-v9uuqq0teq] {
    margin-top: 5px;
    color: #101828;
    font-size: 23px;
    font-weight: 850;
    text-align: right;
}

.document-status[b-v9uuqq0teq] {
    margin-top: 8px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 7px;
    font-weight: 800;
}

.document-divider[b-v9uuqq0teq] {
    height: 2px;
    margin: 23px 0;
    background: #101828;
}


/* ============================================================
   INFO GRID
   ============================================================ */

.information-grid[b-v9uuqq0teq] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 12px;
}

.information-block[b-v9uuqq0teq] {
    min-height: 75px;
    display: flex;
    flex-direction: column;
    padding: 12px 13px;
    box-sizing: border-box;
    border: 1px solid #e5eaf1;
    border-radius: 9px;
    background: #fafbfd;
}

.block-label[b-v9uuqq0teq] {
    color: #98a2b3;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: 0.7px;
}

.information-block strong[b-v9uuqq0teq] {
    margin-top: 6px;
    color: #344054;
    font-size: 10px;
}

.information-block small[b-v9uuqq0teq] {
    margin-top: 4px;
    color: #667085;
    font-size: 7px;
}


/* ============================================================
   SECTIONS
   ============================================================ */

.document-section[b-v9uuqq0teq],
.reception-section[b-v9uuqq0teq] {
    margin-top: 22px;
}

.section-title[b-v9uuqq0teq],
.refund-title[b-v9uuqq0teq] {
    margin-bottom: 9px;
    color: #344054;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.8px;
}

.section-title-row[b-v9uuqq0teq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.goods-summary[b-v9uuqq0teq] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

    .goods-summary span[b-v9uuqq0teq] {
        padding-left: 10px;
        border-left: 1px solid #e4e7ec;
        color: #667085;
        font-size: 7px;
    }


/* ============================================================
   DESTINATAIRE
   ============================================================ */

.recipient-card[b-v9uuqq0teq] {
    display: grid;
    grid-template-columns: 1fr 180px;
    gap: 20px;
    padding: 14px 15px;
    border: 1px solid #dde3eb;
    border-radius: 9px;
}

.recipient-main[b-v9uuqq0teq] {
    display: flex;
    flex-direction: column;
}

    .recipient-main strong[b-v9uuqq0teq] {
        margin-bottom: 5px;
        color: #101828;
        font-size: 12px;
    }

    .recipient-main span[b-v9uuqq0teq] {
        margin-top: 2px;
        color: #475467;
        font-size: 8px;
    }

.recipient-contact[b-v9uuqq0teq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 16px;
    border-left: 1px solid #e4e7ec;
}

.mini-label[b-v9uuqq0teq] {
    color: #98a2b3;
    font-size: 6.5px;
    font-weight: 850;
    letter-spacing: 0.6px;
}

.recipient-contact strong[b-v9uuqq0teq] {
    margin-top: 5px;
    color: #344054;
    font-size: 9px;
}


/* ============================================================
   MARCHANDISE
   ============================================================ */

.goods-table[b-v9uuqq0teq] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #dde3eb;
}

    .goods-table th[b-v9uuqq0teq] {
        height: 30px;
        padding: 0 10px;
        border-bottom: 1px solid #dde3eb;
        background: #f6f8fa;
        color: #667085;
        text-align: left;
        font-size: 6.5px;
        font-weight: 850;
        letter-spacing: 0.6px;
    }

    .goods-table td[b-v9uuqq0teq] {
        min-height: 31px;
        padding: 8px 10px;
        border-bottom: 1px solid #edf0f4;
        color: #344054;
        font-size: 8px;
    }

    .goods-table tbody tr:last-child td[b-v9uuqq0teq] {
        border-bottom: none;
    }

.quantity-column[b-v9uuqq0teq],
.quantity-cell[b-v9uuqq0teq] {
    width: 60px;
    text-align: center !important;
}

.quantity-cell[b-v9uuqq0teq] {
    color: #101828 !important;
    font-weight: 750;
}


/* ============================================================
   INSTRUCTIONS
   ============================================================ */

.instructions-box[b-v9uuqq0teq] {
    min-height: 55px;
    padding: 12px 13px;
    box-sizing: border-box;
    border: 1px solid #dde3eb;
    border-radius: 9px;
    color: #344054;
    font-size: 8px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.empty-document-value[b-v9uuqq0teq] {
    color: #98a2b3;
}


/* ============================================================
   CR
   ============================================================ */

.refund-section[b-v9uuqq0teq] {
    margin-top: 22px;
    padding: 13px 14px;
    border: 1px solid #101828;
    border-radius: 9px;
}

.refund-title[b-v9uuqq0teq] {
    margin-bottom: 11px;
    color: #101828;
}

.refund-grid[b-v9uuqq0teq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.refund-card[b-v9uuqq0teq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 10px 11px;
    border-radius: 7px;
    background: #f8fafc;
}

    .refund-card span[b-v9uuqq0teq] {
        color: #667085;
        font-size: 6.5px;
        font-weight: 850;
    }

    .refund-card strong[b-v9uuqq0teq] {
        color: #101828;
        font-size: 11px;
    }

.no-refund[b-v9uuqq0teq] {
    color: #667085;
    font-size: 8px;
}


/* ============================================================
   RECEPTION
   ============================================================ */

.reception-information[b-v9uuqq0teq] {
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 30px;
    margin-bottom: 18px;
}

    .reception-information span[b-v9uuqq0teq] {
        color: #667085;
        font-size: 7.5px;
    }

.write-line[b-v9uuqq0teq] {
    height: 18px;
    border-bottom: 1px solid #667085;
}

.signature-grid[b-v9uuqq0teq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

    .signature-grid strong[b-v9uuqq0teq] {
        display: block;
        margin-bottom: 7px;
        color: #344054;
        font-size: 7.5px;
    }

.signature-box[b-v9uuqq0teq] {
    height: 90px;
    border: 1px solid #98a2b3;
    border-radius: 5px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.document-footer[b-v9uuqq0teq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-top: 23px;
    padding-top: 10px;
    border-top: 1px solid #d0d5dd;
}

.footer-left[b-v9uuqq0teq],
.footer-right[b-v9uuqq0teq] {
    display: flex;
    flex-direction: column;
}

.footer-left[b-v9uuqq0teq] {
    max-width: 340px;
}

.footer-right[b-v9uuqq0teq] {
    max-width: 330px;
    align-items: flex-end;
    text-align: right;
}

.document-footer span[b-v9uuqq0teq] {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 6px;
    line-height: 1.35;
}


/* ============================================================
   CHARGEMENT / ERREUR
   ============================================================ */

.loading-document[b-v9uuqq0teq],
.document-error[b-v9uuqq0teq] {
    width: min(100%, 794px);
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border-radius: 12px;
    background: #ffffff;
}

.loader[b-v9uuqq0teq] {
    width: 30px;
    height: 30px;
    margin-bottom: 13px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: bl-spin-b-v9uuqq0teq 0.8s linear infinite;
}

@keyframes bl-spin-b-v9uuqq0teq {
    to {
        transform: rotate(360deg);
    }
}

.loading-document strong[b-v9uuqq0teq],
.document-error strong[b-v9uuqq0teq] {
    color: #344054;
    font-size: 10px;
}

.loading-document span[b-v9uuqq0teq],
.document-error span[b-v9uuqq0teq] {
    max-width: 500px;
    margin-top: 5px;
    color: #98a2b3;
    font-size: 8px;
    text-align: center;
}

.error-symbol[b-v9uuqq0teq] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border-radius: 10px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 14px;
    font-weight: 850;
}

.document-error button[b-v9uuqq0teq] {
    height: 36px;
    margin-top: 15px;
    padding: 0 13px;
    border: none;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-family: inherit;
    font-size: 8px;
    font-weight: 750;
    cursor: pointer;
}


/* ============================================================
   IMPRESSION
   ============================================================ */

@media print {

    @page {
        size: A4 portrait;
        margin: 0;
    }

    html[b-v9uuqq0teq],
    body[b-v9uuqq0teq] {
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    .no-print[b-v9uuqq0teq] {
        display: none !important;
    }

    .bl-screen[b-v9uuqq0teq] {
        min-height: 0;
        padding: 0;
        background: #ffffff;
    }

    .delivery-note[b-v9uuqq0teq] {
        width: 210mm;
        min-height: 297mm;
        margin: 0;
        padding: 12mm 13mm 9mm;
        box-shadow: none;
        page-break-after: avoid;
    }
}


/* ============================================================
   RESPONSIVE ECRAN
   ============================================================ */

@media screen and (max-width: 900px) {

    .bl-screen[b-v9uuqq0teq] {
        padding: 14px;
    }

    .bl-actions[b-v9uuqq0teq] {
        align-items: stretch;
        flex-direction: column;
    }

    .bl-actions-right[b-v9uuqq0teq] {
        width: 100%;
    }

        .bl-actions-right button[b-v9uuqq0teq] {
            flex: 1;
        }

    .delivery-note[b-v9uuqq0teq] {
        transform-origin: top left;
    }
}
/* /Components/Pages/CommandeFiche.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   FICHE COMMANDE
   ============================================================ */

.order-form-page[b-hs1ibh6uu2] {
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;
    padding-bottom: 40px;
}


/* ============================================================
   HEADER
   ============================================================ */

.order-header[b-hs1ibh6uu2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.header-left[b-hs1ibh6uu2] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.back-button[b-hs1ibh6uu2] {
    width: 40px;
    height: 40px;
    margin-top: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e6ee;
    border-radius: 10px;
    background: #ffffff;
    color: #667085;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

    .back-button:hover[b-hs1ibh6uu2] {
        background: #f8fafc;
        border-color: #d5dce6;
        transform: translateX(-2px);
    }

.page-eyebrow[b-hs1ibh6uu2] {
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.title-line[b-hs1ibh6uu2] {
    display: flex;
    align-items: center;
    gap: 13px;
}

    .title-line h1[b-hs1ibh6uu2] {
        margin: 0;
        color: #101828;
        font-size: 30px;
        font-weight: 760;
        letter-spacing: -0.7px;
    }

.order-header p[b-hs1ibh6uu2] {
    margin: 7px 0 0;
    color: #7b8799;
    font-size: 12px;
}

.header-actions[b-hs1ibh6uu2] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ============================================================
   BOUTONS
   ============================================================ */

.save-button[b-hs1ibh6uu2],
.secondary-button[b-hs1ibh6uu2] {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.save-button[b-hs1ibh6uu2] {
    min-width: 130px;
    border: none;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.20);
}

    .save-button:hover:not(:disabled)[b-hs1ibh6uu2] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.26);
    }

    .save-button:disabled[b-hs1ibh6uu2] {
        opacity: 0.6;
        cursor: wait;
    }

.secondary-button[b-hs1ibh6uu2] {
    border: 1px solid #e1e6ed;
    background: #ffffff;
    color: #667085;
}

    .secondary-button:hover[b-hs1ibh6uu2] {
        background: #f8fafc;
        transform: translateY(-1px);
    }


/* ============================================================
   STATUT HEADER
   ============================================================ */

.header-status[b-hs1ibh6uu2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
}

.status-dot[b-hs1ibh6uu2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-initial[b-hs1ibh6uu2] {
    background: #f2f4f7;
    color: #667085;
}

.status-received[b-hs1ibh6uu2] {
    background: #eef4ff;
    color: #3b5ccc;
}

.status-scheduled[b-hs1ibh6uu2] {
    background: #eff6ff;
    color: #2563eb;
}

.status-tour[b-hs1ibh6uu2] {
    background: #f5f3ff;
    color: #7c3aed;
}

.status-delivered[b-hs1ibh6uu2] {
    background: #ecfdf3;
    color: #16a34a;
}

.status-completed[b-hs1ibh6uu2] {
    background: #ecfdf5;
    color: #047857;
}

.status-preinvoice[b-hs1ibh6uu2] {
    background: #fff7ed;
    color: #d97706;
}

.status-invoiced[b-hs1ibh6uu2] {
    background: #eef2f6;
    color: #344054;
}


/* ============================================================
   MESSAGES
   ============================================================ */

.message-box[b-hs1ibh6uu2] {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: 12px;
}

.message-icon[b-hs1ibh6uu2] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 850;
}

.message-box > div:last-child[b-hs1ibh6uu2] {
    display: flex;
    flex-direction: column;
}

.message-box strong[b-hs1ibh6uu2] {
    font-size: 10px;
    font-weight: 750;
}

.message-box span[b-hs1ibh6uu2] {
    margin-top: 3px;
    font-size: 9px;
}

.error-message[b-hs1ibh6uu2] {
    background: #fff7f7;
    border: 1px solid #fee2e2;
}

    .error-message .message-icon[b-hs1ibh6uu2],
    .error-message strong[b-hs1ibh6uu2] {
        color: #dc2626;
    }

    .error-message span[b-hs1ibh6uu2] {
        color: #7f1d1d;
    }

.success-message[b-hs1ibh6uu2] {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}

    .success-message .message-icon[b-hs1ibh6uu2],
    .success-message strong[b-hs1ibh6uu2] {
        color: #16a34a;
    }

    .success-message span[b-hs1ibh6uu2] {
        color: #52705e;
    }


/* ============================================================
   RESUME
   ============================================================ */

.summary-strip[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.025);
}

.summary-item[b-hs1ibh6uu2] {
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 13px 18px;
    border-right: 1px solid #edf1f5;
}

    .summary-item:last-child[b-hs1ibh6uu2] {
        border-right: none;
    }

.summary-label[b-hs1ibh6uu2] {
    margin-bottom: 5px;
    color: #98a2b3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.8px;
}

.summary-item strong[b-hs1ibh6uu2] {
    overflow: hidden;
    color: #344054;
    font-size: 11px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.summary-item .summary-money[b-hs1ibh6uu2] {
    color: #2563eb;
    font-size: 14px;
}


/* ============================================================
   CARTE
   ============================================================ */

.form-card[b-hs1ibh6uu2] {
    margin-bottom: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.012), 0 8px 24px rgba(15, 23, 42, 0.02);
}

.card-header[b-hs1ibh6uu2] {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid #edf1f6;
    background: linear-gradient( 180deg, #ffffff, #fbfcfe );
}

.card-header-actions[b-hs1ibh6uu2] {
    justify-content: space-between;
}

.card-heading[b-hs1ibh6uu2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-icon[b-hs1ibh6uu2] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
}

.card-header h2[b-hs1ibh6uu2] {
    margin: 0;
    color: #1d2939;
    font-size: 13px;
    font-weight: 760;
}

.card-header p[b-hs1ibh6uu2] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 9px;
}

.card-content[b-hs1ibh6uu2] {
    padding: 20px;
}


/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-grid[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1fr) minmax(220px, 0.8fr) minmax(220px, 0.9fr);
    gap: 16px;
}

.field[b-hs1ibh6uu2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field label[b-hs1ibh6uu2] {
        color: #667085;
        font-size: 9px;
        font-weight: 750;
    }

        .field label span[b-hs1ibh6uu2] {
            color: #dc2626;
        }

    .field input[b-hs1ibh6uu2],
    .field select[b-hs1ibh6uu2],
    .field textarea[b-hs1ibh6uu2] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #dfe5ee;
        outline: none;
        background: #ffffff;
        color: #344054;
        font-family: inherit;
        font-size: 11px;
        transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }

    .field input[b-hs1ibh6uu2],
    .field select[b-hs1ibh6uu2] {
        height: 41px;
        padding: 0 12px;
        border-radius: 9px;
    }

    .field textarea[b-hs1ibh6uu2] {
        min-height: 130px;
        resize: vertical;
        padding: 11px 12px;
        border-radius: 10px;
        line-height: 1.5;
    }

        .field input:focus[b-hs1ibh6uu2],
        .field select:focus[b-hs1ibh6uu2],
        .field textarea:focus[b-hs1ibh6uu2] {
            border-color: #8bb3f4;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
        }

        .field input:disabled[b-hs1ibh6uu2],
        .field select:disabled[b-hs1ibh6uu2],
        .field textarea:disabled[b-hs1ibh6uu2] {
            background: #f5f7fa;
            color: #667085;
            cursor: not-allowed;
        }

.address-grid[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 140px minmax(200px, 1fr) minmax(180px, 0.8fr);
    gap: 16px;
}

.metrics-grid[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 240px));
    gap: 16px;
    margin-bottom: 24px;
}

.two-column-grid[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* ============================================================
   SOUS-SECTIONS
   ============================================================ */

.subsection-header[b-hs1ibh6uu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 4px 0 12px;
}

    .subsection-header h3[b-hs1ibh6uu2] {
        margin: 0;
        color: #344054;
        font-size: 10px;
        font-weight: 750;
    }

    .subsection-header p[b-hs1ibh6uu2] {
        margin: 3px 0 0;
        color: #98a2b3;
        font-size: 8px;
    }

.small-add-button[b-hs1ibh6uu2] {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #f5f9ff;
    color: #2563eb;
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
    transition: background 0.16s ease, transform 0.16s ease;
}

    .small-add-button:hover[b-hs1ibh6uu2] {
        background: #edf5ff;
        transform: translateY(-1px);
    }


/* ============================================================
   TABLEAUX EDITABLES
   ============================================================ */

.edit-table-wrapper[b-hs1ibh6uu2] {
    overflow: hidden;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
}

.edit-table[b-hs1ibh6uu2] {
    width: 100%;
    border-collapse: collapse;
}

    .edit-table th[b-hs1ibh6uu2] {
        height: 38px;
        padding: 0 12px;
        background: #fafbfc;
        color: #8b96a7;
        border-bottom: 1px solid #e9edf3;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .edit-table td[b-hs1ibh6uu2] {
        height: 48px;
        padding: 5px 8px;
        border-bottom: 1px solid #f0f2f5;
    }

    .edit-table tbody tr:last-child td[b-hs1ibh6uu2] {
        border-bottom: none;
    }

.table-input[b-hs1ibh6uu2] {
    width: 100%;
    height: 35px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    outline: none;
    background: transparent;
    color: #344054;
    font-family: inherit;
    font-size: 10px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

    .table-input:hover:not(:disabled)[b-hs1ibh6uu2] {
        background: #fafcff;
    }

    .table-input:focus[b-hs1ibh6uu2] {
        border-color: #a8c6f5;
        background: #ffffff;
    }

    .table-input:disabled[b-hs1ibh6uu2] {
        color: #667085;
    }

.quantity-heading[b-hs1ibh6uu2],
.quantity-input[b-hs1ibh6uu2] {
    width: 130px;
    text-align: right !important;
}

.money-heading[b-hs1ibh6uu2],
.money-input[b-hs1ibh6uu2] {
    width: 170px;
    text-align: right !important;
}

.action-heading[b-hs1ibh6uu2],
.row-action-cell[b-hs1ibh6uu2] {
    width: 50px;
    text-align: center !important;
}

.delete-row-button[b-hs1ibh6uu2] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

    .delete-row-button:hover[b-hs1ibh6uu2] {
        background: #ffe4e6;
        transform: scale(1.04);
    }

.calculated-value[b-hs1ibh6uu2] {
    color: #667085;
    text-align: right;
    font-size: 10px;
    font-weight: 650;
}


/* ============================================================
   ETAT VIDE
   ============================================================ */

.mini-empty-state[b-hs1ibh6uu2] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed #d7dee8;
    border-radius: 10px;
    background: #fafbfd;
    color: #98a2b3;
    font-size: 9px;
}


/* ============================================================
   RDV / SWITCH
   ============================================================ */

.switch-grid[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.switch-card[b-hs1ibh6uu2] {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 16px;
    border: 1px solid #e8edf4;
    border-radius: 11px;
    background: #fafcff;
}

.switch-info[b-hs1ibh6uu2] {
    display: flex;
    flex-direction: column;
}

    .switch-info strong[b-hs1ibh6uu2] {
        color: #344054;
        font-size: 10px;
        font-weight: 750;
    }

    .switch-info span[b-hs1ibh6uu2] {
        margin-top: 4px;
        color: #98a2b3;
        font-size: 8.5px;
    }

.switch[b-hs1ibh6uu2] {
    position: relative;
    width: 42px;
    height: 23px;
    flex-shrink: 0;
}

    .switch input[b-hs1ibh6uu2] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-hs1ibh6uu2] {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #d8dee8;
    cursor: pointer;
    transition: 0.2s;
}

    .switch-slider[b-hs1ibh6uu2]::before {
        content: "";
        position: absolute;
        width: 17px;
        height: 17px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 4px rgba(15, 23, 42, 0.20);
        transition: 0.2s;
    }

.switch input:checked + .switch-slider[b-hs1ibh6uu2] {
    background: #2563eb;
}

    .switch input:checked + .switch-slider[b-hs1ibh6uu2]::before {
        transform: translateX(19px);
    }

.switch input:disabled + .switch-slider[b-hs1ibh6uu2] {
    opacity: 0.55;
    cursor: not-allowed;
}

.appointment-grid[b-hs1ibh6uu2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 260px));
    gap: 16px;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #edf1f5;
}


/* ============================================================
   TOTALS
   ============================================================ */

.totals-area[b-hs1ibh6uu2] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.total-block[b-hs1ibh6uu2] {
    min-width: 170px;
    padding: 12px 15px;
    border: 1px solid #e5eaf1;
    border-radius: 10px;
    background: #fafbfd;
}

    .total-block span[b-hs1ibh6uu2] {
        display: block;
        margin-bottom: 5px;
        color: #98a2b3;
        font-size: 8px;
        font-weight: 750;
        text-transform: uppercase;
    }

    .total-block strong[b-hs1ibh6uu2] {
        color: #344054;
        font-size: 15px;
        font-weight: 800;
    }

.total-ttc[b-hs1ibh6uu2] {
    background: #f5f9ff;
    border-color: #deebff;
}

    .total-ttc strong[b-hs1ibh6uu2] {
        color: #2563eb;
    }


/* ============================================================
   HISTORIQUE
   ============================================================ */

.history-list[b-hs1ibh6uu2] {
    position: relative;
    max-height: 430px;
    overflow-y: auto;
    padding: 3px 4px;
}

.history-item[b-hs1ibh6uu2] {
    position: relative;
    display: flex;
    gap: 13px;
    padding: 0 0 20px;
}

    .history-item:last-child[b-hs1ibh6uu2] {
        padding-bottom: 0;
    }

    .history-item[b-hs1ibh6uu2]::before {
        content: "";
        position: absolute;
        left: 5px;
        top: 13px;
        bottom: -2px;
        width: 1px;
        background: #e4eaf2;
    }

    .history-item:last-child[b-hs1ibh6uu2]::before {
        display: none;
    }

.history-marker[b-hs1ibh6uu2] {
    position: relative;
    z-index: 1;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    margin-top: 5px;
    border: 3px solid #dbeafe;
    border-radius: 50%;
    background: #2563eb;
}

.history-content[b-hs1ibh6uu2] {
    flex: 1;
    min-width: 0;
}

.history-top[b-hs1ibh6uu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .history-top strong[b-hs1ibh6uu2] {
        color: #344054;
        font-size: 9.5px;
        font-weight: 750;
    }

    .history-top span[b-hs1ibh6uu2] {
        color: #98a2b3;
        font-size: 8px;
    }

.history-content p[b-hs1ibh6uu2] {
    margin: 4px 0 0;
    color: #667085;
    font-size: 9px;
}

.history-content small[b-hs1ibh6uu2] {
    display: block;
    margin-top: 4px;
    color: #a7b0be;
    font-size: 8px;
}


/* ============================================================
   BAS DE PAGE
   ============================================================ */

.bottom-actions[b-hs1ibh6uu2] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 5px;
}


/* ============================================================
   CHARGEMENT
   ============================================================ */

.loading-card[b-hs1ibh6uu2] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.loader[b-hs1ibh6uu2] {
    width: 31px;
    height: 31px;
    margin-bottom: 16px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: miradore-spin-b-hs1ibh6uu2 0.8s linear infinite;
}

@keyframes miradore-spin-b-hs1ibh6uu2 {
    to {
        transform: rotate(360deg);
    }
}

.loading-card strong[b-hs1ibh6uu2] {
    color: #344054;
    font-size: 11px;
}

.loading-card span[b-hs1ibh6uu2] {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 9px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .form-grid[b-hs1ibh6uu2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .address-grid[b-hs1ibh6uu2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-strip[b-hs1ibh6uu2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-item:nth-child(2)[b-hs1ibh6uu2] {
        border-right: none;
    }

    .summary-item:nth-child(-n+2)[b-hs1ibh6uu2] {
        border-bottom: 1px solid #edf1f5;
    }
}


@media (max-width: 760px) {

    .order-header[b-hs1ibh6uu2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-left[b-hs1ibh6uu2] {
        width: 100%;
    }

    .header-actions[b-hs1ibh6uu2] {
        width: 100%;
    }

        .header-actions button[b-hs1ibh6uu2] {
            flex: 1;
        }

    .title-line[b-hs1ibh6uu2] {
        align-items: flex-start;
        flex-direction: column;
    }

        .title-line h1[b-hs1ibh6uu2] {
            font-size: 25px;
        }

    .form-grid[b-hs1ibh6uu2],
    .address-grid[b-hs1ibh6uu2],
    .metrics-grid[b-hs1ibh6uu2],
    .two-column-grid[b-hs1ibh6uu2],
    .switch-grid[b-hs1ibh6uu2],
    .appointment-grid[b-hs1ibh6uu2],
    .summary-strip[b-hs1ibh6uu2] {
        grid-template-columns: 1fr;
    }

    .summary-item[b-hs1ibh6uu2] {
        border-right: none;
        border-bottom: 1px solid #edf1f5;
    }

        .summary-item:last-child[b-hs1ibh6uu2] {
            border-bottom: none;
        }

    .card-header-actions[b-hs1ibh6uu2] {
        align-items: flex-start;
        flex-direction: column;
    }

    .small-add-button[b-hs1ibh6uu2] {
        width: 100%;
    }

    .totals-area[b-hs1ibh6uu2] {
        flex-direction: column;
    }

    .total-block[b-hs1ibh6uu2] {
        width: 100%;
        box-sizing: border-box;
    }

    .edit-table-wrapper[b-hs1ibh6uu2] {
        overflow-x: auto;
    }

    .edit-table[b-hs1ibh6uu2] {
        min-width: 650px;
    }
}
/* /Components/Pages/Commandes.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   COMMANDES
   ============================================================ */

.commandes-page[b-877se16v80] {
    width: 100%;
    max-width: 1800px;
    margin: 0 auto;
}


/* ============================================================
   HEADER
   ============================================================ */

.commandes-header[b-877se16v80] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

.page-eyebrow[b-877se16v80] {
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.commandes-header h1[b-877se16v80] {
    margin: 0;
    color: #101828;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.7px;
}

.commandes-header p[b-877se16v80] {
    margin: 7px 0 0;
    color: #7b8799;
    font-size: 13px;
}


/* ============================================================
   NOUVELLE COMMANDE
   ============================================================ */

.new-order-button[b-877se16v80] {
    height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: none;
    border-radius: 11px;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.20);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .new-order-button:hover[b-877se16v80] {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(37, 99, 235, 0.27);
    }

.button-plus[b-877se16v80] {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}


/* ============================================================
   FILTRES
   ============================================================ */

.filters-card[b-877se16v80] {
    margin-bottom: 17px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.012), 0 8px 24px rgba(15, 23, 42, 0.02);
}

.filters-grid[b-877se16v80] {
    display: grid;
    grid-template-columns: minmax(320px, 1.6fr) minmax(190px, 0.55fr) auto;
    align-items: end;
    gap: 16px;
}

.filter-field[b-877se16v80] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .filter-field label[b-877se16v80] {
        color: #667085;
        font-size: 10px;
        font-weight: 750;
    }

.search-input-wrapper[b-877se16v80] {
    position: relative;
}

.search-icon[b-877se16v80] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 18px;
    pointer-events: none;
}

.search-input-wrapper input[b-877se16v80],
.filter-field select[b-877se16v80] {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid #dfe5ee;
    border-radius: 10px;
    outline: none;
    background: #ffffff;
    color: #344054;
    font-family: inherit;
    font-size: 11px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.search-input-wrapper input[b-877se16v80] {
    padding: 0 14px 0 42px;
}

.filter-field select[b-877se16v80] {
    padding: 0 35px 0 12px;
    cursor: pointer;
}

.search-input-wrapper input[b-877se16v80]::placeholder {
    color: #b0b8c5;
}

.search-input-wrapper input:focus[b-877se16v80],
.filter-field select:focus[b-877se16v80] {
    border-color: #8bb3f4;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}


/* ============================================================
   ACTIONS FILTRES
   ============================================================ */

.filter-actions[b-877se16v80] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.search-button[b-877se16v80],
.clear-button[b-877se16v80] {
    height: 42px;
    padding: 0 15px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.search-button[b-877se16v80] {
    border: none;
    background: #172b4d;
    color: #ffffff;
}

    .search-button:hover[b-877se16v80] {
        background: #10213d;
        transform: translateY(-1px);
    }

.clear-button[b-877se16v80] {
    border: 1px solid #e1e6ed;
    background: #f8fafc;
    color: #667085;
}

    .clear-button:hover[b-877se16v80] {
        border-color: #d5dce6;
        background: #f3f6f9;
    }


/* ============================================================
   BARRE RESULTATS
   ============================================================ */

.results-toolbar[b-877se16v80] {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3px;
}

.result-count[b-877se16v80] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #98a2b3;
    font-size: 10px;
}

    .result-count strong[b-877se16v80] {
        color: #344054;
        font-size: 12px;
        font-weight: 800;
    }

.refresh-button[b-877se16v80] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e8ef;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 17px;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease;
}

    .refresh-button:hover[b-877se16v80] {
        background: #f8fafc;
        transform: rotate(20deg);
    }


/* ============================================================
   CARTE TABLEAU
   ============================================================ */

.orders-card[b-877se16v80] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.012), 0 8px 24px rgba(15, 23, 42, 0.025);
}

.orders-table-wrapper[b-877se16v80] {
    width: 100%;
    overflow-x: auto;
}


/* ============================================================
   TABLEAU
   ============================================================ */

.orders-table[b-877se16v80] {
    width: 100%;
    min-width: 1450px;
    border-collapse: collapse;
}

    .orders-table thead[b-877se16v80] {
        background: #fafbfc;
    }

    .orders-table th[b-877se16v80] {
        height: 45px;
        padding: 0 14px;
        color: #8a96a8;
        border-bottom: 1px solid #e8edf4;
        text-align: left;
        font-size: 8.5px;
        font-weight: 800;
        letter-spacing: 0.55px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .orders-table td[b-877se16v80] {
        height: 59px;
        padding: 0 14px;
        color: #667085;
        border-bottom: 1px solid #f0f2f5;
        font-size: 10px;
        white-space: nowrap;
    }

    .orders-table tbody tr:last-child td[b-877se16v80] {
        border-bottom: none;
    }

.order-row[b-877se16v80] {
    cursor: pointer;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

    .order-row:hover[b-877se16v80] {
        background: #f8fbff;
        box-shadow: inset 3px 0 0 #2563eb;
    }


/* ============================================================
   ALERTE ECHEC
   ============================================================ */

.alert-column[b-877se16v80],
.alert-cell[b-877se16v80] {
    width: 40px;
    padding-left: 12px !important;
    padding-right: 4px !important;
}

.failure-indicator[b-877se16v80] {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #fff1f2;
    color: #dc2626;
    font-size: 11px;
    font-weight: 850;
    box-shadow: 0 0 0 1px #fee2e2;
}


/* ============================================================
   NUMERO COMMANDE
   ============================================================ */

.order-number-cell[b-877se16v80] {
    display: flex;
    align-items: center;
    gap: 7px;
}

    .order-number-cell strong[b-877se16v80] {
        color: #1d2939;
        font-size: 10.5px;
        font-weight: 780;
    }

.received-dot[b-877se16v80] {
    width: 7px;
    height: 7px;
    display: inline-block;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}


/* ============================================================
   CLIENT / DONNEUR D'ORDRE
   ============================================================ */

.client-cell strong[b-877se16v80] {
    color: #344054;
    font-weight: 700;
}

.do-name[b-877se16v80] {
    color: #475467;
    font-weight: 650;
}


/* ============================================================
   NATURE
   ============================================================ */

.nature-badge[b-877se16v80] {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 8.5px;
    font-weight: 750;
}

.nature-delivery[b-877se16v80] {
    background: #eff6ff;
    color: #2563eb;
}

.nature-remainder[b-877se16v80] {
    background: #fff7ed;
    color: #d97706;
}

.nature-shuttle[b-877se16v80] {
    background: #f5f3ff;
    color: #7c3aed;
}

.nature-pickup[b-877se16v80] {
    background: #ecfdf3;
    color: #15803d;
}


/* ============================================================
   STATUTS
   ============================================================ */

.status-badge[b-877se16v80] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 8.5px;
    font-weight: 750;
}

.status-dot[b-877se16v80] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-initial[b-877se16v80] {
    background: #f2f4f7;
    color: #667085;
}

.status-received[b-877se16v80] {
    background: #eef4ff;
    color: #3b5ccc;
}

.status-scheduled[b-877se16v80] {
    background: #eff6ff;
    color: #2563eb;
}

.status-tour[b-877se16v80] {
    background: #f5f3ff;
    color: #7c3aed;
}

.status-delivered[b-877se16v80] {
    background: #ecfdf3;
    color: #16a34a;
}

.status-completed[b-877se16v80] {
    background: #ecfdf5;
    color: #047857;
}

.status-preinvoice[b-877se16v80] {
    background: #fff7ed;
    color: #d97706;
}

.status-invoiced[b-877se16v80] {
    background: #eef2f6;
    color: #344054;
}


/* ============================================================
   VALEURS
   ============================================================ */

.numeric-column[b-877se16v80],
.numeric-cell[b-877se16v80] {
    text-align: right !important;
}

.ca-cell[b-877se16v80] {
    color: #1d2939 !important;
    font-weight: 750;
}

.date-value[b-877se16v80] {
    color: #475467;
    font-weight: 650;
}

.missing-value[b-877se16v80] {
    padding: 4px 7px;
    border-radius: 6px;
    background: #fff7ed;
    color: #d97706;
    font-size: 8.5px;
    font-weight: 700;
}

.muted-value[b-877se16v80] {
    color: #c0c7d0;
}


/* ============================================================
   CHARGEMENT / ETAT VIDE
   ============================================================ */

.loading-state[b-877se16v80],
.empty-state[b-877se16v80] {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
}

.loader[b-877se16v80] {
    width: 30px;
    height: 30px;
    margin-bottom: 17px;
    border: 3px solid #e8edf4;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: miradore-spin-b-877se16v80 0.8s linear infinite;
}

@keyframes miradore-spin-b-877se16v80 {
    to {
        transform: rotate(360deg);
    }
}

.loading-state strong[b-877se16v80],
.empty-state strong[b-877se16v80] {
    color: #344054;
    font-size: 12px;
    font-weight: 750;
}

.loading-state span[b-877se16v80],
.empty-state span[b-877se16v80] {
    margin-top: 6px;
    color: #98a2b3;
    font-size: 10px;
}

.empty-icon[b-877se16v80] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 20px;
}


/* ============================================================
   ERREUR
   ============================================================ */

.state-card[b-877se16v80] {
    min-height: 90px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border-radius: 14px;
}

.error-card[b-877se16v80] {
    background: #fff7f7;
    border: 1px solid #fee2e2;
}

.state-symbol[b-877se16v80] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffffff;
    color: #dc2626;
    font-weight: 850;
}

.state-card > div:last-child[b-877se16v80] {
    display: flex;
    flex-direction: column;
}

.state-card strong[b-877se16v80] {
    color: #b42318;
    font-size: 11px;
}

.state-card span[b-877se16v80] {
    margin-top: 4px;
    color: #667085;
    font-size: 9px;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

.orders-table-wrapper[b-877se16v80]::-webkit-scrollbar {
    height: 8px;
}

.orders-table-wrapper[b-877se16v80]::-webkit-scrollbar-track {
    background: #f7f8fa;
}

.orders-table-wrapper[b-877se16v80]::-webkit-scrollbar-thumb {
    background: #d7dee8;
    border-radius: 10px;
    border: 2px solid #f7f8fa;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .filters-grid[b-877se16v80] {
        grid-template-columns: minmax(280px, 1fr) minmax(190px, 0.5fr);
    }

    .filter-actions[b-877se16v80] {
        grid-column: 1 / -1;
    }
}


@media (max-width: 760px) {

    .commandes-header[b-877se16v80] {
        align-items: flex-start;
        flex-direction: column;
    }

    .new-order-button[b-877se16v80] {
        width: 100%;
    }

    .filters-grid[b-877se16v80] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-877se16v80] {
        grid-column: auto;
        width: 100%;
    }

    .search-button[b-877se16v80],
    .clear-button[b-877se16v80] {
        flex: 1;
    }

    .commandes-header h1[b-877se16v80] {
        font-size: 25px;
    }
}
/* /Components/Pages/Connexion.razor.rz.scp.css */
/* ============================================================
   CONNEXION MIRADORE
   ============================================================ */

.login-page[b-ohpsflu3mm] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 28px;
    background: linear-gradient( 135deg, #eef3f7 0%, #f8fafc 55%, #eef3f7 100%);
    font-family: "Segoe UI", Arial, sans-serif;
}

.login-shell[b-ohpsflu3mm] {
    width: min(1080px, 100%);
    min-height: 610px;
    display: grid;
    grid-template-columns: 43% 57%;
    overflow: hidden;
    border: 1px solid #dde5eb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(27, 52, 75, .13);
}

.login-brand[b-ohpsflu3mm] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 54px 48px 42px;
    overflow: hidden;
    background: #143653;
    color: #ffffff;
}

    .login-brand[b-ohpsflu3mm]::after {
        content: "M";
        position: absolute;
        right: -42px;
        bottom: -95px;
        color: rgba(255, 255, 255, .035);
        font-size: 390px;
        font-weight: 900;
        line-height: 1;
        pointer-events: none;
    }

.login-brand-content[b-ohpsflu3mm],
.login-brand-footer[b-ohpsflu3mm] {
    position: relative;
    z-index: 1;
}

.login-logo[b-ohpsflu3mm] {
    width: 74px;
    height: 74px;
    object-fit: contain;
    margin-bottom: 24px;
}

.login-brand-title[b-ohpsflu3mm] {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: .7px;
}

.login-brand-subtitle[b-ohpsflu3mm] {
    margin-top: 5px;
    color: rgba(255, 255, 255, .68);
    font-size: 13px;
}

.login-brand-footer[b-ohpsflu3mm] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .login-brand-footer strong[b-ohpsflu3mm] {
        font-size: 12px;
        letter-spacing: .6px;
    }

    .login-brand-footer span[b-ohpsflu3mm] {
        color: rgba(255, 255, 255, .62);
        font-size: 10px;
    }

.login-form-panel[b-ohpsflu3mm] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 66px 70px 36px;
}

.login-form-content[b-ohpsflu3mm] {
    width: min(430px, 100%);
    margin: auto;
}

.login-eyebrow[b-ohpsflu3mm] {
    margin-bottom: 8px;
    color: #96a5b2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.login-form-content h1[b-ohpsflu3mm] {
    margin: 0;
    color: #102f4c;
    font-size: 30px;
    font-weight: 850;
}

.login-intro[b-ohpsflu3mm] {
    margin: 9px 0 30px;
    color: #71808e;
    font-size: 12px;
}

.login-error[b-ohpsflu3mm] {
    margin-bottom: 18px;
    padding: 11px 13px;
    border: 1px solid #f0caca;
    border-radius: 8px;
    background: #fff5f5;
    color: #a23737;
    font-size: 11px;
    font-weight: 600;
}

.login-form[b-ohpsflu3mm] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.login-field[b-ohpsflu3mm] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .login-field label[b-ohpsflu3mm] {
        color: #294a64;
        font-size: 10px;
        font-weight: 800;
    }

    .login-field input[b-ohpsflu3mm] {
        width: 100%;
        height: 46px;
        box-sizing: border-box;
        padding: 0 13px;
        border: 1px solid #d5dfe7;
        border-radius: 8px;
        outline: none;
        background: #ffffff;
        color: #183750;
        font-size: 13px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .login-field input:focus[b-ohpsflu3mm] {
            border-color: #52728b;
            box-shadow: 0 0 0 3px rgba(82, 114, 139, .10);
        }

.login-submit[b-ohpsflu3mm] {
    height: 47px;
    margin-top: 5px;
    border: 0;
    border-radius: 8px;
    background: #143653;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .4px;
    cursor: pointer;
}

    .login-submit:hover[b-ohpsflu3mm] {
        background: #1a456a;
    }

.login-security[b-ohpsflu3mm] {
    margin-top: 18px;
    color: #98a4ad;
    font-size: 9px;
    text-align: center;
}

.login-version[b-ohpsflu3mm] {
    margin-top: 30px;
    color: #a2adb5;
    font-size: 9px;
    text-align: center;
}


@media (max-width: 760px) {

    .login-page[b-ohpsflu3mm] {
        padding: 14px;
    }

    .login-shell[b-ohpsflu3mm] {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .login-brand[b-ohpsflu3mm] {
        min-height: 180px;
        padding: 28px;
    }

    .login-brand-footer[b-ohpsflu3mm] {
        display: none;
    }

    .login-logo[b-ohpsflu3mm] {
        width: 54px;
        height: 54px;
        margin-bottom: 12px;
    }

    .login-brand-title[b-ohpsflu3mm] {
        font-size: 26px;
    }

    .login-form-panel[b-ohpsflu3mm] {
        padding: 38px 28px 28px;
    }
}
/* /Components/Pages/DonneursOrdreRessource.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   RESSOURCES - DONNEURS D'ORDRE
   ============================================================ */

.do-page[b-y6cv4wxoix] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.do-header[b-y6cv4wxoix] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.do-eyebrow[b-y6cv4wxoix],
.editor-eyebrow[b-y6cv4wxoix] {
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.do-header h2[b-y6cv4wxoix] {
    margin: 0;
    color: #1d2939;
    font-size: 20px;
    font-weight: 780;
    letter-spacing: -0.4px;
}

.do-header p[b-y6cv4wxoix] {
    margin: 6px 0 0;
    color: #98a2b3;
    font-size: 10px;
}

.add-do-button[b-y6cv4wxoix] {
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

    .add-do-button:hover[b-y6cv4wxoix] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
    }

    .add-do-button span[b-y6cv4wxoix] {
        font-size: 17px;
    }


/* ============================================================
   MESSAGES
   ============================================================ */

.do-message[b-y6cv4wxoix] {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 11px;
}

    .do-message.error[b-y6cv4wxoix] {
        background: #fff7f7;
        border: 1px solid #fee2e2;
    }

    .do-message.success[b-y6cv4wxoix] {
        background: #f0fdf4;
        border: 1px solid #dcfce7;
    }

.message-symbol[b-y6cv4wxoix] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 850;
}

.do-message > div:last-child[b-y6cv4wxoix] {
    display: flex;
    flex-direction: column;
}

.do-message strong[b-y6cv4wxoix] {
    color: #344054;
    font-size: 9.5px;
}

.do-message span[b-y6cv4wxoix] {
    margin-top: 3px;
    color: #667085;
    font-size: 8.5px;
}

.do-message.error .message-symbol[b-y6cv4wxoix] {
    color: #dc2626;
}

.do-message.success .message-symbol[b-y6cv4wxoix] {
    color: #16a34a;
}


/* ============================================================
   KPI
   ============================================================ */

.do-kpis[b-y6cv4wxoix] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 17px;
}

.do-kpi[b-y6cv4wxoix] {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 17px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.022);
}

.kpi-label[b-y6cv4wxoix] {
    color: #98a2b3;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 0.65px;
}

.do-kpi strong[b-y6cv4wxoix] {
    margin-top: 6px;
    color: #1d2939;
    font-size: 22px;
    font-weight: 800;
}

.do-kpi small[b-y6cv4wxoix] {
    margin-top: 3px;
    color: #a5adba;
    font-size: 7.5px;
}


/* ============================================================
   FILTRES
   ============================================================ */

.do-filter-card[b-y6cv4wxoix] {
    margin-bottom: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
}

.do-filters[b-y6cv4wxoix] {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: end;
    gap: 18px;
}

.field[b-y6cv4wxoix] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field label[b-y6cv4wxoix] {
        color: #667085;
        font-size: 8.5px;
        font-weight: 750;
    }

        .field label span[b-y6cv4wxoix] {
            color: #dc2626;
        }

    .field input[b-y6cv4wxoix] {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 11px;
        border: 1px solid #dfe5ee;
        border-radius: 9px;
        outline: none;
        background: #ffffff;
        color: #344054;
        font-family: inherit;
        font-size: 10px;
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

        .field input:focus[b-y6cv4wxoix] {
            border-color: #8bb3f4;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
        }

        .field input[b-y6cv4wxoix]::placeholder {
            color: #b2bac6;
        }

.search-wrapper[b-y6cv4wxoix] {
    position: relative;
}

    .search-wrapper > span[b-y6cv4wxoix] {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #98a2b3;
    }

    .search-wrapper input[b-y6cv4wxoix] {
        padding-left: 37px;
    }

.filter-switch[b-y6cv4wxoix] {
    min-width: 230px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filter-switch > div[b-y6cv4wxoix] {
        display: flex;
        flex-direction: column;
    }

    .filter-switch strong[b-y6cv4wxoix] {
        color: #475467;
        font-size: 8.5px;
    }

    .filter-switch span[b-y6cv4wxoix] {
        margin-top: 2px;
        color: #98a2b3;
        font-size: 7.5px;
    }


/* ============================================================
   SWITCH
   ============================================================ */

.miradore-switch[b-y6cv4wxoix] {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .miradore-switch input[b-y6cv4wxoix] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-y6cv4wxoix] {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #d8dee8;
    cursor: pointer;
    transition: 0.2s;
}

    .switch-slider[b-y6cv4wxoix]::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
        transition: 0.2s;
    }

.miradore-switch input:checked + .switch-slider[b-y6cv4wxoix] {
    background: #2563eb;
}

    .miradore-switch input:checked + .switch-slider[b-y6cv4wxoix]::before {
        transform: translateX(18px);
    }


/* ============================================================
   LISTE
   ============================================================ */

.do-list-card[b-y6cv4wxoix] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.02);
}

.list-toolbar[b-y6cv4wxoix] {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #edf1f5;
}

    .list-toolbar > div[b-y6cv4wxoix] {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .list-toolbar strong[b-y6cv4wxoix] {
        color: #344054;
        font-size: 11px;
    }

    .list-toolbar span[b-y6cv4wxoix] {
        color: #98a2b3;
        font-size: 8.5px;
    }

.refresh-do[b-y6cv4wxoix] {
    width: 32px;
    height: 32px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    color: #667085;
    font-size: 15px;
    cursor: pointer;
}

.do-table-wrapper[b-y6cv4wxoix] {
    width: 100%;
    overflow-x: auto;
}

.do-table[b-y6cv4wxoix] {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
}

    .do-table th[b-y6cv4wxoix] {
        height: 42px;
        padding: 0 12px;
        border-bottom: 1px solid #e8edf4;
        background: #fafbfc;
        color: #8a96a8;
        text-align: left;
        font-size: 7.5px;
        font-weight: 850;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .do-table td[b-y6cv4wxoix] {
        height: 61px;
        padding: 0 12px;
        border-bottom: 1px solid #f0f2f5;
        color: #667085;
        font-size: 9px;
        white-space: nowrap;
    }

    .do-table tbody tr:last-child td[b-y6cv4wxoix] {
        border-bottom: none;
    }

.do-row[b-y6cv4wxoix] {
    cursor: pointer;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

    .do-row:hover[b-y6cv4wxoix] {
        background: #f8fbff;
        box-shadow: inset 3px 0 0 #2563eb;
    }


/* ============================================================
   ENSEIGNE
   ============================================================ */

.do-name-cell[b-y6cv4wxoix] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.do-avatar[b-y6cv4wxoix] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.do-name-cell strong[b-y6cv4wxoix] {
    color: #344054;
    font-size: 9.5px;
    font-weight: 750;
}


/* ============================================================
   BADGES
   ============================================================ */

.do-status[b-y6cv4wxoix],
.portal-badge[b-y6cv4wxoix] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 7.5px;
    font-weight: 800;
}

    .do-status > span[b-y6cv4wxoix],
    .portal-badge > span[b-y6cv4wxoix] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .do-status.active[b-y6cv4wxoix],
    .portal-badge.active[b-y6cv4wxoix] {
        background: #ecfdf3;
        color: #15803d;
    }

    .do-status.inactive[b-y6cv4wxoix],
    .portal-badge.inactive[b-y6cv4wxoix] {
        background: #f2f4f7;
        color: #667085;
    }

.muted-value[b-y6cv4wxoix] {
    color: #b1bac6;
}


/* ============================================================
   EDITOR
   ============================================================ */

.do-editor[b-y6cv4wxoix] {
    width: 100%;
}

.editor-header[b-y6cv4wxoix] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.editor-title[b-y6cv4wxoix] {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .editor-title h3[b-y6cv4wxoix] {
        margin: 0;
        color: #1d2939;
        font-size: 18px;
        font-weight: 780;
    }

.editor-back[b-y6cv4wxoix] {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 16px;
    cursor: pointer;
}

.editor-actions[b-y6cv4wxoix],
.editor-bottom-actions[b-y6cv4wxoix] {
    display: flex;
    align-items: center;
    gap: 9px;
}


/* ============================================================
   BOUTONS
   ============================================================ */

.cancel-button[b-y6cv4wxoix],
.save-do-button[b-y6cv4wxoix] {
    height: 39px;
    padding: 0 15px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.cancel-button[b-y6cv4wxoix] {
    border: 1px solid #e1e6ed;
    background: #ffffff;
    color: #667085;
}

.save-do-button[b-y6cv4wxoix] {
    min-width: 120px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

    .save-do-button:disabled[b-y6cv4wxoix] {
        opacity: 0.6;
        cursor: wait;
    }


/* ============================================================
   CARTES FICHE
   ============================================================ */

.do-card[b-y6cv4wxoix] {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.02);
}

.do-card-header[b-y6cv4wxoix] {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #edf1f5;
}

.section-number[b-y6cv4wxoix] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.do-card-header h4[b-y6cv4wxoix] {
    margin: 0;
    color: #344054;
    font-size: 11px;
}

.do-card-header p[b-y6cv4wxoix] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 8px;
}

.do-card-content[b-y6cv4wxoix] {
    padding: 18px;
}


/* ============================================================
   GRILLES
   ============================================================ */

.identification-grid[b-y6cv4wxoix] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.field-wide[b-y6cv4wxoix] {
    grid-column: 1 / -1;
}

.contact-grid[b-y6cv4wxoix] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.settings-grid[b-y6cv4wxoix] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.setting-card[b-y6cv4wxoix],
.portal-enable[b-y6cv4wxoix] {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    background: #fafcff;
}

    .setting-information[b-y6cv4wxoix],
    .portal-enable > div[b-y6cv4wxoix] {
        display: flex;
        flex-direction: column;
    }

        .setting-information strong[b-y6cv4wxoix],
        .portal-enable strong[b-y6cv4wxoix] {
            color: #344054;
            font-size: 9px;
        }

        .setting-information span[b-y6cv4wxoix],
        .portal-enable span[b-y6cv4wxoix] {
            margin-top: 3px;
            color: #98a2b3;
            font-size: 7.5px;
        }

.partnership-date[b-y6cv4wxoix] {
    max-width: 300px;
    margin-top: 15px;
}


/* ============================================================
   PORTAIL
   ============================================================ */

.portal-fields[b-y6cv4wxoix] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #edf1f5;
}

.portal-help[b-y6cv4wxoix] {
    margin-top: 14px;
    padding: 11px 13px;
    border-left: 3px solid #2563eb;
    border-radius: 0 8px 8px 0;
    background: #f8fbff;
    color: #667085;
    font-size: 8px;
    line-height: 1.5;
}


/* ============================================================
   BAS
   ============================================================ */

.editor-bottom-actions[b-y6cv4wxoix] {
    justify-content: flex-end;
    padding-top: 3px;
}


/* ============================================================
   CHARGEMENT / VIDE
   ============================================================ */

.do-loading[b-y6cv4wxoix],
.do-empty[b-y6cv4wxoix] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader[b-y6cv4wxoix] {
    width: 29px;
    height: 29px;
    margin-bottom: 13px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: do-spin-b-y6cv4wxoix 0.8s linear infinite;
}

@keyframes do-spin-b-y6cv4wxoix {
    to {
        transform: rotate(360deg);
    }
}

.do-loading strong[b-y6cv4wxoix],
.do-empty strong[b-y6cv4wxoix] {
    color: #344054;
    font-size: 10px;
}

.do-empty span[b-y6cv4wxoix] {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 8px;
}

.empty-icon[b-y6cv4wxoix] {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 850;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .do-kpis[b-y6cv4wxoix] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-grid[b-y6cv4wxoix],
    .portal-fields[b-y6cv4wxoix] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {

    .do-header[b-y6cv4wxoix],
    .editor-header[b-y6cv4wxoix] {
        align-items: stretch;
        flex-direction: column;
    }

    .add-do-button[b-y6cv4wxoix] {
        width: 100%;
    }

    .do-kpis[b-y6cv4wxoix],
    .do-filters[b-y6cv4wxoix],
    .identification-grid[b-y6cv4wxoix],
    .contact-grid[b-y6cv4wxoix],
    .settings-grid[b-y6cv4wxoix],
    .portal-fields[b-y6cv4wxoix] {
        grid-template-columns: 1fr;
    }

    .field-wide[b-y6cv4wxoix] {
        grid-column: auto;
    }

    .editor-actions[b-y6cv4wxoix],
    .editor-bottom-actions[b-y6cv4wxoix] {
        width: 100%;
    }

        .editor-actions button[b-y6cv4wxoix],
        .editor-bottom-actions button[b-y6cv4wxoix] {
            flex: 1;
        }
}
/* /Components/Pages/Facturation.razor.rz.scp.css */
/* ============================================================
   MIRADORE - FACTURATION WEB
   V1 - SQUELETTE SECURISE / LECTURE SEULE
   ============================================================ */

.facturation-page[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
    padding: 12px;
    background: #f5f7fa;
    color: #24384b;
    font-family: "Segoe UI", Arial, sans-serif;
}


/* ============================================================
   HEADER
   ============================================================ */

.facturation-header[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #ffffff;
}

    .facturation-header h1[b-xzmi9kcj09] {
        margin: 0;
        color: #13314f;
        font-size: 22px;
        font-weight: 800;
    }

    .facturation-header p[b-xzmi9kcj09] {
        margin: 4px 0 0;
        color: #687887;
        font-size: 11px;
    }

.refresh-button[b-xzmi9kcj09] {
    flex: 0 0 auto;
    height: 32px;
    padding: 0 14px;
    border: 0;
    border-radius: 6px;
    background: #13314f;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

    .refresh-button:disabled[b-xzmi9kcj09] {
        opacity: 0.55;
        cursor: not-allowed;
    }


/* ============================================================
   ALERTES
   ============================================================ */

.facturation-alert[b-xzmi9kcj09] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 10px;
    white-space: pre-line;
}

.facturation-alert-error[b-xzmi9kcj09] {
    border: 1px solid #e9bcbc;
    background: #fff3f3;
    color: #963d3d;
}

.facturation-alert-success[b-xzmi9kcj09] {
    border: 1px solid #bcdcc9;
    background: #f1fbf5;
    color: #2f6f4c;
}

.facturation-alert button[b-xzmi9kcj09] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    line-height: 18px;
    cursor: pointer;
}


/* ============================================================
   KPI
   ============================================================ */

.facturation-kpis[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 8px;
}

.kpi-card[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    min-height: 78px;
    padding: 10px 12px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.kpi-label[b-xzmi9kcj09] {
    color: #687887;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.kpi-card strong[b-xzmi9kcj09] {
    margin-top: 3px;
    color: #13314f;
    font-size: 24px;
    line-height: 27px;
}

.kpi-card small[b-xzmi9kcj09] {
    margin-top: auto;
    color: #8795a2;
    font-size: 9px;
}


/* ============================================================
   ONGLETS
   ============================================================ */

.facturation-tabs[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(5, minmax(130px, 1fr));
    gap: 3px;
    padding: 4px;
    border-radius: 7px;
    background: #13314f;
}

.tab-button[b-xzmi9kcj09] {
    min-height: 34px;
    padding: 5px 8px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: #dce7f0;
    font-size: 9.5px;
    font-weight: 750;
    cursor: pointer;
}

    .tab-button:hover[b-xzmi9kcj09] {
        background: rgba(255, 255, 255, 0.10);
    }

    .tab-button.active[b-xzmi9kcj09] {
        background: #ffffff;
        color: #13314f;
    }


/* ============================================================
   CONTENU
   ============================================================ */

.facturation-content[b-xzmi9kcj09] {
    min-height: 390px;
    padding: 14px;
    border: 1px solid #dce3ea;
    border-radius: 8px;
    background: #ffffff;
}

.tab-panel[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tab-title-row[b-xzmi9kcj09] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e5ebf0;
}

    .tab-title-row h2[b-xzmi9kcj09] {
        margin: 0;
        color: #13314f;
        font-size: 17px;
        font-weight: 800;
    }

    .tab-title-row p[b-xzmi9kcj09] {
        margin: 4px 0 0;
        color: #71808d;
        font-size: 10px;
    }

.read-only-badge[b-xzmi9kcj09] {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #d6e4ef;
    border-radius: 999px;
    background: #f3f8fc;
    color: #426783;
    font-size: 8.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.25px;
}


/* ============================================================
   A FACTURER
   ============================================================ */

.billing-filter-card[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: minmax(220px, 1.3fr) 155px 155px auto auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #fafcfd;
}

.billing-filter-field[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .billing-filter-field label[b-xzmi9kcj09] {
        color: #52697c;
        font-size: 8.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.25px;
    }

    .billing-filter-field select[b-xzmi9kcj09],
    .billing-filter-field input[b-xzmi9kcj09] {
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 0 8px;
        border: 1px solid #ccd7e0;
        border-radius: 5px;
        outline: 0;
        background: #ffffff;
        color: #263f54;
        font: inherit;
        font-size: 10px;
    }

        .billing-filter-field select:focus[b-xzmi9kcj09],
        .billing-filter-field input:focus[b-xzmi9kcj09] {
            border-color: #819cb1;
        }

.billing-filter-actions[b-xzmi9kcj09],
.billing-selection-actions[b-xzmi9kcj09] {
    display: flex;
    gap: 5px;
}

.billing-selection-actions[b-xzmi9kcj09] {
    flex-direction: column;
}

.billing-button[b-xzmi9kcj09] {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.billing-button-primary[b-xzmi9kcj09] {
    border: 1px solid #13314f;
    background: #13314f;
    color: #ffffff;
}

.billing-button-secondary[b-xzmi9kcj09] {
    border: 1px solid #ccd7e0;
    background: #ffffff;
    color: #28465e;
}

.billing-button-generate[b-xzmi9kcj09] {
    min-width: 170px;
    border: 1px solid #9ebbad;
    background: #4f8f70;
    color: #ffffff;
}

.billing-button:disabled[b-xzmi9kcj09] {
    opacity: 0.48;
    cursor: not-allowed;
}

.billing-table-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 390px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.billing-table[b-xzmi9kcj09] {
    width: 100%;
    min-width: 1130px;
    border-collapse: collapse;
    font-size: 9px;
}

    .billing-table th[b-xzmi9kcj09] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .billing-table td[b-xzmi9kcj09] {
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
        vertical-align: middle;
        white-space: nowrap;
    }

    .billing-table tbody tr:hover[b-xzmi9kcj09] {
        background: #f7fafc;
    }

.billing-row-cr-axio[b-xzmi9kcj09] {
    background: #fffaf0;
}

    .billing-row-cr-axio:hover[b-xzmi9kcj09] {
        background: #fff6e5 !important;
    }

.billing-check-col[b-xzmi9kcj09] {
    width: 38px;
    text-align: center !important;
}

.billing-money-col[b-xzmi9kcj09] {
    width: 105px;
    text-align: right !important;
}

.billing-cm[b-xzmi9kcj09] {
    font-weight: 750;
    color: #1e405c !important;
}

.billing-empty[b-xzmi9kcj09] {
    height: 95px !important;
    color: #81909c !important;
    text-align: center;
    font-size: 10px;
}

.status-prefacture[b-xzmi9kcj09] {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef4f8;
    color: #446b86;
    font-size: 8px;
    font-weight: 800;
}

.cr-axio-badge[b-xzmi9kcj09] {
    display: inline-flex;
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 999px;
    background: #fff0cb;
    color: #8e671c;
    font-size: 7px;
    font-weight: 850;
    vertical-align: middle;
}

.billing-summary[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 58px;
    padding: 9px 12px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #f8fafc;
}

.billing-summary-text[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    color: #3c566b;
    font-size: 10px;
}

    .billing-summary-text strong[b-xzmi9kcj09] {
        color: #13314f;
    }

.billing-info-note[b-xzmi9kcj09] {
    padding: 7px 10px;
    border-left: 3px solid #d5a845;
    border-radius: 3px;
    background: #fffaf0;
    color: #775d28;
    font-size: 9px;
}


/* ============================================================
   PLACEHOLDERS
   ============================================================ */

.placeholder-card[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 95px;
    padding: 14px;
    border: 1px dashed #cbd7e1;
    border-radius: 7px;
    background: #fafcfd;
}

    .placeholder-card strong[b-xzmi9kcj09] {
        color: #274761;
        font-size: 12px;
    }

    .placeholder-card span[b-xzmi9kcj09] {
        max-width: 760px;
        color: #748492;
        font-size: 10px;
        line-height: 1.5;
    }

.two-column-summary[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(2, minmax(240px, 1fr));
    gap: 10px;
}



/* ============================================================
   FACTURES & AVOIRS - REGISTRE
   ============================================================ */

.registry-filter-card[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: minmax(240px, 1.5fr) 180px 150px 150px auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #fafcfd;
}

.registry-filter-field[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .registry-filter-field label[b-xzmi9kcj09] {
        color: #52697c;
        font-size: 8.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.25px;
    }

    .registry-filter-field input[b-xzmi9kcj09],
    .registry-filter-field select[b-xzmi9kcj09] {
        width: 100%;
        min-width: 0;
        height: 32px;
        padding: 0 8px;
        border: 1px solid #ccd7e0;
        border-radius: 5px;
        outline: 0;
        background: #ffffff;
        color: #263f54;
        font: inherit;
        font-size: 10px;
    }

.registry-filter-actions[b-xzmi9kcj09] {
    display: flex;
}

.registry-table-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 405px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.registry-table[b-xzmi9kcj09] {
    width: 100%;
    min-width: 1130px;
    border-collapse: collapse;
    font-size: 9px;
}

    .registry-table th[b-xzmi9kcj09] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .registry-table td[b-xzmi9kcj09] {
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
        vertical-align: middle;
        white-space: nowrap;
    }

.registry-row[b-xzmi9kcj09] {
    cursor: pointer;
}

    .registry-row:hover[b-xzmi9kcj09] {
        background: #f6f9fb;
    }

    .registry-row.selected[b-xzmi9kcj09] {
        background: #edf5fa;
    }

.registry-row-credit[b-xzmi9kcj09] {
    background: #fff9f5;
}

    .registry-row-credit.selected[b-xzmi9kcj09] {
        background: #fff0e7;
    }

.registry-number[b-xzmi9kcj09] {
    color: #173d5b !important;
    font-weight: 800;
}

.registry-period[b-xzmi9kcj09] {
    max-width: 255px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.registry-money-col[b-xzmi9kcj09] {
    width: 100px;
    text-align: right !important;
}

.registry-paid-col[b-xzmi9kcj09] {
    width: 72px;
    text-align: center !important;
}

.registry-na[b-xzmi9kcj09] {
    color: #a3adb5;
}

.registry-paid-checkbox[b-xzmi9kcj09] {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: #285f83;
}

    .registry-paid-checkbox:disabled[b-xzmi9kcj09] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .registry-paid-checkbox.locked[b-xzmi9kcj09] {
        accent-color: #7f8991;
    }

.registry-status[b-xzmi9kcj09] {
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

    .registry-status.issued[b-xzmi9kcj09] {
        background: #eef4f8;
        color: #446b86;
    }

    .registry-status.paid[b-xzmi9kcj09] {
        background: #eaf7ef;
        color: #39704f;
    }

    .registry-status.credit-partial[b-xzmi9kcj09] {
        background: #fff3dd;
        color: #8a6426;
    }

    .registry-status.credit-total[b-xzmi9kcj09] {
        background: #f6eaea;
        color: #8b4646;
    }

.registry-actions[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.registry-actions-left[b-xzmi9kcj09] {
    display: flex;
    gap: 7px;
}

.registry-detail-modal[b-xzmi9kcj09] {
    width: min(680px, 100%);
}

.registry-detail-grid[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 8px 14px;
    align-items: baseline;
    font-size: 10px;
}

    .registry-detail-grid span[b-xzmi9kcj09] {
        color: #71808d;
        font-weight: 700;
    }

    .registry-detail-grid strong[b-xzmi9kcj09] {
        color: #263f54;
    }

.registry-path-box[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid #dbe3e9;
    border-radius: 6px;
    background: #f8fafc;
}

    .registry-path-box span[b-xzmi9kcj09] {
        color: #5e7282;
        font-size: 8.5px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .registry-path-box code[b-xzmi9kcj09] {
        overflow-wrap: anywhere;
        color: #29475f;
        font-size: 9px;
        white-space: normal;
    }


/* ============================================================
   COMPTE
   ============================================================ */

.account-filter-card[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: minmax(280px, 1.4fr) 160px 160px auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #fafcfd;
}

.account-kpi-grid[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.account-kpi-card[b-xzmi9kcj09] {
    display: flex;
    min-height: 78px;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

    .account-kpi-card span[b-xzmi9kcj09] {
        color: #7a8895;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.25px;
    }

    .account-kpi-card strong[b-xzmi9kcj09] {
        color: #17344f;
        font-size: 18px;
        font-weight: 800;
    }

.account-table-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 430px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.account-table[b-xzmi9kcj09] {
    width: 100%;
    min-width: 1150px;
    border-collapse: collapse;
    font-size: 9px;
}

    .account-table th[b-xzmi9kcj09] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .account-table td[b-xzmi9kcj09] {
        height: 36px;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
        vertical-align: middle;
        white-space: nowrap;
    }

.account-bottom-row[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.account-summary-text[b-xzmi9kcj09] {
    flex: 1;
    color: #17344f;
    font-size: 10px;
    font-weight: 800;
}

.account-print-document[b-xzmi9kcj09] {
    display: none;
}


/* ============================================================
   CR DO
   ============================================================ */

.cr-do-filter-card[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: 190px minmax(190px, 1.2fr) 145px 165px 150px auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #fafcfd;
}

.cr-do-summary[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

    .cr-do-summary > div[b-xzmi9kcj09] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 9px 11px;
        border: 1px solid #dce3ea;
        border-radius: 6px;
        background: #f8fafc;
    }

    .cr-do-summary span[b-xzmi9kcj09] {
        color: #7a8895;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cr-do-summary strong[b-xzmi9kcj09] {
        color: #28455d;
        font-size: 12px;
    }

.cr-do-table-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 430px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.cr-do-table[b-xzmi9kcj09] {
    width: 100%;
    min-width: 1120px;
    border-collapse: collapse;
    font-size: 9px;
}

    .cr-do-table th[b-xzmi9kcj09] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .cr-do-table td[b-xzmi9kcj09] {
        height: 36px;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
        vertical-align: middle;
        white-space: nowrap;
    }

.cr-do-actions[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .cr-do-actions .billing-info-note[b-xzmi9kcj09] {
        flex: 1;
    }


/* ============================================================
   CR AXIO
   ============================================================ */

.cr-axio-filter-card[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) 155px 175px 190px auto;
    gap: 10px;
    align-items: end;
    padding: 10px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #fafcfd;
}

.cr-axio-summary[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

    .cr-axio-summary > div[b-xzmi9kcj09] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 9px 11px;
        border: 1px solid #dce3ea;
        border-radius: 6px;
        background: #f8fafc;
    }

    .cr-axio-summary span[b-xzmi9kcj09] {
        color: #7a8895;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cr-axio-summary strong[b-xzmi9kcj09] {
        color: #28455d;
        font-size: 12px;
    }

.cr-axio-table-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 430px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.cr-axio-table[b-xzmi9kcj09] {
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
    font-size: 9px;
}

    .cr-axio-table th[b-xzmi9kcj09] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .cr-axio-table td[b-xzmi9kcj09] {
        height: 36px;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
        vertical-align: middle;
        white-space: nowrap;
    }

.cr-check-col[b-xzmi9kcj09] {
    width: 60px;
    text-align: center !important;
}

.cr-inline-select[b-xzmi9kcj09] {
    min-width: 112px;
    height: 28px;
    padding: 0 5px;
    border: 1px solid #ced8e0;
    border-radius: 4px;
    background: #ffffff;
    color: #334d61;
    font: inherit;
    font-size: 9px;
}

.cr-missing-invoice[b-xzmi9kcj09] {
    color: #a45b4e;
    font-weight: 700;
}

.cr-paid-yes[b-xzmi9kcj09],
.cr-paid-no[b-xzmi9kcj09] {
    display: inline-flex;
    min-width: 34px;
    justify-content: center;
    padding: 3px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

.cr-paid-yes[b-xzmi9kcj09] {
    background: #eaf7ef;
    color: #39704f;
}

.cr-paid-no[b-xzmi9kcj09] {
    background: #f5f6f7;
    color: #77838d;
}

.cr-action-cell[b-xzmi9kcj09] {
    width: 86px;
    text-align: right;
}

.cr-pay-button[b-xzmi9kcj09] {
    min-width: 72px;
    height: 28px;
    padding: 0 8px;
}

.cr-axio-actions[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .cr-axio-actions .billing-info-note[b-xzmi9kcj09] {
        flex: 1;
    }


/* ============================================================
   CR AXIO - REMISE BANQUE
   ============================================================ */

.cr-remise-modal[b-xzmi9kcj09] {
    width: min(900px, 100%);
}

.cr-remise-summary[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

    .cr-remise-summary > div[b-xzmi9kcj09] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 12px;
        border: 1px solid #dce3ea;
        border-radius: 7px;
        background: #f8fafc;
    }

    .cr-remise-summary span[b-xzmi9kcj09] {
        color: #7a8895;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cr-remise-summary strong[b-xzmi9kcj09] {
        color: #28455d;
        font-size: 13px;
    }

    .cr-remise-summary small[b-xzmi9kcj09] {
        color: #667085;
        font-size: 10px;
        font-weight: 700;
    }

.cr-remise-table-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 340px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.cr-remise-table[b-xzmi9kcj09] {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    font-size: 9px;
}

    .cr-remise-table th[b-xzmi9kcj09] {
        padding: 8px 9px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .cr-remise-table td[b-xzmi9kcj09] {
        padding: 8px 9px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
    }


/* ============================================================
   FACTURE MANUELLE
   ============================================================ */

.manual-invoice-modal[b-xzmi9kcj09] {
    width: min(940px, 100%);
    max-height: 92vh;
    overflow: auto;
}

.manual-invoice-grid[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

    .manual-invoice-grid .manual-wide[b-xzmi9kcj09] {
        grid-column: span 2;
    }

/* ============================================================
   CREATION AVOIR
   ============================================================ */

.credit-modal[b-xzmi9kcj09] {
    width: min(860px, 100%);
    max-height: 92vh;
    overflow: auto;
}

.credit-params-grid[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 12px;
    align-items: start;
}

.credit-reason-field textarea[b-xzmi9kcj09] {
    width: 100%;
    min-height: 78px;
    resize: vertical;
    padding: 8px;
    border: 1px solid #ccd7e0;
    border-radius: 5px;
    outline: 0;
    background: #ffffff;
    color: #263f54;
    font: inherit;
    font-size: 10px;
}

    .credit-reason-field textarea:focus[b-xzmi9kcj09] {
        border-color: #819cb1;
    }

.credit-lines-header[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .credit-lines-header > div[b-xzmi9kcj09] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .credit-lines-header strong[b-xzmi9kcj09] {
        color: #29465e;
        font-size: 10px;
    }

    .credit-lines-header span[b-xzmi9kcj09] {
        color: #788895;
        font-size: 9px;
    }

.credit-lines-wrap[b-xzmi9kcj09] {
    overflow: auto;
    max-height: 250px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
}

.credit-lines-table[b-xzmi9kcj09] {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
}

    .credit-lines-table th[b-xzmi9kcj09] {
        padding: 7px;
        border-bottom: 1px solid #d6e0e8;
        background: #f1f5f8;
        color: #496277;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .credit-lines-table td[b-xzmi9kcj09] {
        padding: 6px 7px;
        border-bottom: 1px solid #edf1f4;
    }

    .credit-lines-table input[b-xzmi9kcj09] {
        width: 100%;
        min-width: 0;
        height: 30px;
        padding: 0 7px;
        border: 1px solid #d0dae2;
        border-radius: 4px;
        outline: 0;
        background: #ffffff;
        color: #334d61;
        font: inherit;
        font-size: 9px;
    }

.credit-delete-col[b-xzmi9kcj09] {
    width: 42px;
    text-align: center;
}

.credit-delete-button[b-xzmi9kcj09] {
    width: 26px;
    height: 26px;
    border: 1px solid #e0c4c4;
    border-radius: 4px;
    background: #fff5f5;
    color: #9a4a4a;
    font-size: 16px;
    line-height: 20px;
    cursor: pointer;
}

    .credit-delete-button:disabled[b-xzmi9kcj09] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.credit-summary[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #f8fafc;
    color: #3f586c;
    font-size: 10px;
}

    .credit-summary span[b-xzmi9kcj09] {
        font-weight: 800;
        color: #173c5a;
    }

    .credit-summary strong[b-xzmi9kcj09] {
        text-align: right;
    }

/* ============================================================
   CONFIRMATION GENERATION
   ============================================================ */

.billing-modal-backdrop[b-xzmi9kcj09] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 37, 52, 0.48);
}

.billing-modal[b-xzmi9kcj09] {
    width: min(610px, 100%);
    overflow: hidden;
    border: 1px solid #ced8e1;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(21, 43, 60, 0.24);
}

.billing-modal-header[b-xzmi9kcj09] {
    padding: 16px 18px 12px;
    border-bottom: 1px solid #e3e9ee;
}

    .billing-modal-header h3[b-xzmi9kcj09] {
        margin: 0;
        color: #13314f;
        font-size: 17px;
        font-weight: 800;
    }

    .billing-modal-header p[b-xzmi9kcj09] {
        margin: 5px 0 0;
        color: #7b5c45;
        font-size: 9.5px;
        line-height: 1.45;
    }

.billing-modal-body[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 16px 18px;
}

.billing-confirm-grid[b-xzmi9kcj09] {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 8px 14px;
    align-items: baseline;
    font-size: 10px;
}

    .billing-confirm-grid span[b-xzmi9kcj09] {
        color: #71808d;
        font-weight: 700;
    }

    .billing-confirm-grid strong[b-xzmi9kcj09] {
        color: #263f54;
    }

.billing-warning-box[b-xzmi9kcj09] {
    padding: 10px 12px;
    border: 1px solid #e8c894;
    border-radius: 6px;
    background: #fff9ef;
    color: #7e5d27;
    font-size: 9.5px;
    line-height: 1.5;
}

.billing-modal-actions[b-xzmi9kcj09] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid #e3e9ee;
    background: #f8fafc;
}

.billing-button-danger-confirm[b-xzmi9kcj09] {
    border: 1px solid #a84848;
    background: #a84848;
    color: #ffffff;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .facturation-kpis[b-xzmi9kcj09] {
        grid-template-columns: repeat(3, minmax(120px, 1fr));
    }

    .facturation-tabs[b-xzmi9kcj09] {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

    .billing-filter-card[b-xzmi9kcj09],
    .registry-filter-card[b-xzmi9kcj09] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .billing-selection-actions[b-xzmi9kcj09] {
        flex-direction: row;
    }
}

@media (max-width: 760px) {

    .facturation-page[b-xzmi9kcj09] {
        padding: 8px;
    }

    .facturation-header[b-xzmi9kcj09] {
        align-items: flex-start;
        flex-direction: column;
    }

    .facturation-kpis[b-xzmi9kcj09],
    .facturation-tabs[b-xzmi9kcj09],
    .two-column-summary[b-xzmi9kcj09],
    .billing-filter-card[b-xzmi9kcj09],
    .registry-filter-card[b-xzmi9kcj09] {
        grid-template-columns: 1fr;
    }

    .tab-title-row[b-xzmi9kcj09],
    .billing-summary[b-xzmi9kcj09],
    .registry-actions[b-xzmi9kcj09] {
        align-items: stretch;
        flex-direction: column;
    }

    .billing-filter-actions[b-xzmi9kcj09],
    .billing-selection-actions[b-xzmi9kcj09],
    .registry-actions-left[b-xzmi9kcj09] {
        flex-direction: column;
    }

    .credit-params-grid[b-xzmi9kcj09],
    .manual-invoice-grid[b-xzmi9kcj09],
    .cr-axio-filter-card[b-xzmi9kcj09],
    .cr-axio-summary[b-xzmi9kcj09],
    .cr-do-filter-card[b-xzmi9kcj09],
    .cr-do-summary[b-xzmi9kcj09],
    .cr-remise-summary[b-xzmi9kcj09],
    .account-filter-card[b-xzmi9kcj09],
    .account-kpi-grid[b-xzmi9kcj09] {
        grid-template-columns: 1fr;
    }

        .manual-invoice-grid .manual-wide[b-xzmi9kcj09] {
            grid-column: span 1;
        }

    .credit-lines-header[b-xzmi9kcj09],
    .credit-summary[b-xzmi9kcj09] {
        align-items: stretch;
        flex-direction: column;
    }

        .credit-summary strong[b-xzmi9kcj09] {
            text-align: left;
        }
}

/* ============================================================
   CR AXIO - DOCUMENT IMPRIMABLE
   ============================================================ */

.cr-remise-print-document[b-xzmi9kcj09],
.cr-do-print-document[b-xzmi9kcj09] {
    display: none;
}

@media print {

    .miradore-print-document[b-xzmi9kcj09] {
        font-family: Arial, sans-serif;
        font-size: 11pt;
    }

    .cr-print-header[b-xzmi9kcj09] {
        margin-bottom: 28px;
    }

        .cr-print-header h1[b-xzmi9kcj09] {
            margin: 0 0 8px;
            font-size: 18pt;
            font-weight: 700;
        }

        .cr-print-header p[b-xzmi9kcj09] {
            margin: 0;
            font-size: 10pt;
        }

    .cr-print-section[b-xzmi9kcj09] {
        margin-top: 24px;
        page-break-inside: avoid;
    }

        .cr-print-section h2[b-xzmi9kcj09] {
            margin: 0 0 10px;
            font-size: 13pt;
            font-weight: 700;
        }

    .cr-remise-print-document table[b-xzmi9kcj09] {
        width: 100%;
        border-collapse: collapse;
    }

    .cr-remise-print-document th[b-xzmi9kcj09],
    .cr-remise-print-document td[b-xzmi9kcj09] {
        padding: 7px 8px;
        border: 1px solid #000000;
        text-align: left;
    }

        .cr-remise-print-document th:last-child[b-xzmi9kcj09],
        .cr-remise-print-document td:last-child[b-xzmi9kcj09] {
            text-align: right;
        }

    .cr-print-total[b-xzmi9kcj09] {
        margin-top: 10px;
        font-weight: 700;
    }

    .cr-print-grand-total[b-xzmi9kcj09] {
        margin-top: 32px;
        padding-top: 12px;
        border-top: 2px solid #000000;
        font-size: 14pt;
        font-weight: 700;
    }
}


/* ============================================================
   CR DO - BORDEREAU IMPRIMABLE
   ============================================================ */

.cr-do-recognition[b-xzmi9kcj09] {
    margin-top: 46px;
    max-width: 760px;
    line-height: 1.45;
}

.cr-do-sign-line[b-xzmi9kcj09] {
    margin-top: 28px;
}

.cr-do-sign-title[b-xzmi9kcj09] {
    margin-top: 32px;
    font-weight: 700;
}

.cr-do-signature-box[b-xzmi9kcj09] {
    width: 420px;
    max-width: 100%;
    height: 110px;
    margin-top: 14px;
    border: 1px solid #000000;
}

@media print {
    .cr-do-print-document[b-xzmi9kcj09] {
        font-family: Arial, sans-serif;
        font-size: 11pt;
    }

        .cr-do-print-document table[b-xzmi9kcj09] {
            width: 100%;
            border-collapse: collapse;
        }

        .cr-do-print-document th[b-xzmi9kcj09],
        .cr-do-print-document td[b-xzmi9kcj09] {
            padding: 7px 8px;
            border: 1px solid #000000;
            text-align: left;
        }

            .cr-do-print-document th:last-child[b-xzmi9kcj09],
            .cr-do-print-document td:last-child[b-xzmi9kcj09] {
                text-align: right;
            }
}


/* ============================================================
   COMPTE - RELEVÉ IMPRIMABLE
   ============================================================ */

@media print {
    .account-print-document[b-xzmi9kcj09] {
        display: block !important;
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        color: #000000 !important;
        font-family: Arial, sans-serif;
        font-size: 9pt;
    }

    .account-print-header[b-xzmi9kcj09] {
        margin-bottom: 24px;
    }

        .account-print-header h1[b-xzmi9kcj09] {
            margin: 0 0 12px;
            font-size: 18pt;
            font-weight: 700;
        }

        .account-print-header p[b-xzmi9kcj09] {
            margin: 0;
            font-size: 10pt;
            font-weight: 700;
        }

    .account-print-table[b-xzmi9kcj09] {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

        .account-print-table th[b-xzmi9kcj09],
        .account-print-table td[b-xzmi9kcj09] {
            padding: 5px 6px;
            border: 1px solid #000000;
            font-size: 8pt;
            text-align: left;
            overflow-wrap: anywhere;
        }

        .account-print-table th[b-xzmi9kcj09] {
            font-weight: 700;
        }

            .account-print-table th:nth-child(1)[b-xzmi9kcj09] {
                width: 10%;
            }

            .account-print-table th:nth-child(2)[b-xzmi9kcj09] {
                width: 17%;
            }

            .account-print-table th:nth-child(3)[b-xzmi9kcj09] {
                width: 23%;
            }

            .account-print-table th:nth-child(4)[b-xzmi9kcj09] {
                width: 12%;
            }

            .account-print-table th:nth-child(5)[b-xzmi9kcj09] {
                width: 11%;
            }

            .account-print-table th:nth-child(6)[b-xzmi9kcj09] {
                width: 12%;
            }

            .account-print-table th:nth-child(7)[b-xzmi9kcj09] {
                width: 15%;
            }

    .account-print-kpis[b-xzmi9kcj09] {
        margin-top: 18px;
        font-size: 9pt;
        font-weight: 700;
    }
}


/* ============================================================
   FACTURATION - AJUSTEMENTS D'ESPACEMENT DES FILTRES
   ============================================================ */

/*
 * Un peu plus d'air entre les champs de tous les blocs filtres
 * pour éviter l'effet de chevauchement visible entre inputs,
 * selects et boutons.
 */
.billing-filters[b-xzmi9kcj09],
.registry-filter-card[b-xzmi9kcj09],
.cr-axio-filter-card[b-xzmi9kcj09],
.cr-do-filter-card[b-xzmi9kcj09],
.account-filter-card[b-xzmi9kcj09] {
    column-gap: 14px !important;
    row-gap: 12px !important;
}

/*
 * Chaque champ garde une largeur minimale propre et ne déborde
 * pas sur le voisin.
 */
.billing-filter-field[b-xzmi9kcj09],
.registry-filter-field[b-xzmi9kcj09] {
    min-width: 0;
}

    .billing-filter-field input[b-xzmi9kcj09],
    .billing-filter-field select[b-xzmi9kcj09],
    .registry-filter-field input[b-xzmi9kcj09],
    .registry-filter-field select[b-xzmi9kcj09] {
        width: 100%;
        box-sizing: border-box;
    }

/*
 * Espace supplémentaire avant la zone de boutons à droite.
 */
.billing-filter-actions[b-xzmi9kcj09],
.registry-filter-actions[b-xzmi9kcj09] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}

    /*
 * Évite que deux boutons se collent visuellement.
 */
    .billing-filter-actions .billing-button[b-xzmi9kcj09],
    .registry-filter-actions .billing-button[b-xzmi9kcj09] {
        flex-shrink: 0;
    }

/*
 * Cas spécifique du bloc "À facturer" :
 * les boutons Tout sélectionner / Tout désélectionner restent
 * séparés du bloc DO + période.
 */
.billing-selection-actions[b-xzmi9kcj09] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-left: 8px;
}

/*
 * Sur les résolutions plus étroites, on conserve l'espacement
 * sans forcer de chevauchement.
 */
@media (max-width: 1250px) {
    .billing-filters[b-xzmi9kcj09],
    .registry-filter-card[b-xzmi9kcj09],
    .cr-axio-filter-card[b-xzmi9kcj09],
    .cr-do-filter-card[b-xzmi9kcj09],
    .account-filter-card[b-xzmi9kcj09] {
        column-gap: 10px !important;
        row-gap: 10px !important;
    }

    .billing-filter-actions[b-xzmi9kcj09],
    .registry-filter-actions[b-xzmi9kcj09] {
        margin-left: 0;
    }
}


/* ============================================================
   REGISTRE - DÉTAIL FACTURE
   ============================================================ */

.registry-detail-table-wrap[b-xzmi9kcj09] {
    margin-top: 14px;
    overflow: auto;
    max-height: 320px;
    border: 1px solid #dce3ea;
    border-radius: 7px;
    background: #ffffff;
}

.registry-detail-table[b-xzmi9kcj09] {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px;
}

    .registry-detail-table th[b-xzmi9kcj09] {
        padding: 8px 9px;
        border-bottom: 1px solid #d4dee7;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 8px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .registry-detail-table td[b-xzmi9kcj09] {
        padding: 8px 9px;
        border-bottom: 1px solid #edf1f4;
        color: #334d61;
    }
/* /Components/Pages/Home.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   Tableau de bord
   ============================================================ */

.dashboard[b-awsca0ryq1] {
    width: 100%;
    max-width: 1650px;
    margin: 0 auto;
}


/* ============================================================
   EN-TETE
   ============================================================ */

.dashboard-header[b-awsca0ryq1] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.page-eyebrow[b-awsca0ryq1] {
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.dashboard-header h1[b-awsca0ryq1] {
    margin: 0;
    color: #101828;
    font-size: 30px;
    font-weight: 750;
    letter-spacing: -0.7px;
}

.dashboard-header p[b-awsca0ryq1] {
    margin: 7px 0 0;
    color: #7b8799;
    font-size: 13px;
}

.header-actions[b-awsca0ryq1] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* ============================================================
   BOUTONS
   ============================================================ */

.primary-button[b-awsca0ryq1],
.secondary-button[b-awsca0ryq1] {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 17px;
    border-radius: 10px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.primary-button[b-awsca0ryq1] {
    border: none;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.20);
}

    .primary-button:hover[b-awsca0ryq1] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.26);
    }

    .primary-button span[b-awsca0ryq1] {
        font-size: 17px;
        font-weight: 400;
    }

.secondary-button[b-awsca0ryq1] {
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #475467;
}

    .secondary-button:hover[b-awsca0ryq1] {
        background: #f8fafc;
        transform: translateY(-1px);
    }


/* ============================================================
   KPI
   ============================================================ */

.kpi-grid[b-awsca0ryq1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.kpi-card-clickable[b-awsca0ryq1] {
    cursor: pointer;
}

    .kpi-card-clickable:hover[b-awsca0ryq1] {
        transform: translateY(-3px);
        border-color: #cfd9e7;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    }

    .kpi-card-clickable:focus[b-awsca0ryq1] {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
    }


.kpi-card[b-awsca0ryq1] {
    position: relative;
    min-height: 178px;
    padding: 20px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.015), 0 8px 24px rgba(15, 23, 42, 0.025);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .kpi-card[b-awsca0ryq1]::after {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        right: -45px;
        top: -45px;
        border-radius: 50%;
        background: rgba(37, 99, 235, 0.035);
    }

    .kpi-card:hover[b-awsca0ryq1] {
        transform: translateY(-2px);
        border-color: #dce4ef;
        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    }

    .kpi-card.attention[b-awsca0ryq1]::after {
        background: rgba(245, 158, 11, 0.055);
    }

.kpi-card-total[b-awsca0ryq1] {
    border-color: #dbe7f7;
    background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
}

    .kpi-card-total[b-awsca0ryq1]::after {
        background: rgba(37, 99, 235, 0.07);
    }

.kpi-top[b-awsca0ryq1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 17px;
}

.kpi-icon[b-awsca0ryq1] {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 16px;
    font-weight: 800;
}

.attention .kpi-icon[b-awsca0ryq1] {
    background: #fff7ed;
    color: #f59e0b;
}

.kpi-trend[b-awsca0ryq1],
.kpi-status[b-awsca0ryq1] {
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 800;
}

    .kpi-trend.positive[b-awsca0ryq1] {
        background: #ecfdf3;
        color: #16a34a;
    }

    .kpi-trend.warning[b-awsca0ryq1] {
        background: #fff7ed;
        color: #d97706;
    }

.kpi-status[b-awsca0ryq1] {
    background: #f2f4f7;
    color: #667085;
}

.kpi-value[b-awsca0ryq1] {
    color: #101828;
    font-size: 29px;
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.8px;
}

.kpi-label[b-awsca0ryq1] {
    margin-top: 7px;
    color: #475467;
    font-size: 12px;
    font-weight: 650;
}

.kpi-footer[b-awsca0ryq1] {
    margin-top: 15px;
    color: #98a2b3;
    font-size: 10px;
}

    .kpi-footer strong[b-awsca0ryq1] {
        color: #667085;
    }


/* ============================================================
   GRILLE PRINCIPALE
   ============================================================ */

.dashboard-grid[b-awsca0ryq1] {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
    gap: 20px;
    margin-bottom: 20px;
}


/* ============================================================
   PANELS
   ============================================================ */

.panel[b-awsca0ryq1] {
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.012), 0 8px 24px rgba(15, 23, 42, 0.02);
}

.panel-header[b-awsca0ryq1] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 20px;
    border-bottom: 1px solid #edf1f6;
}

    .panel-header h2[b-awsca0ryq1] {
        margin: 0;
        color: #1d2939;
        font-size: 14px;
        font-weight: 750;
    }

    .panel-header p[b-awsca0ryq1] {
        margin: 4px 0 0;
        color: #98a2b3;
        font-size: 10px;
    }

.text-button[b-awsca0ryq1] {
    padding: 6px 0;
    border: none;
    background: transparent;
    color: #2563eb;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
}

    .text-button:hover[b-awsca0ryq1] {
        color: #1d4ed8;
    }


/* ============================================================
   ACTIVITE
   ============================================================ */

.activity-list[b-awsca0ryq1] {
    padding: 4px 20px 8px;
}

.activity-row[b-awsca0ryq1] {
    min-height: 67px;
    display: flex;
    align-items: center;
    padding-left: 4px;
    padding-right: 4px;
    border-bottom: 1px solid #f0f2f6;
    transition: background 0.16s ease;
}

    .activity-row:hover[b-awsca0ryq1] {
        background: #fbfcfe;
    }

    .activity-row:last-child[b-awsca0ryq1] {
        border-bottom: none;
    }

.activity-indicator[b-awsca0ryq1] {
    width: 8px;
    height: 8px;
    margin-right: 14px;
    border-radius: 50%;
}

    .activity-indicator.blue[b-awsca0ryq1] {
        background: #2563eb;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08);
    }

    .activity-indicator.cyan[b-awsca0ryq1] {
        background: #06b6d4;
        box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.08);
    }

    .activity-indicator.green[b-awsca0ryq1] {
        background: #22c55e;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08);
    }

    .activity-indicator.orange[b-awsca0ryq1] {
        background: #f59e0b;
        box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08);
    }

.activity-content[b-awsca0ryq1] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

    .activity-content strong[b-awsca0ryq1] {
        color: #344054;
        font-size: 11px;
        font-weight: 700;
    }

    .activity-content span[b-awsca0ryq1] {
        margin-top: 3px;
        color: #98a2b3;
        font-size: 9px;
    }

.activity-number[b-awsca0ryq1] {
    min-width: 40px;
    text-align: right;
    color: #1d2939;
    font-size: 16px;
    font-weight: 750;
}


/* ============================================================
   ALERTES
   ============================================================ */

.alert-count[b-awsca0ryq1] {
    min-width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #fff1f2;
    color: #e11d48;
    font-size: 10px;
    font-weight: 800;
}

.alert-list[b-awsca0ryq1] {
    padding: 13px;
}

.alert-item[b-awsca0ryq1] {
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 11px;
    border-radius: 11px;
    border: 1px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

    .alert-item:hover[b-awsca0ryq1] {
        transform: translateY(-1px);
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
    }

    .alert-item:last-child[b-awsca0ryq1] {
        margin-bottom: 0;
    }

    .alert-item.danger[b-awsca0ryq1] {
        background: #fff7f7;
        border-color: #fee2e2;
    }

    .alert-item.warning[b-awsca0ryq1] {
        background: #fffaf1;
        border-color: #fef0c7;
    }

    .alert-item.information[b-awsca0ryq1] {
        background: #f5f9ff;
        border-color: #e1ecff;
    }

.alert-symbol[b-awsca0ryq1] {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 850;
}

.danger .alert-symbol[b-awsca0ryq1] {
    color: #dc2626;
}

.warning .alert-symbol[b-awsca0ryq1] {
    color: #d97706;
}

.information .alert-symbol[b-awsca0ryq1] {
    color: #2563eb;
}

.alert-item > div:last-child[b-awsca0ryq1] {
    display: flex;
    flex-direction: column;
}

.alert-item strong[b-awsca0ryq1] {
    color: #344054;
    font-size: 10px;
    font-weight: 750;
}

.alert-item span[b-awsca0ryq1] {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 9px;
}


/* ============================================================
   CA PAR DONNEUR D'ORDRE
   ============================================================ */

.ca-do-panel[b-awsca0ryq1] {
    margin-bottom: 20px;
    overflow: hidden;
}

.ca-do-list[b-awsca0ryq1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    padding: 18px;
}

.ca-do-item[b-awsca0ryq1] {
    position: relative;
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid #e8edf4;
    border-radius: 12px;
    background: linear-gradient( 145deg, #ffffff 0%, #f8fbff 100% );
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .ca-do-item[b-awsca0ryq1]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: #2563eb;
    }

    .ca-do-item:hover[b-awsca0ryq1] {
        transform: translateY(-1px);
        border-color: #dce5f2;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    }

.ca-do-name[b-awsca0ryq1] {
    margin-bottom: 7px;
    color: #667085;
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ca-do-value[b-awsca0ryq1] {
    color: #101828;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.4px;
}


/* ============================================================
   TOURNEES
   ============================================================ */

.tours-panel[b-awsca0ryq1] {
    margin-top: 20px;
    overflow: hidden;
}

    .tours-panel .panel-header[b-awsca0ryq1] {
        background: linear-gradient( 180deg, #ffffff, #fbfcfe );
    }

.table-wrapper[b-awsca0ryq1] {
    width: 100%;
    overflow-x: auto;
}

.modern-table[b-awsca0ryq1] {
    width: 100%;
    border-collapse: collapse;
}

    .modern-table th[b-awsca0ryq1] {
        padding: 12px 20px;
        background: #fafbfc;
        color: #98a2b3;
        border-bottom: 1px solid #edf1f6;
        text-align: left;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.6px;
        text-transform: uppercase;
    }

    .modern-table td[b-awsca0ryq1] {
        height: 58px;
        padding: 0 20px;
        color: #667085;
        border-bottom: 1px solid #f0f2f5;
        font-size: 10px;
    }

    .modern-table tbody tr:last-child td[b-awsca0ryq1] {
        border-bottom: none;
    }

    .modern-table tbody tr[b-awsca0ryq1] {
        transition: background 0.15s ease;
    }

        .modern-table tbody tr:hover[b-awsca0ryq1] {
            background: #fafcff;
        }

    .modern-table td strong[b-awsca0ryq1] {
        color: #344054;
        font-weight: 750;
    }


/* ============================================================
   ETAT VIDE
   ============================================================ */

.empty-panel[b-awsca0ryq1] {
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px;
    padding: 22px;
    border: 1px dashed #d7deea;
    border-radius: 12px;
    background: linear-gradient( 145deg, #fbfcfe, #f6f8fb );
    color: #98a2b3;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}


/* ============================================================
   CHARGEMENT / ERREURS
   ============================================================ */

.dashboard-state[b-awsca0ryq1] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    color: #667085;
    font-size: 12px;
    text-align: center;
}

.error-state[b-awsca0ryq1] {
    flex-direction: column;
    gap: 8px;
    color: #b42318;
}

    .error-state span[b-awsca0ryq1] {
        color: #667085;
    }


/* ============================================================
   PROGRESSION
   ============================================================ */

.progress-cell[b-awsca0ryq1] {
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-bar[b-awsca0ryq1] {
    width: 90px;
    height: 5px;
    overflow: hidden;
    border-radius: 20px;
    background: #edf1f5;
}

    .progress-bar span[b-awsca0ryq1] {
        display: block;
        height: 100%;
        border-radius: 20px;
        background: linear-gradient( 90deg, #2563eb, #60a5fa );
    }

.progress-cell > span[b-awsca0ryq1] {
    min-width: 30px;
    color: #667085;
    font-size: 9px;
    font-weight: 700;
}


/* ============================================================
   STATUTS
   ============================================================ */

.status-badge[b-awsca0ryq1] {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 750;
}

    .status-badge.running[b-awsca0ryq1] {
        background: #eff6ff;
        color: #2563eb;
    }

    .status-badge.completed[b-awsca0ryq1] {
        background: #ecfdf3;
        color: #16a34a;
    }


/* ============================================================
   MODALES DETAIL KPI
   ============================================================ */

.dashboard-modal-backdrop[b-awsca0ryq1] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
}

.dashboard-modal[b-awsca0ryq1] {
    width: min(980px, 100%);
    max-height: 82vh;
    overflow: hidden;
    border: 1px solid #e3e9f1;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.dashboard-modal-header[b-awsca0ryq1] {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid #edf1f6;
}

    .dashboard-modal-header h3[b-awsca0ryq1] {
        margin: 0;
        color: #1d2939;
        font-size: 17px;
        font-weight: 800;
    }

    .dashboard-modal-header p[b-awsca0ryq1] {
        margin: 5px 0 0;
        color: #98a2b3;
        font-size: 10px;
    }

.dashboard-modal-close[b-awsca0ryq1] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: 1px solid #e4e9ef;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 20px;
    cursor: pointer;
}

    .dashboard-modal-close:hover[b-awsca0ryq1] {
        background: #f8fafc;
        color: #1d2939;
    }

.dashboard-modal-body[b-awsca0ryq1] {
    max-height: calc(82vh - 77px);
    overflow: auto;
    padding: 16px 20px 20px;
}

.modal-table-wrap[b-awsca0ryq1] {
    overflow: auto;
    border: 1px solid #e8edf4;
    border-radius: 11px;
}

.modal-table[b-awsca0ryq1] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

    .modal-table th[b-awsca0ryq1] {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 10px 12px;
        border-bottom: 1px solid #e8edf4;
        background: #f8fafc;
        color: #7b8799;
        text-align: left;
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.45px;
    }

    .modal-table td[b-awsca0ryq1] {
        padding: 11px 12px;
        border-bottom: 1px solid #f0f2f5;
        color: #667085;
        font-size: 10px;
        vertical-align: middle;
    }

    .modal-table tbody tr:last-child td[b-awsca0ryq1] {
        border-bottom: none;
    }

    .modal-table tbody tr:hover[b-awsca0ryq1] {
        background: #fbfcfe;
    }

    .modal-table td strong[b-awsca0ryq1] {
        color: #344054;
        font-weight: 800;
    }

.modal-status[b-awsca0ryq1] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
}

    .modal-status.warning[b-awsca0ryq1] {
        background: #fff7ed;
        color: #d97706;
    }

.modal-comment[b-awsca0ryq1] {
    max-width: 340px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.modal-empty[b-awsca0ryq1] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #98a2b3;
    font-size: 11px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .kpi-grid[b-awsca0ryq1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid[b-awsca0ryq1] {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 900px) {

    .ca-do-list[b-awsca0ryq1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 760px) {

    .dashboard-header[b-awsca0ryq1] {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-actions[b-awsca0ryq1] {
        width: 100%;
    }

    .primary-button[b-awsca0ryq1],
    .secondary-button[b-awsca0ryq1] {
        flex: 1;
    }

    .kpi-grid[b-awsca0ryq1] {
        grid-template-columns: 1fr;
    }

    .dashboard-header h1[b-awsca0ryq1] {
        font-size: 25px;
    }

    .modern-table[b-awsca0ryq1] {
        min-width: 720px;
    }
}


@media (max-width: 600px) {

    .ca-do-list[b-awsca0ryq1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Navettes.razor.rz.scp.css */
/* ============================================================
   NAVETTES
   ============================================================ */

.navette-page[b-susp2eeac5] {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 18px;
    background: #f5f7fa;
    color: #17344f;
    font-family: "Segoe UI", Arial, sans-serif;
}

.navette-header[b-susp2eeac5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .navette-header h1[b-susp2eeac5] {
        margin: 0;
        color: #13314f;
        font-size: 22px;
        font-weight: 800;
    }

    .navette-header p[b-susp2eeac5] {
        margin: 3px 0 0;
        color: #71808d;
        font-size: 9px;
    }

.navette-badge[b-susp2eeac5] {
    padding: 6px 10px;
    border: 1px solid #d6e0e7;
    border-radius: 999px;
    background: #f7fafc;
    color: #355b76;
    font-size: 7px;
    font-weight: 900;
}

.navette-alert[b-susp2eeac5] {
    padding: 9px 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    font-size: 9px;
}

    .navette-alert.error[b-susp2eeac5] {
        border: 1px solid #efc7c7;
        background: #fff4f4;
        color: #9b3535;
    }

    .navette-alert.success[b-susp2eeac5] {
        border: 1px solid #c8e7d7;
        background: #f0faf5;
        color: #24714d;
    }


/* ============================================================
   FILTRES
   ============================================================ */

.navette-filter-card[b-susp2eeac5] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 180px 240px auto auto;
    gap: 10px;
    align-items: end;
    padding: 12px;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
}

.navette-field[b-susp2eeac5] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

    .navette-field label[b-susp2eeac5] {
        color: #35546d;
        font-size: 7px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .navette-field input[b-susp2eeac5],
    .navette-field select[b-susp2eeac5] {
        width: 100%;
        min-height: 34px;
        box-sizing: border-box;
        padding: 6px 9px;
        border: 1px solid #d4dee6;
        border-radius: 5px;
        background: #ffffff;
        color: #17344f;
        font-size: 9px;
    }


/* ============================================================
   TABLE PRINCIPALE
   ============================================================ */

.navette-table-card[b-susp2eeac5] {
    min-height: 0;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.navette-table-wrap[b-susp2eeac5] {
    overflow: auto;
    max-height: calc(100vh - 305px);
    min-height: 390px;
}

.navette-table[b-susp2eeac5] {
    width: 100%;
    min-width: 1260px;
    border-collapse: collapse;
    font-size: 8px;
}

    .navette-table th[b-susp2eeac5] {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 38px;
        padding: 6px 8px;
        background: #13314f;
        color: #ffffff;
        font-size: 7px;
        font-weight: 900;
        text-align: left;
        white-space: nowrap;
    }

    .navette-table td[b-susp2eeac5] {
        height: 42px;
        padding: 6px 8px;
        border-bottom: 1px solid #edf1f4;
        color: #40586b;
        vertical-align: middle;
    }

    .navette-table tbody tr[b-susp2eeac5] {
        cursor: pointer;
    }

        .navette-table tbody tr:hover td[b-susp2eeac5] {
            background: #f7fafc;
        }

        .navette-table tbody tr.selected td[b-susp2eeac5] {
            background: #eaf3fb;
        }

.col-check[b-susp2eeac5] {
    width: 42px;
    text-align: center !important;
}

    .col-check input[b-susp2eeac5] {
        width: 15px;
        height: 15px;
        accent-color: #13314f;
    }

.center-cell[b-susp2eeac5] {
    text-align: center;
}

.strong-cell[b-susp2eeac5] {
    color: #133b5b !important;
    font-weight: 800;
}

.comment-cell[b-susp2eeac5] {
    min-width: 210px;
    max-width: 440px;
    white-space: normal;
}

.date-retenue[b-susp2eeac5] {
    min-width: 125px;
    min-height: 29px;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #d5dfe7;
    border-radius: 4px;
    background: #ffffff;
    color: #17344f;
    font-size: 8px;
}

    .date-retenue:disabled[b-susp2eeac5] {
        background: #edf1f4;
        color: #8b98a2;
    }

.empty-row[b-susp2eeac5] {
    padding: 30px !important;
    color: #8896a2 !important;
    text-align: center !important;
}


/* ============================================================
   STATUTS
   ============================================================ */

.status-pill[b-susp2eeac5] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 7px;
    font-weight: 900;
    white-space: nowrap;
}

    .status-pill.waiting[b-susp2eeac5] {
        background: #fff1d8;
        color: #ad6816;
    }

    .status-pill.accepted[b-susp2eeac5] {
        background: #eaf7f1;
        color: #24714d;
    }

    .status-pill.refused[b-susp2eeac5] {
        background: #fff0f0;
        color: #a53d3d;
    }

    .status-pill.done[b-susp2eeac5] {
        background: #eaf1f7;
        color: #274d6a;
    }


/* ============================================================
   ACTIONS
   ============================================================ */

.navette-actions[b-susp2eeac5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.navette-summary[b-susp2eeac5] {
    color: #28455d;
    font-size: 8.5px;
    font-weight: 800;
}

.navette-action-buttons[b-susp2eeac5] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.navette-button[b-susp2eeac5] {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

    .navette-button:disabled[b-susp2eeac5] {
        cursor: default;
        opacity: .42;
    }

    .navette-button.primary[b-susp2eeac5] {
        border: 1px solid #13314f;
        background: #13314f;
        color: #ffffff;
    }

    .navette-button.secondary[b-susp2eeac5] {
        border: 1px solid #d4dee6;
        background: #eef2f5;
        color: #17344f;
    }

    .navette-button.accept[b-susp2eeac5] {
        border: 1px solid #299d6d;
        background: #299d6d;
        color: #ffffff;
    }

    .navette-button.refuse[b-susp2eeac5] {
        border: 1px solid #c84343;
        background: #c84343;
        color: #ffffff;
    }


/* ============================================================
   MODALES
   ============================================================ */

.modal-overlay[b-susp2eeac5] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 42, 60, .48);
}

.modal-card[b-susp2eeac5] {
    max-height: 92vh;
    overflow: auto;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

.detail-modal[b-susp2eeac5] {
    width: min(1080px, 96vw);
}

.refus-modal[b-susp2eeac5] {
    width: min(540px, 94vw);
}

.modal-header[b-susp2eeac5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e3e9ee;
}

.modal-eyebrow[b-susp2eeac5] {
    color: #8a99a5;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

.modal-header h2[b-susp2eeac5] {
    margin: 3px 0;
    color: #13314f;
    font-size: 20px;
}

.modal-header p[b-susp2eeac5] {
    margin: 3px 0 0;
    color: #71808d;
    font-size: 9px;
}

.modal-close[b-susp2eeac5] {
    width: 31px;
    height: 31px;
    border: 1px solid #dae2e8;
    border-radius: 5px;
    background: #ffffff;
    color: #617585;
    font-size: 18px;
    cursor: pointer;
}

.modal-actions[b-susp2eeac5] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 20px 18px;
    border-top: 1px solid #e8edf1;
}


/* ============================================================
   DETAIL
   ============================================================ */

.detail-content[b-susp2eeac5] {
    padding: 18px 20px;
}

.detail-top[b-susp2eeac5] {
    display: grid;
    grid-template-columns: minmax(350px, .95fr) minmax(350px, 1.05fr);
    gap: 20px;
    margin-bottom: 18px;
}

.detail-infos[b-susp2eeac5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 16px;
}

    .detail-infos > div[b-susp2eeac5] {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 3px;
    }

    .detail-infos span[b-susp2eeac5],
    .detail-comment label[b-susp2eeac5],
    .refus-body label[b-susp2eeac5],
    .manual-content > span[b-susp2eeac5] {
        color: #6e7d89;
        font-size: 7px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .detail-infos strong[b-susp2eeac5] {
        color: #23455f;
        font-size: 9px;
    }

.detail-date-field input[b-susp2eeac5] {
    min-height: 31px;
    padding: 4px 7px;
    border: 1px solid #d4dee6;
    border-radius: 5px;
    color: #17344f;
    font-size: 8.5px;
}

.detail-comment[b-susp2eeac5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .detail-comment textarea[b-susp2eeac5],
    .refus-body textarea[b-susp2eeac5] {
        width: 100%;
        box-sizing: border-box;
        padding: 9px 10px;
        border: 1px solid #d4dee6;
        border-radius: 5px;
        color: #273e50;
        font-family: inherit;
        font-size: 9px;
        resize: vertical;
    }

.detail-table-wrap[b-susp2eeac5] {
    overflow: auto;
    max-height: 420px;
    border: 1px solid #dce4ea;
    border-radius: 6px;
}

.detail-table[b-susp2eeac5] {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: 8px;
}

    .detail-table th[b-susp2eeac5] {
        padding: 8px;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 7px;
    }

    .detail-table td[b-susp2eeac5] {
        padding: 8px;
        border-bottom: 1px solid #edf1f4;
        color: #40586b;
    }

.manual-content[b-susp2eeac5] {
    display: flex;
    min-height: 180px;
    flex-direction: column;
    gap: 8px;
    padding: 14px;
    border: 1px solid #dce4ea;
    border-radius: 6px;
    background: #f9fbfc;
}

    .manual-content > div[b-susp2eeac5] {
        white-space: pre-wrap;
        color: #40586b;
        font-size: 9px;
        line-height: 1.5;
    }


/* ============================================================
   REFUS
   ============================================================ */

.refus-body[b-susp2eeac5] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
    .navette-filter-card[b-susp2eeac5] {
        grid-template-columns: 1fr 1fr;
    }

    .search-field[b-susp2eeac5] {
        grid-column: 1 / -1;
    }

    .navette-actions[b-susp2eeac5] {
        align-items: stretch;
        flex-direction: column;
    }

    .detail-top[b-susp2eeac5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/PersonnelRessource.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   RESSOURCES - PERSONNEL
   ============================================================ */

.personnel-page[b-p1btij62og] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.personnel-header[b-p1btij62og] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.personnel-eyebrow[b-p1btij62og],
.editor-eyebrow[b-p1btij62og] {
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.personnel-header h2[b-p1btij62og] {
    margin: 0;
    color: #1d2939;
    font-size: 20px;
    font-weight: 780;
    letter-spacing: -0.4px;
}

.personnel-header p[b-p1btij62og] {
    margin: 6px 0 0;
    color: #98a2b3;
    font-size: 10px;
}

.add-person-button[b-p1btij62og] {
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.18);
}

    .add-person-button span[b-p1btij62og] {
        font-size: 17px;
    }


/* ============================================================
   MESSAGES
   ============================================================ */

.person-message[b-p1btij62og] {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 11px;
}

    .person-message.error[b-p1btij62og] {
        background: #fff7f7;
        border: 1px solid #fee2e2;
    }

    .person-message.success[b-p1btij62og] {
        background: #f0fdf4;
        border: 1px solid #dcfce7;
    }

.message-symbol[b-p1btij62og] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 850;
}

.person-message > div:last-child[b-p1btij62og] {
    display: flex;
    flex-direction: column;
}

.person-message strong[b-p1btij62og] {
    color: #344054;
    font-size: 9.5px;
}

.person-message span[b-p1btij62og] {
    margin-top: 3px;
    color: #667085;
    font-size: 8.5px;
}

.error .message-symbol[b-p1btij62og] {
    color: #dc2626;
}

.success .message-symbol[b-p1btij62og] {
    color: #16a34a;
}


/* ============================================================
   KPI
   ============================================================ */

.personnel-kpis[b-p1btij62og] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 17px;
}

.person-kpi[b-p1btij62og] {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 17px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.022);
}

.person-kpi-label[b-p1btij62og] {
    color: #98a2b3;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 0.65px;
}

.person-kpi strong[b-p1btij62og] {
    margin-top: 6px;
    color: #1d2939;
    font-size: 22px;
    font-weight: 800;
}

.person-kpi small[b-p1btij62og] {
    margin-top: 3px;
    color: #a5adba;
    font-size: 7.5px;
}


/* ============================================================
   FILTRES
   ============================================================ */

.personnel-filter-card[b-p1btij62og] {
    margin-bottom: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
}

.personnel-filters[b-p1btij62og] {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) auto;
    align-items: end;
    gap: 18px;
}

.field[b-p1btij62og] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field label[b-p1btij62og] {
        color: #667085;
        font-size: 8.5px;
        font-weight: 750;
    }

        .field label span[b-p1btij62og] {
            color: #dc2626;
        }

    .field input[b-p1btij62og],
    .field select[b-p1btij62og] {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 11px;
        border: 1px solid #dfe5ee;
        border-radius: 9px;
        outline: none;
        background: #ffffff;
        color: #344054;
        font-family: inherit;
        font-size: 10px;
    }

        .field input:focus[b-p1btij62og],
        .field select:focus[b-p1btij62og] {
            border-color: #8bb3f4;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
        }

    .field small[b-p1btij62og] {
        color: #98a2b3;
        font-size: 7.5px;
    }

.search-wrapper[b-p1btij62og] {
    position: relative;
}

    .search-wrapper > span[b-p1btij62og] {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #98a2b3;
    }

    .search-wrapper input[b-p1btij62og] {
        padding-left: 37px;
    }

.filter-switch[b-p1btij62og] {
    min-width: 220px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filter-switch > div[b-p1btij62og] {
        display: flex;
        flex-direction: column;
    }

    .filter-switch strong[b-p1btij62og] {
        color: #475467;
        font-size: 8.5px;
    }

    .filter-switch span[b-p1btij62og] {
        margin-top: 2px;
        color: #98a2b3;
        font-size: 7.5px;
    }


/* ============================================================
   TABLEAU
   ============================================================ */

.personnel-list-card[b-p1btij62og] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.02);
}

.list-toolbar[b-p1btij62og] {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #edf1f5;
}

    .list-toolbar > div[b-p1btij62og] {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .list-toolbar strong[b-p1btij62og] {
        color: #344054;
        font-size: 11px;
    }

    .list-toolbar span[b-p1btij62og] {
        color: #98a2b3;
        font-size: 8.5px;
    }

.refresh-personnel[b-p1btij62og] {
    width: 32px;
    height: 32px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    color: #667085;
    font-size: 15px;
    cursor: pointer;
}

.person-table-wrapper[b-p1btij62og] {
    width: 100%;
    overflow-x: auto;
}

.person-table[b-p1btij62og] {
    width: 100%;
    min-width: 1250px;
    border-collapse: collapse;
}

    .person-table th[b-p1btij62og] {
        height: 42px;
        padding: 0 12px;
        border-bottom: 1px solid #e8edf4;
        background: #fafbfc;
        color: #8a96a8;
        text-align: left;
        font-size: 7.5px;
        font-weight: 850;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .person-table td[b-p1btij62og] {
        height: 61px;
        padding: 0 12px;
        border-bottom: 1px solid #f0f2f5;
        color: #667085;
        font-size: 9px;
        white-space: nowrap;
    }

    .person-table tbody tr:last-child td[b-p1btij62og] {
        border-bottom: none;
    }

.person-row[b-p1btij62og] {
    cursor: pointer;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

    .person-row:hover[b-p1btij62og] {
        background: #f8fbff;
        box-shadow: inset 3px 0 0 #2563eb;
    }


/* ============================================================
   SALARIE
   ============================================================ */

.employee-cell[b-p1btij62og] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.employee-avatar[b-p1btij62og] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.employee-cell > div:last-child[b-p1btij62og] {
    display: flex;
    flex-direction: column;
}

.employee-cell strong[b-p1btij62og] {
    color: #344054;
    font-size: 9.5px;
    font-weight: 750;
}

.employee-cell span[b-p1btij62og] {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 7.5px;
}

.account-active[b-p1btij62og] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.account-dot[b-p1btij62og] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
}

.account-active > div[b-p1btij62og] {
    display: flex;
    flex-direction: column;
}

.account-active strong[b-p1btij62og] {
    color: #15803d;
    font-size: 8px;
}

.account-active small[b-p1btij62og] {
    margin-top: 2px;
    color: #98a2b3;
    font-size: 7px;
}

.role-badge[b-p1btij62og],
.yes-badge[b-p1btij62og],
.employee-status[b-p1btij62og] {
    display: inline-flex;
    align-items: center;
    border-radius: 20px;
    font-size: 7.5px;
    font-weight: 800;
}

.role-badge[b-p1btij62og] {
    padding: 5px 8px;
}

    .role-badge.direction[b-p1btij62og] {
        background: #eff6ff;
        color: #2563eb;
    }

    .role-badge.standard[b-p1btij62og] {
        background: #f5f3ff;
        color: #7c3aed;
    }

.yes-badge[b-p1btij62og] {
    padding: 5px 8px;
    background: #ecfdf3;
    color: #15803d;
}

.employee-status[b-p1btij62og] {
    gap: 5px;
    padding: 5px 8px;
}

    .employee-status > span[b-p1btij62og] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .employee-status.active[b-p1btij62og] {
        background: #ecfdf3;
        color: #15803d;
    }

    .employee-status.inactive[b-p1btij62og] {
        background: #f2f4f7;
        color: #667085;
    }

.muted-value[b-p1btij62og] {
    color: #b1bac6;
}


/* ============================================================
   FICHE
   ============================================================ */

.employee-editor[b-p1btij62og] {
    width: 100%;
}

.editor-header[b-p1btij62og] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.editor-title[b-p1btij62og] {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .editor-title h3[b-p1btij62og] {
        margin: 0;
        color: #1d2939;
        font-size: 18px;
        font-weight: 780;
    }

.editor-back[b-p1btij62og] {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 16px;
    cursor: pointer;
}

.editor-actions[b-p1btij62og],
.employee-bottom-actions[b-p1btij62og] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cancel-button[b-p1btij62og],
.save-person-button[b-p1btij62og] {
    height: 39px;
    padding: 0 15px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.cancel-button[b-p1btij62og] {
    border: 1px solid #e1e6ed;
    background: #ffffff;
    color: #667085;
}

.save-person-button[b-p1btij62og] {
    min-width: 110px;
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .save-person-button:disabled[b-p1btij62og] {
        opacity: 0.6;
        cursor: wait;
    }

.employee-card[b-p1btij62og] {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.02);
}

.employee-card-header[b-p1btij62og] {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #edf1f5;
}

.section-number[b-p1btij62og] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.employee-card-header h4[b-p1btij62og] {
    margin: 0;
    color: #344054;
    font-size: 11px;
}

.employee-card-header p[b-p1btij62og] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 8px;
}

.employee-card-content[b-p1btij62og] {
    padding: 18px;
}

.identity-grid[b-p1btij62og] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.address-grid[b-p1btij62og] {
    display: grid;
    grid-template-columns: minmax(280px, 1.8fr) 140px minmax(180px, 1fr) minmax(170px, 0.8fr);
    gap: 15px;
}

.professional-grid[b-p1btij62og] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.switches-zone[b-p1btij62og] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 18px 18px;
}

.setting-card[b-p1btij62og],
.account-enable-card[b-p1btij62og] {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    background: #fafcff;
}

    .setting-information[b-p1btij62og],
    .account-enable-card > div[b-p1btij62og] {
        display: flex;
        flex-direction: column;
    }

        .setting-information strong[b-p1btij62og],
        .account-enable-card strong[b-p1btij62og] {
            color: #344054;
            font-size: 9px;
        }

        .setting-information span[b-p1btij62og],
        .account-enable-card span[b-p1btij62og] {
            margin-top: 3px;
            color: #98a2b3;
            font-size: 7.5px;
        }


/* ============================================================
   SWITCH
   ============================================================ */

.miradore-switch[b-p1btij62og] {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .miradore-switch input[b-p1btij62og] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-p1btij62og] {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #d8dee8;
    cursor: pointer;
    transition: 0.2s;
}

    .switch-slider[b-p1btij62og]::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
        transition: 0.2s;
    }

.miradore-switch input:checked + .switch-slider[b-p1btij62og] {
    background: #2563eb;
}

    .miradore-switch input:checked + .switch-slider[b-p1btij62og]::before {
        transform: translateX(18px);
    }


/* ============================================================
   COMPTE
   ============================================================ */

.account-fields[b-p1btij62og] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    margin-top: 17px;
    padding-top: 17px;
    border-top: 1px solid #edf1f5;
}

.rights-preview[b-p1btij62og] {
    margin-top: 16px;
    padding: 13px 15px;
    border-left: 3px solid #2563eb;
    border-radius: 0 9px 9px 0;
    background: #f8fbff;
}

.rights-title[b-p1btij62og] {
    color: #98a2b3;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.rights-role[b-p1btij62og] {
    margin-top: 5px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
}

.rights-preview p[b-p1btij62og] {
    margin: 4px 0 0;
    color: #667085;
    font-size: 8px;
}

.employee-bottom-actions[b-p1btij62og] {
    justify-content: flex-end;
    padding-top: 3px;
}


/* ============================================================
   CHARGEMENT / VIDE
   ============================================================ */

.personnel-loading[b-p1btij62og],
.personnel-empty[b-p1btij62og] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader[b-p1btij62og] {
    width: 29px;
    height: 29px;
    margin-bottom: 13px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: personnel-spin-b-p1btij62og 0.8s linear infinite;
}

@keyframes personnel-spin-b-p1btij62og {
    to {
        transform: rotate(360deg);
    }
}

.personnel-loading strong[b-p1btij62og],
.personnel-empty strong[b-p1btij62og] {
    color: #344054;
    font-size: 10px;
}

.personnel-empty span[b-p1btij62og] {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 8px;
}

.empty-icon[b-p1btij62og] {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 13px;
    font-weight: 850;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .personnel-kpis[b-p1btij62og] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .identity-grid[b-p1btij62og],
    .professional-grid[b-p1btij62og],
    .account-fields[b-p1btij62og] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .address-grid[b-p1btij62og] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {

    .personnel-header[b-p1btij62og],
    .editor-header[b-p1btij62og] {
        align-items: stretch;
        flex-direction: column;
    }

    .add-person-button[b-p1btij62og] {
        width: 100%;
    }

    .personnel-kpis[b-p1btij62og],
    .personnel-filters[b-p1btij62og],
    .identity-grid[b-p1btij62og],
    .address-grid[b-p1btij62og],
    .professional-grid[b-p1btij62og],
    .switches-zone[b-p1btij62og],
    .account-fields[b-p1btij62og] {
        grid-template-columns: 1fr;
    }

    .editor-actions[b-p1btij62og],
    .employee-bottom-actions[b-p1btij62og] {
        width: 100%;
    }

        .editor-actions button[b-p1btij62og],
        .employee-bottom-actions button[b-p1btij62og] {
            flex: 1;
        }
}
/* /Components/Pages/Ressources.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   RESSOURCES
   ============================================================ */

.resources-page[b-s8jx3o3rxb] {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding-bottom: 40px;
}


/* ============================================================
   HEADER
   ============================================================ */

.resources-header[b-s8jx3o3rxb] {
    margin-bottom: 24px;
}

.page-eyebrow[b-s8jx3o3rxb] {
    margin-bottom: 7px;
    color: #2563eb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.resources-header h1[b-s8jx3o3rxb] {
    margin: 0;
    color: #101828;
    font-size: 30px;
    font-weight: 760;
    letter-spacing: -0.7px;
}

.resources-header p[b-s8jx3o3rxb] {
    margin: 7px 0 0;
    color: #7b8799;
    font-size: 12px;
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.resources-navigation[b-s8jx3o3rxb] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 22px;
}

.resource-tab[b-s8jx3o3rxb] {
    min-height: 67px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #ffffff;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

    .resource-tab:hover[b-s8jx3o3rxb] {
        transform: translateY(-1px);
        border-color: #cfdae8;
        box-shadow: 0 5px 16px rgba(15, 23, 42, 0.04);
    }

    .resource-tab.active[b-s8jx3o3rxb] {
        border-color: #b8cff5;
        background: #f5f9ff;
        box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.05);
    }

.tab-icon[b-s8jx3o3rxb] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #f2f4f7;
    color: #667085;
    font-size: 9px;
    font-weight: 850;
    transition: background 0.16s ease, color 0.16s ease;
}

.resource-tab.active .tab-icon[b-s8jx3o3rxb] {
    background: #2563eb;
    color: #ffffff;
}

.tab-content[b-s8jx3o3rxb] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .tab-content strong[b-s8jx3o3rxb] {
        color: #344054;
        font-size: 10px;
        font-weight: 760;
    }

    .tab-content small[b-s8jx3o3rxb] {
        margin-top: 3px;
        color: #98a2b3;
        font-size: 8px;
    }


/* ============================================================
   MESSAGES
   ============================================================ */

.message-box[b-s8jx3o3rxb] {
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding: 12px 15px;
    border-radius: 12px;
}

.message-symbol[b-s8jx3o3rxb] {
    width: 31px;
    height: 31px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #ffffff;
    font-size: 11px;
    font-weight: 850;
}

.message-box > div:last-child[b-s8jx3o3rxb] {
    display: flex;
    flex-direction: column;
}

.message-box strong[b-s8jx3o3rxb] {
    font-size: 10px;
}

.message-box span[b-s8jx3o3rxb] {
    margin-top: 3px;
    font-size: 9px;
}

.error-message[b-s8jx3o3rxb] {
    background: #fff7f7;
    border: 1px solid #fee2e2;
}

    .error-message .message-symbol[b-s8jx3o3rxb],
    .error-message strong[b-s8jx3o3rxb] {
        color: #dc2626;
    }

    .error-message span[b-s8jx3o3rxb] {
        color: #7f1d1d;
    }

.success-message[b-s8jx3o3rxb] {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
}

    .success-message .message-symbol[b-s8jx3o3rxb],
    .success-message strong[b-s8jx3o3rxb] {
        color: #16a34a;
    }

    .success-message span[b-s8jx3o3rxb] {
        color: #52705e;
    }


/* ============================================================
   LAYOUT ENTREPRISE
   ============================================================ */

.company-layout[b-s8jx3o3rxb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.company-main[b-s8jx3o3rxb],
.company-sidebar[b-s8jx3o3rxb] {
    min-width: 0;
}


/* ============================================================
   CARTES
   ============================================================ */

.resource-card[b-s8jx3o3rxb] {
    margin-bottom: 18px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.012), 0 8px 24px rgba(15, 23, 42, 0.02);
}

.card-header[b-s8jx3o3rxb] {
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    border-bottom: 1px solid #edf1f6;
    background: linear-gradient( 180deg, #ffffff, #fbfcfe );
}

.card-number[b-s8jx3o3rxb] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
}

.card-header h2[b-s8jx3o3rxb],
.mini-card-header h3[b-s8jx3o3rxb] {
    margin: 0;
    color: #1d2939;
    font-weight: 760;
}

.card-header h2[b-s8jx3o3rxb] {
    font-size: 13px;
}

.card-header p[b-s8jx3o3rxb],
.mini-card-header p[b-s8jx3o3rxb] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 8.5px;
}

.card-content[b-s8jx3o3rxb] {
    padding: 20px;
}

.mini-card-header[b-s8jx3o3rxb] {
    padding: 16px 17px;
    border-bottom: 1px solid #edf1f5;
}

    .mini-card-header h3[b-s8jx3o3rxb] {
        font-size: 11px;
    }


/* ============================================================
   FORMULAIRES
   ============================================================ */

.form-grid[b-s8jx3o3rxb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.field-wide[b-s8jx3o3rxb] {
    grid-column: 1 / -1;
}

.field[b-s8jx3o3rxb] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field label[b-s8jx3o3rxb] {
        color: #667085;
        font-size: 9px;
        font-weight: 750;
    }

        .field label span[b-s8jx3o3rxb] {
            color: #dc2626;
        }

    .field input[b-s8jx3o3rxb],
    .field textarea[b-s8jx3o3rxb] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #dfe5ee;
        outline: none;
        background: #ffffff;
        color: #344054;
        font-family: inherit;
        font-size: 10.5px;
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .field input[b-s8jx3o3rxb] {
        height: 41px;
        padding: 0 12px;
        border-radius: 9px;
    }

    .field textarea[b-s8jx3o3rxb] {
        min-height: 130px;
        padding: 11px 12px;
        resize: vertical;
        border-radius: 10px;
        line-height: 1.5;
    }

        .field input:focus[b-s8jx3o3rxb],
        .field textarea:focus[b-s8jx3o3rxb] {
            border-color: #8bb3f4;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
        }

        .field input[b-s8jx3o3rxb]::placeholder,
        .field textarea[b-s8jx3o3rxb]::placeholder {
            color: #b2bac6;
        }


/* ============================================================
   ADRESSE
   ============================================================ */

.address-grid[b-s8jx3o3rxb] {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) 140px minmax(190px, 1fr) 150px;
    gap: 16px;
}

.contact-grid[b-s8jx3o3rxb] {
    margin-top: 16px;
}


/* ============================================================
   DOCUMENTS
   ============================================================ */

.document-grid[b-s8jx3o3rxb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo-card[b-s8jx3o3rxb] {
    padding-bottom: 16px;
}

.logo-preview[b-s8jx3o3rxb] {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px;
    overflow: hidden;
    border: 1px dashed #d8dfe9;
    border-radius: 12px;
    background: #fafbfd;
}

    .logo-preview img[b-s8jx3o3rxb] {
        max-width: 85%;
        max-height: 130px;
        object-fit: contain;
    }

.logo-placeholder[b-s8jx3o3rxb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .logo-placeholder strong[b-s8jx3o3rxb] {
        width: 58px;
        height: 58px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
        border-radius: 15px;
        background: #eff6ff;
        color: #2563eb;
        font-size: 19px;
        font-weight: 850;
    }

    .logo-placeholder span[b-s8jx3o3rxb] {
        color: #98a2b3;
        font-size: 8.5px;
    }

.upload-button[b-s8jx3o3rxb] {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 15px;
    border: 1px solid #dce6f5;
    border-radius: 9px;
    background: #f5f9ff;
    color: #2563eb;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

    .upload-button input[b-s8jx3o3rxb] {
        display: none;
    }

.file-name[b-s8jx3o3rxb] {
    margin: 9px 15px 0;
    overflow: hidden;
    color: #98a2b3;
    font-size: 8px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-logo-button[b-s8jx3o3rxb] {
    width: calc(100% - 30px);
    height: 33px;
    margin: 9px 15px 0;
    border: none;
    border-radius: 8px;
    background: #fff1f2;
    color: #dc2626;
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 700;
    cursor: pointer;
}


/* ============================================================
   APERCU ENTREPRISE
   ============================================================ */

.company-preview[b-s8jx3o3rxb] {
    padding: 17px;
}

.preview-company-name[b-s8jx3o3rxb] {
    color: #1d2939;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: -0.3px;
}

.preview-legal[b-s8jx3o3rxb] {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 8.5px;
}

.preview-separator[b-s8jx3o3rxb] {
    height: 1px;
    margin: 15px 0;
    background: #edf1f5;
}

.preview-row[b-s8jx3o3rxb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0;
}

    .preview-row span[b-s8jx3o3rxb] {
        flex-shrink: 0;
        color: #98a2b3;
        font-size: 8px;
    }

    .preview-row strong[b-s8jx3o3rxb] {
        color: #475467;
        font-size: 8.5px;
        font-weight: 650;
        text-align: right;
    }


/* ============================================================
   ETAT
   ============================================================ */

.status-card[b-s8jx3o3rxb] {
    padding: 15px 17px;
}

.status-line[b-s8jx3o3rxb] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-indicator[b-s8jx3o3rxb] {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
}

.status-line div[b-s8jx3o3rxb] {
    display: flex;
    flex-direction: column;
}

.status-line strong[b-s8jx3o3rxb] {
    color: #344054;
    font-size: 9px;
}

.status-line small[b-s8jx3o3rxb] {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 7.5px;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.bottom-actions[b-s8jx3o3rxb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 0 10px;
}

.save-information[b-s8jx3o3rxb] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #98a2b3;
    font-size: 8.5px;
}

.save-dot[b-s8jx3o3rxb] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
}

.save-button[b-s8jx3o3rxb] {
    min-width: 190px;
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.20);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

    .save-button:hover:not(:disabled)[b-s8jx3o3rxb] {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(37, 99, 235, 0.26);
    }

    .save-button:disabled[b-s8jx3o3rxb] {
        opacity: 0.6;
        cursor: wait;
    }


/* ============================================================
   PLACEHOLDERS AUTRES RESSOURCES
   ============================================================ */

.coming-card[b-s8jx3o3rxb] {
    min-height: 430px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    border: 1px solid #e8edf4;
    border-radius: 15px;
    background: #ffffff;
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.02);
}

.coming-icon[b-s8jx3o3rxb] {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 17px;
    border-radius: 15px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 14px;
    font-weight: 850;
}

.coming-card h2[b-s8jx3o3rxb] {
    margin: 0;
    color: #1d2939;
    font-size: 16px;
}

.coming-card p[b-s8jx3o3rxb] {
    max-width: 500px;
    margin: 8px 0 16px;
    color: #98a2b3;
    font-size: 10px;
    line-height: 1.6;
}

.coming-badge[b-s8jx3o3rxb] {
    padding: 5px 9px;
    border-radius: 20px;
    background: #f2f4f7;
    color: #667085;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
}


/* ============================================================
   CHARGEMENT
   ============================================================ */

.loading-card[b-s8jx3o3rxb] {
    min-height: 330px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader[b-s8jx3o3rxb] {
    width: 30px;
    height: 30px;
    margin-bottom: 15px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: miradore-spin-b-s8jx3o3rxb 0.8s linear infinite;
}

@keyframes miradore-spin-b-s8jx3o3rxb {
    to {
        transform: rotate(360deg);
    }
}

.loading-card strong[b-s8jx3o3rxb] {
    color: #344054;
    font-size: 11px;
}

.loading-card span[b-s8jx3o3rxb] {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 9px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .resources-navigation[b-s8jx3o3rxb] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .company-layout[b-s8jx3o3rxb] {
        grid-template-columns: minmax(0, 1fr) 280px;
    }

    .address-grid[b-s8jx3o3rxb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .company-layout[b-s8jx3o3rxb] {
        grid-template-columns: 1fr;
    }

    .company-sidebar[b-s8jx3o3rxb] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

        .company-sidebar .resource-card[b-s8jx3o3rxb] {
            margin-bottom: 0;
        }

    .status-card[b-s8jx3o3rxb] {
        grid-column: 1 / -1;
    }
}


@media (max-width: 700px) {

    .resources-navigation[b-s8jx3o3rxb] {
        grid-template-columns: 1fr;
    }

    .form-grid[b-s8jx3o3rxb],
    .address-grid[b-s8jx3o3rxb],
    .document-grid[b-s8jx3o3rxb],
    .company-sidebar[b-s8jx3o3rxb] {
        grid-template-columns: 1fr;
    }

    .status-card[b-s8jx3o3rxb] {
        grid-column: auto;
    }

    .bottom-actions[b-s8jx3o3rxb] {
        align-items: stretch;
        flex-direction: column;
    }

    .save-button[b-s8jx3o3rxb] {
        width: 100%;
    }

    .resources-header h1[b-s8jx3o3rxb] {
        font-size: 25px;
    }
}
/* /Components/Pages/RetourTournee.razor.rz.scp.css */
/* ============================================================
   RETOUR TOURNEE
   ============================================================ */

.retour-page[b-uo6mhlo2j9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 14px 18px 18px;
    background: #f5f7fa;
    color: #17344f;
    font-family: "Segoe UI", Arial, sans-serif;
}

.retour-header[b-uo6mhlo2j9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

    .retour-header h1[b-uo6mhlo2j9] {
        margin: 0;
        color: #13314f;
        font-size: 22px;
        font-weight: 800;
    }

    .retour-header p[b-uo6mhlo2j9] {
        margin: 3px 0 0;
        color: #71808d;
        font-size: 9px;
    }

.retour-badge[b-uo6mhlo2j9] {
    padding: 6px 10px;
    border: 1px solid #d6e0e7;
    border-radius: 999px;
    background: #f7fafc;
    color: #607385;
    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

    .retour-badge.active[b-uo6mhlo2j9] {
        color: #235f43;
        border-color: #cce7da;
        background: #eef8f3;
    }

.retour-alert[b-uo6mhlo2j9] {
    padding: 9px 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    font-size: 9px;
}

    .retour-alert.error[b-uo6mhlo2j9] {
        border: 1px solid #efc7c7;
        background: #fff4f4;
        color: #9b3535;
    }

    .retour-alert.success[b-uo6mhlo2j9] {
        border: 1px solid #c8e7d7;
        background: #f0faf5;
        color: #24714d;
    }


/* ============================================================
   FILTRES
   ============================================================ */

.retour-filter-card[b-uo6mhlo2j9] {
    display: grid;
    grid-template-columns: 210px 120px minmax(280px, 1fr) auto;
    gap: 12px;
    align-items: end;
    padding: 12px;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
}

.retour-field[b-uo6mhlo2j9] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

    .retour-field label[b-uo6mhlo2j9] {
        color: #35546d;
        font-size: 7px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .retour-field input[b-uo6mhlo2j9],
    .retour-field select[b-uo6mhlo2j9] {
        width: 100%;
        min-height: 34px;
        box-sizing: border-box;
        padding: 6px 9px;
        border: 1px solid #d4dee6;
        border-radius: 5px;
        background: #ffffff;
        color: #17344f;
        font-size: 9px;
    }

.retour-info[b-uo6mhlo2j9] {
    display: flex;
    min-height: 34px;
    flex-direction: column;
    justify-content: center;
    padding: 5px 10px;
    border-left: 2px solid #13314f;
}

    .retour-info span[b-uo6mhlo2j9] {
        color: #8493a0;
        font-size: 6.5px;
        font-weight: 900;
    }

    .retour-info strong[b-uo6mhlo2j9] {
        margin-top: 1px;
        font-size: 10px;
    }

    .retour-info small[b-uo6mhlo2j9] {
        color: #788793;
        font-size: 7px;
    }


/* ============================================================
   TABLE
   ============================================================ */

.retour-table-card[b-uo6mhlo2j9] {
    min-height: 0;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.retour-table-wrap[b-uo6mhlo2j9] {
    overflow: auto;
    max-height: calc(100vh - 340px);
    min-height: 330px;
}

.retour-table[b-uo6mhlo2j9] {
    width: 100%;
    min-width: 1280px;
    border-collapse: collapse;
    font-size: 8px;
}

    .retour-table th[b-uo6mhlo2j9] {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 38px;
        padding: 6px 7px;
        background: #13314f;
        color: #ffffff;
        font-size: 7px;
        font-weight: 900;
        text-align: left;
        white-space: nowrap;
    }

    .retour-table td[b-uo6mhlo2j9] {
        height: 42px;
        padding: 6px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #40586b;
        vertical-align: middle;
        white-space: nowrap;
    }

    .retour-table tbody tr[b-uo6mhlo2j9] {
        cursor: pointer;
    }

        .retour-table tbody tr:hover td[b-uo6mhlo2j9] {
            background: #f7fafc;
        }

        .retour-table tbody tr.selected td[b-uo6mhlo2j9] {
            background: #eaf3fb;
        }

        .retour-table tbody tr.echec-pending td[b-uo6mhlo2j9] {
            background: #fff8eb;
        }

        .retour-table tbody tr.locked td[b-uo6mhlo2j9] {
            color: #7d8b96;
        }

    .retour-table .strong-cell[b-uo6mhlo2j9] {
        color: #123a5a;
        font-weight: 800;
    }

    .retour-table select[b-uo6mhlo2j9] {
        width: 100%;
        min-width: 165px;
        min-height: 30px;
        padding: 4px 7px;
        border: 1px solid #d5dfe7;
        border-radius: 4px;
        background: #ffffff;
        color: #17344f;
        font-size: 8px;
    }

        .retour-table select:disabled[b-uo6mhlo2j9] {
            background: #edf1f4;
            color: #8b98a2;
        }

.col-order[b-uo6mhlo2j9] {
    width: 40px;
    text-align: center !important;
}

.col-result[b-uo6mhlo2j9] {
    width: 190px;
}

.col-open[b-uo6mhlo2j9] {
    width: 72px;
    text-align: right;
}

.empty-row[b-uo6mhlo2j9] {
    padding: 28px !important;
    color: #8896a2 !important;
    text-align: center !important;
}

.status-pill[b-uo6mhlo2j9] {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 999px;
    background: #eef3f6;
    color: #3f596c;
    font-size: 7px;
    font-weight: 850;
}

    .status-pill.warning[b-uo6mhlo2j9] {
        background: #fff1d8;
        color: #b16b16;
    }

    .status-pill.locked[b-uo6mhlo2j9] {
        background: #13314f;
        color: #ffffff;
    }

.echec-edit[b-uo6mhlo2j9] {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #b26612;
    font-size: 7px;
    font-weight: 800;
    cursor: pointer;
}

.mini-open[b-uo6mhlo2j9] {
    min-height: 28px;
    padding: 0 9px;
    border: 1px solid #cad7e0;
    border-radius: 4px;
    background: #ffffff;
    color: #173f5f;
    font-size: 7px;
    font-weight: 850;
    cursor: pointer;
}


/* ============================================================
   ACTIONS
   ============================================================ */

.retour-actions[b-uo6mhlo2j9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.retour-action-buttons[b-uo6mhlo2j9] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.retour-help[b-uo6mhlo2j9] {
    max-width: 700px;
    color: #71808d;
    font-size: 8px;
    line-height: 1.45;
}

.retour-button[b-uo6mhlo2j9] {
    min-height: 34px;
    padding: 0 13px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 900;
    cursor: pointer;
}

    .retour-button:disabled[b-uo6mhlo2j9] {
        cursor: default;
        opacity: .45;
    }

    .retour-button.primary[b-uo6mhlo2j9] {
        border: 1px solid #13314f;
        background: #13314f;
        color: #ffffff;
    }

    .retour-button.secondary[b-uo6mhlo2j9] {
        border: 1px solid #d3dde5;
        background: #ffffff;
        color: #173f5f;
    }

    .retour-button.outline[b-uo6mhlo2j9] {
        border: 1px solid #13314f;
        background: #ffffff;
        color: #13314f;
    }

    .retour-button.validate[b-uo6mhlo2j9] {
        border: 1px solid #299d6d;
        background: #299d6d;
        color: #ffffff;
    }

.refresh[b-uo6mhlo2j9] {
    min-width: 100px;
}


/* ============================================================
   MODALES
   ============================================================ */

.modal-overlay[b-uo6mhlo2j9] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 42, 60, .48);
}

.modal-card[b-uo6mhlo2j9] {
    width: min(760px, 96vw);
    max-height: 90vh;
    overflow: auto;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

.history-modal[b-uo6mhlo2j9] {
    width: min(1080px, 96vw);
}

.modal-header[b-uo6mhlo2j9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #e3e9ee;
}

.modal-eyebrow[b-uo6mhlo2j9] {
    color: #8a99a5;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

.modal-header h2[b-uo6mhlo2j9] {
    margin: 3px 0;
    color: #13314f;
    font-size: 20px;
}

.modal-header p[b-uo6mhlo2j9] {
    margin: 0;
    color: #71808d;
    font-size: 9px;
}

.modal-close[b-uo6mhlo2j9] {
    width: 31px;
    height: 31px;
    border: 1px solid #dae2e8;
    border-radius: 5px;
    background: #ffffff;
    color: #617585;
    font-size: 18px;
    cursor: pointer;
}

.modal-body[b-uo6mhlo2j9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 20px;
}

.modal-field[b-uo6mhlo2j9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .modal-field label[b-uo6mhlo2j9] {
        color: #264a65;
        font-size: 8px;
        font-weight: 850;
    }

    .modal-field input[b-uo6mhlo2j9],
    .modal-field textarea[b-uo6mhlo2j9] {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 10px;
        border: 1px solid #d4dee6;
        border-radius: 5px;
        color: #273e50;
        font-family: inherit;
        font-size: 9px;
    }

    .modal-field small[b-uo6mhlo2j9] {
        color: #89959f;
        font-size: 7px;
    }

.selected-file[b-uo6mhlo2j9] {
    color: #355b76 !important;
    font-weight: 800;
}

.modal-actions[b-uo6mhlo2j9] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 20px 18px;
    border-top: 1px solid #e8edf1;
}


/* ============================================================
   HISTORIQUE
   ============================================================ */

.history-table-wrap[b-uo6mhlo2j9] {
    overflow: auto;
    max-height: 520px;
    margin: 16px 20px;
    border: 1px solid #dce4ea;
    border-radius: 6px;
}

.history-table[b-uo6mhlo2j9] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 8px;
}

    .history-table th[b-uo6mhlo2j9] {
        padding: 8px 9px;
        background: #13314f;
        color: #ffffff;
        font-size: 7px;
        text-align: left;
    }

    .history-table td[b-uo6mhlo2j9] {
        padding: 8px 9px;
        border-bottom: 1px solid #edf1f4;
        color: #40586b;
        vertical-align: top;
    }

.history-file-button[b-uo6mhlo2j9] {
    padding: 0;
    border: 0;
    background: transparent;
    color: #266da7;
    font-size: 8px;
    text-decoration: underline;
    cursor: pointer;
}

    .history-file-button:disabled[b-uo6mhlo2j9] {
        color: #9aa5ad;
        cursor: default;
    }


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
    .retour-filter-card[b-uo6mhlo2j9] {
        grid-template-columns: 1fr 1fr;
    }

    .retour-info[b-uo6mhlo2j9] {
        border-left: 0;
        border-top: 2px solid #13314f;
    }

    .retour-actions[b-uo6mhlo2j9] {
        align-items: stretch;
        flex-direction: column;
    }

    .retour-help[b-uo6mhlo2j9] {
        max-width: none;
    }
}
/* /Components/Pages/SousTraitantsRessource.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   RESSOURCES - SOUS-TRAITANTS
   ============================================================ */

.sst-page[b-ebcbgf1uvk] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.sst-header[b-ebcbgf1uvk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.sst-eyebrow[b-ebcbgf1uvk],
.editor-eyebrow[b-ebcbgf1uvk],
.driver-eyebrow[b-ebcbgf1uvk] {
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.sst-header h2[b-ebcbgf1uvk] {
    margin: 0;
    color: #1d2939;
    font-size: 20px;
    font-weight: 780;
    letter-spacing: -0.4px;
}

.sst-header p[b-ebcbgf1uvk] {
    margin: 6px 0 0;
    color: #98a2b3;
    font-size: 10px;
}

.add-sst-button[b-ebcbgf1uvk] {
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.18);
}

    .add-sst-button span[b-ebcbgf1uvk] {
        font-size: 17px;
    }


/* ============================================================
   MESSAGES
   ============================================================ */

.sst-message[b-ebcbgf1uvk] {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 11px;
}

    .sst-message.error[b-ebcbgf1uvk] {
        background: #fff7f7;
        border: 1px solid #fee2e2;
    }

    .sst-message.success[b-ebcbgf1uvk] {
        background: #f0fdf4;
        border: 1px solid #dcfce7;
    }

.message-symbol[b-ebcbgf1uvk] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 850;
}

.sst-message > div:last-child[b-ebcbgf1uvk] {
    display: flex;
    flex-direction: column;
}

.sst-message strong[b-ebcbgf1uvk] {
    color: #344054;
    font-size: 9.5px;
}

.sst-message span[b-ebcbgf1uvk] {
    margin-top: 3px;
    color: #667085;
    font-size: 8.5px;
}

.sst-message.error .message-symbol[b-ebcbgf1uvk] {
    color: #dc2626;
}

.sst-message.success .message-symbol[b-ebcbgf1uvk] {
    color: #16a34a;
}


/* ============================================================
   KPI
   ============================================================ */

.sst-kpis[b-ebcbgf1uvk] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 17px;
}

.sst-kpi[b-ebcbgf1uvk] {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 17px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.022);
}

.kpi-label[b-ebcbgf1uvk] {
    color: #98a2b3;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 0.65px;
}

.sst-kpi strong[b-ebcbgf1uvk] {
    margin-top: 6px;
    color: #1d2939;
    font-size: 22px;
    font-weight: 800;
}

.sst-kpi small[b-ebcbgf1uvk] {
    margin-top: 3px;
    color: #a5adba;
    font-size: 7.5px;
}


/* ============================================================
   FILTRES
   ============================================================ */

.sst-filter-card[b-ebcbgf1uvk] {
    margin-bottom: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
}

.sst-filters[b-ebcbgf1uvk] {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: end;
    gap: 18px;
}

.field[b-ebcbgf1uvk] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field label[b-ebcbgf1uvk] {
        color: #667085;
        font-size: 8.5px;
        font-weight: 750;
    }

        .field label span[b-ebcbgf1uvk] {
            color: #dc2626;
        }

    .field input[b-ebcbgf1uvk],
    .field textarea[b-ebcbgf1uvk] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #dfe5ee;
        border-radius: 9px;
        outline: none;
        background: #ffffff;
        color: #344054;
        font-family: inherit;
        font-size: 10px;
    }

    .field input[b-ebcbgf1uvk] {
        height: 40px;
        padding: 0 11px;
    }

    .field textarea[b-ebcbgf1uvk] {
        padding: 10px 11px;
        resize: vertical;
        line-height: 1.5;
    }

        .field input:focus[b-ebcbgf1uvk],
        .field textarea:focus[b-ebcbgf1uvk] {
            border-color: #8bb3f4;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
        }

.search-wrapper[b-ebcbgf1uvk] {
    position: relative;
}

    .search-wrapper > span[b-ebcbgf1uvk] {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #98a2b3;
    }

    .search-wrapper input[b-ebcbgf1uvk] {
        padding-left: 37px;
    }

.filter-switch[b-ebcbgf1uvk] {
    min-width: 220px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filter-switch > div[b-ebcbgf1uvk] {
        display: flex;
        flex-direction: column;
    }

    .filter-switch strong[b-ebcbgf1uvk] {
        color: #475467;
        font-size: 8.5px;
    }

    .filter-switch span[b-ebcbgf1uvk] {
        margin-top: 2px;
        color: #98a2b3;
        font-size: 7.5px;
    }


/* ============================================================
   SWITCH
   ============================================================ */

.miradore-switch[b-ebcbgf1uvk] {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .miradore-switch input[b-ebcbgf1uvk] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-ebcbgf1uvk] {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #d8dee8;
    cursor: pointer;
    transition: 0.2s;
}

    .switch-slider[b-ebcbgf1uvk]::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
        transition: 0.2s;
    }

.miradore-switch input:checked + .switch-slider[b-ebcbgf1uvk] {
    background: #2563eb;
}

    .miradore-switch input:checked + .switch-slider[b-ebcbgf1uvk]::before {
        transform: translateX(18px);
    }


/* ============================================================
   TABLE SST
   ============================================================ */

.sst-list-card[b-ebcbgf1uvk] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
}

.list-toolbar[b-ebcbgf1uvk] {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #edf1f5;
}

    .list-toolbar > div[b-ebcbgf1uvk] {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .list-toolbar strong[b-ebcbgf1uvk] {
        color: #344054;
        font-size: 11px;
    }

    .list-toolbar span[b-ebcbgf1uvk] {
        color: #98a2b3;
        font-size: 8.5px;
    }

.refresh-sst[b-ebcbgf1uvk] {
    width: 32px;
    height: 32px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    color: #667085;
    font-size: 15px;
    cursor: pointer;
}

.sst-table-wrapper[b-ebcbgf1uvk],
.drivers-table-wrapper[b-ebcbgf1uvk] {
    width: 100%;
    overflow-x: auto;
}

.sst-table[b-ebcbgf1uvk] {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
}

    .sst-table th[b-ebcbgf1uvk],
    .drivers-table th[b-ebcbgf1uvk] {
        height: 42px;
        padding: 0 12px;
        background: #fafbfc;
        border-bottom: 1px solid #e8edf4;
        color: #8a96a8;
        text-align: left;
        font-size: 7.5px;
        font-weight: 850;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .sst-table td[b-ebcbgf1uvk] {
        height: 61px;
        padding: 0 12px;
        border-bottom: 1px solid #f0f2f5;
        color: #667085;
        font-size: 9px;
        white-space: nowrap;
    }

.sst-row[b-ebcbgf1uvk] {
    cursor: pointer;
}

    .sst-row:hover[b-ebcbgf1uvk] {
        background: #f8fbff;
        box-shadow: inset 3px 0 0 #2563eb;
    }

.sst-name-cell[b-ebcbgf1uvk],
.driver-name[b-ebcbgf1uvk] {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sst-name-cell > div:last-child[b-ebcbgf1uvk] {
        display: flex;
        flex-direction: column;
    }

.sst-avatar[b-ebcbgf1uvk],
.driver-avatar[b-ebcbgf1uvk] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.sst-name-cell strong[b-ebcbgf1uvk],
.driver-name strong[b-ebcbgf1uvk] {
    color: #344054;
    font-size: 9.5px;
}

.sst-name-cell span[b-ebcbgf1uvk] {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 7.5px;
}


/* ============================================================
   BADGES
   ============================================================ */

.sst-status[b-ebcbgf1uvk],
.driver-status[b-ebcbgf1uvk],
.insurance-badge[b-ebcbgf1uvk],
.availability-badge[b-ebcbgf1uvk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 7.5px;
    font-weight: 800;
}

    .sst-status > span[b-ebcbgf1uvk],
    .driver-status > span[b-ebcbgf1uvk] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .sst-status.active[b-ebcbgf1uvk],
    .driver-status.active[b-ebcbgf1uvk],
    .availability-badge.yes[b-ebcbgf1uvk],
    .insurance-badge.valid[b-ebcbgf1uvk] {
        background: #ecfdf3;
        color: #15803d;
    }

    .sst-status.inactive[b-ebcbgf1uvk],
    .driver-status.inactive[b-ebcbgf1uvk],
    .availability-badge.no[b-ebcbgf1uvk],
    .insurance-badge.unknown[b-ebcbgf1uvk] {
        background: #f2f4f7;
        color: #667085;
    }

    .insurance-badge.warning[b-ebcbgf1uvk] {
        background: #fff7ed;
        color: #d97706;
    }

    .insurance-badge.expired[b-ebcbgf1uvk] {
        background: #fff1f2;
        color: #dc2626;
    }

.numeric-value[b-ebcbgf1uvk] {
    color: #344054;
}

    .numeric-value.available[b-ebcbgf1uvk] {
        color: #15803d;
    }


/* ============================================================
   EDITEUR
   ============================================================ */

.editor-header[b-ebcbgf1uvk] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.editor-title[b-ebcbgf1uvk] {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .editor-title h3[b-ebcbgf1uvk] {
        margin: 0;
        color: #1d2939;
        font-size: 18px;
    }

.editor-back[b-ebcbgf1uvk] {
    width: 37px;
    height: 37px;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    cursor: pointer;
}

.editor-actions[b-ebcbgf1uvk],
.editor-bottom-actions[b-ebcbgf1uvk],
.driver-actions[b-ebcbgf1uvk] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cancel-button[b-ebcbgf1uvk],
.save-sst-button[b-ebcbgf1uvk],
.save-driver-button[b-ebcbgf1uvk] {
    height: 39px;
    padding: 0 15px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.cancel-button[b-ebcbgf1uvk] {
    border: 1px solid #e1e6ed;
    background: #ffffff;
    color: #667085;
}

.save-sst-button[b-ebcbgf1uvk],
.save-driver-button[b-ebcbgf1uvk] {
    border: none;
    background: #2563eb;
    color: #ffffff;
}

    .save-sst-button:disabled[b-ebcbgf1uvk],
    .save-driver-button:disabled[b-ebcbgf1uvk] {
        opacity: 0.6;
    }


/* ============================================================
   CARTES
   ============================================================ */

.sst-card[b-ebcbgf1uvk] {
    margin-bottom: 16px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
}

.sst-card-header[b-ebcbgf1uvk] {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #edf1f5;
}

.section-number[b-ebcbgf1uvk] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.sst-card-header h4[b-ebcbgf1uvk] {
    margin: 0;
    color: #344054;
    font-size: 11px;
}

.sst-card-header p[b-ebcbgf1uvk] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 8px;
}

.sst-card-content[b-ebcbgf1uvk] {
    padding: 18px;
}


/* ============================================================
   GRILLES
   ============================================================ */

.identity-grid[b-ebcbgf1uvk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.field-wide[b-ebcbgf1uvk] {
    grid-column: 1 / -1;
}

.address-grid[b-ebcbgf1uvk] {
    display: grid;
    grid-template-columns: minmax(300px, 2fr) 150px minmax(200px, 1fr);
    gap: 15px;
}

.contact-grid[b-ebcbgf1uvk],
.insurance-grid[b-ebcbgf1uvk],
.driver-grid[b-ebcbgf1uvk],
.driver-settings[b-ebcbgf1uvk] {
    display: grid;
    gap: 15px;
}

.contact-grid[b-ebcbgf1uvk] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 15px;
}

.insurance-grid[b-ebcbgf1uvk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-grid[b-ebcbgf1uvk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.driver-settings[b-ebcbgf1uvk] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 15px;
}

.setting-card[b-ebcbgf1uvk] {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    background: #fafcff;
}

.setting-information[b-ebcbgf1uvk] {
    display: flex;
    flex-direction: column;
}

    .setting-information strong[b-ebcbgf1uvk] {
        color: #344054;
        font-size: 9px;
    }

    .setting-information span[b-ebcbgf1uvk] {
        margin-top: 3px;
        color: #98a2b3;
        font-size: 7.5px;
    }

.notes-field[b-ebcbgf1uvk] {
    margin-top: 15px;
}


/* ============================================================
   ASSURANCE
   ============================================================ */

.insurance-status[b-ebcbgf1uvk] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    padding: 11px 13px;
    border-radius: 9px;
}

    .insurance-status.valid[b-ebcbgf1uvk] {
        background: #ecfdf3;
    }

    .insurance-status.warning[b-ebcbgf1uvk] {
        background: #fff7ed;
    }

    .insurance-status.expired[b-ebcbgf1uvk] {
        background: #fff1f2;
    }

.insurance-indicator[b-ebcbgf1uvk] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.insurance-status > div:last-child[b-ebcbgf1uvk] {
    display: flex;
    flex-direction: column;
}

.insurance-status strong[b-ebcbgf1uvk] {
    color: #344054;
    font-size: 8.5px;
}

.insurance-status span[b-ebcbgf1uvk] {
    margin-top: 2px;
    color: #667085;
    font-size: 7.5px;
}


/* ============================================================
   LIVREURS
   ============================================================ */

.drivers-header[b-ebcbgf1uvk] {
    justify-content: space-between;
}

.drivers-heading[b-ebcbgf1uvk] {
    display: flex;
    align-items: center;
    gap: 11px;
}

.add-driver-button[b-ebcbgf1uvk] {
    height: 34px;
    padding: 0 12px;
    border: 1px solid #dce6f5;
    border-radius: 8px;
    background: #f5f9ff;
    color: #2563eb;
    font-family: inherit;
    font-size: 8.5px;
    font-weight: 750;
    cursor: pointer;
}

.driver-info-box[b-ebcbgf1uvk] {
    padding: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 9px;
    background: #fafbfd;
    color: #667085;
    font-size: 8.5px;
}

.driver-editor[b-ebcbgf1uvk] {
    border: 1px solid #e5eaf1;
    border-radius: 11px;
    padding: 15px;
    background: #fafcff;
}

.driver-editor-header[b-ebcbgf1uvk] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 15px;
}

    .driver-editor-header h5[b-ebcbgf1uvk] {
        margin: 0;
        color: #344054;
        font-size: 11px;
    }

.close-driver-button[b-ebcbgf1uvk] {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: #f2f4f7;
    color: #667085;
    font-size: 15px;
    cursor: pointer;
}

.driver-actions[b-ebcbgf1uvk] {
    justify-content: flex-end;
    margin-top: 15px;
}

.drivers-table[b-ebcbgf1uvk] {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

    .drivers-table td[b-ebcbgf1uvk] {
        height: 56px;
        padding: 0 12px;
        border-bottom: 1px solid #f0f2f5;
        color: #667085;
        font-size: 9px;
    }

.driver-row[b-ebcbgf1uvk] {
    cursor: pointer;
}

    .driver-row:hover[b-ebcbgf1uvk] {
        background: #f8fbff;
    }

.drivers-empty[b-ebcbgf1uvk] {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-driver-icon[b-ebcbgf1uvk] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    border-radius: 10px;
    background: #eff6ff;
    color: #2563eb;
    font-weight: 850;
}

.drivers-empty strong[b-ebcbgf1uvk] {
    color: #344054;
    font-size: 9.5px;
}

.drivers-empty span[b-ebcbgf1uvk] {
    max-width: 430px;
    margin-top: 4px;
    color: #98a2b3;
    font-size: 8px;
    text-align: center;
}


/* ============================================================
   BAS
   ============================================================ */

.editor-bottom-actions[b-ebcbgf1uvk] {
    justify-content: flex-end;
}


/* ============================================================
   LOADING / EMPTY
   ============================================================ */

.sst-loading[b-ebcbgf1uvk],
.sst-empty[b-ebcbgf1uvk] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader[b-ebcbgf1uvk] {
    width: 29px;
    height: 29px;
    margin-bottom: 13px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: sst-spin-b-ebcbgf1uvk 0.8s linear infinite;
}

@keyframes sst-spin-b-ebcbgf1uvk {
    to {
        transform: rotate(360deg);
    }
}

.sst-loading strong[b-ebcbgf1uvk],
.sst-empty strong[b-ebcbgf1uvk] {
    color: #344054;
    font-size: 10px;
}

.sst-empty span[b-ebcbgf1uvk] {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 8px;
}

.empty-icon[b-ebcbgf1uvk] {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 850;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .sst-kpis[b-ebcbgf1uvk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .address-grid[b-ebcbgf1uvk],
    .contact-grid[b-ebcbgf1uvk],
    .driver-grid[b-ebcbgf1uvk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 700px) {

    .sst-header[b-ebcbgf1uvk],
    .editor-header[b-ebcbgf1uvk] {
        align-items: stretch;
        flex-direction: column;
    }

    .add-sst-button[b-ebcbgf1uvk] {
        width: 100%;
    }

    .sst-kpis[b-ebcbgf1uvk],
    .sst-filters[b-ebcbgf1uvk],
    .identity-grid[b-ebcbgf1uvk],
    .address-grid[b-ebcbgf1uvk],
    .contact-grid[b-ebcbgf1uvk],
    .insurance-grid[b-ebcbgf1uvk],
    .driver-grid[b-ebcbgf1uvk],
    .driver-settings[b-ebcbgf1uvk] {
        grid-template-columns: 1fr;
    }

    .field-wide[b-ebcbgf1uvk] {
        grid-column: auto;
    }

    .drivers-header[b-ebcbgf1uvk] {
        align-items: flex-start;
        flex-direction: column;
    }

    .add-driver-button[b-ebcbgf1uvk] {
        width: 100%;
    }

    .editor-actions[b-ebcbgf1uvk],
    .editor-bottom-actions[b-ebcbgf1uvk],
    .driver-actions[b-ebcbgf1uvk] {
        width: 100%;
    }

        .editor-actions button[b-ebcbgf1uvk],
        .editor-bottom-actions button[b-ebcbgf1uvk],
        .driver-actions button[b-ebcbgf1uvk] {
            flex: 1;
        }
}
/* /Components/Pages/Statistiques.razor.rz.scp.css */
/* ============================================================
   STATISTIQUES
   ============================================================ */

.stats-page[b-u7bph4hr9c] {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 18px;
    background: #f5f7fa;
    color: #17344f;
    font-family: "Segoe UI", Arial, sans-serif;
}

.stats-header[b-u7bph4hr9c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .stats-header h1[b-u7bph4hr9c] {
        margin: 0;
        color: #13314f;
        font-size: 22px;
        font-weight: 800;
    }

    .stats-header p[b-u7bph4hr9c] {
        margin: 3px 0 0;
        color: #71808d;
        font-size: 9px;
    }

.stats-badge[b-u7bph4hr9c] {
    padding: 6px 10px;
    border: 1px solid #d6e0e7;
    border-radius: 999px;
    background: #f7fafc;
    color: #355b76;
    font-size: 7px;
    font-weight: 900;
}

.stats-alert[b-u7bph4hr9c] {
    padding: 9px 12px;
    border-radius: 6px;
    white-space: pre-wrap;
    font-size: 9px;
}

    .stats-alert.error[b-u7bph4hr9c] {
        border: 1px solid #efc7c7;
        background: #fff4f4;
        color: #9b3535;
    }


/* ============================================================
   FILTRES
   ============================================================ */

.stats-filter-card[b-u7bph4hr9c] {
    padding: 12px;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
}

.stats-filter-grid[b-u7bph4hr9c] {
    display: grid;
    grid-template-columns: minmax(180px, 1.35fr) minmax(125px, .9fr) minmax(150px, 1fr) minmax(115px, .75fr) minmax(150px, 1fr) minmax(155px, .95fr) minmax(155px, .95fr);
    gap: 10px;
    align-items: end;
}

.stats-search-line[b-u7bph4hr9c] {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto auto auto auto;
    gap: 8px;
    align-items: end;
    margin-top: 12px;
}

.stats-field[b-u7bph4hr9c] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

    .stats-field label[b-u7bph4hr9c] {
        color: #35546d;
        font-size: 7px;
        font-weight: 900;
        text-transform: uppercase;
    }

    .stats-field input[type="text"][b-u7bph4hr9c],
    .stats-field input[type="date"][b-u7bph4hr9c],
    .stats-field select[b-u7bph4hr9c] {
        width: 100%;
        min-height: 34px;
        box-sizing: border-box;
        padding: 6px 9px;
        border: 1px solid #d4dee6;
        border-radius: 5px;
        background: #ffffff;
        color: #17344f;
        font-size: 9px;
    }

        .stats-field input:disabled[b-u7bph4hr9c],
        .stats-field select:disabled[b-u7bph4hr9c] {
            background: #eef2f5;
            color: #8e99a2;
        }

.date-with-check[b-u7bph4hr9c] {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 5px;
    align-items: center;
}

    .date-with-check input[type="checkbox"][b-u7bph4hr9c] {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: #13314f;
    }

.stats-info[b-u7bph4hr9c] {
    margin-top: 9px;
    color: #788793;
    font-size: 8px;
}

.stats-button[b-u7bph4hr9c] {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
}

    .stats-button:disabled[b-u7bph4hr9c] {
        cursor: default;
        opacity: .42;
    }

    .stats-button.primary[b-u7bph4hr9c] {
        border: 1px solid #13314f;
        background: #13314f;
        color: #ffffff;
    }

    .stats-button.secondary[b-u7bph4hr9c] {
        border: 1px solid #d4dee6;
        background: #eef2f5;
        color: #17344f;
    }

    .stats-button.success[b-u7bph4hr9c] {
        border: 1px solid #299d6d;
        background: #299d6d;
        color: #ffffff;
    }

    .stats-button.outline[b-u7bph4hr9c] {
        border: 1px solid #13314f;
        background: #ffffff;
        color: #13314f;
    }


/* ============================================================
   KPI
   ============================================================ */

.stats-kpis[b-u7bph4hr9c] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 9px;
}

.stats-kpi[b-u7bph4hr9c] {
    display: flex;
    min-height: 86px;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
}

    .stats-kpi span[b-u7bph4hr9c] {
        color: #7a8895;
        font-size: 7px;
        font-weight: 900;
    }

    .stats-kpi strong[b-u7bph4hr9c] {
        margin-top: 7px;
        color: #13314f;
        font-size: 18px;
        line-height: 1;
    }

    .stats-kpi.kpi-green strong[b-u7bph4hr9c] {
        color: #299d6d;
    }

    .stats-kpi.kpi-orange strong[b-u7bph4hr9c] {
        color: #e0892d;
    }


/* ============================================================
   RESULTATS
   ============================================================ */

.stats-results[b-u7bph4hr9c] {
    min-height: 0;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
    overflow: hidden;
}

.stats-results-head[b-u7bph4hr9c] {
    display: flex;
    min-height: 38px;
    align-items: center;
    padding: 0 11px;
    border-bottom: 1px solid #e3e9ee;
    color: #28455d;
    font-size: 8px;
}

.stats-table-wrap[b-u7bph4hr9c] {
    overflow: auto;
    max-height: calc(100vh - 430px);
    min-height: 350px;
}

.stats-table[b-u7bph4hr9c] {
    width: 100%;
    min-width: 2980px;
    border-collapse: collapse;
    font-size: 8px;
}

    .stats-table th[b-u7bph4hr9c] {
        position: sticky;
        top: 0;
        z-index: 3;
        height: 36px;
        padding: 6px 7px;
        background: #13314f;
        color: #ffffff;
        text-align: left;
        font-size: 7px;
        font-weight: 900;
        white-space: nowrap;
    }

    .stats-table td[b-u7bph4hr9c] {
        height: 36px;
        padding: 6px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #40586b;
        vertical-align: middle;
        white-space: nowrap;
    }

    .stats-table tbody tr:nth-child(even) td[b-u7bph4hr9c] {
        background: #f8fafc;
    }

    .stats-table tbody tr:hover td[b-u7bph4hr9c] {
        background: #edf4fa;
    }

    .stats-table .strong-cell[b-u7bph4hr9c] {
        color: #133b5b;
        font-weight: 800;
    }

.empty-row[b-u7bph4hr9c] {
    padding: 32px !important;
    color: #8896a2 !important;
    text-align: center !important;
}

.echec-pill[b-u7bph4hr9c] {
    display: inline-flex;
    padding: 3px 7px;
    border-radius: 999px;
    background: #fff1d8;
    color: #b36c15;
    font-size: 7px;
    font-weight: 900;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1250px) {
    .stats-filter-grid[b-u7bph4hr9c] {
        grid-template-columns: repeat(4, minmax(150px, 1fr));
    }

    .stats-search-line[b-u7bph4hr9c] {
        grid-template-columns: 1fr auto auto;
    }

        .stats-search-line .stats-button.success[b-u7bph4hr9c],
        .stats-search-line .stats-button.outline[b-u7bph4hr9c] {
            grid-row: 2;
        }

    .stats-kpis[b-u7bph4hr9c] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 850px) {
    .stats-filter-grid[b-u7bph4hr9c] {
        grid-template-columns: repeat(2, minmax(140px, 1fr));
    }

    .stats-search-line[b-u7bph4hr9c] {
        grid-template-columns: 1fr 1fr;
    }

    .search-field[b-u7bph4hr9c] {
        grid-column: 1 / -1;
    }

    .stats-kpis[b-u7bph4hr9c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Pages/Tournees.razor.rz.scp.css */
/* ============================================================
   MIRADORE - TOURNÉES WEB V2
   Écran exploitation compact sans scroll de page
   ============================================================ */

.tournees-page[b-sselq0k2ed] {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(165px, 0.78fr) auto minmax(285px, 1.32fr) auto;
    gap: 7px;
    height: calc(100vh - 92px);
    min-height: 700px;
    overflow: hidden;
    padding: 2px;
    color: #1f3549;
    font-family: inherit;
}

    .tournees-page *[b-sselq0k2ed],
    .tournees-page *[b-sselq0k2ed]::before,
    .tournees-page *[b-sselq0k2ed]::after {
        box-sizing: border-box;
    }


/* ============================================================
   ALERTES
   ============================================================ */

.compact-alert[b-sselq0k2ed] {
    position: fixed;
    top: 78px;
    right: 22px;
    z-index: 3000;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 620px;
    padding: 9px 12px;
    border-radius: 7px;
    box-shadow: 0 8px 24px rgba(24, 49, 73, 0.15);
    font-size: 12px;
    font-weight: 650;
}

.compact-alert-danger[b-sselq0k2ed] {
    border: 1px solid #efc4c4;
    background: #fff6f6;
    color: #a03c3c;
}

.compact-alert-success[b-sselq0k2ed] {
    border: 1px solid #bce0cb;
    background: #f2fbf6;
    color: #247450;
}

.compact-alert button[b-sselq0k2ed] {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
}


/* ============================================================
   TOP DASHBOARD
   ============================================================ */

.top-dashboard[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: minmax(250px, 1.05fr) minmax(640px, 3.8fr) auto;
    gap: 7px;
    align-items: stretch;
    min-height: 58px;
}

.date-block[b-sselq0k2ed],
.global-kpi[b-sselq0k2ed],
.refresh-button[b-sselq0k2ed] {
    border: 1px solid #dfe7ee;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(28, 53, 77, 0.035);
}

.date-block[b-sselq0k2ed] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 5px 8px;
}

.date-label[b-sselq0k2ed] {
    margin-bottom: 3px;
    color: #5a7085;
    font-size: 9px;
    font-weight: 800;
}

.date-controls[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: 27px minmax(95px, 1fr) 27px;
    gap: 4px;
}

.square-button[b-sselq0k2ed],
.today-button[b-sselq0k2ed],
.refresh-button[b-sselq0k2ed],
.filter-button[b-sselq0k2ed],
.route-button[b-sselq0k2ed],
.tour-action[b-sselq0k2ed],
.mini-action[b-sselq0k2ed],
.order-buttons button[b-sselq0k2ed] {
    font-family: inherit;
    cursor: pointer;
}

.square-button[b-sselq0k2ed] {
    height: 27px;
    border: 1px solid #d7e1ea;
    border-radius: 5px;
    background: #f8fafc;
    color: #28465f;
    font-size: 17px;
}

.date-display[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 27px;
    padding: 0 7px;
    border: 1px solid #d8e1ea;
    border-radius: 5px;
    background: #ffffff;
    color: #28435a;
    font-size: 10.5px;
    font-weight: 750;
    white-space: nowrap;
}

.today-button[b-sselq0k2ed] {
    height: 27px;
    padding: 0 8px;
    border: 1px solid #d5dfe8;
    border-radius: 5px;
    background: #ffffff;
    color: #38546c;
    font-size: 9.5px;
    font-weight: 750;
}

.global-kpis[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: repeat(5, minmax(105px, 1fr));
    gap: 7px;
}

.global-kpi[b-sselq0k2ed] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 6px 10px;
}

    .global-kpi span[b-sselq0k2ed] {
        color: #667b8f;
        font-size: 8.5px;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    .global-kpi strong[b-sselq0k2ed] {
        margin-top: 3px;
        overflow: hidden;
        color: #156fc4;
        font-size: 16px;
        font-weight: 850;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .global-kpi.ca strong[b-sselq0k2ed] {
        color: #1b9d68;
    }

    .global-kpi.poids strong[b-sselq0k2ed] {
        color: #de8614;
    }

.refresh-button[b-sselq0k2ed] {
    min-width: 96px;
    padding: 0 12px;
    color: #36536b;
    font-size: 10px;
    font-weight: 750;
}

    .refresh-button:hover[b-sselq0k2ed] {
        background: #f7f9fb;
    }


/* ============================================================
   PANELS
   ============================================================ */

.panel[b-sselq0k2ed] {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dde6ed;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(28, 52, 75, 0.035);
}

.pool-panel[b-sselq0k2ed],
.composition-panel[b-sselq0k2ed],
.map-panel[b-sselq0k2ed] {
    display: flex;
    flex-direction: column;
}

.panel-toolbar[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 35px;
    padding: 4px 8px;
    border-bottom: 1px solid #e5ebf0;
}

.panel-title[b-sselq0k2ed] {
    color: #29465e;
    font-size: 9.5px;
    font-weight: 850;
    white-space: nowrap;
}

.count-chip[b-sselq0k2ed] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    margin-left: 4px;
    padding: 0 5px;
    border-radius: 999px;
    background: #eaf3fb;
    color: #24699e;
    font-size: 9px;
}

.pool-filters[b-sselq0k2ed] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

    .pool-filters input[b-sselq0k2ed],
    .pool-filters select[b-sselq0k2ed] {
        height: 25px;
        border: 1px solid #d9e2ea;
        border-radius: 5px;
        outline: 0;
        background: #ffffff;
        color: #465e72;
        font: inherit;
        font-size: 9px;
    }

.search-input[b-sselq0k2ed] {
    width: min(280px, 28vw);
    padding: 0 8px;
}

.pool-filters select[b-sselq0k2ed] {
    width: 110px;
    padding: 0 5px;
}

.filter-button[b-sselq0k2ed] {
    height: 25px;
    padding: 0 8px;
    border: 1px solid #d6e0e8;
    border-radius: 5px;
    background: #ffffff;
    color: #405d74;
    font-size: 9px;
    font-weight: 750;
}


/* ============================================================
   TABLEAUX
   ============================================================ */

.table-scroll[b-sselq0k2ed] {
    min-height: 0;
    flex: 1;
    overflow: auto;
}

.data-table[b-sselq0k2ed] {
    width: 100%;
    min-width: 1020px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: #ffffff;
    font-size: 8.7px;
}

    .data-table th[b-sselq0k2ed] {
        position: sticky;
        top: 0;
        z-index: 4;
        height: 24px;
        padding: 4px 6px;
        border-bottom: 1px solid #dce5ec;
        background: #f4f7f9;
        color: #445d72;
        text-align: left;
        font-size: 8px;
        font-weight: 850;
        white-space: nowrap;
    }

    .data-table td[b-sselq0k2ed] {
        height: 24px;
        padding: 3px 6px;
        border-bottom: 1px solid #edf1f4;
        color: #415568;
        vertical-align: middle;
        white-space: nowrap;
    }

    .data-table tbody tr:hover td[b-sselq0k2ed] {
        background: #f7fafc;
    }

.strong-cell[b-sselq0k2ed] {
    color: #253f56 !important;
    font-weight: 750;
}

.numeric-cell[b-sselq0k2ed] {
    text-align: right;
}

.address-cell[b-sselq0k2ed] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.prestations-cell[b-sselq0k2ed] {
    max-width: 165px;
    overflow: hidden;
    color: #6a7a88 !important;
    text-overflow: ellipsis;
}

.action-cell[b-sselq0k2ed] {
    width: 58px;
    text-align: right;
}

.empty-row[b-sselq0k2ed] {
    height: 48px !important;
    color: #8896a3 !important;
    text-align: center;
}


/* ============================================================
   STATUTS
   ============================================================ */

.status-badge[b-sselq0k2ed],
.slot-badge[b-sselq0k2ed] {
    display: inline-flex;
    align-items: center;
    min-height: 16px;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 7.5px;
    font-weight: 850;
}

    .status-badge.neutral[b-sselq0k2ed] {
        background: #edf1f4;
        color: #667581;
    }

    .status-badge.info[b-sselq0k2ed] {
        background: #e8f3fb;
        color: #3474a0;
    }

    .status-badge.success[b-sselq0k2ed] {
        background: #e5f8ec;
        color: #23905e;
    }

    .status-badge.primary[b-sselq0k2ed] {
        background: #e8f1ff;
        color: #2f6fc5;
    }

    .status-badge.warning[b-sselq0k2ed] {
        background: #fff3dc;
        color: #9d6b1e;
    }

    .status-badge.locked[b-sselq0k2ed] {
        background: #efedf7;
        color: #6b5b93;
    }

.slot-badge[b-sselq0k2ed] {
    background: transparent;
    color: #40576a;
    font-weight: 650;
}


/* ============================================================
   MINI ACTIONS
   ============================================================ */

.mini-action[b-sselq0k2ed] {
    width: 22px;
    height: 19px;
    padding: 0;
    border: 1px solid #d8e1e8;
    border-radius: 4px;
    background: #ffffff;
    color: #315f80;
    font-size: 11px;
    line-height: 1;
}

    .mini-action.add[b-sselq0k2ed] {
        border-color: #c5dcf6;
        background: #edf5ff;
        color: #176dc4;
    }

    .mini-action.remove[b-sselq0k2ed] {
        border-color: #efcaca;
        background: #fff5f5;
        color: #bb4141;
    }


/* ============================================================
   BANDE TOURNÉES
   ============================================================ */

.tour-selector[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr);
    min-height: 49px;
    overflow: hidden;
    border: 1px solid #163a5a;
    border-radius: 5px;
    background: #12334f;
}

.tour-selector-title[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    padding-left: 9px;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 850;
}

.tour-buttons[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: repeat(15, minmax(54px, 1fr));
    gap: 3px;
    padding: 4px;
}

.tour-button[b-sselq0k2ed] {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto;
    min-width: 0;
    padding: 2px 4px;
    border: 1px solid #48647c;
    border-radius: 4px;
    background: #24475f;
    color: #ffffff;
    text-align: center;
}

    .tour-button:hover[b-sselq0k2ed] {
        background: #2d5570;
    }

    .tour-button.selected[b-sselq0k2ed] {
        border-color: #24a96f;
        background: #17a56d;
    }

    .tour-button.validated:not(.selected)[b-sselq0k2ed] {
        border-color: #62a987;
    }

.tour-name[b-sselq0k2ed] {
    font-size: 9px;
    font-weight: 900;
}

.tour-ca[b-sselq0k2ed] {
    overflow: hidden;
    font-size: 7.2px;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tour-count[b-sselq0k2ed] {
    color: rgba(255, 255, 255, 0.74);
    font-size: 6.8px;
}

.tour-valid[b-sselq0k2ed] {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 7px;
}


/* ============================================================
   PLANNING GRID
   ============================================================ */

.planning-grid[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(360px, 1fr);
    gap: 7px;
    min-height: 0;
}

.composition-toolbar[b-sselq0k2ed] {
    min-height: 52px;
}

.tour-heading[b-sselq0k2ed] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 13px;
}

    .tour-heading > div:first-child[b-sselq0k2ed] {
        display: flex;
        min-width: 76px;
        flex-direction: column;
    }

        .tour-heading > div:first-child > span[b-sselq0k2ed] {
            color: #26445d;
            font-size: 9.5px;
            font-weight: 900;
        }

    .tour-heading small[b-sselq0k2ed] {
        margin-top: 2px;
        color: #ad731e;
        font-size: 7px;
        font-weight: 800;
    }

    .tour-heading .validated-text[b-sselq0k2ed] {
        color: #19855a;
    }

.tour-inline-kpis[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: repeat(5, minmax(66px, 1fr));
    gap: 4px;
}

    .tour-inline-kpis > div[b-sselq0k2ed] {
        min-width: 0;
        padding: 4px 6px;
        border: 1px solid #e0e7ed;
        border-radius: 4px;
        background: #fafcfd;
    }

    .tour-inline-kpis span[b-sselq0k2ed] {
        display: block;
        color: #778897;
        font-size: 6.7px;
        font-weight: 850;
    }

    .tour-inline-kpis strong[b-sselq0k2ed] {
        display: block;
        margin-top: 1px;
        overflow: hidden;
        color: #2662ab;
        font-size: 10px;
        font-weight: 850;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tour-inline-kpis .ca strong[b-sselq0k2ed] {
        color: #1b9a68;
    }

.tour-actions[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tour-action[b-sselq0k2ed] {
    height: 26px;
    padding: 0 9px;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 800;
}

    .tour-action.validate[b-sselq0k2ed] {
        border: 1px solid #209663;
        background: #209663;
        color: #ffffff;
    }

    .tour-action.danger[b-sselq0k2ed] {
        border: 1px solid #d46565;
        background: #ffffff;
        color: #b43f3f;
    }

    .tour-action:disabled[b-sselq0k2ed],
    .mini-action:disabled[b-sselq0k2ed],
    .order-buttons button:disabled[b-sselq0k2ed],
    .route-button:disabled[b-sselq0k2ed],
    .refresh-button:disabled[b-sselq0k2ed] {
        cursor: not-allowed;
        opacity: 0.48;
    }


/* ============================================================
   ORDRE
   ============================================================ */

.composition-table[b-sselq0k2ed] {
    min-width: 940px;
}

.order-cell[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.order-number[b-sselq0k2ed] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 50%;
    background: #173e5f;
    color: #ffffff;
    font-size: 7.5px;
    font-weight: 850;
}

.order-buttons[b-sselq0k2ed] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

    .order-buttons button[b-sselq0k2ed] {
        width: 17px;
        height: 9px;
        padding: 0;
        border: 0;
        border-radius: 2px;
        background: #edf2f6;
        color: #3c5c74;
        font-size: 5.5px;
        line-height: 7px;
    }


/* ============================================================
   CARTE
   ============================================================ */

.map-panel[b-sselq0k2ed] {
    min-width: 0;
}

.map-toolbar[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    min-height: 34px;
    padding: 4px 7px;
    border-bottom: 1px solid #e2e9ef;
}

    .map-toolbar > div[b-sselq0k2ed] {
        display: flex;
        min-width: 0;
        flex-direction: column;
    }

    .map-toolbar strong[b-sselq0k2ed] {
        color: #2a485f;
        font-size: 8.5px;
        font-weight: 900;
    }

    .map-toolbar span[b-sselq0k2ed] {
        margin-top: 1px;
        overflow: hidden;
        color: #738695;
        font-size: 7.5px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.route-button[b-sselq0k2ed] {
    height: 24px;
    padding: 0 7px;
    border: 1px solid #c5dbf3;
    border-radius: 4px;
    background: #f1f7fe;
    color: #246cad;
    font-size: 7.8px;
    font-weight: 800;
    white-space: nowrap;
}

.map-container[b-sselq0k2ed] {
    min-height: 0;
    flex: 1;
    background: #eef3f6;
}

    .map-container :global(.leaflet-control-attribution)[b-sselq0k2ed] {
        font-size: 7px !important;
    }

.miradore-map-stop[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    margin-left: -10px !important;
    margin-top: -10px !important;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #1677ff;
    color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27);
    font-size: 8px;
    font-weight: 900;
}

    .miradore-map-stop.depot[b-sselq0k2ed] {
        background: #18a56c;
    }


/* ============================================================
   BAS : ÉQUIPE / VÉHICULE / CAPACITÉS
   ============================================================ */

.bottom-strip[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(200px, 1fr) repeat(4, minmax(105px, 0.7fr));
    gap: 7px;
    min-height: 82px;
}

.resource-card[b-sselq0k2ed],
.capacity-card[b-sselq0k2ed] {
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid #dfe7ed;
    border-radius: 6px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(29, 53, 75, 0.025);
}

.bottom-title[b-sselq0k2ed],
.capacity-title[b-sselq0k2ed] {
    margin-bottom: 5px;
    color: #526d82;
    font-size: 7.8px;
    font-weight: 900;
}

.resource-card label[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}

    .resource-card label > span[b-sselq0k2ed] {
        color: #667c8e;
        font-size: 7.5px;
        font-weight: 700;
    }

.resource-card select[b-sselq0k2ed] {
    width: 100%;
    min-width: 0;
    height: 21px;
    padding: 0 4px;
    border: 1px solid #d8e2ea;
    border-radius: 4px;
    background: #ffffff;
    color: #40586c;
    font: inherit;
    font-size: 7.7px;
}

.vehicle-details[b-sselq0k2ed] {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    color: #788996;
    font-size: 7px;
}

    .vehicle-details span[b-sselq0k2ed] {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .vehicle-details strong[b-sselq0k2ed] {
        margin-left: 3px;
        color: #344f65;
    }

.capacity-card[b-sselq0k2ed] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .capacity-card strong[b-sselq0k2ed] {
        color: #304e66;
        font-size: 9px;
        font-weight: 850;
        white-space: nowrap;
    }

    .capacity-card > span[b-sselq0k2ed] {
        margin-top: 3px;
        color: #768796;
        font-size: 7.3px;
    }

.capacity-track[b-sselq0k2ed] {
    width: 100%;
    height: 5px;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf2;
}

.capacity-fill[b-sselq0k2ed] {
    height: 100%;
    border-radius: inherit;
}

    .capacity-fill.normal[b-sselq0k2ed] {
        background: #229d68;
    }

    .capacity-fill.warning[b-sselq0k2ed] {
        background: #eea21e;
    }

    .capacity-fill.danger[b-sselq0k2ed] {
        background: #d9534f;
    }

.capacity-card.simple strong[b-sselq0k2ed] {
    color: #166fc5;
    font-size: 16px;
}


/* ============================================================
   SCROLLBARS
   ============================================================ */

.table-scroll[b-sselq0k2ed]::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.table-scroll[b-sselq0k2ed]::-webkit-scrollbar-track {
    background: #f3f6f8;
}

.table-scroll[b-sselq0k2ed]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c4d0da;
}


/* ============================================================
   ADAPTATION ÉCRAN
   ============================================================ */

@media (max-width: 1450px) {

    .tournees-page[b-sselq0k2ed] {
        height: calc(100vh - 88px);
    }

    .top-dashboard[b-sselq0k2ed] {
        grid-template-columns: minmax(230px, 1fr) minmax(570px, 3.5fr) auto;
    }

    .tour-buttons[b-sselq0k2ed] {
        grid-template-columns: repeat(15, minmax(48px, 1fr));
    }

    .tour-ca[b-sselq0k2ed] {
        font-size: 6.6px;
    }

    .bottom-strip[b-sselq0k2ed] {
        grid-template-columns: minmax(190px, 1.05fr) minmax(185px, 0.95fr) repeat(4, minmax(95px, 0.65fr));
    }
}

@media (max-width: 1180px) {

    .tournees-page[b-sselq0k2ed] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .top-dashboard[b-sselq0k2ed] {
        grid-template-columns: 1fr;
    }

    .global-kpis[b-sselq0k2ed] {
        grid-template-columns: repeat(5, 1fr);
    }

    .planning-grid[b-sselq0k2ed] {
        grid-template-columns: 1fr;
    }

    .composition-panel[b-sselq0k2ed],
    .map-panel[b-sselq0k2ed] {
        min-height: 340px;
    }

    .tour-selector[b-sselq0k2ed] {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .tour-buttons[b-sselq0k2ed] {
        overflow-x: auto;
        grid-template-columns: repeat(15, 62px);
    }

    .bottom-strip[b-sselq0k2ed] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

/* ============================================================
   SOUS-ONGLETS TOURNEES
   ============================================================ */

.tournees-subtabs[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 9px;
    padding: 4px;
    border-radius: 6px;
    background: #12334f;
}

.tournees-subtab[b-sselq0k2ed] {
    min-height: 35px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #ffffff;
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

    .tournees-subtab.active[b-sselq0k2ed] {
        background: #ffffff;
        color: #163a5a;
    }


.edition-panel[b-sselq0k2ed] {
    display: block;
}

/* ============================================================
   EDITION DES TOURNEES
   ============================================================ */

.edition-panel[b-sselq0k2ed] {
    padding: 14px;
    border: 1px solid #dbe4eb;
    border-radius: 7px;
    background: #ffffff;
}

.edition-header[b-sselq0k2ed] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e6edf2;
}

.edition-eyebrow[b-sselq0k2ed] {
    color: #8a99a7;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}

.edition-header h2[b-sselq0k2ed] {
    margin: 3px 0 3px;
    color: #153550;
    font-size: 18px;
}

.edition-header p[b-sselq0k2ed] {
    margin: 0;
    color: #6f7f8e;
    font-size: 9px;
}

.edition-date-nav[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.date-nav-button[b-sselq0k2ed] {
    width: 31px;
    height: 31px;
    border: 1px solid #d7e1e8;
    border-radius: 5px;
    background: #ffffff;
    color: #163a5a;
    font-size: 18px;
    cursor: pointer;
}

.edition-date-display[b-sselq0k2ed] {
    display: flex;
    min-width: 112px;
    min-height: 31px;
    flex-direction: column;
    justify-content: center;
    padding: 3px 10px;
    border: 1px solid #d7e1e8;
    border-radius: 5px;
    background: #fafcfd;
}

    .edition-date-display span[b-sselq0k2ed] {
        color: #8a98a5;
        font-size: 6.5px;
        font-weight: 900;
    }

    .edition-date-display strong[b-sselq0k2ed] {
        color: #173b5a;
        font-size: 10px;
    }

.edition-refresh[b-sselq0k2ed] {
    min-height: 31px;
}

.edition-kpis[b-sselq0k2ed] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 220px));
    gap: 9px;
    margin: 12px 0;
}

.edition-kpi-card[b-sselq0k2ed] {
    display: flex;
    min-height: 64px;
    flex-direction: column;
    justify-content: center;
    padding: 9px 12px;
    border: 1px solid #dde5ec;
    border-radius: 6px;
    background: #f9fbfc;
}

    .edition-kpi-card span[b-sselq0k2ed] {
        color: #7f8f9c;
        font-size: 7px;
        font-weight: 900;
    }

    .edition-kpi-card strong[b-sselq0k2ed] {
        margin-top: 2px;
        color: #153550;
        font-size: 19px;
    }

    .edition-kpi-card small[b-sselq0k2ed] {
        color: #8b98a4;
        font-size: 7.5px;
    }

.edition-toolbar[b-sselq0k2ed] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.edition-selection-actions[b-sselq0k2ed],
.edition-document-actions[b-sselq0k2ed] {
    display: flex;
    gap: 7px;
}

.secondary-action[b-sselq0k2ed],
.primary-action[b-sselq0k2ed] {
    min-height: 31px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 850;
    cursor: pointer;
}

.secondary-action[b-sselq0k2ed] {
    border: 1px solid #d4dee6;
    background: #ffffff;
    color: #38536a;
}

.primary-action[b-sselq0k2ed] {
    border: 1px solid #143a5b;
    background: #143a5b;
    color: #ffffff;
}

    .primary-action.pdf[b-sselq0k2ed] {
        border-color: #2877bd;
        background: #2877bd;
    }

    .secondary-action:disabled[b-sselq0k2ed],
    .primary-action:disabled[b-sselq0k2ed],
    .date-nav-button:disabled[b-sselq0k2ed] {
        cursor: default;
        opacity: .5;
    }

.edition-table-wrap[b-sselq0k2ed] {
    overflow: auto;
    max-height: 520px;
    border: 1px solid #dbe4eb;
    border-radius: 6px;
}

.edition-table[b-sselq0k2ed] {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
    font-size: 8px;
}

    .edition-table th[b-sselq0k2ed] {
        position: sticky;
        top: 0;
        z-index: 1;
        height: 32px;
        padding: 5px 7px;
        background: #12334f;
        color: #ffffff;
        font-size: 7px;
        font-weight: 900;
        text-align: left;
        white-space: nowrap;
    }

    .edition-table td[b-sselq0k2ed] {
        height: 34px;
        padding: 5px 7px;
        border-bottom: 1px solid #edf1f4;
        color: #42586a;
        white-space: nowrap;
    }

    .edition-table tbody tr:hover td[b-sselq0k2ed] {
        background: #f7fafc;
    }

.edition-check-col[b-sselq0k2ed] {
    width: 34px;
    text-align: center !important;
}

.edition-rule-note[b-sselq0k2ed] {
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid #dfe7ed;
    border-radius: 5px;
    background: #f8fafc;
    color: #647686;
    font-size: 8px;
}

    .edition-rule-note strong[b-sselq0k2ed] {
        color: #254963;
    }

@media (max-width: 1050px) {
    .edition-header[b-sselq0k2ed],
    .edition-toolbar[b-sselq0k2ed] {
        align-items: stretch;
        flex-direction: column;
    }

    .edition-kpis[b-sselq0k2ed] {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   CORRECTION STRUCTURELLE SOUS-ONGLETS
   La barre est volontairement hors de la grille historique
   .tournees-page afin de ne jamais modifier ses 5 lignes.
   ============================================================ */

.tournees-subtabs[b-sselq0k2ed] {
    margin: 0 2px 7px 2px;
}

/*
 * PLANIFICATION :
 * aucune surcharge. Le CSS historique validé reste l'unique
 * autorité pour les dimensions de la page.
 */

/*
 * EDITION :
 * la grille historique n'a pas de sens avec un seul panneau.
 * On la neutralise uniquement dans ce mode.
 */
.tournees-page.edition-mode[b-sselq0k2ed] {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
}

    .tournees-page.edition-mode .edition-panel[b-sselq0k2ed] {
        display: block;
    }
/* /Components/Pages/VehiculesRessource.razor.rz.scp.css */
/* ============================================================
   MIRADORE WEB
   RESSOURCES - VEHICULES
   ============================================================ */

.vehicles-page[b-pefv4c4z2f] {
    width: 100%;
}


/* ============================================================
   HEADER
   ============================================================ */

.vehicles-header[b-pefv4c4z2f] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.vehicles-eyebrow[b-pefv4c4z2f],
.editor-eyebrow[b-pefv4c4z2f] {
    margin-bottom: 6px;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 1.2px;
}

.vehicles-header h2[b-pefv4c4z2f] {
    margin: 0;
    color: #1d2939;
    font-size: 20px;
    font-weight: 780;
    letter-spacing: -0.4px;
}

.vehicles-header p[b-pefv4c4z2f] {
    margin: 6px 0 0;
    color: #98a2b3;
    font-size: 10px;
}

.add-vehicle-button[b-pefv4c4z2f] {
    height: 41px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient( 135deg, #2563eb, #1d4ed8 );
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.18);
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

    .add-vehicle-button:hover[b-pefv4c4z2f] {
        transform: translateY(-1px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.24);
    }

    .add-vehicle-button span[b-pefv4c4z2f] {
        font-size: 17px;
    }


/* ============================================================
   MESSAGES
   ============================================================ */

.vehicle-message[b-pefv4c4z2f] {
    min-height: 62px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 11px;
}

    .vehicle-message.error[b-pefv4c4z2f] {
        background: #fff7f7;
        border: 1px solid #fee2e2;
    }

    .vehicle-message.success[b-pefv4c4z2f] {
        background: #f0fdf4;
        border: 1px solid #dcfce7;
    }

.message-symbol[b-pefv4c4z2f] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #ffffff;
    font-weight: 850;
}

.vehicle-message > div:last-child[b-pefv4c4z2f] {
    display: flex;
    flex-direction: column;
}

.vehicle-message strong[b-pefv4c4z2f] {
    color: #344054;
    font-size: 9.5px;
}

.vehicle-message span[b-pefv4c4z2f] {
    margin-top: 3px;
    color: #667085;
    font-size: 8.5px;
}

.vehicle-message.error .message-symbol[b-pefv4c4z2f] {
    color: #dc2626;
}

.vehicle-message.success .message-symbol[b-pefv4c4z2f] {
    color: #16a34a;
}


/* ============================================================
   KPI
   ============================================================ */

.vehicles-kpis[b-pefv4c4z2f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 17px;
}

.vehicle-kpi[b-pefv4c4z2f] {
    min-height: 102px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 17px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.022);
}

.kpi-label[b-pefv4c4z2f] {
    color: #98a2b3;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 0.65px;
}

.vehicle-kpi strong[b-pefv4c4z2f] {
    margin-top: 6px;
    color: #1d2939;
    font-size: 22px;
    font-weight: 800;
}

.vehicle-kpi small[b-pefv4c4z2f] {
    margin-top: 3px;
    color: #a5adba;
    font-size: 7.5px;
}


/* ============================================================
   FILTRES
   ============================================================ */

.vehicles-filter-card[b-pefv4c4z2f] {
    margin-bottom: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 13px;
}

.vehicles-filters[b-pefv4c4z2f] {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) auto;
    align-items: end;
    gap: 18px;
}

.field[b-pefv4c4z2f] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field label[b-pefv4c4z2f] {
        color: #667085;
        font-size: 8.5px;
        font-weight: 750;
    }

        .field label span[b-pefv4c4z2f] {
            color: #dc2626;
        }

    .field input[b-pefv4c4z2f],
    .field textarea[b-pefv4c4z2f] {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #dfe5ee;
        border-radius: 9px;
        outline: none;
        background: #ffffff;
        color: #344054;
        font-family: inherit;
        font-size: 10px;
        transition: border-color 0.16s ease, box-shadow 0.16s ease;
    }

    .field input[b-pefv4c4z2f] {
        height: 40px;
        padding: 0 11px;
    }

    .field textarea[b-pefv4c4z2f] {
        padding: 10px 11px;
        resize: vertical;
        line-height: 1.5;
    }

        .field input:focus[b-pefv4c4z2f],
        .field textarea:focus[b-pefv4c4z2f] {
            border-color: #8bb3f4;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.07);
        }

        .field input[b-pefv4c4z2f]::placeholder,
        .field textarea[b-pefv4c4z2f]::placeholder {
            color: #b2bac6;
        }

.search-wrapper[b-pefv4c4z2f] {
    position: relative;
}

    .search-wrapper > span[b-pefv4c4z2f] {
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        color: #98a2b3;
    }

    .search-wrapper input[b-pefv4c4z2f] {
        padding-left: 37px;
    }

.filter-switch[b-pefv4c4z2f] {
    min-width: 235px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .filter-switch > div[b-pefv4c4z2f] {
        display: flex;
        flex-direction: column;
    }

    .filter-switch strong[b-pefv4c4z2f] {
        color: #475467;
        font-size: 8.5px;
    }

    .filter-switch span[b-pefv4c4z2f] {
        margin-top: 2px;
        color: #98a2b3;
        font-size: 7.5px;
    }


/* ============================================================
   SWITCH
   ============================================================ */

.miradore-switch[b-pefv4c4z2f] {
    position: relative;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}

    .miradore-switch input[b-pefv4c4z2f] {
        width: 0;
        height: 0;
        opacity: 0;
    }

.switch-slider[b-pefv4c4z2f] {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: #d8dee8;
    cursor: pointer;
    transition: 0.2s;
}

    .switch-slider[b-pefv4c4z2f]::before {
        content: "";
        position: absolute;
        width: 16px;
        height: 16px;
        left: 3px;
        top: 3px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.20);
        transition: 0.2s;
    }

.miradore-switch input:checked + .switch-slider[b-pefv4c4z2f] {
    background: #2563eb;
}

    .miradore-switch input:checked + .switch-slider[b-pefv4c4z2f]::before {
        transform: translateX(18px);
    }


/* ============================================================
   LISTE
   ============================================================ */

.vehicles-list-card[b-pefv4c4z2f] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.02);
}

.list-toolbar[b-pefv4c4z2f] {
    min-height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-bottom: 1px solid #edf1f5;
}

    .list-toolbar > div[b-pefv4c4z2f] {
        display: flex;
        align-items: baseline;
        gap: 5px;
    }

    .list-toolbar strong[b-pefv4c4z2f] {
        color: #344054;
        font-size: 11px;
    }

    .list-toolbar span[b-pefv4c4z2f] {
        color: #98a2b3;
        font-size: 8.5px;
    }

.refresh-vehicles[b-pefv4c4z2f] {
    width: 32px;
    height: 32px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    color: #667085;
    font-size: 15px;
    cursor: pointer;
}

.vehicles-table-wrapper[b-pefv4c4z2f] {
    width: 100%;
    overflow-x: auto;
}

.vehicles-table[b-pefv4c4z2f] {
    width: 100%;
    min-width: 1400px;
    border-collapse: collapse;
}

    .vehicles-table th[b-pefv4c4z2f] {
        height: 42px;
        padding: 0 12px;
        border-bottom: 1px solid #e8edf4;
        background: #fafbfc;
        color: #8a96a8;
        text-align: left;
        font-size: 7.5px;
        font-weight: 850;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .vehicles-table td[b-pefv4c4z2f] {
        height: 61px;
        padding: 0 12px;
        border-bottom: 1px solid #f0f2f5;
        color: #667085;
        font-size: 9px;
        white-space: nowrap;
    }

.vehicle-row[b-pefv4c4z2f] {
    cursor: pointer;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

    .vehicle-row:hover[b-pefv4c4z2f] {
        background: #f8fbff;
        box-shadow: inset 3px 0 0 #2563eb;
    }


/* ============================================================
   VEHICULE CELL
   ============================================================ */

.vehicle-name-cell[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicle-avatar[b-pefv4c4z2f] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 9px;
    font-weight: 850;
}

.vehicle-name-cell > div:last-child[b-pefv4c4z2f] {
    display: flex;
    flex-direction: column;
}

.registration[b-pefv4c4z2f] {
    color: #344054;
    font-size: 9.5px;
    font-weight: 800;
}

.vehicle-name-cell span[b-pefv4c4z2f] {
    margin-top: 3px;
    color: #98a2b3;
    font-size: 7.5px;
}

.muted-value[b-pefv4c4z2f] {
    color: #b1bac6;
}


/* ============================================================
   BADGES
   ============================================================ */

.vehicle-status[b-pefv4c4z2f],
.deadline-badge[b-pefv4c4z2f] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 20px;
    font-size: 7.5px;
    font-weight: 800;
}

    .vehicle-status > span[b-pefv4c4z2f] {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: currentColor;
    }

    .vehicle-status.active[b-pefv4c4z2f],
    .deadline-badge.valid[b-pefv4c4z2f] {
        background: #ecfdf3;
        color: #15803d;
    }

    .vehicle-status.inactive[b-pefv4c4z2f],
    .deadline-badge.unknown[b-pefv4c4z2f] {
        background: #f2f4f7;
        color: #667085;
    }

    .deadline-badge.warning[b-pefv4c4z2f] {
        background: #fff7ed;
        color: #d97706;
    }

    .deadline-badge.expired[b-pefv4c4z2f] {
        background: #fff1f2;
        color: #dc2626;
    }


/* ============================================================
   EDITEUR
   ============================================================ */

.vehicle-editor[b-pefv4c4z2f] {
    width: 100%;
}

.editor-header[b-pefv4c4z2f] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.editor-title[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .editor-title h3[b-pefv4c4z2f] {
        margin: 0;
        color: #1d2939;
        font-size: 18px;
        font-weight: 780;
    }

.editor-back[b-pefv4c4z2f] {
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e1e6ed;
    border-radius: 9px;
    background: #ffffff;
    color: #667085;
    font-size: 16px;
    cursor: pointer;
}

.editor-actions[b-pefv4c4z2f],
.editor-bottom-actions[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.cancel-button[b-pefv4c4z2f],
.save-vehicle-button[b-pefv4c4z2f] {
    height: 39px;
    padding: 0 15px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 750;
    cursor: pointer;
}

.cancel-button[b-pefv4c4z2f] {
    border: 1px solid #e1e6ed;
    background: #ffffff;
    color: #667085;
}

.save-vehicle-button[b-pefv4c4z2f] {
    min-width: 120px;
    border: none;
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

    .save-vehicle-button:disabled[b-pefv4c4z2f] {
        opacity: 0.6;
        cursor: wait;
    }


/* ============================================================
   CARTES
   ============================================================ */

.vehicle-card[b-pefv4c4z2f] {
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid #e8edf4;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.02);
}

.vehicle-card-header[b-pefv4c4z2f] {
    min-height: 65px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 17px;
    border-bottom: 1px solid #edf1f5;
}

.section-number[b-pefv4c4z2f] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.vehicle-card-header h4[b-pefv4c4z2f] {
    margin: 0;
    color: #344054;
    font-size: 11px;
}

.vehicle-card-header p[b-pefv4c4z2f] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 8px;
}

.vehicle-card-content[b-pefv4c4z2f] {
    padding: 18px;
}


/* ============================================================
   IDENTIFICATION
   ============================================================ */

.identification-grid[b-pefv4c4z2f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
}


/* ============================================================
   CAPACITES
   ============================================================ */

.capacities-grid[b-pefv4c4z2f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
}

.metric-field[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #e8edf4;
    border-radius: 11px;
    background: #fafcff;
}

.metric-icon[b-pefv4c4z2f] {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 8px;
    font-weight: 850;
}

.metric-field .field[b-pefv4c4z2f] {
    flex: 1;
}

.unit-input[b-pefv4c4z2f] {
    position: relative;
}

    .unit-input input[b-pefv4c4z2f] {
        padding-right: 45px;
    }

    .unit-input > span[b-pefv4c4z2f] {
        position: absolute;
        top: 50%;
        right: 11px;
        transform: translateY(-50%);
        color: #98a2b3;
        font-size: 8px;
        pointer-events: none;
    }

.capacity-warning[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #fed7aa;
    border-radius: 9px;
    background: #fff7ed;
}

.warning-symbol[b-pefv4c4z2f] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 7px;
    background: #ffffff;
    color: #d97706;
    font-weight: 850;
}

.capacity-warning > div:last-child[b-pefv4c4z2f] {
    display: flex;
    flex-direction: column;
}

.capacity-warning strong[b-pefv4c4z2f] {
    color: #9a3412;
    font-size: 8.5px;
}

.capacity-warning span[b-pefv4c4z2f] {
    margin-top: 2px;
    color: #c2410c;
    font-size: 7.5px;
}


/* ============================================================
   ECHEANCES
   ============================================================ */

.deadlines-grid[b-pefv4c4z2f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 280px));
    gap: 15px;
}

.deadlines-status[b-pefv4c4z2f] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}

.deadline-box[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    padding: 11px 13px;
    border-radius: 10px;
}

    .deadline-box.valid[b-pefv4c4z2f] {
        background: #ecfdf3;
    }

    .deadline-box.warning[b-pefv4c4z2f] {
        background: #fff7ed;
    }

    .deadline-box.expired[b-pefv4c4z2f] {
        background: #fff1f2;
    }

.deadline-dot[b-pefv4c4z2f] {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.deadline-box.valid[b-pefv4c4z2f] {
    color: #15803d;
}

.deadline-box.warning[b-pefv4c4z2f] {
    color: #d97706;
}

.deadline-box.expired[b-pefv4c4z2f] {
    color: #dc2626;
}

.deadline-box > div:last-child[b-pefv4c4z2f] {
    display: flex;
    flex-direction: column;
}

.deadline-box span[b-pefv4c4z2f] {
    color: #98a2b3;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.5px;
}

.deadline-box strong[b-pefv4c4z2f] {
    margin-top: 3px;
    color: #344054;
    font-size: 9px;
}

.deadline-box small[b-pefv4c4z2f] {
    margin-top: 2px;
    color: #667085;
    font-size: 7.5px;
}


/* ============================================================
   EXPLOITATION
   ============================================================ */

.vehicle-active-card[b-pefv4c4z2f] {
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid #e7ecf3;
    border-radius: 10px;
    background: #fafcff;
}

    .vehicle-active-card > div[b-pefv4c4z2f] {
        display: flex;
        flex-direction: column;
    }

    .vehicle-active-card strong[b-pefv4c4z2f] {
        color: #344054;
        font-size: 9px;
    }

    .vehicle-active-card span[b-pefv4c4z2f] {
        margin-top: 3px;
        color: #98a2b3;
        font-size: 7.5px;
    }

.notes-field[b-pefv4c4z2f] {
    margin-top: 15px;
}


/* ============================================================
   RESUME
   ============================================================ */

.vehicle-summary[b-pefv4c4z2f] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.summary-main[b-pefv4c4z2f] {
    min-width: 220px;
}

.summary-registration[b-pefv4c4z2f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 2px solid #344054;
    border-radius: 5px;
    background: #ffffff;
    color: #101828;
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 1px;
}

.summary-model[b-pefv4c4z2f] {
    margin-top: 7px;
    color: #667085;
    font-size: 9px;
    font-weight: 650;
}

.summary-values[b-pefv4c4z2f] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

    .summary-values > div[b-pefv4c4z2f] {
        min-height: 58px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 12px;
        border: 1px solid #edf1f5;
        border-radius: 9px;
        background: #fafbfd;
    }

    .summary-values span[b-pefv4c4z2f] {
        color: #98a2b3;
        font-size: 7px;
        font-weight: 750;
        text-transform: uppercase;
    }

    .summary-values strong[b-pefv4c4z2f] {
        margin-top: 4px;
        color: #344054;
        font-size: 9.5px;
    }


/* ============================================================
   BAS
   ============================================================ */

.editor-bottom-actions[b-pefv4c4z2f] {
    justify-content: flex-end;
    padding-top: 3px;
}


/* ============================================================
   CHARGEMENT / VIDE
   ============================================================ */

.vehicles-loading[b-pefv4c4z2f],
.vehicles-empty[b-pefv4c4z2f] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader[b-pefv4c4z2f] {
    width: 29px;
    height: 29px;
    margin-bottom: 13px;
    border: 3px solid #e7ebf2;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: vehicle-spin-b-pefv4c4z2f 0.8s linear infinite;
}

@keyframes vehicle-spin-b-pefv4c4z2f {
    to {
        transform: rotate(360deg);
    }
}

.vehicles-loading strong[b-pefv4c4z2f],
.vehicles-empty strong[b-pefv4c4z2f] {
    color: #344054;
    font-size: 10px;
}

.vehicles-empty span[b-pefv4c4z2f] {
    margin-top: 5px;
    color: #98a2b3;
    font-size: 8px;
}

.empty-icon[b-pefv4c4z2f] {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    border-radius: 11px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 10px;
    font-weight: 850;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    .identification-grid[b-pefv4c4z2f],
    .capacities-grid[b-pefv4c4z2f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .summary-values[b-pefv4c4z2f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 900px) {

    .vehicles-kpis[b-pefv4c4z2f] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-summary[b-pefv4c4z2f] {
        align-items: flex-start;
        flex-direction: column;
    }

    .summary-values[b-pefv4c4z2f] {
        width: 100%;
    }
}


@media (max-width: 700px) {

    .vehicles-header[b-pefv4c4z2f],
    .editor-header[b-pefv4c4z2f] {
        align-items: stretch;
        flex-direction: column;
    }

    .add-vehicle-button[b-pefv4c4z2f] {
        width: 100%;
    }

    .vehicles-kpis[b-pefv4c4z2f],
    .vehicles-filters[b-pefv4c4z2f],
    .identification-grid[b-pefv4c4z2f],
    .capacities-grid[b-pefv4c4z2f],
    .deadlines-grid[b-pefv4c4z2f],
    .deadlines-status[b-pefv4c4z2f],
    .summary-values[b-pefv4c4z2f] {
        grid-template-columns: 1fr;
    }

    .editor-actions[b-pefv4c4z2f],
    .editor-bottom-actions[b-pefv4c4z2f] {
        width: 100%;
    }

        .editor-actions button[b-pefv4c4z2f],
        .editor-bottom-actions button[b-pefv4c4z2f] {
            flex: 1;
        }
}
/* /Components/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-g7aywchqb8],
.components-reconnect-repeated-attempt-visible[b-g7aywchqb8],
.components-reconnect-failed-visible[b-g7aywchqb8],
.components-pause-visible[b-g7aywchqb8],
.components-resume-failed-visible[b-g7aywchqb8],
.components-rejoining-animation[b-g7aywchqb8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-retrying[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-failed[b-g7aywchqb8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-g7aywchqb8] {
    display: block;
}


#components-reconnect-modal[b-g7aywchqb8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-g7aywchqb8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-g7aywchqb8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-g7aywchqb8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-g7aywchqb8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-g7aywchqb8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-g7aywchqb8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-g7aywchqb8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-g7aywchqb8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-g7aywchqb8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-g7aywchqb8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-g7aywchqb8] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-g7aywchqb8] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-g7aywchqb8] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-g7aywchqb8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-g7aywchqb8] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-g7aywchqb8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-g7aywchqb8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-g7aywchqb8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}