/* /Components/AuthGuard.razor.rz.scp.css */
.auth-guard-message[b-e7apzxxtbm] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
    color: var(--text-muted);
}

    .auth-guard-message p[b-e7apzxxtbm] {
        font-size: 1.1rem;
    }
/* /Components/Ui/UiButton.razor.rz.scp.css */
.ui-button[b-1vt5glu9zy] {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    border: none;
    font-weight: 500;
    cursor: pointer;
    color: white;
}

    .ui-button.primary[b-1vt5glu9zy] {
        background: var(--primary);
    }

    .ui-button.secondary[b-1vt5glu9zy] {
        background: var(--accent);
    }

    .ui-button:disabled[b-1vt5glu9zy] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .ui-button.inline[b-1vt5glu9zy] {
        width: auto;
        padding: 0.6rem 1.2rem;
    }

    .ui-button.btn-excel[b-1vt5glu9zy] {
        background: linear-gradient(135deg, #22c55e, #16a34a);
        color: white;
        font-weight: 600;
        border: none;
        box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
    }

        .ui-button.btn-excel:hover[b-1vt5glu9zy] {
            background: #15803d;
            transform: translateY(-1px);
        }

        .ui-button.btn-excel:disabled[b-1vt5glu9zy] {
            background: #86efac;
        }

    .ui-button.produit-title[b-1vt5glu9zy] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

        .ui-button.produit-title .main[b-1vt5glu9zy] {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--text-main);
        }

        .ui-button.produit-title .sub[b-1vt5glu9zy] {
            font-size: 0.85rem;
            color: var(--text-muted);
        }

    .ui-button.soft[b-1vt5glu9zy] {
        background: #f5efe6; /* beige doux */
        color: #5c4b3a; /* marron lisible */
        border: 1px solid #d6c7b2; /* bordure visible */
    }

        .ui-button.soft:hover[b-1vt5glu9zy] {
            background: #ede3d3;
            border-color: #cbb89c;
        }

        .ui-button.soft.active[b-1vt5glu9zy] {
            background: #d6c1a3; /* beige plus foncé */
            color: #3e3326;
            border-color: #b89f7a;
        }
/* /Components/Ui/UiCard.razor.rz.scp.css */
.ui-card[b-kkn2jwij6s] {
    background: var(--surface);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
/* /Components/Ui/UiInput.razor.rz.scp.css */
.ui-input[b-wxlrsguq3i] {
    width: 100%;
    padding: 0.7rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 1rem;
}
/* /Components/Ui/Uimodal.razor.rz.scp.css */
:deep(.modal-overlay)[b-6if6mmvi6b] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

:deep(.modal-content)[b-6if6mmvi6b] {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}

:deep(.modal-header)[b-6if6mmvi6b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

:deep(.modal-body)[b-6if6mmvi6b] {
    padding: 1.25rem;
}

:deep(.modal-close)[b-6if6mmvi6b] {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.6;
}

:deep(.modal-close:hover)[b-6if6mmvi6b] {
    opacity: 1;
}
/* /Layout/HistoriquesNav.razor.rz.scp.css */
/* ─────────────────────────────────────────────
   NAV HISTORIQUES — STYLE + ACTIVE STATE FIX
   IMPORTANT : utilisation de ::deep (Blazor CSS isolation)
   ───────────────────────────────────────────── */

/* Base */
[b-7v12r7zmdb](.histo-nav) {
    margin-bottom: 2rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

[b-7v12r7zmdb](.histo-nav-inner) {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

[b-7v12r7zmdb](.histo-nav-label) {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* Liens */
[b-7v12r7zmdb](.histo-nav-link) {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.18s ease;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

[b-7v12r7zmdb](.histo-nav-link:hover) {
    color: var(--text-main);
    background: #f3f4f6;
}

/* ───────── ACTIVE STATE (LE PLUS IMPORTANT) ───────── */

[b-7v12r7zmdb](.histo-nav-link.active) {
    color: var(--primary);
    background: linear-gradient( 135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05) );
    border-color: rgba(111,77,230,0.35);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Trait en dessous */
[b-7v12r7zmdb](.histo-nav-link.active::after) {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: -4px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

/* Icon animée */
[b-7v12r7zmdb](.histo-nav-link.active .nav-link-icon) {
    transform: scale(1.2);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* ───────── DOT ACTIF ───────── */

[b-7v12r7zmdb](.nav-active-dot) {
    display: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 0.1rem;
}

/* Affiché uniquement actif */
[b-7v12r7zmdb](.histo-nav-link.active .nav-active-dot) {
    display: inline-block;
    animation: nav-dot-pop-b-7v12r7zmdb 0.25s ease;
}

@keyframes nav-dot-pop-b-7v12r7zmdb {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Icon */
[b-7v12r7zmdb](.nav-link-icon) {
    font-size: 0.95rem;
    transition: transform 0.2s ease, filter 0.2s ease;
}
/* /Layout/MainLayout.razor.rz.scp.css */
html[b-7einvsolyy], body[b-7einvsolyy] {
    overflow-x: hidden;
}

.app-root[b-7einvsolyy] {
    min-height: 100vh;
    background: var(--bg-main);
    overflow-x: hidden;
}

.app-content[b-7einvsolyy] {
    padding: 2rem;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
}

/* Tablet */
@media (max-width: 1024px) {
    .app-content[b-7einvsolyy] {
        padding: 1.5rem;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .app-content[b-7einvsolyy] {
        padding: 1rem 0.75rem;
    }
}

.scroll-top-btn[b-7einvsolyy] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: rgba(111, 77, 230, 0.85);
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.25s ease;
    z-index: 999;
}

    .scroll-top-btn.visible[b-7einvsolyy] {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .scroll-top-btn:hover[b-7einvsolyy] {
        background: var(--primary);
        transform: scale(1.08);
    }
/* /Layout/NavDropdown.razor.rz.scp.css */
.dropdown[b-00ucwr7zj1] {
    position: relative;
}

/* bouton */
.dropdown-title[b-00ucwr7zj1] {
    all: unset;
    cursor: pointer;
    font-weight: 500;
    color: white;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

    .dropdown-title:hover[b-00ucwr7zj1] {
        opacity: 0.85;
    }

.chevron[b-00ucwr7zj1] {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.dropdown.open .chevron[b-00ucwr7zj1] {
    transform: rotate(180deg);
}

/* menu */
.dropdown-menu[b-00ucwr7zj1] {
    list-style: none;
    margin: 0;
    padding: 0.4rem;
    position: absolute;
    top: calc(100% + 0.6rem);
    right: 0;
    min-width: 240px;
    max-width: min(320px, calc(100vw - 1rem));
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 2000;
}

.dropdown.open .dropdown-menu[b-00ucwr7zj1] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


.nav-dropdown[b-00ucwr7zj1] {
    position: relative;
}

.nav-dropdown-menu[b-00ucwr7zj1] {
    position: absolute;
    top: 100%;
    right: 0; 
    min-width: 220px;
    max-width: calc(100vw - 2rem);
    box-sizing: border-box;
}

.user-area .dropdown-menu[b-00ucwr7zj1] {
    right: 0;
    left: auto;
}

@media (max-width: 640px) {
    .user-area .dropdown-menu[b-00ucwr7zj1] {
        right: 0.5rem;
    }
}
/* /Layout/NavItem.razor.rz.scp.css */
.dropdown-item[b-62q7htv8ez] {
    width: 100%;
}

    .dropdown-item a[b-62q7htv8ez] {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.65rem 1rem;
        border-radius: 10px;
        font-size: 0.95rem;
        font-weight: 500;
        color: var(--text-main);
        background: transparent;
        text-decoration: none;
        cursor: pointer;
        box-sizing: border-box;
        transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.12s ease;
    }

        .dropdown-item a:hover[b-62q7htv8ez] {
            background: var(--accent-light);
            color: white;
        }

        .dropdown-item a:active[b-62q7htv8ez] {
            transform: scale(0.98);
        }

        .dropdown-item a:hover[b-62q7htv8ez] {
            background: var(--accent-light);
            color: white;
            font-weight: 600; 
        }
/* /Layout/TopNav.razor.rz.scp.css */
/* =============================================
   TopNav.razor.css — Responsive
   ============================================= */

/* ---- Base TopNav ---- */
.topnav[b-mhe1fh640t] {
    height: 64px;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    color: white;
    display: flex;
    align-items: center;
    padding: 0 2rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 500;
    gap: 1rem;
    /* Scroll hide/show transition */
    backdrop-filter: blur(8px);
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease;
    will-change: transform;
}

/* Hidden state — slides up out of view */
.topnav--hidden[b-mhe1fh640t] {
    transform: translateY(-100%);
    box-shadow: none;
}

.topnav-left[b-mhe1fh640t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo[b-mhe1fh640t] {
    font-weight: 700;
    font-size: 1.3rem;
    margin-right: 2rem;
}

/* ---- Desktop Nav ---- */
.desktop-nav[b-mhe1fh640t] {
    display: flex;
    gap: 2rem;
    flex: 1;
}

/* ---- User area ---- */
.user-area[b-mhe1fh640t] {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 1rem;
}

.user-avatar[b-mhe1fh640t] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .user-avatar.big[b-mhe1fh640t] {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

.user-card[b-mhe1fh640t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid #eee;
}

.user-name[b-mhe1fh640t] {
    font-weight: 600;
}

.user-email[b-mhe1fh640t] {
    font-size: 0.8rem;
    color: gray;
}

.user-login[b-mhe1fh640t] {
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.8;
}

.role-badge[b-mhe1fh640t] {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

/* ---- Hamburger Button ---- */
.hamburger-btn[b-mhe1fh640t] {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}

    .hamburger-btn:hover[b-mhe1fh640t] {
        background: rgba(255, 255, 255, 0.15);
    }

.hamburger-icon[b-mhe1fh640t] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 22px;
}

    .hamburger-icon span[b-mhe1fh640t] {
        display: block;
        height: 2px;
        background: white;
        border-radius: 2px;
        transition: all 0.3s ease;
        transform-origin: center;
    }

    .hamburger-icon.open span:nth-child(1)[b-mhe1fh640t] {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburger-icon.open span:nth-child(2)[b-mhe1fh640t] {
        opacity: 0;
        transform: scaleX(0);
    }

    .hamburger-icon.open span:nth-child(3)[b-mhe1fh640t] {
        transform: translateY(-7px) rotate(-45deg);
    }

/* ---- Mobile Sidebar Overlay ---- */
.sidebar-overlay[b-mhe1fh640t] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 900;
    backdrop-filter: blur(2px);
    animation: fadeIn-b-mhe1fh640t 0.2s ease;
}

/* ---- Mobile Sidebar ---- */
.mobile-sidebar[b-mhe1fh640t] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    background: var(--surface);
    z-index: 1000;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
}

    .mobile-sidebar.open[b-mhe1fh640t] {
        transform: translateX(0);
    }

/* ---- Swipe hint indicator (mobile) ---- */
.swipe-hint[b-mhe1fh640t] {
    display: none;
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--primary), transparent);
    border-radius: 0 4px 4px 0;
    z-index: 800;
    opacity: 0.5;
    pointer-events: none;
    animation: swipePulse-b-mhe1fh640t 2.5s ease-in-out infinite;
}

@keyframes swipePulse-b-mhe1fh640t {
    0%, 100% {
        opacity: 0.2;
        transform: translateY(-50%) scaleY(0.8);
    }

    50% {
        opacity: 0.6;
        transform: translateY(-50%) scaleY(1);
    }
}

/* Sidebar Header */
.sidebar-header[b-mhe1fh640t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, var(--primary-dark), var(--primary));
    color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-logo[b-mhe1fh640t] {
    font-weight: 700;
    font-size: 1.2rem;
}

.sidebar-close[b-mhe1fh640t] {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    opacity: 0.8;
    transition: opacity 0.2s, background 0.2s;
}

    .sidebar-close:hover[b-mhe1fh640t] {
        opacity: 1;
        background: rgba(255, 255, 255, 0.15);
    }

/* Sidebar User */
.sidebar-user[b-mhe1fh640t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(111, 77, 230, 0.08), rgba(111, 77, 230, 0.03));
    border-bottom: 1px solid #f3f4f6;
}

    .sidebar-user .user-avatar[b-mhe1fh640t] {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
        flex-shrink: 0;
    }

    .sidebar-user .user-name[b-mhe1fh640t] {
        font-weight: 600;
        font-size: 0.95rem;
        color: var(--text-main);
    }

    .sidebar-user .user-email[b-mhe1fh640t] {
        font-size: 0.78rem;
        color: var(--text-muted);
    }

/* Sidebar Nav */
.sidebar-nav[b-mhe1fh640t] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0;
    flex: 1;
}

.sidebar-section[b-mhe1fh640t] {
    padding: 0.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

    .sidebar-section:last-child[b-mhe1fh640t] {
        border-bottom: none;
    }

.sidebar-section-title[b-mhe1fh640t] {
    padding: 0.5rem 1.25rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.sidebar-link[b-mhe1fh640t] {
    display: flex;
    align-items: center;
    padding: 0.65rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    border-radius: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

    .sidebar-link:hover[b-mhe1fh640t] {
        background: rgba(111, 77, 230, 0.08);
        color: var(--primary);
    }

.sidebar-link-accent[b-mhe1fh640t] {
    color: var(--primary);
    font-weight: 600;
}

    .sidebar-link-accent:hover[b-mhe1fh640t] {
        background: rgba(111, 77, 230, 0.12);
    }

.sidebar-logout[b-mhe1fh640t] {
    color: #dc2626;
}

    .sidebar-logout:hover[b-mhe1fh640t] {
        background: #fee2e2;
        color: #991b1b;
    }

.sidebar-section-bottom[b-mhe1fh640t] {
    margin-top: auto;
    border-top: 2px solid #f3f4f6;
    border-bottom: none;
}

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

/* Tablet & Mobile (≤ 1024px) */
@media (max-width: 1024px) {
    .hamburger-btn[b-mhe1fh640t] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .desktop-nav[b-mhe1fh640t] {
        display: none;
    }

    .mobile-sidebar[b-mhe1fh640t] {
        display: flex;
    }

    .sidebar-overlay[b-mhe1fh640t] {
        display: block;
    }

    .topnav[b-mhe1fh640t] {
        padding: 0 1rem;
    }

    .logo[b-mhe1fh640t] {
        margin-right: 0;
    }

    /* Show swipe hint on touch devices */
    .swipe-hint[b-mhe1fh640t] {
        display: block;
    }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
    .topnav[b-mhe1fh640t] {
        height: 56px;
        padding: 0 0.75rem;
    }

    .logo[b-mhe1fh640t] {
        font-size: 1.1rem;
    }

    .mobile-sidebar[b-mhe1fh640t] {
        width: 100vw;
        max-width: 320px;
    }
}

@keyframes fadeIn-b-mhe1fh640t {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
/* /Pages/Auth/LoginPage.razor.rz.scp.css */
.login-wrapper[b-66pcdgy877] {
    display: flex;
    justify-content: center;
    margin-top: 6rem;
}

.error[b-66pcdgy877] {
    color: crimson;
    margin-top: 1rem;
}

.register-link[b-66pcdgy877] {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
    color: var(--text-muted);
}

    .register-link a[b-66pcdgy877] {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

        .register-link a:hover[b-66pcdgy877] {
            text-decoration: underline;
        }
/* /Pages/Auth/RegisterPage.razor.rz.scp.css */
.register-wrapper[b-3cjx0gl3gu] {
    display: flex;
    justify-content: center;
    margin-top: 4rem;
}

.error[b-3cjx0gl3gu] {
    color: crimson;
    margin-top: 1rem;
}

.login-link[b-3cjx0gl3gu] {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}

    .login-link a[b-3cjx0gl3gu] {
        color: var(--primary);
        text-decoration: none;
        font-weight: 500;
    }

        .login-link a:hover[b-3cjx0gl3gu] {
            text-decoration: underline;
        }

.password-rules p[b-3cjx0gl3gu] {
    margin: 0;
    font-size: 0.85rem;
}

.valid[b-3cjx0gl3gu] {
    color: green;
}

.invalid[b-3cjx0gl3gu] {
    color: crimson;
}

.ui-select[b-3cjx0gl3gu] {
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: var(--radius);
    border: 1px solid #ccc;
    font-size: 0.95rem;
    background-color: white;
    color: #333;
    appearance: none; /* enlève style natif */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

    /* Hover */
    .ui-select:hover[b-3cjx0gl3gu] {
        border-color: var(--primary);
    }

    /* Focus */
    .ui-select:focus[b-3cjx0gl3gu] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
    }

/* Flèche custom */
.ui-select[b-3cjx0gl3gu] {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23333' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5H5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 16px;
}

    /* état erreur  */
    .ui-select.error[b-3cjx0gl3gu] {
        border-color: crimson;
    }

    /* état disabled */
    .ui-select:disabled[b-3cjx0gl3gu] {
        background-color: #f5f5f5;
        cursor: not-allowed;
        opacity: 0.7;
    }
/* /Pages/Categorie/Categories.razor.rz.scp.css */
.categories-page[b-8yiqqtuh2f] {
    max-width: 1400px;
}

.page-header[b-8yiqqtuh2f] {
    margin-bottom: 2rem;
}

    .page-header h1[b-8yiqqtuh2f] {
        color: var(--text-main);
        font-size: 2rem;
    }


.search-input[b-8yiqqtuh2f] {
    flex: 1;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 1rem;
}

    .search-input:focus[b-8yiqqtuh2f] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

.categories-grid[b-8yiqqtuh2f] {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(320px,1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.categorie-card[b-8yiqqtuh2f] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all .3s ease;
    cursor: pointer;
    border: 2px solid transparent;
}

    .categorie-card:hover[b-8yiqqtuh2f] {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        border-color: var(--primary);
    }

.categorie-header[b-8yiqqtuh2f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .categorie-header h3[b-8yiqqtuh2f] {
        margin: 0;
        color: var(--text-main);
    }

.categorie-info[b-8yiqqtuh2f] {
    font-size: .9rem;
}

.info-row[b-8yiqqtuh2f] {
    display: flex;
    justify-content: space-between;
}

.label[b-8yiqqtuh2f] {
    color: var(--text-muted);
}

.badge[b-8yiqqtuh2f] {
    padding: .25rem .75rem;
    border-radius: 20px;
    font-size: .8rem;
    font-weight: 600;
}

    .badge.cat[b-8yiqqtuh2f] {
        background: #e0e7ff;
        color: #3730a3;
    }

    .badge.subcat[b-8yiqqtuh2f] {
        background: #d1fae5;
        color: #065f46;
    }

.pagination[b-8yiqqtuh2f] {
    display: flex;
    gap: .5rem;
}

.page-btn[b-8yiqqtuh2f] {
    border: none;
    padding: .5rem .8rem;
    border-radius: 8px;
    cursor: pointer;
    background: #f3f4f6;
}

    .page-btn.active[b-8yiqqtuh2f] {
        background: var(--primary);
        color: white;
    }

.categories-tree[b-8yiqqtuh2f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.category-block[b-8yiqqtuh2f] {
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.category-header[b-8yiqqtuh2f] {
    padding: 1rem 1.2rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .category-header:hover[b-8yiqqtuh2f] {
        background: #f8fafc;
    }

.subcategories[b-8yiqqtuh2f] {
    padding: 0.5rem 1.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subcat[b-8yiqqtuh2f] {
    padding: 0.5rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
}

    .subcat:hover[b-8yiqqtuh2f] {
        background: #f1f5f9;
    }

/* OVERLAY */

.subcategory-overlay[b-8yiqqtuh2f] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

/* PANEL */

.subcategory-panel[b-8yiqqtuh2f] {
    background: var(--surface);
    border-radius: var(--radius);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,.35);
    animation: overlayIn-b-8yiqqtuh2f .25s ease;
}

/* HEADER */

.panel-header[b-8yiqqtuh2f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.close-btn[b-8yiqqtuh2f] {
    border: none;
    background: none;
    font-size: 1.2rem;
    cursor: pointer;
}

/* SUBCATEGORIES */





/* =========================
   SUBCATEGORY TABLE (Notion style)
   ========================= */

.subcat-table[b-8yiqqtuh2f] {
    margin-top: .5rem;
    border-top: 1px solid #e5e7eb;
}

/* row */

.subcat-row[b-8yiqqtuh2f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .2rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s ease;
}

    /* hover row */

    .subcat-row:hover[b-8yiqqtuh2f] {
        background: #f8fafc;
    }

    /* header */

    .subcat-row.header[b-8yiqqtuh2f] {
        font-size: .8rem;
        font-weight: 600;
        color: var(--text-muted);
        background: transparent;
        border-bottom: 1px solid #e5e7eb;
    }

/* name */

.subcat-name[b-8yiqqtuh2f] {
    padding-left: .2rem;
}

/* actions */

.subcat-actions[b-8yiqqtuh2f] {
    display: flex;
    gap: .3rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.subcat-row:hover .subcat-actions[b-8yiqqtuh2f] {
    opacity: 1;
}

.subcat-actions[b-8yiqqtuh2f] {
    display: flex;
    gap: .25rem;
    opacity: 0;
    transition: all .15s ease;
}

.subcat:hover .subcat-actions[b-8yiqqtuh2f] {
    opacity: 1;
}

/* ANIMATION */

@keyframes overlayIn-b-8yiqqtuh2f {
    from {
        transform: scale(.95);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================
   CATEGORY ACTION BUTTONS
   ========================= */

.category-actions[b-8yiqqtuh2f] {
    display: flex;
    gap: .35rem;
    margin-left: .5rem;
    opacity: 0;
    transform: translateX(6px);
    transition: all .18s ease;
}

.category-block:hover .category-actions[b-8yiqqtuh2f] {
    opacity: 1;
    transform: translateX(0);
}

/* Base button */
.btn-action[b-8yiqqtuh2f] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    cursor: pointer;
    transition: all .18s ease;
}

    /* Hover animation */
    .btn-action:hover[b-8yiqqtuh2f] {
        transform: translateY(-1px);
    }

/* EDIT BUTTON */

.btn-edit:hover[b-8yiqqtuh2f] {
    background: #dcfce7;
    color: #166534;
}

/* DELETE BUTTON */

.btn-delete:hover[b-8yiqqtuh2f] {
    background: #fee2e2;
    color: #991b1b;
}

.category-block:hover .category-actions[b-8yiqqtuh2f] {
    opacity: 1;
    transform: translateX(0);
}
/* /Pages/Categorie/NewCategorie.razor.rz.scp.css */
/* ============================================================
   NewCategorie.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-tbu41asxa8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-tbu41asxa8] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-tbu41asxa8 0.8s linear infinite;
}

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

/* Page */
.new-categorie-page[b-tbu41asxa8] {
    max-width: 800px;
}

/* Header */
.page-header[b-tbu41asxa8] {
    margin-bottom: 2rem;
}

.back-link[b-tbu41asxa8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-tbu41asxa8] {
        color: var(--primary);
    }

.back-arrow[b-tbu41asxa8] {
    font-size: 1.1rem;
}

.page-header h1[b-tbu41asxa8] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-tbu41asxa8] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-tbu41asxa8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-tbu41asxa8] {
    font-size: 1.1rem;
}

.alert-error[b-tbu41asxa8] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-tbu41asxa8] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-tbu41asxa8] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-tbu41asxa8] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-tbu41asxa8] {
        margin-bottom: 0;
    }

.section-header[b-tbu41asxa8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-tbu41asxa8] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-tbu41asxa8] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-tbu41asxa8] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-tbu41asxa8] {
        margin-bottom: 0;
    }

.form-label[b-tbu41asxa8] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-tbu41asxa8]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-tbu41asxa8] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-tbu41asxa8] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-tbu41asxa8]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-tbu41asxa8] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Validation */
.validation-message[b-tbu41asxa8] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Preview card */
.preview-card .section-header[b-tbu41asxa8] {
    margin-bottom: 1rem;
}

.preview-body[b-tbu41asxa8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
    gap: 0.5rem;
}

.preview-icon[b-tbu41asxa8] {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.preview-name[b-tbu41asxa8] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.preview-sub[b-tbu41asxa8] {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: #f3f4f6;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
}

/* Actions */
.form-actions[b-tbu41asxa8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-tbu41asxa8] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-tbu41asxa8] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-tbu41asxa8] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-tbu41asxa8] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-tbu41asxa8] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-tbu41asxa8] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-tbu41asxa8 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-tbu41asxa8] {
        grid-template-columns: 1fr;
    }

    .form-main[b-tbu41asxa8] {
        order: 1;
    }

    .form-sidebar[b-tbu41asxa8] {
        order: 2;
    }
}
/* /Pages/Categorie/NewSousCategorie.razor.rz.scp.css */
/* ============================================================
   NewSousCategorie.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-1oj6qh3dik] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-1oj6qh3dik] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-1oj6qh3dik 0.8s linear infinite;
}

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

/* Page */
.new-souscategorie-page[b-1oj6qh3dik] {
    max-width: 800px;
}

/* Header */
.page-header[b-1oj6qh3dik] {
    margin-bottom: 2rem;
}

.back-link[b-1oj6qh3dik] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-1oj6qh3dik] {
        color: var(--primary);
    }

.back-arrow[b-1oj6qh3dik] {
    font-size: 1.1rem;
}

.page-header h1[b-1oj6qh3dik] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-1oj6qh3dik] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-1oj6qh3dik] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-1oj6qh3dik] {
    font-size: 1.1rem;
}

.alert-error[b-1oj6qh3dik] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-1oj6qh3dik] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-1oj6qh3dik] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-1oj6qh3dik] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-1oj6qh3dik] {
        margin-bottom: 0;
    }

.section-header[b-1oj6qh3dik] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-1oj6qh3dik] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-1oj6qh3dik] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-1oj6qh3dik] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-1oj6qh3dik] {
        margin-bottom: 0;
    }

.form-label[b-1oj6qh3dik] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-1oj6qh3dik]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-1oj6qh3dik],
.form-select[b-1oj6qh3dik] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-1oj6qh3dik],
    .form-select:focus[b-1oj6qh3dik] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-1oj6qh3dik]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-1oj6qh3dik] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Validation */
.validation-message[b-1oj6qh3dik] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Select loading */
.select-loading[b-1oj6qh3dik] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.select-spinner[b-1oj6qh3dik] {
    width: 16px;
    height: 16px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-1oj6qh3dik 0.8s linear infinite;
    flex-shrink: 0;
}

/* Empty categories */
.empty-categories[b-1oj6qh3dik] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.9rem 1rem;
    border: 1.5px dashed #e5e7eb;
    border-radius: 8px;
    background: #fefce8;
    color: #92400e;
    font-size: 0.9rem;
}

    .empty-categories a[b-1oj6qh3dik] {
        color: var(--primary);
        font-weight: 500;
        text-decoration: none;
        font-size: 0.875rem;
    }

        .empty-categories a:hover[b-1oj6qh3dik] {
            text-decoration: underline;
        }

/* Preview card */
.preview-card .section-header[b-1oj6qh3dik] {
    margin-bottom: 1rem;
}

.preview-body[b-1oj6qh3dik] {
    padding: 0.5rem 0;
}

.preview-hierarchy[b-1oj6qh3dik] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-parent[b-1oj6qh3dik] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.08), rgba(111,77,230,0.03));
    border-radius: 8px;
    border: 1px solid rgba(111,77,230,0.15);
}

.preview-parent-icon[b-1oj6qh3dik] {
    font-size: 1.1rem;
}

.preview-parent-name[b-1oj6qh3dik] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.preview-connector[b-1oj6qh3dik] {
    display: flex;
    align-items: center;
    padding-left: 1rem;
    height: 1.2rem;
    color: var(--text-muted);
    font-size: 1rem;
}

.connector-arrow[b-1oj6qh3dik] {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1;
}

.preview-child[b-1oj6qh3dik] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    margin-left: 1.25rem;
    background: #f8fafc;
    border-radius: 8px;
    border: 1.5px dashed #e5e7eb;
    transition: all 0.2s ease;
}

.preview-child-icon[b-1oj6qh3dik] {
    font-size: 1rem;
}

.preview-child-name[b-1oj6qh3dik] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
    word-break: break-word;
}

/* Actions */
.form-actions[b-1oj6qh3dik] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-1oj6qh3dik] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-1oj6qh3dik] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-1oj6qh3dik] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-1oj6qh3dik] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-1oj6qh3dik] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-1oj6qh3dik] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-1oj6qh3dik 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-1oj6qh3dik] {
        grid-template-columns: 1fr;
    }

    .form-main[b-1oj6qh3dik] {
        order: 1;
    }

    .form-sidebar[b-1oj6qh3dik] {
        order: 2;
    }
}
/* /Pages/Clientss/Clients.razor.rz.scp.css */
/* ============================================================
   Clients.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-3ieitp00yn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-3ieitp00yn] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-3ieitp00yn 0.8s linear infinite;
}

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

/* Page */
.clients-page[b-3ieitp00yn] {
    max-width: 1400px;
}

/* Header */
.page-header[b-3ieitp00yn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-3ieitp00yn] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-3ieitp00yn] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Alerts */
.alert[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-weight: 500;
    position: relative;
}

.alert-icon[b-3ieitp00yn] {
    font-size: 1rem;
}

.alert-success[b-3ieitp00yn] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-error[b-3ieitp00yn] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-close[b-3ieitp00yn] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.25rem;
}

    .alert-close:hover[b-3ieitp00yn] {
        opacity: 1;
    }

/* Filters bar */
.filters-bar[b-3ieitp00yn] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-3ieitp00yn] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .search-box input[b-3ieitp00yn] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-3ieitp00yn] {
    font-size: 0.9rem;
}

/* Toggle filter */
.filter-toggle[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    user-select: none;
    transition: border-color 0.2s;
}

    .filter-toggle:hover[b-3ieitp00yn] {
        border-color: var(--primary);
    }

    .filter-toggle input[type="checkbox"][b-3ieitp00yn] {
        appearance: none;
        -webkit-appearance: none;
        width: 36px;
        height: 20px;
        background: #e5e7eb;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.25s ease;
        position: relative;
        flex-shrink: 0;
    }

        .filter-toggle input[type="checkbox"]:checked[b-3ieitp00yn] {
            background: var(--primary);
        }

        .filter-toggle input[type="checkbox"][b-3ieitp00yn]::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: left 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .filter-toggle input[type="checkbox"]:checked[b-3ieitp00yn]::after {
            left: 19px;
        }

.toggle-label[b-3ieitp00yn] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
}

.btn-ghost[b-3ieitp00yn] {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

    .btn-ghost:hover[b-3ieitp00yn] {
        background: #f9fafb;
        color: var(--text-main);
        border-color: #d1d5db;
    }

/* Empty state */
.empty-state[b-3ieitp00yn] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-3ieitp00yn] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-3ieitp00yn] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-3ieitp00yn] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

/* Clients grid */
.clients-grid[b-3ieitp00yn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Client card */
.client-card[b-3ieitp00yn] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .client-card:hover[b-3ieitp00yn] {
        box-shadow: 0 8px 24px rgba(111, 77, 230, 0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

.inactive-card[b-3ieitp00yn] {
    opacity: 0.6;
}

/* Card top */
.card-top[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.client-avatar[b-3ieitp00yn] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(111, 77, 230, 0.3);
}

.client-identity[b-3ieitp00yn] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

    .client-identity h3[b-3ieitp00yn] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Badges */
.badge[b-3ieitp00yn] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.badge-active[b-3ieitp00yn] {
    background: #d1fae5;
    color: #065f46;
}

.badge-inactive[b-3ieitp00yn] {
    background: #fee2e2;
    color: #991b1b;
}

/* Client details */
.client-details[b-3ieitp00yn] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.detail-item[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.detail-icon[b-3ieitp00yn] {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.detail-ellipsis[b-3ieitp00yn] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card actions */
.card-actions[b-3ieitp00yn] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-3ieitp00yn] {
    width: 100%;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-3ieitp00yn] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-3ieitp00yn] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-3ieitp00yn] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-3ieitp00yn] {
        background: #fecaca;
        transform: scale(1.02);
    }





/* Status toggle in modal */

.status-display[b-3ieitp00yn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot[b-3ieitp00yn] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.active[b-3ieitp00yn] {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .status-dot.inactive[b-3ieitp00yn] {
        background: #9ca3af;
    }

.status-label[b-3ieitp00yn] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}


/* Delete confirm */
.delete-confirm[b-3ieitp00yn] {
    text-align: center;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.delete-icon[b-3ieitp00yn] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.delete-confirm p[b-3ieitp00yn] {
    margin: 0;
    color: var(--text-main);
    font-size: 0.95rem;
}

.warning-text[b-3ieitp00yn] {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .clients-grid[b-3ieitp00yn] {
        grid-template-columns: 1fr;
    }

    .details-grid[b-3ieitp00yn] {
        grid-template-columns: 1fr;
    }

    .detail-row-full[b-3ieitp00yn] {
        grid-column: 1;
    }

    .page-header[b-3ieitp00yn] {
        flex-direction: column;
        align-items: flex-start;
    }
}

.btn-repair[b-3ieitp00yn] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
}

    .btn-repair:hover[b-3ieitp00yn] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
    }

.btn-fidelite[b-3ieitp00yn] {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
}

    .btn-fidelite:hover[b-3ieitp00yn] {
        background: linear-gradient(135deg, #fb8c00, #e65100);
    }

/* ============================
   VIP CLIENT (100+ points)
   ============================ */

.vip-card[b-3ieitp00yn] {
    position: relative;
    border: 2px solid rgba(255, 215, 0, 0.6);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.2), 0 0 12px rgba(255, 215, 0, 0.25);
}

    /* Glow au hover (plus premium) */
    .vip-card:hover[b-3ieitp00yn] {
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.35), 0 0 18px rgba(255, 215, 0, 0.45);
        border-color: gold;
    }

    /* Petit badge VIP discret */
    .vip-card[b-3ieitp00yn]::before {
        content: "VIP";
        position: absolute;
        top: 10px;
        right: 10px;
        background: linear-gradient(135deg, #ffd700, #ffb300);
        color: #5c3b00;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 999px;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    /* Accent sur les points */
    .vip-card .detail-item:last-child[b-3ieitp00yn] {
        color: #b8860b;
        font-weight: 600;
    }
/* /Pages/Clientss/NewClient.razor.rz.scp.css */
/* ============================================================
   NewClient.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-uppgrpqk8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-uppgrpqk8u] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-uppgrpqk8u 0.8s linear infinite;
}

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

/* Page */
.new-client-page[b-uppgrpqk8u] {
    max-width: 1000px;
}

/* Header */
.page-header[b-uppgrpqk8u] {
    margin-bottom: 2rem;
}

.back-link[b-uppgrpqk8u] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-uppgrpqk8u] {
        color: var(--primary);
    }

.back-arrow[b-uppgrpqk8u] {
    font-size: 1.1rem;
}

.page-header h1[b-uppgrpqk8u] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-uppgrpqk8u] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-uppgrpqk8u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-uppgrpqk8u] {
    font-size: 1.1rem;
}

.alert-error[b-uppgrpqk8u] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-uppgrpqk8u] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-uppgrpqk8u] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-uppgrpqk8u] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-uppgrpqk8u] {
        margin-bottom: 0;
    }

.section-header[b-uppgrpqk8u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-uppgrpqk8u] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-uppgrpqk8u] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-uppgrpqk8u] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-uppgrpqk8u] {
        margin-bottom: 0;
    }

.form-label[b-uppgrpqk8u] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-uppgrpqk8u]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-uppgrpqk8u] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-uppgrpqk8u] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-uppgrpqk8u]::placeholder {
        color: #c0c4cc;
    }

/* Input with icon */
.input-with-icon[b-uppgrpqk8u] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-uppgrpqk8u] {
    position: absolute;
    left: 0.9rem;
    font-size: 0.9rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}

/* IMPORTANT */
.form-input.with-icon[b-uppgrpqk8u] {
    padding-left: 2.6rem;
    background: #fafafa;
    position: relative;
    z-index: 1;
}

/* Preview card */
.preview-card .section-header[b-uppgrpqk8u] {
    margin-bottom: 1rem;
}

.preview-body[b-uppgrpqk8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0;
}

.preview-avatar[b-uppgrpqk8u] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(111,77,230,0.3);
}

.preview-name[b-uppgrpqk8u] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}

.preview-details[b-uppgrpqk8u] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
}

.preview-item[b-uppgrpqk8u] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    background: #f9fafb;
    border-radius: 6px;
    word-break: break-word;
}

/* Status toggle */
.status-toggle[b-uppgrpqk8u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 10px;
    border: 2px solid #f3f4f6;
    transition: all 0.2s ease;
}

    .status-toggle:hover[b-uppgrpqk8u] {
        border-color: #e5e7eb;
        background: #fafafa;
    }

    .status-toggle input[type="checkbox"][b-uppgrpqk8u] {
        appearance: none;
        -webkit-appearance: none;
        width: 44px;
        height: 24px;
        background: #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.25s ease;
        position: relative;
        flex-shrink: 0;
    }

        .status-toggle input[type="checkbox"]:checked[b-uppgrpqk8u] {
            background: var(--primary);
        }

        .status-toggle input[type="checkbox"][b-uppgrpqk8u]::after {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: left 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .status-toggle input[type="checkbox"]:checked[b-uppgrpqk8u]::after {
            left: 23px;
        }

.status-display[b-uppgrpqk8u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot[b-uppgrpqk8u] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.active[b-uppgrpqk8u] {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    }

    .status-dot.inactive[b-uppgrpqk8u] {
        background: #9ca3af;
    }

.status-label[b-uppgrpqk8u] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.status-hint[b-uppgrpqk8u] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* Actions */
.form-actions[b-uppgrpqk8u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-uppgrpqk8u] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-uppgrpqk8u] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-uppgrpqk8u] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-uppgrpqk8u] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-uppgrpqk8u] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-uppgrpqk8u] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-uppgrpqk8u 0.8s linear infinite;
}

/* Validation */
.validation-message[b-uppgrpqk8u] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-uppgrpqk8u] {
        grid-template-columns: 1fr;
    }

    .form-main[b-uppgrpqk8u] {
        order: 1;
    }

    .form-sidebar[b-uppgrpqk8u] {
        order: 2;
    }
}
/* /Pages/Clientss/NewClientTablet.razor.rz.scp.css */
/* ============================================================
   NewClientTablet.razor.css
   Version simplifiée et optimisée tablette
   ============================================================ */

/* Loading */
.loading-state[b-4o45308beu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-4o45308beu] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-4o45308beu 0.8s linear infinite;
}

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

/* Page */
.new-client-page[b-4o45308beu] {
    max-width: 720px; /* plus étroit pour tablette */
    margin: 0 auto;
    padding: 1rem;
}

/* Header */
.page-header[b-4o45308beu] {
    margin-bottom: 1.5rem;
    text-align: center;
}

    .page-header h1[b-4o45308beu] {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--text-main);
        margin-bottom: 0.3rem;
    }

.page-subtitle[b-4o45308beu] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Alerts */
.alert[b-4o45308beu] {
    padding: 0.9rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.alert-error[b-4o45308beu] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-4o45308beu] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form */
.form-group[b-4o45308beu] {
    margin-bottom: 1.1rem;
}

.form-label[b-4o45308beu] {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text-main);
}

    .form-label.required[b-4o45308beu]::after {
        content: ' *';
        color: #dc2626;
    }

/* Inputs */
.form-input[b-4o45308beu] {
    width: 100%;
    padding: 0.85rem 0.9rem; /* plus gros pour tactile */
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 16px; /* lisibilité tablette */
    background: #fafafa;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .form-input:focus[b-4o45308beu] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

/* Select spécifique */
select.form-input[b-4o45308beu] {
    appearance: none;
    background: #fafafa;
}

/* Bouton */
.btn-submit[b-4o45308beu] {
    width: 100%;
    margin-top: 1.2rem;
    padding: 1rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-4o45308beu] {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

    .btn-submit:disabled[b-4o45308beu] {
        opacity: 0.6;
        cursor: not-allowed;
    }

/* Validation */
.validation-message[b-4o45308beu] {
    color: #dc2626;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Mobile / petite tablette */
@media (max-width: 480px) {
    .new-client-page[b-4o45308beu] {
        padding: 0.8rem;
    }

    .form-input[b-4o45308beu] {
        font-size: 0.95rem;
        padding: 0.75rem;
    }

    .btn-submit[b-4o45308beu] {
        font-size: 1rem;
        padding: 0.9rem;
    }
}


/* =========================================
   iPad mini (768px portrait)
   ========================================= */
@media (min-width: 700px) and (max-width: 820px) {

    .new-client-page[b-4o45308beu] {
        max-width: 90%;
    }

    .form-input[b-4o45308beu] {
        font-size: 1.05rem;
        padding: 0.9rem;
    }

    .btn-submit[b-4o45308beu] {
        font-size: 1.1rem;
        padding: 1.1rem;
    }

    .page-header h1[b-4o45308beu] {
        font-size: 1.8rem;
    }
}

@media (hover: none) and (pointer: coarse) {

    .form-input[b-4o45308beu] {
        min-height: 44px; /* standard Apple */
    }

    .btn-submit[b-4o45308beu] {
        min-height: 48px;
    }
}

@media (min-width: 768px) {

    .new-client-page[b-4o45308beu] {
        padding: 1.5rem 2rem;
    }

    .form-group[b-4o45308beu] {
        margin-bottom: 1.3rem;
    }
}
/* /Pages/Dashboard/Dashboard.razor.rz.scp.css */
.dashboard-page[b-3ilmh4r5w0] {
    max-width: 1400px;
}

.dashboard-grid[b-3ilmh4r5w0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
    align-items: start;
}

.dashboard-card[b-3ilmh4r5w0] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

    .dashboard-card:hover[b-3ilmh4r5w0] {
        transform: translateY(-4px);
        border-color: var(--primary);
        box-shadow: 0 10px 25px rgba(111,77,230,0.15);
    }

    .dashboard-card:not(.alert-card)[b-3ilmh4r5w0] {
        min-height: 100px;
    }

    .dashboard-card.full-width[b-3ilmh4r5w0] {
        grid-column: span 2;
    }

.card-icon[b-3ilmh4r5w0] {
    font-size: 1.8rem;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
}

.card-content[b-3ilmh4r5w0] {
    display: flex;
    flex-direction: column;
}

.card-label[b-3ilmh4r5w0] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.card-value[b-3ilmh4r5w0] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-main);
}

/* Carte spéciale alertes */
.alert-card[b-3ilmh4r5w0] {
    border-left: 4px solid #f59e0b;
    align-items: flex-start;
    grid-column: span 2;
}

/* Permet d'utiliser toute la largeur */
.full-width[b-3ilmh4r5w0] {
    grid-column: span 2;
}

/* Item d'alerte */
.alert-item[b-3ilmh4r5w0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0,0,0,0.02);
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    margin-top: 0.5rem;
    transition: 0.2s;
}

    .alert-item:hover[b-3ilmh4r5w0] {
        background: rgba(0,0,0,0.05);
    }

/* Infos produit */
.alert-info[b-3ilmh4r5w0] {
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}

    .alert-info small[b-3ilmh4r5w0] {
        color: var(--text-muted);
        font-size: 0.75rem;
    }

/* Flèche */
.arrow[b-3ilmh4r5w0] {
    margin: 0 5px;
    color: var(--text-muted);
}

/* Bouton confirmation */
.btn-confirm[b-3ilmh4r5w0] {
    background: #22c55e;
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-confirm:hover[b-3ilmh4r5w0] {
        background: #16a34a;
        transform: scale(1.05);
    }

.urgent[b-3ilmh4r5w0] {
    border-left: 3px solid red;
}

.alert-list[b-3ilmh4r5w0] {
    max-height: 300px; /* hauteur fixe propre */
    overflow-y: auto;
    margin-top: 0.5rem;
    padding-right: 4px;
}

    .alert-list[b-3ilmh4r5w0]::-webkit-scrollbar {
        width: 6px;
    }

    .alert-list[b-3ilmh4r5w0]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
    }

        .alert-list[b-3ilmh4r5w0]::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.35);
        }

.filter-bar[b-3ilmh4r5w0] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.filter-btn[b-3ilmh4r5w0] {
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    background: rgba(0,0,0,0.05);
    transition: 0.2s;
}

    .filter-btn.active[b-3ilmh4r5w0] {
        background: var(--primary);
        color: white;
    }

.movement-item[b-3ilmh4r5w0] {
    background: rgba(0,0,0,0.03);
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.2s;
    cursor: pointer;
}

    .movement-item:hover[b-3ilmh4r5w0] {
        background: rgba(0,0,0,0.06);
    }

.movement-item.pending[b-3ilmh4r5w0] {
    border-left: 4px solid orange;
}

.movement-item.confirmed[b-3ilmh4r5w0] {
    border-left: 4px solid #22c55e;
    opacity: 0.8;
}

.movement-list[b-3ilmh4r5w0] {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes */
    gap: 0.75rem;
    max-height: 300px; /* hauteur fixe */
    overflow-y: auto; /* scroll vertical */
    scrollbar-width: thin;
    padding-right: 4px;
}

    .movement-list[b-3ilmh4r5w0]::-webkit-scrollbar {
        width: 6px;
    }

    .movement-list[b-3ilmh4r5w0]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
    }

@media (max-width: 768px) {
    .dashboard-grid[b-3ilmh4r5w0] {
        grid-template-columns: 1fr;
    }

    .movement-list[b-3ilmh4r5w0] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Emplacement/Emplacements.razor.rz.scp.css */
/* PAGE */
.produits-page[b-kfsnt17x0m] {
    max-width: 1400px;
    margin-left: 0;
    margin-right: auto;
}

/* HEADER */
.page-header[b-kfsnt17x0m] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

    .page-header h1[b-kfsnt17x0m] {
        color: var(--text-main);
        font-size: 2rem;
        margin: 0;
    }

/* SEARCH */
.search-bar[b-kfsnt17x0m] {
    margin-bottom: 2rem;
}

.search-input[b-kfsnt17x0m] {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius);
}

/* GRID */
.produits-grid[b-kfsnt17x0m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* CARD */
.produit-card[b-kfsnt17x0m] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: 0.3s;
}

    .produit-card:hover[b-kfsnt17x0m] {
        transform: translateY(-4px);
        border-color: var(--primary);
    }

/* INFO */
.info-row[b-kfsnt17x0m] {
    display: flex;
    justify-content: space-between;
}

/* ACTIONS */
.produit-actions[b-kfsnt17x0m] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* EMPTY */
.empty-state[b-kfsnt17x0m] {
    text-align: center;
    padding: 3rem;
}


.produit-header[b-kfsnt17x0m] {
    margin-bottom: 1rem;
}

    .produit-header h3[b-kfsnt17x0m] {
        margin: 0;
        font-size: 1.2rem;
        color: var(--text-main);
    }

.label[b-kfsnt17x0m] {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ACTIONS */
.produit-actions[b-kfsnt17x0m] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-kfsnt17x0m] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-action:active[b-kfsnt17x0m] {
        transform: scale(0.97);
    }

/* EDIT */
.btn-edit[b-kfsnt17x0m] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-kfsnt17x0m] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

/* DELETE */
.btn-delete[b-kfsnt17x0m] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-kfsnt17x0m] {
        background: #fecaca;
        transform: scale(1.02);
    }

.pagination[b-kfsnt17x0m] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 20px;
}

    .pagination button[b-kfsnt17x0m] {
        padding: 6px 12px;
        cursor: pointer;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        background: white;
    }

        .pagination button:disabled[b-kfsnt17x0m] {
            opacity: 0.5;
            cursor: not-allowed;
        }

.count-badge[b-kfsnt17x0m] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-left: 1rem;
}
/* /Pages/Emplacement/NewEmplacement.razor.rz.scp.css */
/* ============================================================
   NewCategorie.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-s2nituv78k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-s2nituv78k] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-s2nituv78k 0.8s linear infinite;
}

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

/* Page */
.new-categorie-page[b-s2nituv78k] {
    max-width: 800px;
}

/* Header */
.page-header[b-s2nituv78k] {
    margin-bottom: 2rem;
}

.back-link[b-s2nituv78k] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-s2nituv78k] {
        color: var(--primary);
    }

.back-arrow[b-s2nituv78k] {
    font-size: 1.1rem;
}

.page-header h1[b-s2nituv78k] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-s2nituv78k] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-s2nituv78k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-s2nituv78k] {
    font-size: 1.1rem;
}

.alert-error[b-s2nituv78k] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-s2nituv78k] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-s2nituv78k] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-s2nituv78k] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-s2nituv78k] {
        margin-bottom: 0;
    }

.section-header[b-s2nituv78k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-s2nituv78k] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-s2nituv78k] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-s2nituv78k] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-s2nituv78k] {
        margin-bottom: 0;
    }

.form-label[b-s2nituv78k] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-s2nituv78k]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-s2nituv78k] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-s2nituv78k] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-s2nituv78k]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-s2nituv78k] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* Validation */
.validation-message[b-s2nituv78k] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Preview card */
.preview-card .section-header[b-s2nituv78k] {
    margin-bottom: 1rem;
}

.preview-body[b-s2nituv78k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
    gap: 0.5rem;
}

.preview-icon[b-s2nituv78k] {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.preview-name[b-s2nituv78k] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.preview-sub[b-s2nituv78k] {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: #f3f4f6;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
}

/* Actions */
.form-actions[b-s2nituv78k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-s2nituv78k] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-s2nituv78k] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-s2nituv78k] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-s2nituv78k] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-s2nituv78k] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-s2nituv78k] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-s2nituv78k 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-s2nituv78k] {
        grid-template-columns: 1fr;
    }

    .form-main[b-s2nituv78k] {
        order: 1;
    }

    .form-sidebar[b-s2nituv78k] {
        order: 2;
    }
}
/* /Pages/Facture/Factures.razor.rz.scp.css */
.factures-page[b-3oi0m9rsve] {
    max-width: 1400px;
}

.factures-grid[b-3oi0m9rsve] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

.facture-card[b-3oi0m9rsve] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.3s;
}

    .facture-card:hover[b-3oi0m9rsve] {
        transform: translateY(-4px);
        border-color: var(--primary);
    }

.facture-header[b-3oi0m9rsve] {
    display: flex;
    justify-content: space-between;
}

.facture-info[b-3oi0m9rsve] {
    margin-top: 1rem;
}

.facture-actions[b-3oi0m9rsve] {
    margin-top: 1rem;
}

.filters[b-3oi0m9rsve] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.produits-page[b-3oi0m9rsve] {
    max-width: 1400px;
    margin-left: 0;
    margin-right: auto;
}

.page-header[b-3oi0m9rsve] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

    .page-header h1[b-3oi0m9rsve] {
        color: var(--text-main);
        font-size: 2rem;
        margin: 0;
    }

/* Barre de recherche */
.search-bar[b-3oi0m9rsve] {
    margin-bottom: 2rem;
}

.search-input[b-3oi0m9rsve] {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .search-input:focus[b-3oi0m9rsve] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

/* Grille de produits */
.produits-grid[b-3oi0m9rsve] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.produit-card[b-3oi0m9rsve] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .produit-card:hover[b-3oi0m9rsve] {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
        border-color: var(--primary);
    }

.produit-header[b-3oi0m9rsve] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

    .produit-header h3[b-3oi0m9rsve] {
        margin: 0;
        color: var(--text-main);
        font-size: 1.2rem;
        flex: 1;
    }

.badge[b-3oi0m9rsve] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

    .badge.active[b-3oi0m9rsve] {
        background: #d1fae5;
        color: #065f46;
    }

    .badge.inactive[b-3oi0m9rsve] {
        background: #fee2e2;
        color: #991b1b;
    }

.produit-info[b-3oi0m9rsve] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.info-row[b-3oi0m9rsve] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.label[b-3oi0m9rsve] {
    color: var(--text-muted);
    font-weight: 500;
}

.price[b-3oi0m9rsve] {
    color: var(--primary);
    font-weight: 600;
}

/* Actions */
.produit-actions[b-3oi0m9rsve] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-3oi0m9rsve] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-action:active[b-3oi0m9rsve] {
        transform: scale(0.97);
    }

.btn-edit[b-3oi0m9rsve] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-3oi0m9rsve] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-3oi0m9rsve] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-3oi0m9rsve] {
        background: #fecaca;
        transform: scale(1.02);
    }

/* État vide */
.empty-state[b-3oi0m9rsve] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

    .empty-state p[b-3oi0m9rsve] {
        font-size: 1.1rem;
    }

/* Message d'erreur */
.error-message[b-3oi0m9rsve] {
    background: #fee2e2;
    color: #991b1b;
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

/* Formulaires */
.form-group[b-3oi0m9rsve] {
    margin-bottom: 1rem;
}

    .form-group label[b-3oi0m9rsve] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-main);
        font-weight: 500;
        font-size: 0.9rem;
    }

.form-input[b-3oi0m9rsve],
.form-select[b-3oi0m9rsve],
.form-textarea[b-3oi0m9rsve] {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

    .form-input:focus[b-3oi0m9rsve],
    .form-select:focus[b-3oi0m9rsve],
    .form-textarea:focus[b-3oi0m9rsve] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

.form-textarea[b-3oi0m9rsve] {
    resize: vertical;
    font-family: inherit;
}

.form-row[b-3oi0m9rsve] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.validation-message[b-3oi0m9rsve] {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}


/* Détails produit */


.warning-text[b-3oi0m9rsve] {
    color: #dc2626;
    font-size: 0.9rem;
    margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .produits-grid[b-3oi0m9rsve] {
        grid-template-columns: 1fr;
    }

    .form-row[b-3oi0m9rsve] {
        grid-template-columns: 1fr;
    }

    .page-header[b-3oi0m9rsve] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
}



.pagination[b-3oi0m9rsve] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 20px;
}

    .pagination button[b-3oi0m9rsve] {
        padding: 6px 12px;
        cursor: pointer;
    }

.facture-type[b-3oi0m9rsve] {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

    .facture-type.intervention[b-3oi0m9rsve] {
        color: #2563eb; /* bleu */
    }

    .facture-type.achat[b-3oi0m9rsve] {
        color: #16a34a; /* vert */
    }

.facture-client[b-3oi0m9rsve] {
    font-size: 0.95rem;
    color: var(--text-muted);
    font-weight: 500;
}

.facture-card[b-3oi0m9rsve] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

    .facture-card:hover[b-3oi0m9rsve] {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        border-color: var(--primary);
    }

.btn-delete[b-3oi0m9rsve] {
    background: white;
    color: #dc2626;
    border: 1px solid #fecaca;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

    .btn-delete:hover[b-3oi0m9rsve] {
        background: #dc2626;
        color: white;
        border-color: #dc2626;
    }

.filters select[b-3oi0m9rsve],
.filters input[b-3oi0m9rsve],
.filters button[b-3oi0m9rsve] {
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 0.9rem;
    background: white;
}

    .filters select:focus[b-3oi0m9rsve],
    .filters input:focus[b-3oi0m9rsve] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

.filters button[b-3oi0m9rsve] {
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

    .filters button:hover[b-3oi0m9rsve] {
        background: var(--primary-dark);
    }

.badge.success[b-3oi0m9rsve] {
    background: #d1fae5;
    color: #065f46;
}

.badge.warning[b-3oi0m9rsve] {
    background: #fef3c7;
    color: #92400e;
}

.badge.danger[b-3oi0m9rsve] {
    background: #fee2e2;
    color: #991b1b;
}

@keyframes pulse-b-3oi0m9rsve {
    0% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0.3);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(220,38,38,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0);
    }
}
/* /Pages/Facture/NewFacture.razor.rz.scp.css */
.new-intervention-container[b-g5ysm5np80] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.page-header[b-g5ysm5np80] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

    .page-header h1[b-g5ysm5np80] {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

.btn-back[b-g5ysm5np80] {
    background: white;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .btn-back:hover[b-g5ysm5np80] {
        background: #f3f4f6;
        color: #1f2937;
    }

/* Alerts */
.alert-success[b-g5ysm5np80] {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-error[b-g5ysm5np80] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* Layout */
.layout-grid[b-g5ysm5np80] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

/* Form card */
.form-card[b-g5ysm5np80] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section[b-g5ysm5np80] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 1.5rem;
}

    .form-section h2[b-g5ysm5np80] {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin: 0 0 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #f3f4f6;
    }

.form-grid[b-g5ysm5np80] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-g5ysm5np80] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

    .form-group.full-width[b-g5ysm5np80] {
        grid-column: 1 / -1;
    }

    .form-group label[b-g5ysm5np80] {
        font-size: 0.85rem;
        font-weight: 500;
        color: #374151;
    }

    .form-group input[b-g5ysm5np80],
    .form-group select[b-g5ysm5np80],
    .form-group textarea[b-g5ysm5np80] {
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        padding: 0.6rem 0.85rem;
        font-size: 0.9rem;
        color: #1f2937;
        transition: border-color 0.15s, box-shadow 0.15s;
        background: #fafafa;
        font-family: inherit;
    }

        .form-group input:focus[b-g5ysm5np80],
        .form-group select:focus[b-g5ysm5np80],
        .form-group textarea:focus[b-g5ysm5np80] {
            outline: none;
            border-color: #2563eb;
            background: white;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

    .form-group textarea[b-g5ysm5np80] {
        resize: vertical;
        min-height: 120px;
    }

.required[b-g5ysm5np80] {
    color: #ef4444;
}

.char-count[b-g5ysm5np80] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: right;
}

/* Price input */
.price-group[b-g5ysm5np80] {
    max-width: 280px;
}

.price-input-wrapper[b-g5ysm5np80] {
    position: relative;
    display: flex;
    align-items: center;
}

    .price-input-wrapper input[b-g5ysm5np80] {
        padding-right: 2.5rem;
        width: 100%;
    }

.price-symbol[b-g5ysm5np80] {
    position: absolute;
    right: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    pointer-events: none;
}

/* Sidebar */
.sidebar[b-g5ysm5np80] {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Summary card */
.summary-card[b-g5ysm5np80] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 1.5rem;
}

    .summary-card h3[b-g5ysm5np80] {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin: 0 0 1rem;
    }

.summary-item[b-g5ysm5np80] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

    .summary-item:last-child[b-g5ysm5np80] {
        margin-bottom: 0;
    }

.summary-label[b-g5ysm5np80] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.summary-value[b-g5ysm5np80] {
    font-size: 0.9rem;
    color: #1f2937;
    font-weight: 500;
    text-align: right;
}

.not-set[b-g5ysm5np80] {
    color: #d1d5db;
    font-style: italic;
    font-weight: 400;
}

.summary-divider[b-g5ysm5np80] {
    height: 1px;
    background: #f3f4f6;
    margin: 1rem 0;
}

.summary-price .price-display[b-g5ysm5np80] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
}

/* Actions card */
.actions-card[b-g5ysm5np80] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.active-toggle[b-g5ysm5np80] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.25rem;
}

.toggle-label[b-g5ysm5np80] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.toggle-hint[b-g5ysm5np80] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0.2rem 0 0;
}

/* Toggle switch */
.toggle-switch[b-g5ysm5np80] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

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

.toggle-slider[b-g5ysm5np80] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 24px;
    transition: 0.25s;
}

    .toggle-slider[b-g5ysm5np80]:before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 3px;
        bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.25s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

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

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

/* Submit button */
.btn-submit[b-g5ysm5np80] {
    width: 100%;
    background: #2563eb;
    color: white;
    border: none;
    padding: 0.8rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-submit:hover:not(:disabled)[b-g5ysm5np80] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .btn-submit:disabled[b-g5ysm5np80] {
        background: #93c5fd;
        cursor: not-allowed;
        transform: none;
    }

.btn-spinner[b-g5ysm5np80] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-g5ysm5np80 0.7s linear infinite;
}

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

.btn-cancel[b-g5ysm5np80] {
    width: 100%;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    padding: 0.65rem;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-g5ysm5np80] {
        background: #f9fafb;
        color: #374151;
    }

/* Responsive */
@@media (max-width: 900px) {
    .layout-grid[b-g5ysm5np80] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-g5ysm5np80] {
        position: static;
    }

    .form-grid[b-g5ysm5np80] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-g5ysm5np80] {
        grid-column: 1;
    }
}

@@media (max-width: 640px) {
    .new-intervention-container[b-g5ysm5np80] {
        padding: 1rem;
    }

    .page-header[b-g5ysm5np80] {
        flex-wrap: wrap;
    }

        .page-header h1[b-g5ysm5np80] {
            font-size: 1.4rem;
        }
}

/* AUTOCOMPLETE */
.autocomplete[b-g5ysm5np80] {
    position: relative;
}

/* Dropdown */
.autocomplete-dropdown[b-g5ysm5np80] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
}

/* Item */
.autocomplete-item[b-g5ysm5np80] {
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
}

    .autocomplete-item:hover[b-g5ysm5np80],
    .autocomplete-item.active[b-g5ysm5np80] {
        background: #eff6ff;
    }

/* Nom */
.client-name[b-g5ysm5np80] {
    font-weight: 500;
    color: #1f2937;
}

/* Téléphone */
.client-phone[b-g5ysm5np80] {
    font-size: 0.75rem;
    color: #6b7280;
}

.autocomplete-dropdown[b-g5ysm5np80] {
    margin-top: 6px;
}

.autocomplete-loading[b-g5ysm5np80] {
    padding: 10px;
    font-style: italic;
    color: #888;
}

.autocomplete-empty[b-g5ysm5np80] {
    padding: 10px;
    color: #999;
}

.client-input-wrapper[b-g5ysm5np80] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-add-client[b-g5ysm5np80] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(111, 77, 230, 0.12); /* soft violet */
    color: var(--primary);
    border: 1px solid rgba(111, 77, 230, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: none;
}

    /* Hover doux */
    .btn-add-client:hover[b-g5ysm5np80] {
        background: rgba(111, 77, 230, 0.18);
        transform: translateY(-1px) scale(1.03);
    }

    /* Active (clic) */
    .btn-add-client:active[b-g5ysm5np80] {
        transform: scale(0.97);
    }

    /* Focus accessible */
    .btn-add-client:focus[b-g5ysm5np80] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.15);
    }

    /* Version icône seule */
    .btn-add-client.icon-only[b-g5ysm5np80] {
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 1rem;
    }

/* spécifique facture */
h1[b-g5ysm5np80]::before {
    content: "🧾 ";
}
/* /Pages/Historiques/HistoriqueIntervention/HistoriquesIntervention.razor.rz.scp.css */
/* ================================================================
   HistoriquesIntervention.razor.css
   Aesthetic: Editorial audit log — monochromatic ink + color pops
   ================================================================ */

/* ── Loading ──────────────────────────────────────────────────── */
.histo-loading[b-i9calom60r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    letter-spacing: 0.05em;
}

.histo-loader[b-i9calom60r] {
    width: 32px;
    height: 32px;
    border: 2px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: histo-spin-b-i9calom60r 0.7s linear infinite;
}

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

/* ── Page container ───────────────────────────────────────────── */
.histo-page[b-i9calom60r] {
    max-width: 1100px;
    padding-bottom: 4rem;
}

/* ═══════════════════════════════════════════════════════════════
   NAV JOURNAL — navigation entre les types d'historiques
   ═══════════════════════════════════════════════════════════════ */

.histo-nav[b-i9calom60r] {
    margin-bottom: 2rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.histo-nav-inner[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.histo-nav-label[b-i9calom60r] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin-right: 0.5rem;
    white-space: nowrap;
}

.histo-nav-link[b-i9calom60r] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.18s ease;
    border: 1.5px solid transparent;
    white-space: nowrap;
}

    .histo-nav-link:hover[b-i9calom60r] {
        color: var(--text-main);
        background: #f3f4f6;
    }

    .histo-nav-link.active[b-i9calom60r] {
        color: var(--primary);
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--primary) 12%, transparent),
            color-mix(in srgb, var(--primary) 4%, transparent));
        border-color: color-mix(in srgb, var(--primary) 35%, transparent);
        font-weight: 700;
        box-shadow: 0 4px 14px rgba(0,0,0,0.08);
    }

        .histo-nav-link.active[b-i9calom60r]::after {
            content: "";
            position: absolute;
            left: 10%;
            right: 10%;
            bottom: -4px;
            height: 2px;
            background: var(--primary);
            border-radius: 2px;
        }

        .histo-nav-link.active .nav-link-icon[b-i9calom60r] {
            transform: scale(1.2);
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
        }

.nav-link-icon[b-i9calom60r] {
    font-size: 0.95rem;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-link-text[b-i9calom60r] {
    /* texte principal */
}

/* Point actif animé */
.nav-active-dot[b-i9calom60r] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
    margin-left: 0.1rem;
    animation: nav-dot-pop-b-i9calom60r 0.25s ease;
}

@keyframes nav-dot-pop-b-i9calom60r {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Header ───────────────────────────────────────────────────── */
.histo-header[b-i9calom60r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #1f2937;
    flex-wrap: wrap;
}

.histo-eyebrow[b-i9calom60r] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--primary);
    margin-bottom: 0.4rem;
}

.histo-title[b-i9calom60r] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--text-main);
    line-height: 1.1;
    margin: 0;
    letter-spacing: -0.02em;
}

    .histo-title em[b-i9calom60r] {
        font-style: italic;
        font-weight: 300;
        color: var(--text-muted);
    }

/* Stats pills dans le header */
.histo-header-stats[b-i9calom60r] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

.histo-stat-pill[b-i9calom60r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1.1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 80px;
    border: 2px solid transparent;
    background: var(--surface);
}

    .histo-stat-pill:hover[b-i9calom60r] {
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }

.stat-icon[b-i9calom60r] {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.stat-num[b-i9calom60r] {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.stat-lbl[b-i9calom60r] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
    opacity: 0.8;
}

.histo-stat-pill.total[b-i9calom60r] {
    border-color: var(--text-main);
    color: var(--text-main);
}

/* ── Alert ────────────────────────────────────────────────────── */
.histo-alert[b-i9calom60r] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Filters ──────────────────────────────────────────────────── */
.histo-filters[b-i9calom60r] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Recherche */
.histo-search[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: #f6f7fb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    transition: border-color 0.2s;
}

    .histo-search:focus-within[b-i9calom60r] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

.histo-search-icon[b-i9calom60r] {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.histo-search input[b-i9calom60r] {
    border: none;
    outline: none;
    background: transparent;
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-main);
    font-family: inherit;
}

/* Filtres type */
.histo-type-filters[b-i9calom60r] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.histo-type-btn[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 20px;
    border: 1.5px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f3f4f6;
    color: var(--text-muted);
}

    .histo-type-btn:hover[b-i9calom60r] {
        transform: translateY(-1px);
    }

    .histo-type-btn.active[b-i9calom60r] {
        color: white;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

/* Dates */
.histo-date-filters[b-i9calom60r] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.histo-date-group[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .histo-date-group label[b-i9calom60r] {
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
    }

    .histo-date-group input[type="date"][b-i9calom60r] {
        padding: 0.5rem 0.75rem;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        color: var(--text-main);
        background: #f6f7fb;
        font-family: inherit;
        outline: none;
        transition: border-color 0.2s;
    }

        .histo-date-group input[type="date"]:focus[b-i9calom60r] {
            border-color: var(--primary);
        }

.histo-reset-btn[b-i9calom60r] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

    .histo-reset-btn:hover[b-i9calom60r] {
        background: #f9fafb;
        color: var(--text-main);
        border-color: #d1d5db;
    }

/* Compteur */
.histo-results-count[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
}

.count-number[b-i9calom60r] {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--primary);
}

.count-label[b-i9calom60r] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.count-page-info[b-i9calom60r] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Empty state ──────────────────────────────────────────────── */
.histo-empty[b-i9calom60r] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
}

.histo-empty-icon[b-i9calom60r] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    color: #d1d5db;
}

.histo-empty h3[b-i9calom60r] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

/* ── Day group ────────────────────────────────────────────────── */
.histo-day-group[b-i9calom60r] {
    margin-bottom: 2.5rem;
}

.histo-day-label[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.day-line[b-i9calom60r] {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.day-text[b-i9calom60r] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    white-space: nowrap;
}

.day-count[b-i9calom60r] {
    font-size: 0.72rem;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
    background: #f3f4f6;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
}

/* ── Timeline ─────────────────────────────────────────────────── */
.histo-timeline[b-i9calom60r] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-left: 2rem;
    border-left: 2px solid #e5e7eb;
    position: relative;
}

/* ── Entry ────────────────────────────────────────────────────── */
.histo-entry[b-i9calom60r] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
    padding-bottom: 1.5rem;
}

/* Marqueur type sur la timeline */
.entry-type-marker[b-i9calom60r] {
    position: absolute;
    left: -2.85rem;
    top: 0.6rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    border: 2px solid white;
    box-shadow: 0 0 0 3px #e5e7eb;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.histo-entry:hover .entry-type-marker[b-i9calom60r] {
    transform: scale(1.15);
}

/* Carte entry */
.entry-card[b-i9calom60r] {
    flex: 1;
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1.5px solid #f3f4f6;
    transition: all 0.2s ease;
    position: relative;
}

    .entry-card[b-i9calom60r]::before {
        content: '';
        position: absolute;
        left: -8px;
        top: 1.1rem;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-bottom: 7px solid transparent;
        border-right: 8px solid #f3f4f6;
    }

.histo-entry:hover .entry-card[b-i9calom60r] {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateX(3px);
    border-color: inherit;
}

/* Top de la carte */
.entry-card-top[b-i9calom60r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

.entry-meta-left[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.entry-type-badge[b-i9calom60r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.entry-time[b-i9calom60r] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.entry-price[b-i9calom60r] {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

/* Corps de la carte : acteurs */
.entry-card-body[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.entry-actor[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 160px;
}

.actor-avatar[b-i9calom60r] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}

.client-av[b-i9calom60r] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.tech-av[b-i9calom60r] {
    background: linear-gradient(135deg, var(--accent), #e67e22);
}

.actor-info[b-i9calom60r] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.actor-role[b-i9calom60r] {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.actor-name[b-i9calom60r] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.actor-detail[b-i9calom60r] {
    font-size: 0.77rem;
    color: var(--text-muted);
}

.entry-arrow[b-i9calom60r] {
    font-size: 1.2rem;
    color: #d1d5db;
    font-weight: 300;
    flex-shrink: 0;
}

/* Footer */
.entry-card-footer[b-i9calom60r] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.entry-product[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-main);
    font-weight: 500;
}

.product-icon[b-i9calom60r] {
    font-size: 0.9rem;
}

.product-deduit-badge[b-i9calom60r] {
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: auto;
}

.entry-comment[b-i9calom60r] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.comment-icon[b-i9calom60r] {
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.comment-text[b-i9calom60r] {
    font-style: italic;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Description déroulable */
.entry-description[b-i9calom60r] {
    margin-top: 0.75rem;
    font-size: 0.82rem;
}

    .entry-description summary[b-i9calom60r] {
        cursor: pointer;
        color: var(--primary);
        font-weight: 600;
        font-size: 0.8rem;
        letter-spacing: 0.03em;
        user-select: none;
        list-style: none;
    }

        .entry-description summary[b-i9calom60r]::before {
            content: '▸ ';
        }

    .entry-description[open] summary[b-i9calom60r]::before {
        content: '▾ ';
    }

    .entry-description p[b-i9calom60r] {
        margin: 0.5rem 0 0;
        color: var(--text-muted);
        line-height: 1.6;
        background: #f6f7fb;
        padding: 0.75rem;
        border-radius: 8px;
        white-space: pre-line;
        font-size: 0.8rem;
    }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════ */

.histo-pagination[b-i9calom60r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
}

.histo-page-btn[b-i9calom60r] {
    min-width: 38px;
    height: 38px;
    padding: 0 0.65rem;
    border-radius: 8px;
    border: 1.5px solid #e5e7eb;
    background: var(--surface);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .histo-page-btn:hover:not(:disabled)[b-i9calom60r] {
        border-color: var(--primary);
        color: var(--primary);
        background: color-mix(in srgb, var(--primary) 6%, transparent);
    }

    .histo-page-btn:disabled[b-i9calom60r] {
        opacity: 0.35;
        cursor: not-allowed;
    }

    .histo-page-btn.current[b-i9calom60r] {
        background: var(--primary);
        border-color: var(--primary);
        color: white;
        box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent);
        transform: translateY(-1px);
    }

    .histo-page-btn.nav-btn[b-i9calom60r] {
        padding: 0 1rem;
        font-size: 0.82rem;
        letter-spacing: 0.02em;
    }

.histo-page-numbers[b-i9calom60r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.histo-page-ellipsis[b-i9calom60r] {
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0 0.25rem;
    user-select: none;
}

/* ════════════════════════════════════════
   COULEURS PAR TYPE D'ACTION
   ════════════════════════════════════════ */

/* Création — vert émeraude */
.type-creation[b-i9calom60r] {
    --type-color: #10b981;
    --type-bg: #d1fae5;
    --type-text: #065f46;
}

.histo-stat-pill.type-creation[b-i9calom60r],
.histo-type-btn.type-creation.active[b-i9calom60r],
.entry-type-badge.type-creation[b-i9calom60r],
.entry-type-marker.type-creation[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-creation.active[b-i9calom60r] {
    background: var(--type-color);
    color: white;
}

.entry-type-marker.type-creation[b-i9calom60r],
.histo-stat-pill.type-creation .stat-icon[b-i9calom60r] {
    color: var(--type-color);
}

.histo-stat-pill.type-creation[b-i9calom60r] {
    border-color: var(--type-color);
    color: var(--type-text);
}

.histo-entry.type-creation .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-creation .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #a7f3d0;
}

/* Modification — bleu indigo */
.type-modification[b-i9calom60r] {
    --type-color: #6366f1;
    --type-bg: #ede9fe;
    --type-text: #3730a3;
}

.histo-stat-pill.type-modification[b-i9calom60r],
.entry-type-badge.type-modification[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-modification.active[b-i9calom60r] {
    background: var(--type-color);
    color: white;
    border-color: var(--type-color);
}

.histo-stat-pill.type-modification[b-i9calom60r] {
    border-color: var(--type-color);
    color: var(--type-text);
}

.histo-entry.type-modification .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-modification .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #c7d2fe;
}

/* Suppression — rouge */
.type-suppression[b-i9calom60r] {
    --type-color: #ef4444;
    --type-bg: #fee2e2;
    --type-text: #991b1b;
}

.histo-stat-pill.type-suppression[b-i9calom60r],
.entry-type-badge.type-suppression[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-suppression.active[b-i9calom60r] {
    background: var(--type-color);
    color: white;
    border-color: var(--type-color);
}

.histo-stat-pill.type-suppression[b-i9calom60r] {
    border-color: var(--type-color);
    color: var(--type-text);
}

.histo-entry.type-suppression .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-suppression .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #fca5a5;
}

/* Activation — cyan */
.type-activation[b-i9calom60r] {
    --type-color: #06b6d4;
    --type-bg: #cffafe;
    --type-text: #155e75;
}

.histo-stat-pill.type-activation[b-i9calom60r],
.entry-type-badge.type-activation[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-activation.active[b-i9calom60r] {
    background: var(--type-color);
    color: white;
    border-color: var(--type-color);
}

.histo-stat-pill.type-activation[b-i9calom60r] {
    border-color: var(--type-color);
    color: var(--type-text);
}

.histo-entry.type-activation .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-activation .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #a5f3fc;
}

/* Désactivation — gris */
.type-desactivation[b-i9calom60r] {
    --type-color: #9ca3af;
    --type-bg: #f3f4f6;
    --type-text: #374151;
}

.histo-stat-pill.type-desactivation[b-i9calom60r],
.entry-type-badge.type-desactivation[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-desactivation.active[b-i9calom60r] {
    background: #6b7280;
    color: white;
    border-color: #6b7280;
}

.histo-stat-pill.type-desactivation[b-i9calom60r] {
    border-color: var(--type-color);
    color: var(--type-text);
}

.histo-entry.type-desactivation .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-desactivation .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #e5e7eb;
}

/* Mouvement stock — orange */
.type-stock[b-i9calom60r] {
    --type-color: #f59e0b;
    --type-bg: #fef3c7;
    --type-text: #92400e;
}

.histo-stat-pill.type-stock[b-i9calom60r],
.entry-type-badge.type-stock[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-stock.active[b-i9calom60r] {
    background: var(--type-color);
    color: white;
    border-color: var(--type-color);
}

.histo-stat-pill.type-stock[b-i9calom60r] {
    border-color: var(--type-color);
    color: var(--type-text);
}

.histo-entry.type-stock .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-stock .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #fde68a;
}

/* Envoi SMS — violet */
.type-sms[b-i9calom60r] {
    --type-color: #8b5cf6;
    --type-bg: #ede9fe;
    --type-text: #5b21b6;
}

.histo-stat-pill.type-sms[b-i9calom60r],
.entry-type-badge.type-sms[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    border-color: var(--type-color);
}

.histo-type-btn.type-sms.active[b-i9calom60r] {
    background: var(--type-color);
    color: white;
    border-color: var(--type-color);
}

.histo-entry.type-sms .entry-card[b-i9calom60r] {
    border-left: 3px solid var(--type-color);
}

.histo-entry.type-sms .entry-type-marker[b-i9calom60r] {
    background: var(--type-bg);
    color: var(--type-text);
    box-shadow: 0 0 0 3px #ddd6fe;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    .histo-header[b-i9calom60r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .histo-header-stats[b-i9calom60r] {
        width: 100%;
    }

    .histo-stat-pill[b-i9calom60r] {
        flex: 1;
        min-width: 60px;
    }

    .histo-timeline[b-i9calom60r] {
        padding-left: 1.25rem;
    }

    .entry-type-marker[b-i9calom60r] {
        left: -2.1rem;
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .entry-card-body[b-i9calom60r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .entry-arrow[b-i9calom60r] {
        transform: rotate(90deg);
    }

    .histo-pagination[b-i9calom60r] {
        gap: 0.35rem;
    }

    .histo-page-btn.nav-btn[b-i9calom60r] {
        font-size: 0.78rem;
        padding: 0 0.75rem;
    }
}

@media (max-width: 480px) {
    .histo-type-filters[b-i9calom60r] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
    }

    .histo-type-btn[b-i9calom60r] {
        white-space: nowrap;
        flex-shrink: 0;
    }

    .histo-date-filters[b-i9calom60r] {
        flex-direction: column;
        align-items: flex-start;
    }

    .histo-reset-btn[b-i9calom60r] {
        margin-left: 0;
    }

    .histo-nav-inner[b-i9calom60r] {
        gap: 0.15rem;
    }

    .histo-nav-link[b-i9calom60r] {
        padding: 0.4rem 0.6rem;
        font-size: 0.78rem;
    }

    .nav-link-icon[b-i9calom60r] {
        font-size: 0.85rem;
    }
}
/* /Pages/Magasin/Magasins.razor.rz.scp.css */
/* Loading */
.loading-state[b-lvnwgdqays] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-lvnwgdqays] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-lvnwgdqays 0.8s linear infinite;
}

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

/* Access denied */
.access-denied[b-lvnwgdqays] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    gap: 1rem;
    color: var(--text-muted);
}

.denied-icon[b-lvnwgdqays] {
    font-size: 4rem;
}

.access-denied h2[b-lvnwgdqays] {
    font-size: 1.8rem;
    color: var(--text-main);
    margin: 0;
}

.access-denied p[b-lvnwgdqays] {
    font-size: 1rem;
    margin: 0;
}

.btn-back-home[b-lvnwgdqays] {
    margin-top: 0.5rem;
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

    .btn-back-home:hover[b-lvnwgdqays] {
        background: var(--primary-dark);
    }

/* Page */
.magasins-page[b-lvnwgdqays] {
    max-width: 1200px;
}

/* Header */
.page-header[b-lvnwgdqays] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-lvnwgdqays] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-lvnwgdqays] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-lvnwgdqays] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Alerts */
.alert[b-lvnwgdqays] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-weight: 500;
    position: relative;
}

.alert-icon[b-lvnwgdqays] {
    font-size: 1rem;
}

.alert-success[b-lvnwgdqays] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-error[b-lvnwgdqays] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-close[b-lvnwgdqays] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.25rem;
}

    .alert-close:hover[b-lvnwgdqays] {
        opacity: 1;
    }

/* Filters */
.filters-bar[b-lvnwgdqays] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-lvnwgdqays] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-lvnwgdqays] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .search-box input[b-lvnwgdqays] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-lvnwgdqays] {
    font-size: 0.9rem;
}

.btn-ghost[b-lvnwgdqays] {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

    .btn-ghost:hover[b-lvnwgdqays] {
        background: #f9fafb;
        color: var(--text-main);
        border-color: #d1d5db;
    }

/* Empty state */
.empty-state[b-lvnwgdqays] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-lvnwgdqays] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-lvnwgdqays] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-lvnwgdqays] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

/* Grid */
.magasins-grid[b-lvnwgdqays] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Card */
.magasin-card[b-lvnwgdqays] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .magasin-card:hover[b-lvnwgdqays] {
        box-shadow: 0 8px 24px rgba(111, 77, 230, 0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

/* Card top */
.card-top[b-lvnwgdqays] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.magasin-avatar[b-lvnwgdqays] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(111, 77, 230, 0.3);
}

.magasin-identity[b-lvnwgdqays] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

    .magasin-identity h3[b-lvnwgdqays] {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.magasin-id[b-lvnwgdqays] {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Card actions */
.card-actions[b-lvnwgdqays] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-lvnwgdqays] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-lvnwgdqays] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-lvnwgdqays] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-lvnwgdqays] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-lvnwgdqays] {
        background: #fecaca;
        transform: scale(1.02);
    }

/* Responsive */
@media (max-width: 768px) {
    .magasins-grid[b-lvnwgdqays] {
        grid-template-columns: 1fr;
    }

    .page-header[b-lvnwgdqays] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Magasin/NewMagasin.razor.rz.scp.css */
/* Loading */
.loading-state[b-yklnunxkya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-yklnunxkya] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-yklnunxkya 0.8s linear infinite;
}

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

/* Access denied */
.access-denied[b-yklnunxkya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    text-align: center;
    gap: 1rem;
    color: var(--text-muted);
}

.denied-icon[b-yklnunxkya] {
    font-size: 4rem;
}

.access-denied h2[b-yklnunxkya] {
    font-size: 1.8rem;
    color: var(--text-main);
    margin: 0;
}

.access-denied p[b-yklnunxkya] {
    font-size: 1rem;
    margin: 0;
}

.btn-back-home[b-yklnunxkya] {
    margin-top: 0.5rem;
    display: inline-block;
    padding: 0.7rem 1.5rem;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}

    .btn-back-home:hover[b-yklnunxkya] {
        background: var(--primary-dark);
    }

/* Page */
.new-magasin-page[b-yklnunxkya] {
    max-width: 800px;
}

/* Header */
.page-header[b-yklnunxkya] {
    margin-bottom: 2rem;
}

.back-link[b-yklnunxkya] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-yklnunxkya] {
        color: var(--primary);
    }

.back-arrow[b-yklnunxkya] {
    font-size: 1.1rem;
}

.page-header h1[b-yklnunxkya] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-yklnunxkya] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-yklnunxkya] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-yklnunxkya] {
    font-size: 1.1rem;
}

.alert-error[b-yklnunxkya] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-yklnunxkya] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-yklnunxkya] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-yklnunxkya] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-yklnunxkya] {
        margin-bottom: 0;
    }

.section-header[b-yklnunxkya] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-yklnunxkya] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-yklnunxkya] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-yklnunxkya] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-yklnunxkya] {
        margin-bottom: 0;
    }

.form-label[b-yklnunxkya] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-yklnunxkya]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-yklnunxkya] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-yklnunxkya] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-yklnunxkya]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-yklnunxkya] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.validation-message[b-yklnunxkya] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Preview card */
.preview-card .section-header[b-yklnunxkya] {
    margin-bottom: 1rem;
}

.preview-body[b-yklnunxkya] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
    gap: 0.75rem;
}

.preview-avatar[b-yklnunxkya] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(111,77,230,0.3);
}

.preview-name[b-yklnunxkya] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

/* Actions */
.form-actions[b-yklnunxkya] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-yklnunxkya] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-yklnunxkya] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-yklnunxkya] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-yklnunxkya] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-yklnunxkya] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-yklnunxkya] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-yklnunxkya 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-yklnunxkya] {
        grid-template-columns: 1fr;
    }

    .form-main[b-yklnunxkya] {
        order: 1;
    }

    .form-sidebar[b-yklnunxkya] {
        order: 2;
    }
}
/* /Pages/Marque/Marques.razor.rz.scp.css */
.marques-page[b-uj4xdm8tvf] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header[b-uj4xdm8tvf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-uj4xdm8tvf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-uj4xdm8tvf] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-uj4xdm8tvf] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Alerts */
.alert[b-uj4xdm8tvf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-weight: 500;
    position: relative;
}

.alert-icon[b-uj4xdm8tvf] {
    font-size: 1rem;
}

.alert-success[b-uj4xdm8tvf] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-error[b-uj4xdm8tvf] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-close[b-uj4xdm8tvf] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    opacity: 0.6;
}

    .alert-close:hover[b-uj4xdm8tvf] {
        opacity: 1;
    }

/* Filters */
.filters-bar[b-uj4xdm8tvf] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-uj4xdm8tvf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-uj4xdm8tvf] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .search-box input[b-uj4xdm8tvf] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-uj4xdm8tvf] {
    font-size: 0.9rem;
}

/* Loading */
.loading-state[b-uj4xdm8tvf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-uj4xdm8tvf] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-uj4xdm8tvf 0.8s linear infinite;
}

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

/* Empty state */
.empty-state[b-uj4xdm8tvf] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-uj4xdm8tvf] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-uj4xdm8tvf] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-uj4xdm8tvf] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

/* Grid */
.items-grid[b-uj4xdm8tvf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

/* Card */
.item-card[b-uj4xdm8tvf] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

    .item-card:hover[b-uj4xdm8tvf] {
        box-shadow: 0 8px 24px rgba(111, 77, 230, 0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

.item-icon[b-uj4xdm8tvf] {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-name[b-uj4xdm8tvf] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    word-break: break-word;
}

/* Actions */
.item-actions[b-uj4xdm8tvf] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-uj4xdm8tvf] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-uj4xdm8tvf] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-uj4xdm8tvf] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-uj4xdm8tvf] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-uj4xdm8tvf] {
        background: #fecaca;
        transform: scale(1.02);
    }

.pagination[b-uj4xdm8tvf] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 20px;
}

    .pagination button[b-uj4xdm8tvf] {
        padding: 6px 12px;
        cursor: pointer;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        background: white;
    }

        .pagination button:disabled[b-uj4xdm8tvf] {
            opacity: 0.5;
            cursor: not-allowed;
        }

/* Responsive */
@media (max-width: 640px) {
    .items-grid[b-uj4xdm8tvf] {
        grid-template-columns: 1fr !important;
    }

    .item-actions[b-uj4xdm8tvf] {
        flex-direction: column;
    }

    .btn-action[b-uj4xdm8tvf] {
        width: 100%;
    }

    .page-header[b-uj4xdm8tvf] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Marque/NewMarque.razor.rz.scp.css */
.loading-state[b-x4lalhtuzy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-x4lalhtuzy] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-x4lalhtuzy 0.8s linear infinite;
}

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

.new-marque-page[b-x4lalhtuzy] {
    max-width: 800px;
}

.page-header[b-x4lalhtuzy] {
    margin-bottom: 2rem;
}

.back-link[b-x4lalhtuzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-x4lalhtuzy] {
        color: var(--primary);
    }

.back-arrow[b-x4lalhtuzy] {
    font-size: 1.1rem;
}

.page-header h1[b-x4lalhtuzy] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-x4lalhtuzy] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.alert[b-x4lalhtuzy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-x4lalhtuzy] {
    font-size: 1.1rem;
}

.alert-error[b-x4lalhtuzy] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-x4lalhtuzy] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.form-layout[b-x4lalhtuzy] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

.form-section[b-x4lalhtuzy] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-x4lalhtuzy] {
        margin-bottom: 0;
    }

.section-header[b-x4lalhtuzy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-x4lalhtuzy] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-x4lalhtuzy] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.form-group[b-x4lalhtuzy] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-x4lalhtuzy] {
        margin-bottom: 0;
    }

.form-label[b-x4lalhtuzy] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-x4lalhtuzy]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-x4lalhtuzy] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-x4lalhtuzy] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-x4lalhtuzy]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-x4lalhtuzy] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.validation-message[b-x4lalhtuzy] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

.preview-card .section-header[b-x4lalhtuzy] {
    margin-bottom: 1rem;
}

.preview-body[b-x4lalhtuzy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
    gap: 0.5rem;
}

.preview-icon[b-x4lalhtuzy] {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.preview-name[b-x4lalhtuzy] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.form-actions[b-x4lalhtuzy] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-x4lalhtuzy] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-x4lalhtuzy] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-x4lalhtuzy] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-x4lalhtuzy] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-x4lalhtuzy] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-x4lalhtuzy] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-x4lalhtuzy 0.8s linear infinite;
}

@media (max-width: 768px) {
    .form-layout[b-x4lalhtuzy] {
        grid-template-columns: 1fr;
    }

    .form-main[b-x4lalhtuzy] {
        order: 1;
    }

    .form-sidebar[b-x4lalhtuzy] {
        order: 2;
    }
}
/* /Pages/Modele/Modeles.razor.rz.scp.css */
.modeles-page[b-lx0t5lmj3w] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header[b-lx0t5lmj3w] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-lx0t5lmj3w] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-lx0t5lmj3w] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-lx0t5lmj3w] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.alert[b-lx0t5lmj3w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-weight: 500;
    position: relative;
}

.alert-icon[b-lx0t5lmj3w] {
    font-size: 1rem;
}

.alert-success[b-lx0t5lmj3w] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-error[b-lx0t5lmj3w] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-close[b-lx0t5lmj3w] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    opacity: 0.6;
}

    .alert-close:hover[b-lx0t5lmj3w] {
        opacity: 1;
    }

.filters-bar[b-lx0t5lmj3w] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-lx0t5lmj3w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-lx0t5lmj3w] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .search-box input[b-lx0t5lmj3w] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-lx0t5lmj3w] {
    font-size: 0.9rem;
}

.loading-state[b-lx0t5lmj3w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-lx0t5lmj3w] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-lx0t5lmj3w 0.8s linear infinite;
}

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

.empty-state[b-lx0t5lmj3w] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-lx0t5lmj3w] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-lx0t5lmj3w] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-lx0t5lmj3w] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.items-grid[b-lx0t5lmj3w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.item-card[b-lx0t5lmj3w] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

    .item-card:hover[b-lx0t5lmj3w] {
        box-shadow: 0 8px 24px rgba(111, 77, 230, 0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

.item-icon[b-lx0t5lmj3w] {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-name[b-lx0t5lmj3w] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    word-break: break-word;
}

.item-actions[b-lx0t5lmj3w] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-lx0t5lmj3w] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-lx0t5lmj3w] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-lx0t5lmj3w] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-lx0t5lmj3w] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-lx0t5lmj3w] {
        background: #fecaca;
        transform: scale(1.02);
    }

.pagination[b-lx0t5lmj3w] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 20px;
}

    .pagination button[b-lx0t5lmj3w] {
        padding: 6px 12px;
        cursor: pointer;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        background: white;
    }

        .pagination button:disabled[b-lx0t5lmj3w] {
            opacity: 0.5;
            cursor: not-allowed;
        }

@media (max-width: 640px) {
    .items-grid[b-lx0t5lmj3w] {
        grid-template-columns: 1fr !important;
    }

    .item-actions[b-lx0t5lmj3w] {
        flex-direction: column;
    }

    .btn-action[b-lx0t5lmj3w] {
        width: 100%;
    }

    .page-header[b-lx0t5lmj3w] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Modele/NewModele.razor.rz.scp.css */
.loading-state[b-anisgjxwhq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-anisgjxwhq] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-anisgjxwhq 0.8s linear infinite;
}

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

.new-modele-page[b-anisgjxwhq] {
    max-width: 800px;
}

.page-header[b-anisgjxwhq] {
    margin-bottom: 2rem;
}

.back-link[b-anisgjxwhq] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-anisgjxwhq] {
        color: var(--primary);
    }

.back-arrow[b-anisgjxwhq] {
    font-size: 1.1rem;
}

.page-header h1[b-anisgjxwhq] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-anisgjxwhq] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

.alert[b-anisgjxwhq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-anisgjxwhq] {
    font-size: 1.1rem;
}

.alert-error[b-anisgjxwhq] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-anisgjxwhq] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.form-layout[b-anisgjxwhq] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

.form-section[b-anisgjxwhq] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-anisgjxwhq] {
        margin-bottom: 0;
    }

.section-header[b-anisgjxwhq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-anisgjxwhq] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-anisgjxwhq] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.form-group[b-anisgjxwhq] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-anisgjxwhq] {
        margin-bottom: 0;
    }

.form-label[b-anisgjxwhq] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-anisgjxwhq]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-anisgjxwhq] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-anisgjxwhq] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-anisgjxwhq]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-anisgjxwhq] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.validation-message[b-anisgjxwhq] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

.preview-card .section-header[b-anisgjxwhq] {
    margin-bottom: 1rem;
}

.preview-body[b-anisgjxwhq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
    gap: 0.5rem;
}

.preview-icon[b-anisgjxwhq] {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.preview-name[b-anisgjxwhq] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.form-actions[b-anisgjxwhq] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-anisgjxwhq] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-anisgjxwhq] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-anisgjxwhq] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-anisgjxwhq] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-anisgjxwhq] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-anisgjxwhq] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-anisgjxwhq 0.8s linear infinite;
}

@media (max-width: 768px) {
    .form-layout[b-anisgjxwhq] {
        grid-template-columns: 1fr;
    }

    .form-main[b-anisgjxwhq] {
        order: 1;
    }

    .form-sidebar[b-anisgjxwhq] {
        order: 2;
    }
}
/* /Pages/Produitss/NewProduit.razor.rz.scp.css */
/* ============================================================
   NewProduit.razor.css
   ============================================================ */

/* ---- Loading state ---- */
.loading-state[b-3xb8ale7t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-3xb8ale7t3] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-3xb8ale7t3 0.8s linear infinite;
}

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

/* ---- Page ---- */
.new-produit-page[b-3xb8ale7t3] {
    max-width: 1200px;
}

/* ---- Header ---- */
.page-header[b-3xb8ale7t3] {
    margin-bottom: 2rem;
}

.back-link[b-3xb8ale7t3] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-3xb8ale7t3] {
        color: var(--primary);
    }

.back-arrow[b-3xb8ale7t3] {
    font-size: 1.1rem;
}

.page-header h1[b-3xb8ale7t3] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem 0;
}

.page-subtitle[b-3xb8ale7t3] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* ---- Alerts ---- */
.alert[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-3xb8ale7t3] {
    font-size: 1.1rem;
}

.alert-error[b-3xb8ale7t3] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-3xb8ale7t3] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* ---- Form layout ---- */
.form-layout[b-3xb8ale7t3] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 1.5rem;
    align-items: start;
}

/* ---- Form sections ---- */
.form-section[b-3xb8ale7t3] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-3xb8ale7t3] {
        margin-bottom: 0;
    }

.section-header[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-3xb8ale7t3] {
    font-size: 1.3rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111, 77, 230, 0.1), rgba(111, 77, 230, 0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-3xb8ale7t3] {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* ---- Form elements ---- */
.form-group[b-3xb8ale7t3] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-3xb8ale7t3] {
        margin-bottom: 0;
    }

.form-label[b-3xb8ale7t3] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-3xb8ale7t3]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-3xb8ale7t3],
.form-select[b-3xb8ale7t3],
.form-textarea[b-3xb8ale7t3] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-3xb8ale7t3],
    .form-select:focus[b-3xb8ale7t3],
    .form-textarea:focus[b-3xb8ale7t3] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .form-input[b-3xb8ale7t3]::placeholder,
    .form-textarea[b-3xb8ale7t3]::placeholder {
        color: #c0c4cc;
    }

.form-textarea[b-3xb8ale7t3] {
    resize: vertical;
    min-height: 100px;
}

.form-row[b-3xb8ale7t3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Validation messages */
.validation-message[b-3xb8ale7t3] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* ---- Input with suffix (€, %) ---- */
.input-with-suffix[b-3xb8ale7t3] {
    position: relative;
    display: flex;
    align-items: center;
}

    .input-with-suffix .form-input[b-3xb8ale7t3] {
        padding-right: 2.5rem;
    }

.input-suffix[b-3xb8ale7t3] {
    position: absolute;
    right: 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
}

/* ---- Toggle switch (Nouvelle marque / modèle) ---- */
.toggle-row[b-3xb8ale7t3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.toggle-switch[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

    .toggle-switch input[type="checkbox"][b-3xb8ale7t3] {
        appearance: none;
        -webkit-appearance: none;
        width: 36px;
        height: 20px;
        background: #e5e7eb;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.25s ease;
        position: relative;
        flex-shrink: 0;
    }

        .toggle-switch input[type="checkbox"]:checked[b-3xb8ale7t3] {
            background: var(--primary);
        }

        .toggle-switch input[type="checkbox"][b-3xb8ale7t3]::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: left 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .toggle-switch input[type="checkbox"]:checked[b-3xb8ale7t3]::after {
            left: 19px;
        }

/* ---- Qualité options ---- */
.qualite-options[b-3xb8ale7t3] {
    display: flex;
    gap: 0.75rem;
}

.qualite-option[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

    .qualite-option input[type="radio"][b-3xb8ale7t3] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.qualite-badge[b-3xb8ale7t3] {
    padding: 0.45rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.qualite-option.selected .qualite-badge[b-3xb8ale7t3],
.qualite-option:hover .qualite-badge[b-3xb8ale7t3] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.qualite-badge.original[b-3xb8ale7t3] {
    background: #dbeafe;
    color: #1e40af;
    border-color: #bfdbfe;
}

.qualite-option.selected .qualite-badge.original[b-3xb8ale7t3] {
    background: #1e40af;
    color: white;
    border-color: #1e40af;
}

.qualite-badge.compatible[b-3xb8ale7t3] {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}

.qualite-option.selected .qualite-badge.compatible[b-3xb8ale7t3] {
    background: #065f46;
    color: white;
    border-color: #065f46;
}

.qualite-badge.relife[b-3xb8ale7t3] {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}

.qualite-option.selected .qualite-badge.relife[b-3xb8ale7t3] {
    background: #92400e;
    color: white;
    border-color: #92400e;
}

/* ---- Pricing sidebar ---- */
.price-group[b-3xb8ale7t3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.margin-preview[b-3xb8ale7t3] {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9ff;
    border-radius: 10px;
    border: 1px solid #e8e4ff;
}

.margin-row[b-3xb8ale7t3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-muted);
    padding: 0.2rem 0;
}

    .margin-row:first-child[b-3xb8ale7t3] {
        margin-bottom: 0.5rem;
    }

.margin-value[b-3xb8ale7t3] {
    font-weight: 700;
    font-size: 0.95rem;
}

    .margin-value.positive[b-3xb8ale7t3] {
        color: #059669;
    }

    .margin-value.negative[b-3xb8ale7t3] {
        color: #dc2626;
    }

/* ---- Status toggle ---- */
.status-toggle[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 10px;
    border: 2px solid #f3f4f6;
    transition: all 0.2s ease;
}

    .status-toggle:hover[b-3xb8ale7t3] {
        border-color: #e5e7eb;
        background: #fafafa;
    }

    .status-toggle input[type="checkbox"][b-3xb8ale7t3] {
        appearance: none;
        -webkit-appearance: none;
        width: 44px;
        height: 24px;
        background: #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.25s ease;
        position: relative;
        flex-shrink: 0;
    }

        .status-toggle input[type="checkbox"]:checked[b-3xb8ale7t3] {
            background: var(--primary);
        }

        .status-toggle input[type="checkbox"][b-3xb8ale7t3]::after {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: left 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .status-toggle input[type="checkbox"]:checked[b-3xb8ale7t3]::after {
            left: 23px;
        }

.status-display[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot[b-3xb8ale7t3] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.active[b-3xb8ale7t3] {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .status-dot.inactive[b-3xb8ale7t3] {
        background: #9ca3af;
    }

.status-label[b-3xb8ale7t3] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.status-hint[b-3xb8ale7t3] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* ---- Actions ---- */
.form-actions[b-3xb8ale7t3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-3xb8ale7t3] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-3xb8ale7t3] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 77, 230, 0.35);
    }

    .btn-submit:disabled[b-3xb8ale7t3] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-3xb8ale7t3] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-3xb8ale7t3] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-3xb8ale7t3] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-3xb8ale7t3 0.8s linear infinite;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .form-layout[b-3xb8ale7t3] {
        grid-template-columns: 1fr;
    }

    .form-main[b-3xb8ale7t3] {
        order: 1;
    }

    .form-sidebar[b-3xb8ale7t3] {
        order: 2;
    }
}

@media (max-width: 640px) {
    .form-row[b-3xb8ale7t3] {
        grid-template-columns: 1fr;
    }

    .qualite-options[b-3xb8ale7t3] {
        flex-direction: column;
    }
}


/* Wrapper label + bouton */
.select-with-action[b-3xb8ale7t3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Bouton inline */
.btn-inline[b-3xb8ale7t3] {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    background: rgba(111, 77, 230, 0.1);
    color: var(--primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-inline:hover[b-3xb8ale7t3] {
        background: var(--primary);
        color: white;
    }

/* Select custom */
:deep(select.custom-select)[b-3xb8ale7t3] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 10px 40px 10px 12px;
    border-radius: 8px;
    border: 1px solid #ddd;
    background: white;
    background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='20' viewBox='0 0 20 20'><path d='M5 7l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

    /* Hover */
    :deep(.custom-select:hover)[b-3xb8ale7t3] {
        border-color: var(--primary);
        background-color: #fff;
    }

.select-with-action[b-3xb8ale7t3] {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .select-with-action .form-select[b-3xb8ale7t3] {
        flex: 1;
    }

.modal-backdrop[b-3xb8ale7t3] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal[b-3xb8ale7t3] {
    background: white;
    padding: 20px;
    border-radius: 12px;
    width: 400px;
}

/* Bouton + style NewIntervention */
.btn-add-client[b-3xb8ale7t3] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(111, 77, 230, 0.12); /* soft violet */
    color: var(--primary);
    border: 1px solid rgba(111, 77, 230, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: none;
}

    /* Hover doux */
    .btn-add-client:hover[b-3xb8ale7t3] {
        background: rgba(111, 77, 230, 0.18);
        transform: translateY(-1px) scale(1.03);
    }

    /* Active (clic) */
    .btn-add-client:active[b-3xb8ale7t3] {
        transform: scale(0.97);
    }

    /* Focus accessible */
    .btn-add-client:focus[b-3xb8ale7t3] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.15);
    }

    /* Version icône seule */
    .btn-add-client.icon-only[b-3xb8ale7t3] {
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 1rem;
    }
/* /Pages/Produitss/Produits.razor.rz.scp.css */
.produits-page[b-svdglwbjt9] {
    max-width: 1400px;
    margin-left: 0;
    margin-right: auto;
}

.page-header[b-svdglwbjt9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

    .page-header h1[b-svdglwbjt9] {
        color: var(--text-main);
        font-size: 2rem;
        margin: 0;
    }

/* Barre de recherche */
.search-bar[b-svdglwbjt9] {
    margin-bottom: 2rem;
}

.search-input[b-svdglwbjt9] {
    width: 100%;
    padding: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all 0.3s ease;
}

    .search-input:focus[b-svdglwbjt9] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

/* Grille de produits */
.produits-grid[b-svdglwbjt9] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.produit-card[b-svdglwbjt9] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

    .produit-card:hover[b-svdglwbjt9] {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        transform: translateY(-4px);
        border-color: var(--primary);
    }

.produit-header[b-svdglwbjt9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    gap: 1rem;
}

    .produit-header h3[b-svdglwbjt9] {
        margin: 0;
        color: var(--text-main);
        font-size: 1.2rem;
        flex: 1;
    }

.badge[b-svdglwbjt9] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

    .badge.active[b-svdglwbjt9] {
        background: #d1fae5;
        color: #065f46;
    }

    .badge.inactive[b-svdglwbjt9] {
        background: #fee2e2;
        color: #991b1b;
    }

.produit-info[b-svdglwbjt9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.info-row[b-svdglwbjt9] {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
}

.label[b-svdglwbjt9] {
    color: var(--text-muted);
    font-weight: 500;
}

.price[b-svdglwbjt9] {
    color: var(--primary);
    font-weight: 600;
}

/* Actions */
.produit-actions[b-svdglwbjt9] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-svdglwbjt9] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-action:active[b-svdglwbjt9] {
        transform: scale(0.97);
    }

.btn-edit[b-svdglwbjt9] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-svdglwbjt9] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-svdglwbjt9] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-svdglwbjt9] {
        background: #fecaca;
        transform: scale(1.02);
    }

/* État vide */
.empty-state[b-svdglwbjt9] {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
}

    .empty-state p[b-svdglwbjt9] {
        font-size: 1.1rem;
    }

/* Message d'erreur */
.error-message[b-svdglwbjt9] {
    background: #fee2e2;
    color: #991b1b;
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

/* Formulaires */
.form-group[b-svdglwbjt9] {
    margin-bottom: 1rem;
}

    .form-group label[b-svdglwbjt9] {
        display: block;
        margin-bottom: 0.5rem;
        color: var(--text-main);
        font-weight: 500;
        font-size: 0.9rem;
    }

.form-input[b-svdglwbjt9],
.form-select[b-svdglwbjt9],
.form-textarea[b-svdglwbjt9] {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

    .form-input:focus[b-svdglwbjt9],
    .form-select:focus[b-svdglwbjt9],
    .form-textarea:focus[b-svdglwbjt9] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

.form-textarea[b-svdglwbjt9] {
    resize: vertical;
    font-family: inherit;
}

.form-row[b-svdglwbjt9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.validation-message[b-svdglwbjt9] {
    color: #dc2626;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}


/* Détails produit */


.warning-text[b-svdglwbjt9] {
    color: #dc2626;
    font-size: 0.9rem;
    margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .produits-grid[b-svdglwbjt9] {
        grid-template-columns: 1fr;
    }

    .form-row[b-svdglwbjt9] {
        grid-template-columns: 1fr;
    }

    .page-header[b-svdglwbjt9] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
}

.btn-add[b-svdglwbjt9] {
    background: #dcfce7; /* vert très soft */
    color: #166534;
}

    .btn-add:hover[b-svdglwbjt9] {
        background: #bbf7d0;
        transform: translateY(-1px);
    }

/* Retirer */
.btn-remove[b-svdglwbjt9] {
    background: #fee2e2; /* rouge soft */
    color: #991b1b;
}

    .btn-remove:hover[b-svdglwbjt9] {
        background: #fecaca;
        transform: translateY(-1px);
    }

/* Stock badge */
.stock-badge[b-svdglwbjt9] {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

    /* Stock OK */
    .stock-badge.ok[b-svdglwbjt9] {
        background: #dcfce7;
        color: #166534;
    }

    /* Stock faible */
    .stock-badge.low[b-svdglwbjt9] {
        background: #fee2e2;
        color: #991b1b;
        animation: pulse-b-svdglwbjt9 1.5s infinite;
    }

.btn-excel[b-svdglwbjt9] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    font-weight: 600;
    border: none;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

    .btn-excel:hover[b-svdglwbjt9] {
        background: #15803d;
        transform: translateY(-1px);
    }

    .btn-excel:active[b-svdglwbjt9] {
        transform: scale(0.97);
    }

    .btn-excel:disabled[b-svdglwbjt9] {
        background: #86efac;
        cursor: not-allowed;
    }

.pagination[b-svdglwbjt9] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 20px;
}

    .pagination button[b-svdglwbjt9] {
        padding: 6px 12px;
        cursor: pointer;
    }

.produit-title[b-svdglwbjt9] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .produit-title .main[b-svdglwbjt9] {
        font-size: 1.2rem;
        font-weight: 600;
        color: var(--text-main);
    }

    .produit-title .sub[b-svdglwbjt9] {
        font-size: 0.85rem;
        color: var(--text-muted);
    }

@keyframes pulse-b-svdglwbjt9 {
    0% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0.3);
    }

    70% {
        box-shadow: 0 0 0 6px rgba(220,38,38,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220,38,38,0);
    }
}
/* /Pages/QR/Scan.razor.rz.scp.css */
.scan-page[b-slopm4nw5x] {
    max-width: 600px;
}

#qr-reader[b-slopm4nw5x] {
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
}

    #qr-reader > *[b-slopm4nw5x] {
        position: relative;
    }

.success[b-slopm4nw5x] {
    background: #dcfce7;
    color: #166534;
    padding: 1rem;
    border-radius: 8px;
}

.error[b-slopm4nw5x] {
    background: #fee2e2;
    color: #991b1b;
    padding: 1rem;
    border-radius: 8px;
}

.produit-card-scan[b-slopm4nw5x] {
    background: white;
    border-radius: 12px;
    padding: 1.2rem;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    margin-top: 1rem;
}

.btn-confirm[b-slopm4nw5x] {
    margin-top: 1rem;
    width: 100%;
    padding: 0.8rem;
    border-radius: 8px;
    border: none;
    background: #16a34a;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

    .btn-confirm:hover[b-slopm4nw5x] {
        background: #15803d;
    }

    .btn-confirm:disabled[b-slopm4nw5x] {
        opacity: 0.6;
        cursor: not-allowed;
    }


/* Overlay sombre */
.scanner-overlay[b-slopm4nw5x] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

    /* Zone claire centrale */
    .scanner-overlay[b-slopm4nw5x]::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        height: 70%;
        transform: translate(-50%, -50%);
        border: 2px solid rgba(255,255,255,0.2);
        box-shadow: 0 0 0 9999px rgba(0,0,0,0.6);
        border-radius: 16px;
    }

    /* Coins stylés */
    .scanner-overlay[b-slopm4nw5x]::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 70%;
        height: 70%;
        transform: translate(-50%, -50%);
        border: 4px solid transparent;
        border-radius: 16px;
        box-shadow: -10px -10px 0 0 #22c55e, 10px -10px 0 0 #22c55e, -10px 10px 0 0 #22c55e, 10px 10px 0 0 #22c55e;
    }

    .scanner-overlay[b-slopm4nw5x],
    .scanner-overlay[b-slopm4nw5x]::before,
    .scanner-overlay[b-slopm4nw5x]::after {
        pointer-events: none;
    }

/* Bouton switch */
#qr-controls[b-slopm4nw5x] {
    position: fixed;
    bottom: 80px;
    top: 110px;
    right: 12px;
    z-index: 999999;
}

#qr-reader video[b-slopm4nw5x] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

#switch-camera[b-slopm4nw5x] {
    background: rgba(0,0,0,0.65);
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    display: flex;
    color: white;
    font-size: 1.8rem;
    padding: 10px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: all 0.2s ease;
}

    #switch-camera:active[b-slopm4nw5x] {
        transform: scale(0.92);
    }

    #switch-camera:hover[b-slopm4nw5x] {
        background: rgba(0,0,0,0.8);
    }

.hint[b-slopm4nw5x] {
    position: absolute;
    bottom: -18px;
    font-size: 0.65rem;
    opacity: 0.8;
}
/* /Pages/Reparations/Interventions.razor.rz.scp.css */
/* ============================================================
   Interventions.razor.css — Refonte Cards
   ============================================================ */

/* ---- Loading ---- */
.loading-state[b-rvn7qe60be] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-rvn7qe60be] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-rvn7qe60be 0.8s linear infinite;
}

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

/* ---- Page ---- */
.interventions-container[b-rvn7qe60be] {
    max-width: 1400px;
}

/* ---- Header ---- */
.page-header[b-rvn7qe60be] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-rvn7qe60be] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-rvn7qe60be] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-rvn7qe60be] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ---- Buttons ---- */
.btn-primary[b-rvn7qe60be] {
    background: var(--primary);
    color: white;
    border: none;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

    .btn-primary:hover[b-rvn7qe60be] {
        background: var(--primary-dark);
    }

.btn-ghost[b-rvn7qe60be] {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

    .btn-ghost:hover[b-rvn7qe60be] {
        background: #f9fafb;
        color: var(--text-main);
        border-color: #d1d5db;
    }

/* ---- Filters ---- */
.filters-bar[b-rvn7qe60be] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-rvn7qe60be] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-rvn7qe60be] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .search-box input[b-rvn7qe60be] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-rvn7qe60be] {
    font-size: 0.9rem;
}

.filter-group select[b-rvn7qe60be] {
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    font-size: 0.9rem;
    color: var(--text-main);
    background: var(--surface);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    outline: none;
    transition: border-color 0.2s;
}

    .filter-group select:focus[b-rvn7qe60be] {
        border-color: var(--primary);
    }

/* ---- Empty state ---- */
.empty-state[b-rvn7qe60be] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-rvn7qe60be] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-rvn7qe60be] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-rvn7qe60be] {
    font-size: 0.95rem;
    margin: 0;
}

/* ============================================================
   CARDS GRID
   ============================================================ */

.interventions-grid[b-rvn7qe60be] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* ---- Card ---- */
.intervention-card[b-rvn7qe60be] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .intervention-card:hover[b-rvn7qe60be] {
        box-shadow: 0 8px 24px rgba(111,77,230,0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

/* ---- Urgent card ---- */
.urgent-card[b-rvn7qe60be] {
    border-color: #ef4444 !important;
    animation: urgentPulse-b-rvn7qe60be 2s infinite;
}

@keyframes urgentPulse-b-rvn7qe60be {
    0% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(239,68,68,0.15), 0 8px 20px rgba(239,68,68,0.1);
    }

    100% {
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
}

/* ---- Card top ---- */
.card-top[b-rvn7qe60be] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.client-avatar[b-rvn7qe60be] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(111,77,230,0.3);
}

.client-identity[b-rvn7qe60be] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

    .client-identity h3[b-rvn7qe60be] {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.client-phone[b-rvn7qe60be] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---- Status badges ---- */
.statut-badge[b-rvn7qe60be] {
    display: inline-block;
    padding: 0.22rem 0.7rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.statut-done[b-rvn7qe60be] {
    background: #d1fae5;
    color: #065f46;
}

.statut-progress[b-rvn7qe60be] {
    background: #dbeafe;
    color: #1e40af;
}

.statut-waiting[b-rvn7qe60be] {
    background: #fef3c7;
    color: #92400e;
}

.statut-cancelled[b-rvn7qe60be] {
    background: #fee2e2;
    color: #991b1b;
}

.statut-default[b-rvn7qe60be] {
    background: #f3f4f6;
    color: #4b5563;
}

/* ---- Details ---- */
.card-details[b-rvn7qe60be] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.detail-item[b-rvn7qe60be] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.detail-icon[b-rvn7qe60be] {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.price-value[b-rvn7qe60be] {
    font-weight: 600;
    color: var(--primary);
}

/* ---- Urgent date ---- */
.urgent-item[b-rvn7qe60be] {
    color: #dc2626 !important;
}

.urgent-text[b-rvn7qe60be] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: #dc2626;
}

.urgent-label[b-rvn7qe60be] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Pulsing dot indicator */
.pulse-dot[b-rvn7qe60be] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dc2626;
    flex-shrink: 0;
    animation: dotPulse-b-rvn7qe60be 1.2s ease-in-out infinite;
}

@keyframes dotPulse-b-rvn7qe60be {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.4;
        transform: scale(0.7);
    }
}

/* ---- Card actions ---- */
.card-actions[b-rvn7qe60be] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-rvn7qe60be] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-rvn7qe60be] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-rvn7qe60be] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-rvn7qe60be] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-rvn7qe60be] {
        background: #fecaca;
        transform: scale(1.02);
    }

.btn-full[b-rvn7qe60be] {
    flex: 1;
}

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

@media (max-width: 1024px) {
    .interventions-grid[b-rvn7qe60be] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .interventions-grid[b-rvn7qe60be] {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1rem;
    }

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

    .filters-bar[b-rvn7qe60be] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group select[b-rvn7qe60be] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .interventions-grid[b-rvn7qe60be] {
        grid-template-columns: 1fr;
    }

    .interventions-container[b-rvn7qe60be] {
        padding: 0;
    }
}

.comment-preview[b-rvn7qe60be] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
    display: inline-block;
}

/* ---- Halo vert (Réparée) ---- */
.halo-green[b-rvn7qe60be] {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 4px rgba(34,197,94,0.15), 0 8px 20px rgba(34,197,94,0.1);
}

/* ---- Halo bleu (Rendue client) ---- */
.halo-blue[b-rvn7qe60be] {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 4px rgba(59,130,246,0.15), 0 8px 20px rgba(59,130,246,0.1);
}

.intervention-card.halo-green:hover[b-rvn7qe60be] {
    border-color: #22c55e;
}

.intervention-card.halo-blue:hover[b-rvn7qe60be] {
    border-color: #3b82f6;
}

.pagination[b-rvn7qe60be] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 20px;
}

    .pagination button[b-rvn7qe60be] {
        padding: 6px 12px;
        cursor: pointer;
        border-radius: 6px;
        border: 1px solid #e5e7eb;
        background: white;
    }

        .pagination button:disabled[b-rvn7qe60be] {
            opacity: 0.5;
            cursor: not-allowed;
        }
/* /Pages/Reparations/NewIntervention.razor.rz.scp.css */
.new-intervention-container[b-6dbmh67oic] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header */
.page-header[b-6dbmh67oic] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

    .page-header h1[b-6dbmh67oic] {
        font-size: 1.8rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }

.btn-back[b-6dbmh67oic] {
    background: white;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .btn-back:hover[b-6dbmh67oic] {
        background: #f3f4f6;
        color: #1f2937;
    }

/* Alerts */
.alert-success[b-6dbmh67oic] {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-error[b-6dbmh67oic] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    border-radius: 10px;
    padding: 0.9rem 1.2rem;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* Layout */
.layout-grid[b-6dbmh67oic] {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    align-items: start;
}

/* Form card */
.form-card[b-6dbmh67oic] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-section[b-6dbmh67oic] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 1.5rem;
}

    .form-section h2[b-6dbmh67oic] {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin: 0 0 1.25rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #f3f4f6;
    }

.form-grid[b-6dbmh67oic] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-6dbmh67oic] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
}

    .form-group.full-width[b-6dbmh67oic] {
        grid-column: 1 / -1;
    }

    .form-group label[b-6dbmh67oic] {
        font-size: 0.85rem;
        font-weight: 500;
        color: #374151;
    }

    .form-group input[b-6dbmh67oic],
    .form-group select[b-6dbmh67oic],
    .form-group textarea[b-6dbmh67oic] {
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        padding: 0.6rem 0.85rem;
        font-size: 0.9rem;
        color: #1f2937;
        transition: border-color 0.15s, box-shadow 0.15s;
        background: #fafafa;
        font-family: inherit;
    }

        .form-group input:focus[b-6dbmh67oic],
        .form-group select:focus[b-6dbmh67oic],
        .form-group textarea:focus[b-6dbmh67oic] {
            outline: none;
            border-color: #2563eb;
            background: white;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

    .form-group textarea[b-6dbmh67oic] {
        resize: vertical;
        min-height: 120px;
    }

.required[b-6dbmh67oic] {
    color: #ef4444;
}

.char-count[b-6dbmh67oic] {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: right;
}

/* Price input */
.price-group[b-6dbmh67oic] {
    max-width: 280px;
}

.price-input-wrapper[b-6dbmh67oic] {
    position: relative;
    display: flex;
    align-items: center;
}

    .price-input-wrapper input[b-6dbmh67oic] {
        padding-right: 2.5rem;
        width: 100%;
    }

.price-symbol[b-6dbmh67oic] {
    position: absolute;
    right: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    pointer-events: none;
}

/* Sidebar */
.sidebar[b-6dbmh67oic] {
    position: sticky;
    top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Summary card */
.summary-card[b-6dbmh67oic] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 1.5rem;
}

    .summary-card h3[b-6dbmh67oic] {
        font-size: 1rem;
        font-weight: 600;
        color: #374151;
        margin: 0 0 1rem;
    }

.summary-item[b-6dbmh67oic] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
}

    .summary-item:last-child[b-6dbmh67oic] {
        margin-bottom: 0;
    }

.summary-label[b-6dbmh67oic] {
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.summary-value[b-6dbmh67oic] {
    font-size: 0.9rem;
    color: #1f2937;
    font-weight: 500;
    text-align: right;
}

.not-set[b-6dbmh67oic] {
    color: #d1d5db;
    font-style: italic;
    font-weight: 400;
}

.summary-divider[b-6dbmh67oic] {
    height: 1px;
    background: #f3f4f6;
    margin: 1rem 0;
}

.summary-price .price-display[b-6dbmh67oic] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2563eb;
}

/* Actions card */
.actions-card[b-6dbmh67oic] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.active-toggle[b-6dbmh67oic] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 0.25rem;
}

.toggle-label[b-6dbmh67oic] {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
}

.toggle-hint[b-6dbmh67oic] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0.2rem 0 0;
}

/* Toggle switch */
.toggle-switch[b-6dbmh67oic] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

    .toggle-switch input[b-6dbmh67oic] {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider[b-6dbmh67oic] {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 24px;
    transition: 0.25s;
}

    .toggle-slider[b-6dbmh67oic]:before {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 3px;
        bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: 0.25s;
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }

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

    .toggle-switch input:checked + .toggle-slider[b-6dbmh67oic]:before {
        transform: translateX(20px);
    }

/* Submit button */
.btn-submit[b-6dbmh67oic] {
    width: 100%;
    background: #2563eb;
    color: white;
    border: none;
    padding: 0.8rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

    .btn-submit:hover:not(:disabled)[b-6dbmh67oic] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .btn-submit:disabled[b-6dbmh67oic] {
        background: #93c5fd;
        cursor: not-allowed;
        transform: none;
    }

.btn-spinner[b-6dbmh67oic] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-6dbmh67oic 0.7s linear infinite;
}

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

.btn-cancel[b-6dbmh67oic] {
    width: 100%;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    padding: 0.65rem;
    border-radius: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-cancel:hover[b-6dbmh67oic] {
        background: #f9fafb;
        color: #374151;
    }

/* Responsive */
@@media (max-width: 900px) {
    .layout-grid[b-6dbmh67oic] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-6dbmh67oic] {
        position: static;
    }

    .form-grid[b-6dbmh67oic] {
        grid-template-columns: 1fr;
    }

    .form-group.full-width[b-6dbmh67oic] {
        grid-column: 1;
    }
}

@@media (max-width: 640px) {
    .new-intervention-container[b-6dbmh67oic] {
        padding: 1rem;
    }

    .page-header[b-6dbmh67oic] {
        flex-wrap: wrap;
    }

        .page-header h1[b-6dbmh67oic] {
            font-size: 1.4rem;
        }
}

/* AUTOCOMPLETE */
.autocomplete[b-6dbmh67oic] {
    position: relative;
}

/* Dropdown */
.autocomplete-dropdown[b-6dbmh67oic] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    margin-top: 4px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    z-index: 1000;
    max-height: 220px;
    overflow-y: auto;
}

/* Item */
.autocomplete-item[b-6dbmh67oic] {
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: background 0.15s;
}

    .autocomplete-item:hover[b-6dbmh67oic],
    .autocomplete-item.active[b-6dbmh67oic] {
        background: #eff6ff;
    }

/* Nom */
.client-name[b-6dbmh67oic] {
    font-weight: 500;
    color: #1f2937;
}

/* Téléphone */
.client-phone[b-6dbmh67oic] {
    font-size: 0.75rem;
    color: #6b7280;
}

.autocomplete-dropdown[b-6dbmh67oic] {
    margin-top: 6px;
}

.autocomplete-loading[b-6dbmh67oic] {
    padding: 10px;
    font-style: italic;
    color: #888;
}

.autocomplete-empty[b-6dbmh67oic] {
    padding: 10px;
    color: #999;
}

.client-input-wrapper[b-6dbmh67oic] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-add-client[b-6dbmh67oic] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(111, 77, 230, 0.12); /* soft violet */
    color: var(--primary);
    border: 1px solid rgba(111, 77, 230, 0.2);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: none;
}

    /* Hover doux */
    .btn-add-client:hover[b-6dbmh67oic] {
        background: rgba(111, 77, 230, 0.18);
        transform: translateY(-1px) scale(1.03);
    }

    /* Active (clic) */
    .btn-add-client:active[b-6dbmh67oic] {
        transform: scale(0.97);
    }

    /* Focus accessible */
    .btn-add-client:focus[b-6dbmh67oic] {
        outline: none;
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.15);
    }

    /* Version icône seule */
    .btn-add-client.icon-only[b-6dbmh67oic] {
        width: 34px;
        height: 34px;
        padding: 0;
        font-size: 1rem;
    }
/* /Pages/Sms/SmsChat.razor.rz.scp.css */
/* =============================================
   SmsChat.razor.css
   ============================================= */

.chat-page[b-sgf5nducz4] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* pleine hauteur moins la topnav */
    max-width: 800px;
    margin: 0 auto;
    /* On annule le padding du .app-content pour cette page */
    margin-top: -2rem;
    margin-left: -2rem;
    margin-right: auto;
    width: calc(100% + 4rem);
    max-width: min(800px, calc(100vw));
}

/* ── Header ── */
.chat-header[b-sgf5nducz4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.btn-back[b-sgf5nducz4] {
    background: none;
    border: 1.5px solid #e5e7eb;
    color: var(--text-muted);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

    .btn-back:hover[b-sgf5nducz4] {
        background: #f3f4f6;
        color: var(--text-main);
    }

.chat-contact[b-sgf5nducz4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.chat-avatar[b-sgf5nducz4] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-contact-info[b-sgf5nducz4] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.chat-contact-name[b-sgf5nducz4] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
}

.chat-contact-phone[b-sgf5nducz4] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ── Messages area ── */
.chat-messages[b-sgf5nducz4] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: #f6f7fb;
    scroll-behavior: smooth;
}

    /* Scrollbar custom */
    .chat-messages[b-sgf5nducz4]::-webkit-scrollbar {
        width: 6px;
    }

    .chat-messages[b-sgf5nducz4]::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.15);
        border-radius: 10px;
    }

/* ── Loading / Empty ── */
.chat-loading[b-sgf5nducz4],
.chat-empty[b-sgf5nducz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    padding: 3rem;
}

.chat-spinner[b-sgf5nducz4] {
    width: 2rem;
    height: 2rem;
    border: 2.5px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: chat-spin-b-sgf5nducz4 0.7s linear infinite;
}

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

.chat-empty-icon[b-sgf5nducz4] {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.chat-empty-hint[b-sgf5nducz4] {
    font-size: 0.85rem;
    opacity: 0.7;
}

/* ── Date separator ── */
.date-separator[b-sgf5nducz4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0 0.5rem;
}

    .date-separator[b-sgf5nducz4]::before,
    .date-separator[b-sgf5nducz4]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }

    .date-separator span[b-sgf5nducz4] {
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: #9ca3af;
        white-space: nowrap;
    }

/* ── Message bubbles ── */
.message-wrapper[b-sgf5nducz4] {
    display: flex;
    margin-bottom: 0.35rem;
}

    .message-wrapper.incoming[b-sgf5nducz4] {
        justify-content: flex-start;
    }

    .message-wrapper.outgoing[b-sgf5nducz4] {
        justify-content: flex-end;
    }

.message-bubble[b-sgf5nducz4] {
    max-width: 72%;
    padding: 0.65rem 0.9rem;
    border-radius: 18px;
    position: relative;
    word-break: break-word;
}

.bubble-in[b-sgf5nducz4] {
    background: var(--surface);
    color: var(--text-main);
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}

.bubble-out[b-sgf5nducz4] {
    background: var(--primary);
    color: white;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 2px 8px rgba(111,77,230,0.3);
}

.message-text[b-sgf5nducz4] {
    margin: 0 0 0.3rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.message-time[b-sgf5nducz4] {
    font-size: 0.7rem;
    opacity: 0.65;
    display: block;
    text-align: right;
}

/* ── Input area ── */
.chat-input-area[b-sgf5nducz4] {
    background: var(--surface);
    border-top: 1px solid #e5e7eb;
    padding: 0.75rem 1.25rem 1rem;
    flex-shrink: 0;
}

.chat-error[b-sgf5nducz4] {
    background: #fee2e2;
    color: #991b1b;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.chat-success[b-sgf5nducz4] {
    background: #d1fae5;
    color: #065f46;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.chat-input-row[b-sgf5nducz4] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.chat-textarea[b-sgf5nducz4] {
    flex: 1;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    min-height: 42px;
    max-height: 120px;
    background: #f9fafb;
    color: var(--text-main);
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.5;
    overflow-y: auto;
}

    .chat-textarea:focus[b-sgf5nducz4] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .chat-textarea:disabled[b-sgf5nducz4] {
        opacity: 0.6;
    }

.btn-send[b-sgf5nducz4] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: white;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(111,77,230,0.3);
}

    .btn-send:hover:not(:disabled)[b-sgf5nducz4] {
        background: var(--primary-dark);
        transform: scale(1.05);
    }

    .btn-send:disabled[b-sgf5nducz4] {
        background: #c4b5fd;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .btn-send.sending[b-sgf5nducz4] {
        background: #a78bfa;
    }

.send-spinner[b-sgf5nducz4] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: chat-spin-b-sgf5nducz4 0.7s linear infinite;
}

/* ── Char count & Quick replies ── */
.char-count-row[b-sgf5nducz4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.char-count[b-sgf5nducz4] {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

    .char-count.warn[b-sgf5nducz4] {
        color: #ef4444;
        font-weight: 600;
    }

.quick-replies[b-sgf5nducz4] {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    flex: 1;
}

.quick-reply-btn[b-sgf5nducz4] {
    background: rgba(111,77,230,0.08);
    color: var(--primary);
    border: 1px solid rgba(111,77,230,0.2);
    border-radius: 20px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .quick-reply-btn:hover:not(:disabled)[b-sgf5nducz4] {
        background: rgba(111,77,230,0.15);
        transform: translateY(-1px);
    }

    .quick-reply-btn:disabled[b-sgf5nducz4] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .chat-page[b-sgf5nducz4] {
        margin-left: -1.5rem;
        width: calc(100% + 3rem);
    }
}

@media (max-width: 640px) {
    .chat-page[b-sgf5nducz4] {
        margin-left: -0.75rem;
        width: calc(100% + 1.5rem);
        height: calc(100dvh - 56px);
    }

    .chat-header[b-sgf5nducz4] {
        padding: 0.75rem 1rem;
    }

    .chat-messages[b-sgf5nducz4] {
        padding: 1rem;
    }

    .message-bubble[b-sgf5nducz4] {
        max-width: 85%;
    }

    .quick-replies[b-sgf5nducz4] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .quick-reply-btn[b-sgf5nducz4] {
        flex-shrink: 0;
    }
}
/* /Pages/Sms/SmsConversations.razor.rz.scp.css */
/* =============================================
   SmsConversations.razor.css
   ============================================= */

.sms-page[b-dttd2no43i] {
    max-width: 800px;
}

/* ── Header ── */
.sms-header[b-dttd2no43i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.sms-header-left[b-dttd2no43i] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.sms-header h1[b-dttd2no43i] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.conversations-count[b-dttd2no43i] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ── Alert ── */
.sms-alert[b-dttd2no43i] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

/* ── Search ── */
.sms-search-bar[b-dttd2no43i] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.65rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .sms-search-bar:focus-within[b-dttd2no43i] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .sms-search-bar input[b-dttd2no43i] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-dttd2no43i] {
    font-size: 0.9rem;
    opacity: 0.6;
}

/* ── Loading ── */
.sms-loading[b-dttd2no43i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    gap: 1rem;
    color: var(--text-muted);
}

.sms-spinner[b-dttd2no43i] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: sms-spin-b-dttd2no43i 0.8s linear infinite;
}

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

/* ── Empty ── */
.sms-empty[b-dttd2no43i] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
}

.sms-empty-icon[b-dttd2no43i] {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
}

.sms-empty h3[b-dttd2no43i] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

/* ── Conversations list ── */
.conversations-list[b-dttd2no43i] {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.conversation-item[b-dttd2no43i] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.15s ease;
    position: relative;
}

    .conversation-item:last-child[b-dttd2no43i] {
        border-bottom: none;
    }

    .conversation-item:hover[b-dttd2no43i] {
        background: #f9f8ff;
    }

    .conversation-item.recent[b-dttd2no43i] {
        background: linear-gradient(90deg, rgba(111,77,230,0.04), transparent);
    }

        .conversation-item.recent:hover[b-dttd2no43i] {
            background: linear-gradient(90deg, rgba(111,77,230,0.08), #f9f8ff);
        }

/* ── Avatar ── */
.conv-avatar[b-dttd2no43i] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.online-dot[b-dttd2no43i] {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid white;
}

/* ── Body ── */
.conv-body[b-dttd2no43i] {
    flex: 1;
    min-width: 0;
}

.conv-top[b-dttd2no43i] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.conv-name[b-dttd2no43i] {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time[b-dttd2no43i] {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-preview[b-dttd2no43i] {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-phone[b-dttd2no43i] {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 0.15rem;
}

/* ── Arrow ── */
.conv-arrow[b-dttd2no43i] {
    font-size: 1.4rem;
    color: #d1d5db;
    flex-shrink: 0;
    font-weight: 300;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .sms-page[b-dttd2no43i] {
        max-width: 100%;
    }

    .conversation-item[b-dttd2no43i] {
        padding: 0.875rem 1rem;
    }

    .conv-avatar[b-dttd2no43i] {
        width: 42px;
        height: 42px;
    }
}
/* /Pages/StatutIntervention/NewStatutIntervention.razor.rz.scp.css */
/* Loading */
.loading-state[b-7u8qp3udmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-7u8qp3udmc] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-7u8qp3udmc 0.8s linear infinite;
}

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

/* Page */
.new-statut-page[b-7u8qp3udmc] {
    max-width: 800px;
}

/* Header */
.page-header[b-7u8qp3udmc] {
    margin-bottom: 2rem;
}

.back-link[b-7u8qp3udmc] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-7u8qp3udmc] {
        color: var(--primary);
    }

.back-arrow[b-7u8qp3udmc] {
    font-size: 1.1rem;
}

.page-header h1[b-7u8qp3udmc] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-7u8qp3udmc] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-7u8qp3udmc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-7u8qp3udmc] {
    font-size: 1.1rem;
}

.alert-error[b-7u8qp3udmc] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-7u8qp3udmc] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-7u8qp3udmc] {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-7u8qp3udmc] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-7u8qp3udmc] {
        margin-bottom: 0;
    }

.section-header[b-7u8qp3udmc] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-7u8qp3udmc] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-7u8qp3udmc] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-7u8qp3udmc] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-7u8qp3udmc] {
        margin-bottom: 0;
    }

.form-label[b-7u8qp3udmc] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-7u8qp3udmc]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-7u8qp3udmc] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-7u8qp3udmc] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-7u8qp3udmc]::placeholder {
        color: #c0c4cc;
    }

.form-hint[b-7u8qp3udmc] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.validation-message[b-7u8qp3udmc] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Preview card */
.preview-card .section-header[b-7u8qp3udmc] {
    margin-bottom: 1rem;
}

.preview-body[b-7u8qp3udmc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem 0 0.5rem;
    gap: 0.75rem;
}

.preview-icon[b-7u8qp3udmc] {
    font-size: 2.5rem;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.preview-name[b-7u8qp3udmc] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    word-break: break-word;
}

.preview-badge[b-7u8qp3udmc] {
    min-height: 1.5rem;
}

.statut-preview-badge[b-7u8qp3udmc] {
    display: inline-block;
    padding: 0.3rem 0.9rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    background: #ede9ff;
    color: var(--primary);
}

/* Actions */
.form-actions[b-7u8qp3udmc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-7u8qp3udmc] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-7u8qp3udmc] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-7u8qp3udmc] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-7u8qp3udmc] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-7u8qp3udmc] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-7u8qp3udmc] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-7u8qp3udmc 0.8s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-7u8qp3udmc] {
        grid-template-columns: 1fr;
    }

    .form-main[b-7u8qp3udmc] {
        order: 1;
    }

    .form-sidebar[b-7u8qp3udmc] {
        order: 2;
    }
}
/* /Pages/StatutIntervention/StatutsIntervention.razor.rz.scp.css */
.statuts-page[b-5mmlsi3z58] {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.page-header[b-5mmlsi3z58] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-5mmlsi3z58] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-5mmlsi3z58] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-5mmlsi3z58] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Alerts */
.alert[b-5mmlsi3z58] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-weight: 500;
    position: relative;
}

.alert-icon[b-5mmlsi3z58] {
    font-size: 1rem;
}

.alert-success[b-5mmlsi3z58] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-error[b-5mmlsi3z58] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-close[b-5mmlsi3z58] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    opacity: 0.6;
}

    .alert-close:hover[b-5mmlsi3z58] {
        opacity: 1;
    }

/* Filters */
.filters-bar[b-5mmlsi3z58] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-5mmlsi3z58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-5mmlsi3z58] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .search-box input[b-5mmlsi3z58] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-5mmlsi3z58] {
    font-size: 0.9rem;
}

/* Loading */
.loading-state[b-5mmlsi3z58] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-5mmlsi3z58] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-5mmlsi3z58 0.8s linear infinite;
}

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

/* Empty state */
.empty-state[b-5mmlsi3z58] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-5mmlsi3z58] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-5mmlsi3z58] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-5mmlsi3z58] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

/* Grid */
.items-grid[b-5mmlsi3z58] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

/* Card */
.item-card[b-5mmlsi3z58] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    border: 2px solid transparent;
    transition: all 0.25s ease;
}

    .item-card:hover[b-5mmlsi3z58] {
        box-shadow: 0 8px 24px rgba(111, 77, 230, 0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

.item-icon[b-5mmlsi3z58] {
    font-size: 2rem;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(111,77,230,0.12), rgba(111,77,230,0.05));
    display: flex;
    align-items: center;
    justify-content: center;
}

.item-name[b-5mmlsi3z58] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-main);
    text-align: center;
    word-break: break-word;
}

/* Actions */
.item-actions[b-5mmlsi3z58] {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-5mmlsi3z58] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-5mmlsi3z58] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-5mmlsi3z58] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-5mmlsi3z58] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-5mmlsi3z58] {
        background: #fecaca;
        transform: scale(1.02);
    }

/* Responsive */
@media (max-width: 640px) {
    .items-grid[b-5mmlsi3z58] {
        grid-template-columns: 1fr !important;
    }

    .item-actions[b-5mmlsi3z58] {
        flex-direction: column;
    }

    .btn-action[b-5mmlsi3z58] {
        width: 100%;
    }

    .page-header[b-5mmlsi3z58] {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* /Pages/Utilisateur/NewUtilisateur.razor.rz.scp.css */
/* ============================================================
   NewClient.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-hzju5lqbhl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-hzju5lqbhl] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-hzju5lqbhl 0.8s linear infinite;
}

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

/* Page */
.new-client-page[b-hzju5lqbhl] {
    max-width: 1000px;
}

/* Header */
.page-header[b-hzju5lqbhl] {
    margin-bottom: 2rem;
}

.back-link[b-hzju5lqbhl] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

    .back-link:hover[b-hzju5lqbhl] {
        color: var(--primary);
    }

.back-arrow[b-hzju5lqbhl] {
    font-size: 1.1rem;
}

.page-header h1[b-hzju5lqbhl] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 0.4rem;
}

.page-subtitle[b-hzju5lqbhl] {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0;
}

/* Alerts */
.alert[b-hzju5lqbhl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.alert-icon[b-hzju5lqbhl] {
    font-size: 1.1rem;
}

.alert-error[b-hzju5lqbhl] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-success[b-hzju5lqbhl] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

/* Form layout */
.form-layout[b-hzju5lqbhl] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    align-items: start;
}

/* Form sections */
.form-section[b-hzju5lqbhl] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 1.5rem;
}

    .form-section:last-child[b-hzju5lqbhl] {
        margin-bottom: 0;
    }

.section-header[b-hzju5lqbhl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

.section-icon[b-hzju5lqbhl] {
    font-size: 1.2rem;
    width: 2.5rem;
    height: 2.5rem;
    background: linear-gradient(135deg, rgba(111,77,230,0.1), rgba(111,77,230,0.05));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-header h2[b-hzju5lqbhl] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

/* Form elements */
.form-group[b-hzju5lqbhl] {
    margin-bottom: 1.25rem;
}

    .form-group:last-child[b-hzju5lqbhl] {
        margin-bottom: 0;
    }

.form-label[b-hzju5lqbhl] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

    .form-label.required[b-hzju5lqbhl]::after {
        content: ' *';
        color: #dc2626;
    }

.form-input[b-hzju5lqbhl] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text-main);
    background: #fafafa;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

    .form-input:focus[b-hzju5lqbhl] {
        outline: none;
        border-color: var(--primary);
        background: white;
        box-shadow: 0 0 0 3px rgba(111,77,230,0.1);
    }

    .form-input[b-hzju5lqbhl]::placeholder {
        color: #c0c4cc;
    }

/* Input with icon */
.input-with-icon[b-hzju5lqbhl] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-hzju5lqbhl] {
    position: absolute;
    left: 0.9rem;
    font-size: 0.9rem;
    color: #9ca3af;
    pointer-events: none;
    z-index: 2;
}

/* IMPORTANT */
.form-input.with-icon[b-hzju5lqbhl] {
    padding-left: 2.6rem;
    background: #fafafa;
    position: relative;
    z-index: 1;
}

/* Preview card */
.preview-card .section-header[b-hzju5lqbhl] {
    margin-bottom: 1rem;
}

.preview-body[b-hzju5lqbhl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.5rem 0;
}

.preview-avatar[b-hzju5lqbhl] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 12px rgba(111,77,230,0.3);
}

.preview-name[b-hzju5lqbhl] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}

.preview-details[b-hzju5lqbhl] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    text-align: left;
}

.preview-item[b-hzju5lqbhl] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.3rem 0.5rem;
    background: #f9fafb;
    border-radius: 6px;
    word-break: break-word;
}

/* Status toggle */
.status-toggle[b-hzju5lqbhl] {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 10px;
    border: 2px solid #f3f4f6;
    transition: all 0.2s ease;
}

    .status-toggle:hover[b-hzju5lqbhl] {
        border-color: #e5e7eb;
        background: #fafafa;
    }

    .status-toggle input[type="checkbox"][b-hzju5lqbhl] {
        appearance: none;
        -webkit-appearance: none;
        width: 44px;
        height: 24px;
        background: #e5e7eb;
        border-radius: 12px;
        cursor: pointer;
        transition: background 0.25s ease;
        position: relative;
        flex-shrink: 0;
    }

        .status-toggle input[type="checkbox"]:checked[b-hzju5lqbhl] {
            background: var(--primary);
        }

        .status-toggle input[type="checkbox"][b-hzju5lqbhl]::after {
            content: '';
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: left 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .status-toggle input[type="checkbox"]:checked[b-hzju5lqbhl]::after {
            left: 23px;
        }

.status-display[b-hzju5lqbhl] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot[b-hzju5lqbhl] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.active[b-hzju5lqbhl] {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
    }

    .status-dot.inactive[b-hzju5lqbhl] {
        background: #9ca3af;
    }

.status-label[b-hzju5lqbhl] {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.status-hint[b-hzju5lqbhl] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

/* Actions */
.form-actions[b-hzju5lqbhl] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.btn-submit[b-hzju5lqbhl] {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

    .btn-submit:hover:not(:disabled)[b-hzju5lqbhl] {
        background: var(--primary-dark);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111,77,230,0.35);
    }

    .btn-submit:disabled[b-hzju5lqbhl] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.btn-cancel[b-hzju5lqbhl] {
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover[b-hzju5lqbhl] {
        background: #f9fafb;
        border-color: #d1d5db;
        color: var(--text-main);
    }

.btn-spinner[b-hzju5lqbhl] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-hzju5lqbhl 0.8s linear infinite;
}

/* Validation */
.validation-message[b-hzju5lqbhl] {
    color: #dc2626;
    font-size: 0.82rem;
    margin-top: 0.3rem;
}

/* Responsive */
@media (max-width: 768px) {
    .form-layout[b-hzju5lqbhl] {
        grid-template-columns: 1fr;
    }

    .form-main[b-hzju5lqbhl] {
        order: 1;
    }

    .form-sidebar[b-hzju5lqbhl] {
        order: 2;
    }
}

.password-rules[b-hzju5lqbhl] {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

    .password-rules p[b-hzju5lqbhl] {
        margin: 0;
        font-size: 0.85rem;
    }

.valid[b-hzju5lqbhl] {
    color: green;
}

.invalid[b-hzju5lqbhl] {
    color: crimson;
}
/* /Pages/Utilisateur/UserInfo.razor.rz.scp.css */
/* Page */
.user-page[b-eiqk294fvk] {
    max-width: 900px;
    margin: 0 auto;
}

/* Card */
.user-card[b-eiqk294fvk] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header */
.user-header[b-eiqk294fvk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

.user-avatar[b-eiqk294fvk] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-info h3[b-eiqk294fvk] {
    margin: 0;
    font-size: 1.2rem;
}

.user-email[b-eiqk294fvk] {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Form */
.form-grid[b-eiqk294fvk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.form-group[b-eiqk294fvk] {
    display: flex;
    flex-direction: column;
}

.form-label[b-eiqk294fvk] {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Actions */
.form-actions[b-eiqk294fvk] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* Danger button */
.ui-button.danger[b-eiqk294fvk] {
    background: #fee2e2;
    color: #991b1b;
}

    .ui-button.danger:hover[b-eiqk294fvk] {
        background: #fecaca;
    }

/* Responsive */
@media (max-width: 768px) {
    .form-grid[b-eiqk294fvk] {
        grid-template-columns: 1fr;
    }
}


.role-badge[b-eiqk294fvk] {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}

    .role-badge.admin[b-eiqk294fvk] {
        background: rgba(239, 68, 68, 0.15);
        color: #dc2626;
    }

    .role-badge.superadmin[b-eiqk294fvk] {
        background: rgba(0,0,0,0.15);
        color: black;
    }
/* /Pages/Utilisateur/Users.razor.rz.scp.css */
/* ============================================================
   Clients.razor.css
   ============================================================ */

/* Loading */
.loading-state[b-kin5g5lp62] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--text-muted);
}

.spinner[b-kin5g5lp62] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin-b-kin5g5lp62 0.8s linear infinite;
}

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

/* Page */
.clients-page[b-kin5g5lp62] {
    max-width: 1400px;
}

/* Header */
.page-header[b-kin5g5lp62] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-left[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header h1[b-kin5g5lp62] {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.count-badge[b-kin5g5lp62] {
    background: #ede9ff;
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Alerts */
.alert[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
    font-weight: 500;
    position: relative;
}

.alert-icon[b-kin5g5lp62] {
    font-size: 1rem;
}

.alert-success[b-kin5g5lp62] {
    background: #d1fae5;
    color: #065f46;
    border-left: 4px solid #10b981;
}

.alert-error[b-kin5g5lp62] {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #dc2626;
}

.alert-close[b-kin5g5lp62] {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.25rem;
}

    .alert-close:hover[b-kin5g5lp62] {
        opacity: 1;
    }

/* Filters bar */
.filters-bar[b-kin5g5lp62] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.6rem 0.9rem;
    flex: 1;
    min-width: 250px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s;
}

    .search-box:focus-within[b-kin5g5lp62] {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(111, 77, 230, 0.1);
    }

    .search-box input[b-kin5g5lp62] {
        border: none;
        outline: none;
        flex: 1;
        font-size: 0.9rem;
        color: var(--text-main);
        background: transparent;
    }

.search-icon[b-kin5g5lp62] {
    font-size: 0.9rem;
}

/* Toggle filter */
.filter-toggle[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    background: var(--surface);
    border: 1.5px solid #e5e7eb;
    border-radius: var(--radius);
    padding: 0.55rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    user-select: none;
    transition: border-color 0.2s;
}

    .filter-toggle:hover[b-kin5g5lp62] {
        border-color: var(--primary);
    }

    .filter-toggle input[type="checkbox"][b-kin5g5lp62] {
        appearance: none;
        -webkit-appearance: none;
        width: 36px;
        height: 20px;
        background: #e5e7eb;
        border-radius: 10px;
        cursor: pointer;
        transition: background 0.25s ease;
        position: relative;
        flex-shrink: 0;
    }

        .filter-toggle input[type="checkbox"]:checked[b-kin5g5lp62] {
            background: var(--primary);
        }

        .filter-toggle input[type="checkbox"][b-kin5g5lp62]::after {
            content: '';
            position: absolute;
            width: 14px;
            height: 14px;
            background: white;
            border-radius: 50%;
            top: 3px;
            left: 3px;
            transition: left 0.2s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }

        .filter-toggle input[type="checkbox"]:checked[b-kin5g5lp62]::after {
            left: 19px;
        }

.toggle-label[b-kin5g5lp62] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-main);
}

.btn-ghost[b-kin5g5lp62] {
    background: transparent;
    color: var(--text-muted);
    border: 1.5px solid #e5e7eb;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}

    .btn-ghost:hover[b-kin5g5lp62] {
        background: #f9fafb;
        color: var(--text-main);
        border-color: #d1d5db;
    }

/* Empty state */
.empty-state[b-kin5g5lp62] {
    text-align: center;
    padding: 5rem 2rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.empty-icon[b-kin5g5lp62] {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.5rem;
}

.empty-state h3[b-kin5g5lp62] {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.empty-state p[b-kin5g5lp62] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

/* Clients grid */
.clients-grid[b-kin5g5lp62] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

/* Client card */
.client-card[b-kin5g5lp62] {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: all 0.25s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .client-card:hover[b-kin5g5lp62] {
        box-shadow: 0 8px 24px rgba(111, 77, 230, 0.12);
        transform: translateY(-3px);
        border-color: var(--primary);
    }

.inactive-card[b-kin5g5lp62] {
    opacity: 0.6;
}

/* Card top */
.card-top[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.client-avatar[b-kin5g5lp62] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(111, 77, 230, 0.3);
}

.client-identity[b-kin5g5lp62] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

    .client-identity h3[b-kin5g5lp62] {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: var(--text-main);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Badges */
.badge[b-kin5g5lp62] {
    display: inline-block;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.badge-active[b-kin5g5lp62] {
    background: #d1fae5;
    color: #065f46;
}

.badge-inactive[b-kin5g5lp62] {
    background: #fee2e2;
    color: #991b1b;
}

/* Client details */
.client-details[b-kin5g5lp62] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}

.detail-item[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.detail-icon[b-kin5g5lp62] {
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.detail-ellipsis[b-kin5g5lp62] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card actions */
.card-actions[b-kin5g5lp62] {
    display: flex;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid #f3f4f6;
}

.btn-action[b-kin5g5lp62] {
    flex: 1;
    padding: 0.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-edit[b-kin5g5lp62] {
    background: var(--primary);
    color: white;
}

    .btn-edit:hover[b-kin5g5lp62] {
        background: var(--primary-dark);
        transform: scale(1.02);
    }

.btn-delete[b-kin5g5lp62] {
    background: #fee2e2;
    color: #991b1b;
}

    .btn-delete:hover[b-kin5g5lp62] {
        background: #fecaca;
        transform: scale(1.02);
    }





/* Status toggle in modal */

.status-display[b-kin5g5lp62] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.status-dot[b-kin5g5lp62] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

    .status-dot.active[b-kin5g5lp62] {
        background: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    .status-dot.inactive[b-kin5g5lp62] {
        background: #9ca3af;
    }

.status-label[b-kin5g5lp62] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}


/* Delete confirm */
.delete-confirm[b-kin5g5lp62] {
    text-align: center;
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.delete-icon[b-kin5g5lp62] {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.delete-confirm p[b-kin5g5lp62] {
    margin: 0;
    color: var(--text-main);
    font-size: 0.95rem;
}

.warning-text[b-kin5g5lp62] {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 500;
    margin-top: 0.25rem !important;
}

/* Responsive */
@media (max-width: 768px) {
    .clients-grid[b-kin5g5lp62] {
        grid-template-columns: 1fr;
    }

    .details-grid[b-kin5g5lp62] {
        grid-template-columns: 1fr;
    }

    .detail-row-full[b-kin5g5lp62] {
        grid-column: 1;
    }

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

.btn-repair[b-kin5g5lp62] {
    background: linear-gradient(135deg, #4caf50, #2e7d32);
    color: white;
}

    .btn-repair:hover[b-kin5g5lp62] {
        background: linear-gradient(135deg, #43a047, #1b5e20);
    }

.client-avatar[b-kin5g5lp62] {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
}

.pagination[b-kin5g5lp62] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

    .pagination button[b-kin5g5lp62] {
        padding: 0.5rem 1rem;
        border-radius: 8px;
        border: none;
        background: var(--primary);
        color: white;
        cursor: pointer;
    }

        .pagination button:disabled[b-kin5g5lp62] {
            opacity: 0.5;
            cursor: default;
        }