/* /Components/Account/Pages/Login.razor.rz.scp.css */
.login-page[b-q60bbsnz5m] {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(24px, 6vh, 64px) clamp(18px, 5vw, 72px);
    background: #fff;
    color: var(--iot-ink);
    font-family: var(--iot-font);
}

.login-shell[b-q60bbsnz5m] {
    width: min(100%, 1320px);
    min-height: min(760px, calc(100dvh - 80px));
    display: grid;
    grid-template-columns: minmax(0, 1.28fr) minmax(430px, .96fr);
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--iot-border);
    border-radius: 28px;
    box-shadow: var(--iot-shadow-lg);
}

.login-brand-panel[b-q60bbsnz5m] {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background: #edf7ff url('/images/iotlynk-login-industrial.jpg') center / cover no-repeat;
}

.login-brand-overlay[b-q60bbsnz5m] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(245, 251, 255, .88) 0%, rgba(239, 248, 255, .68) 48%, rgba(236, 247, 255, .22) 100%);
}

.login-brand-content[b-q60bbsnz5m] {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(54px, 5vw, 72px);
}

.login-brand-logo[b-q60bbsnz5m] {
    display: block;
    width: min(72%, 420px);
    max-height: 130px;
    object-fit: contain;
    object-position: left center;
}

.login-service-status[b-q60bbsnz5m] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    color: var(--iot-blue);
    font-size: 18px;
    font-weight: 650;
}

.login-service-status span[b-q60bbsnz5m] {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--iot-blue);
    box-shadow: 0 0 0 5px rgba(0, 80, 152, .11);
}

.login-brand-copy[b-q60bbsnz5m] {
    margin-top: 34px;
    max-width: 660px;
}

.login-brand-copy h1[b-q60bbsnz5m] {
    margin: 0 0 12px;
    color: var(--iot-navy);
    font-size: clamp(36px, 2.8vw, 40px);
    line-height: 1.08;
    letter-spacing: -.045em;
}

.login-brand-copy h1 span[b-q60bbsnz5m] { display: block; white-space: nowrap; }

.login-brand-copy p[b-q60bbsnz5m] {
    margin: 0;
    color: #4d6787;
    font-size: clamp(18px, 1.6vw, 23px);
    line-height: 1.45;
}

.login-form-panel[b-q60bbsnz5m] {
    display: grid;
    place-items: center;
    padding: clamp(44px, 6vw, 86px);
    background: #fff;
}

.login-form-container[b-q60bbsnz5m] {
    width: min(100%, 470px);
}

.login-header[b-q60bbsnz5m] {
    margin-bottom: 34px;
    text-align: center;
}

.login-header h2[b-q60bbsnz5m] {
    margin: 0;
    color: var(--iot-navy);
    font-size: clamp(38px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.login-header p[b-q60bbsnz5m] {
    margin: 10px 0 0;
    color: var(--iot-muted);
    font-size: 17px;
}

.form-field[b-q60bbsnz5m] { margin-top: 20px; }
.form-field label[b-q60bbsnz5m] {
    display: block;
    margin-bottom: 9px;
    color: var(--iot-navy);
    font-size: 15px;
    font-weight: 700;
}

.input-container[b-q60bbsnz5m] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 60px;
    border: 1px solid #bed1e4;
    border-radius: var(--iot-radius-sm);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.input-container:focus-within[b-q60bbsnz5m] {
    border-color: var(--iot-blue);
    box-shadow: 0 0 0 4px rgba(0, 80, 152, .11);
}

.input-container > svg[b-q60bbsnz5m] {
    position: absolute;
    left: 17px;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #55749a;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

[b-q60bbsnz5m] .login-input {
    width: 100%;
    min-height: 58px;
    border: 0;
    border-radius: var(--iot-radius-sm);
    outline: 0;
    padding: 14px 56px;
    background: transparent;
    color: var(--iot-ink);
    font: inherit;
    font-size: 16px;
}

[b-q60bbsnz5m] .login-input::placeholder { color: #8ca1ba; }

.password-toggle[b-q60bbsnz5m] {
    position: absolute;
    right: 7px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #55749a;
    cursor: pointer;
}

.password-toggle svg[b-q60bbsnz5m] {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.password-toggle .eye-closed[b-q60bbsnz5m] { display: none; }
.password-toggle[aria-pressed='true'] .eye-open[b-q60bbsnz5m] { display: none; }
.password-toggle[aria-pressed='true'] .eye-closed[b-q60bbsnz5m] { display: block; }

.login-options[b-q60bbsnz5m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}

.remember-label[b-q60bbsnz5m] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #405d80;
    font-size: 14px;
    cursor: pointer;
}

[b-q60bbsnz5m] .remember-checkbox {
    width: 22px;
    height: 22px;
    accent-color: var(--iot-blue);
}

.forgot-password-link[b-q60bbsnz5m] {
    color: #0065ce;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.login-button[b-q60bbsnz5m] {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 28px;
    border: 0;
    border-radius: var(--iot-radius-sm);
    background: linear-gradient(100deg, #005098, #006bc9);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 80, 152, .2);
    font: inherit;
    font-size: 19px;
    font-weight: 750;
    cursor: pointer;
}

.login-button svg[b-q60bbsnz5m] {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.login-button:disabled[b-q60bbsnz5m] { opacity: .66; cursor: wait; }

.security-note[b-q60bbsnz5m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #dce6f0;
    color: #587397;
    font-size: 14px;
}

.security-note svg[b-q60bbsnz5m] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linejoin: round;
}

.login-error-message[b-q60bbsnz5m] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid #efc9c6;
    border-radius: var(--iot-radius-sm);
    background: #fff2f1;
    color: #a12f2b;
    line-height: 1.45;
}

.login-error-message > span[b-q60bbsnz5m] {
    display: grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #c6403b;
    color: #fff;
    font-weight: 800;
}

[b-q60bbsnz5m] .validation-message {
    display: block;
    margin: 7px 2px 0;
    color: var(--iot-danger);
    font-size: 13px;
}

.login-button:hover[b-q60bbsnz5m] { filter: brightness(1.04); }
.forgot-password-link:hover[b-q60bbsnz5m] { text-decoration: underline; }
.password-toggle:focus-visible[b-q60bbsnz5m],
.login-button:focus-visible[b-q60bbsnz5m],
.forgot-password-link:focus-visible[b-q60bbsnz5m],
.remember-label:has(input:focus-visible)[b-q60bbsnz5m] {
    outline: 3px solid rgba(32, 167, 223, .4);
    outline-offset: 3px;
}

@media (max-width: 980px) {
    .login-page[b-q60bbsnz5m] { padding: 24px 16px; place-items: start center; }
    .login-shell[b-q60bbsnz5m] { width: min(100%, 680px); min-height: auto; grid-template-columns: 1fr; }
    .login-brand-panel[b-q60bbsnz5m] { min-height: 310px; }
    .login-brand-content[b-q60bbsnz5m] { align-items: center; justify-content: center; padding: 40px 28px; text-align: center; }
    .login-brand-logo[b-q60bbsnz5m] { width: min(82%, 370px); object-position: center; }
    .login-brand-copy[b-q60bbsnz5m] { display: none; }
    .login-service-status[b-q60bbsnz5m] { margin-top: 17px; }
    .login-form-panel[b-q60bbsnz5m] { padding: 42px clamp(24px, 8vw, 56px) 34px; }
}

@media (max-width: 520px) {
    .login-page[b-q60bbsnz5m] { padding: 14px; }
    .login-shell[b-q60bbsnz5m] { border-radius: 23px; }
    .login-brand-panel[b-q60bbsnz5m] { min-height: 230px; }
    .login-brand-content[b-q60bbsnz5m] { padding: 28px 20px; }
    .login-brand-logo[b-q60bbsnz5m] { max-height: 90px; }
    .login-service-status[b-q60bbsnz5m] { font-size: 14px; }
    .login-form-panel[b-q60bbsnz5m] { padding: 30px 22px 24px; }
    .login-header[b-q60bbsnz5m] { margin-bottom: 24px; }
    .login-header h2[b-q60bbsnz5m] { font-size: 36px; }
    .login-header p[b-q60bbsnz5m] { font-size: 15px; }
    .login-options[b-q60bbsnz5m] { align-items: flex-start; }
    .remember-label[b-q60bbsnz5m], .forgot-password-link[b-q60bbsnz5m] { font-size: 13px; }
}

@media (max-height: 760px) and (min-width: 981px) {
    .login-page[b-q60bbsnz5m] { place-items: start center; }
    .login-shell[b-q60bbsnz5m] { min-height: 650px; }
}

@media (prefers-reduced-motion: reduce) {
    .input-container[b-q60bbsnz5m], .login-button[b-q60bbsnz5m] { transition: none; }
}
/* /Components/Account/Pages/Manage/EnableAuthenticator.razor.rz.scp.css */
.info-message[b-7r2552l8fz] {
    justify-content: start;
    margin: 0.625rem 0 0.625rem 0;
}
/* /Components/Account/Pages/Manage/ExternalLogins.razor.rz.scp.css */
.current-logins[b-ak4e18juxi] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.current-logins-item[b-ak4e18juxi] {
    display: flex;
    gap: 0.625rem;
}
/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
.identity-shell[b-cgdwgwvh3j] {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: clamp(8px, 2vw, 24px);
}

.identity-shell[b-cgdwgwvh3j]  .main-content,
.identity-shell[b-cgdwgwvh3j]  .manage-layout {
    width: 100%;
    min-height: 0;
    display: block;
    margin: 0;
}

.identity-shell[b-cgdwgwvh3j]  .block-content,
.identity-shell[b-cgdwgwvh3j]  .manage-layout > .block-content {
    width: min(100%, 680px);
    margin: 22px auto 0;
    padding: clamp(22px, 4vw, 34px);
    border: 1px solid var(--iot-border);
    border-radius: var(--iot-radius);
    background: var(--iot-surface);
    box-shadow: var(--iot-shadow-sm);
}

.identity-shell[b-cgdwgwvh3j]  .title {
    margin-bottom: 22px;
}

.identity-shell[b-cgdwgwvh3j]  .title-header-text {
    color: var(--iot-ink);
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.identity-shell[b-cgdwgwvh3j]  .title-content-text,
.identity-shell[b-cgdwgwvh3j]  .title-content-text-secondary {
    margin-top: 8px;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.55;
}

.identity-shell[b-cgdwgwvh3j]  .links-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px;
    color: var(--iot-muted);
    font-size: 13px;
}

.identity-shell[b-cgdwgwvh3j]  .dxbl-fl,
.identity-shell[b-cgdwgwvh3j]  form { width: 100%; }

.identity-shell[b-cgdwgwvh3j]  .dxbl-btn { min-height: 44px; border-radius: var(--iot-radius-sm); }
.identity-shell[b-cgdwgwvh3j]  .text-danger { color: var(--iot-danger) !important; }

.identity-shell[b-cgdwgwvh3j]  .manage-layout > .title {
    margin: 0 0 18px;
    padding: 4px 2px;
}

.identity-shell[b-cgdwgwvh3j]  .dxbl-tabs { margin-bottom: 18px; overflow-x: auto; }
.identity-shell[b-cgdwgwvh3j]  .dxbl-tabs-nav { min-width: max-content; }

@media (max-width: 600px) {
    .identity-shell[b-cgdwgwvh3j] { padding: 0; }
    .identity-shell[b-cgdwgwvh3j]  .block-content,
    .identity-shell[b-cgdwgwvh3j]  .manage-layout > .block-content { padding: 20px 16px; border-radius: 14px; }
}
/* /Components/Account/Shared/ExternalLoginPicker.razor.rz.scp.css */
.external-logins[b-xat3bjq079] {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 500px) {
    .external-logins[b-xat3bjq079] {
        flex-direction: column;
    }
}
/* /Components/Account/Shared/ShowRecoveryCodes.razor.rz.scp.css */
.codes[b-zxa8a3hmqx] {
    margin: 0.625rem 0 0.625rem 0;
}
/* /Components/Layout/Drawer.razor.rz.scp.css */
.drawer-container[b-jzqtv7y53a] {
    height: 100%;
}

.navigation-drawer-shading[b-jzqtv7y53a] {
    height: 100%;
    position: absolute;
    transition: ease 300ms;
    transition-property: opacity, visibility;
    visibility: visible;
    width: 100%;
    z-index: 99;
    background-color: var(--dxds-color-surface-backdrop-default-rest);
}

.navigation-drawer.mobile.panel-closed .navigation-drawer-shading[b-jzqtv7y53a] {
    opacity: 0;
    visibility: hidden;
}

[b-jzqtv7y53a] .navigation-drawer > .dxbl-drawer-panel {
    display: flex;
}

[b-jzqtv7y53a] .navigation-drawer.mobile > .dxbl-drawer-panel {
    display: none;
}

.navigation-drawer-shading[b-jzqtv7y53a] {
    display: none;
}

[b-jzqtv7y53a] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
    display: none;
}

@media (max-width: 768px) {
    [b-jzqtv7y53a] .navigation-drawer > .dxbl-drawer-panel {
        display: none;
    }

    [b-jzqtv7y53a] .navigation-drawer.mobile > .dxbl-drawer-panel {
        display: flex;
    }

    .navigation-drawer-shading[b-jzqtv7y53a] {
        display: block;
    }

    [b-jzqtv7y53a] .panel-open:not(.mobile) .nav-buttons-container .menu-button {
        display: flex;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================
   IOTLYNK
   MAIN LAYOUT
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

.iot-shell[b-t54u10gfbq] {
    --sidebar-bg: #102B4E;
    --sidebar-dark: #0B213C;
    --primary: #005098;
    --primary-dark: #00447F;
    --background: #F3F6FA;
    --surface: #ffffff;
    --border: #DCE7F1;
    --text: #17314F;
    --text-secondary: #607895;
    height: 100%;
    min-height: 100vh;
}


/* ============================================================
   DRAWER
   ============================================================ */

[b-t54u10gfbq] .navigation-drawer {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0;
    --dxbl-drawer-panel-footer-bg: transparent;
    --dxbl-drawer-panel-header-bg: transparent;
    --dxbl-drawer-separator-border-width: 0;
    height: 100vh;
}


    [b-t54u10gfbq] .navigation-drawer > .dxbl-drawer-panel {
        background: linear-gradient( 180deg, #102B4E 0%, #0E2949 55%, #0B213C 100% ) !important;
        border-right: none !important;
        box-shadow: 3px 0 15px rgba(15, 27, 47, 0.07);
    }


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

.sidebar-header[b-t54u10gfbq] {
    width: 100%;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 18px 0 21px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}


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

[b-t54u10gfbq] .brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    color: inherit !important;
    text-decoration: none !important;
}


    [b-t54u10gfbq] .brand-link:hover,
    [b-t54u10gfbq] .brand-link:visited,
    [b-t54u10gfbq] .brand-link:focus {
        color: inherit !important;
        text-decoration: none !important;
    }


.brand-zone[b-t54u10gfbq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}


.brand-logo[b-t54u10gfbq] {
    display: block;
    width: 150px;
    height: 42px;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
    overflow: visible;
}


.brand-subtitle[b-t54u10gfbq] {
    padding-left: 2px;
    color: rgba(255, 255, 255, 0.50);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: 0.35px;
}


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

[b-t54u10gfbq] .sidebar-toggle-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit !important;
    text-decoration: none !important;
}


[b-t54u10gfbq] .sidebar-toggle-button {
    width: 35px !important;
    height: 35px !important;
    min-width: 35px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 7px !important;
    color: rgba(255, 255, 255, 0.80) !important;
    background: rgba(255, 255, 255, 0.065) !important;
}


    [b-t54u10gfbq] .sidebar-toggle-button:hover {
        color: white !important;
        background: rgba(255, 255, 255, 0.12) !important;
    }


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

.sidebar-body[b-t54u10gfbq] {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 0 18px 0;
}


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

.sidebar-footer[b-t54u10gfbq] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px 17px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}


.assistance-box[b-t54u10gfbq] {
    min-height: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
}


.assistance-icon[b-t54u10gfbq] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background: #20A7DF;
    font-size: 13px;
    font-weight: 700;
}


.assistance-text[b-t54u10gfbq] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}


    .assistance-text strong[b-t54u10gfbq] {
        color: white;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
    }


    .assistance-text span[b-t54u10gfbq] {
        color: rgba(255, 255, 255, 0.56);
        font-size: 9px;
        line-height: 1.2;
    }


/* ============================================================
   MAIN AREA
   ============================================================ */

.main-area[b-t54u10gfbq] {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #F3F6FA;
}


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

.topbar[b-t54u10gfbq] {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 84px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 32px;
    background: #ffffff;
    border-bottom: 1px solid #DCE7F1;
}


/* ============================================================
   BOUTON OUVERTURE DRAWER
   ============================================================ */

[b-t54u10gfbq] .mobile-menu-link {
    display: none !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit !important;
    text-decoration: none !important;
}


/*
   Quand le Drawer a été fermé sur desktop,
   ce bouton réapparaît dans la topbar.
*/

[b-t54u10gfbq] .drawer-reopen-visible {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    text-decoration: none !important;
}


[b-t54u10gfbq] .mobile-menu-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 7px !important;
}


/* ============================================================
   RECHERCHE
   ============================================================ */

.topbar-search[b-t54u10gfbq] {
    width: 570px;
    max-width: 48vw;
    height: 43px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #dde3eb;
    border-radius: 7px;
    background: #f7f8fb;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}


    .topbar-search:focus-within[b-t54u10gfbq] {
        border-color: #8ebce5;
        background: white;
        box-shadow: 0 0 0 3px rgba(25, 118, 201, 0.07);
    }


.search-icon[b-t54u10gfbq] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #607895;
}


    .search-icon svg[b-t54u10gfbq] {
        width: 18px;
        height: 18px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.topbar-search input[b-t54u10gfbq] {
    width: 100%;
    height: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    border: none;
    outline: none;
    color: #17314F;
    background: transparent;
    font-family: inherit;
    font-size: 12px;
}


    .topbar-search input[b-t54u10gfbq]::placeholder {
        color: #9ca6b6;
    }


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

.topbar-actions[b-t54u10gfbq] {
    min-width: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}


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

.topbar-icon-button[b-t54u10gfbq],
.logout-button[b-t54u10gfbq] {
    position: relative;
    width: 38px;
    height: 38px;
    min-width: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 7px;
    color: #607895;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}


    .topbar-icon-button:hover[b-t54u10gfbq],
    .logout-button:hover[b-t54u10gfbq] {
        color: #005098;
        background: #f3f6fa;
    }


    .topbar-icon-button svg[b-t54u10gfbq],
    .logout-button svg[b-t54u10gfbq] {
        width: 18px;
        height: 18px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


.apps-button svg[b-t54u10gfbq] {
    fill: currentColor;
    stroke: none;
}


/* ============================================================
   NOTIFICATION
   ============================================================ */

.notification-dot[b-t54u10gfbq] {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 6px;
    height: 6px;
    border: 2px solid white;
    border-radius: 50%;
    background: #FF6900;
}


/* ============================================================
   SEPARATEUR
   ============================================================ */

.topbar-separator[b-t54u10gfbq] {
    width: 1px;
    height: 36px;
    flex-shrink: 0;
    margin: 0 10px;
    background: #e5e8ee;
}


/* ============================================================
   PROFIL
   ============================================================ */

[b-t54u10gfbq] .user-profile {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    padding: 5px 10px 5px 5px;
    border-radius: 9px;
    color: #17314F !important;
    background: transparent;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}


    [b-t54u10gfbq] .user-profile:hover {
        color: #17314F !important;
        background: #f5f7fa;
        text-decoration: none !important;
    }


    [b-t54u10gfbq] .user-profile:visited,
    [b-t54u10gfbq] .user-profile:focus,
    [b-t54u10gfbq] .user-profile:active {
        color: #17314F !important;
        text-decoration: none !important;
    }


/* ============================================================
   AVATAR
   ============================================================ */

.user-avatar[b-t54u10gfbq] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    background: linear-gradient( 135deg, #005098, #20A7DF );
    box-shadow: 0 2px 5px rgba(25, 118, 201, 0.17);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}


/* ============================================================
   USER INFO
   ============================================================ */

.user-info[b-t54u10gfbq] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
}


    .user-info strong[b-t54u10gfbq] {
        max-width: 170px;
        overflow: hidden;
        color: #17314F;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
    }


    .user-info span[b-t54u10gfbq] {
        max-width: 170px;
        overflow: hidden;
        color: #8b95a7;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 10px;
        line-height: 1.2;
    }


/* ============================================================
   LOGOUT
   ============================================================ */

.logout-form[b-t54u10gfbq] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
}


/* ============================================================
   LOGIN
   ============================================================ */

[b-t54u10gfbq] .login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border-radius: 7px;
    color: white !important;
    background: #005098;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
}


/* ============================================================
   ZONE DE SCROLL PRINCIPALE

   IMPORTANT :
   on n'utilise plus le nom .main-content ici,
   afin de ne pas entrer en conflit avec les pages existantes.
   ============================================================ */

.main-scroll-area[b-t54u10gfbq] {
    flex: 1;
    width: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 38px 42px 38px;
    background: #F3F6FA;
    scrollbar-width: thin;
    scrollbar-color: #c7cfdb transparent;
}


/* ============================================================
   CONTENEUR PAGE
   ============================================================ */

.page-content-container[b-t54u10gfbq] {
    width: 100%;
    max-width: 1480px;
    min-height: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    box-sizing: border-box;
}


    /* ============================================================
   COMPATIBILITE AVEC ANCIENNES PAGES
   ============================================================ */

    .page-content-container[b-t54u10gfbq]  .main-content {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        overflow: visible !important;
    }


    /* ============================================================
   AUTRES CONTENEURS HISTORIQUES
   ============================================================ */

    .page-content-container[b-t54u10gfbq]  .block-content {
        margin-top: 0 !important;
    }


    .page-content-container[b-t54u10gfbq]  .content-wrapper {
        margin-top: 0 !important;
    }


    .page-content-container[b-t54u10gfbq]  .page-wrapper {
        margin-top: 0 !important;
    }


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

.main-scroll-area[b-t54u10gfbq]::-webkit-scrollbar {
    width: 7px;
}


.main-scroll-area[b-t54u10gfbq]::-webkit-scrollbar-track {
    background: transparent;
}


.main-scroll-area[b-t54u10gfbq]::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #c7cfdb;
}


    .main-scroll-area[b-t54u10gfbq]::-webkit-scrollbar-thumb:hover {
        background: #aeb8c7;
    }


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 1100px) {

    .topbar[b-t54u10gfbq] {
        padding: 0 20px;
    }


    .topbar-search[b-t54u10gfbq] {
        width: min(450px, 43vw);
    }


    .user-info[b-t54u10gfbq] {
        display: none;
    }


    .topbar-separator[b-t54u10gfbq] {
        margin: 0 4px;
    }


    [b-t54u10gfbq] .user-profile {
        padding: 4px;
    }


    .main-scroll-area[b-t54u10gfbq] {
        padding: 26px 28px 35px 28px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .main-area[b-t54u10gfbq] {
        height: 100vh;
    }


    .topbar[b-t54u10gfbq] {
        height: 68px;
        gap: 8px;
        padding: 0 12px;
    }


    /*
       Sur mobile le bouton Drawer
       est toujours disponible.
    */

    [b-t54u10gfbq] .mobile-menu-link {
        display: flex !important;
        align-items: center;
        justify-content: center;
        margin-right: 0;
        text-decoration: none !important;
    }


    .topbar-search[b-t54u10gfbq] {
        width: auto;
        max-width: none;
        flex: 1;
        min-width: 0;
        height: 40px;
    }


    .topbar-icon-button[b-t54u10gfbq] {
        display: none;
    }


    .topbar-separator[b-t54u10gfbq] {
        display: none;
    }


    [b-t54u10gfbq] .user-profile {
        padding: 2px;
    }


    .user-avatar[b-t54u10gfbq] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }


    .logout-button[b-t54u10gfbq] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }


    .main-scroll-area[b-t54u10gfbq] {
        padding: 20px 15px 28px 15px;
    }


    .page-content-container[b-t54u10gfbq]  .main-content {
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
}


/* ============================================================
   PETIT MOBILE
   ============================================================ */

@media (max-width: 480px) {

    .topbar[b-t54u10gfbq] {
        gap: 5px;
        padding: 0 8px;
    }


    .topbar-search[b-t54u10gfbq] {
        padding: 0 10px;
    }


        .topbar-search input[b-t54u10gfbq] {
            font-size: 11px;
        }


            .topbar-search input[b-t54u10gfbq]::placeholder {
                font-size: 10px;
            }


    .search-icon[b-t54u10gfbq] {
        width: 16px;
        height: 16px;
        min-width: 16px;
    }


        .search-icon svg[b-t54u10gfbq] {
            width: 16px;
            height: 16px;
        }


    .user-avatar[b-t54u10gfbq] {
        width: 34px;
        height: 34px;
        min-width: 34px;
        font-size: 10px;
    }


    .logout-button[b-t54u10gfbq] {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }


    .main-scroll-area[b-t54u10gfbq] {
        padding: 16px 12px 25px 12px;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ============================================================
   IOTLYNK
   NAVIGATION MENU
   Design inspiré du shell EduLynk
   ============================================================ */


/* ============================================================
   CONTENEUR GLOBAL
   ============================================================ */

.edulynk-style-nav[b-inbxhzkslf] {
    width: 100%;
    box-sizing: border-box;
    padding: 5px 10px 22px 10px;
    color: white;
}


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

.menu-loading[b-inbxhzkslf] {
    padding: 20px 18px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
}


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

.nav-section[b-inbxhzkslf] {
    width: 100%;
}


.nav-section-first[b-inbxhzkslf] {
    margin-top: 1px;
}


/* ============================================================
   TITRES DES SECTIONS
   ============================================================ */

.nav-section-title[b-inbxhzkslf] {
    margin: 25px 13px 9px 13px;
    color: #9DB4CF;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.15px;
    text-transform: uppercase;
    user-select: none;
}


/* ============================================================
   LIEN DU MENU
   ============================================================ */

[b-inbxhzkslf] .nav-item {
    position: relative;
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 13px;
    box-sizing: border-box;
    margin: 1px 0;
    padding: 0 13px;
    border: none;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    font-weight: 400;
    line-height: 1;
    transition: background-color 0.14s ease, color 0.14s ease, transform 0.14s ease;
}


    /* ============================================================
   HOVER
   ============================================================ */

    [b-inbxhzkslf] .nav-item:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.055);
        text-decoration: none;
    }


/* ============================================================
   ACTIF
   Même philosophie qu'EduLynk
   ============================================================ */

[b-inbxhzkslf] .nav-item-active {
    color: #ffffff !important;
    background: #005098 !important;
    font-weight: 600;
}


    [b-inbxhzkslf] .nav-item-active:hover {
        color: #ffffff !important;
        background: #005098 !important;
    }


    /* ============================================================
   PETITE BARRE ACTIVE
   ============================================================ */

    [b-inbxhzkslf] .nav-item-active::before {
        content: "";
        position: absolute;
        top: 9px;
        bottom: 9px;
        left: 0;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: #20A7DF;
    }


/* ============================================================
   ICONES
   ============================================================ */

[b-inbxhzkslf] .nav-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A5BEDA;
    transition: color 0.14s ease;
}


    [b-inbxhzkslf] .nav-icon svg {
        width: 17px;
        height: 17px;
        display: block;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }


/* ============================================================
   ICONE AU SURVOL
   ============================================================ */

[b-inbxhzkslf] .nav-item:hover .nav-icon {
    color: #a9c8f3;
}


/* ============================================================
   ICONE ACTIVE
   ============================================================ */

[b-inbxhzkslf] .nav-item-active .nav-icon {
    color: #b3d3f5;
}


/* ============================================================
   LIBELLE
   ============================================================ */

[b-inbxhzkslf] .nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ============================================================
   BADGE ALARME
   ============================================================ */

[b-inbxhzkslf] .nav-badge {
    min-width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 6px;
    border-radius: 20px;
    color: #ffffff;
    background: #BF3D3D;
    box-shadow: 0 2px 5px rgba(239, 63, 120, 0.22);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}


/* ============================================================
   ESPACEMENT ENTRE GROUPE ACCUEIL ET PREMIERE SECTION
   ============================================================ */

.nav-section-first + .nav-section-title[b-inbxhzkslf] {
    margin-top: 29px;
}


/* ============================================================
   SEPARATEUR OPTIONNEL
   ============================================================ */

.nav-separator[b-inbxhzkslf] {
    width: calc(100% - 26px);
    height: 1px;
    margin: 18px 13px;
    background: rgba(255, 255, 255, 0.07);
}


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

.edulynk-style-nav[b-inbxhzkslf] {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}


    .edulynk-style-nav[b-inbxhzkslf]::-webkit-scrollbar {
        width: 5px;
    }


    .edulynk-style-nav[b-inbxhzkslf]::-webkit-scrollbar-track {
        background: transparent;
    }


    .edulynk-style-nav[b-inbxhzkslf]::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.15);
    }


        .edulynk-style-nav[b-inbxhzkslf]::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.23);
        }


/* ============================================================
   TABLETTE
   ============================================================ */

@media (max-width: 900px) {

    .edulynk-style-nav[b-inbxhzkslf] {
        padding-left: 8px;
        padding-right: 8px;
    }


    [b-inbxhzkslf] .nav-item {
        min-height: 43px;
        padding-left: 12px;
        padding-right: 12px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    .nav-section-title[b-inbxhzkslf] {
        margin-left: 12px;
        margin-right: 12px;
    }


    [b-inbxhzkslf] .nav-item {
        min-height: 44px;
        font-size: 13px;
    }


    [b-inbxhzkslf] .nav-icon {
        width: 19px;
        height: 19px;
        min-width: 19px;
    }


        [b-inbxhzkslf] .nav-icon svg {
            width: 17px;
            height: 17px;
        }
}
/* /Components/Pages/Administration/Alarmes.razor.rz.scp.css */
.alarmes-page[b-tljhoo6r8u] {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 42px 35px;
}


.page-header[b-tljhoo6r8u],
.alarmes-header[b-tljhoo6r8u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.page-label[b-tljhoo6r8u] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-tljhoo6r8u],
.alarmes-header h1[b-tljhoo6r8u] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-tljhoo6r8u],
.alarmes-header p[b-tljhoo6r8u] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-tljhoo6r8u] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-tljhoo6r8u],
.resume-grid[b-tljhoo6r8u] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-tljhoo6r8u],
.resume-card[b-tljhoo6r8u] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-tljhoo6r8u],
.resume-card:hover[b-tljhoo6r8u] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-tljhoo6r8u] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-tljhoo6r8u] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-tljhoo6r8u] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-tljhoo6r8u] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-tljhoo6r8u] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-tljhoo6r8u],
.resume-card > span[b-tljhoo6r8u] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-tljhoo6r8u],
.resume-card > strong[b-tljhoo6r8u] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.resume-card[b-tljhoo6r8u] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.content-card[b-tljhoo6r8u],
.section-card[b-tljhoo6r8u] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-tljhoo6r8u],
.section-header[b-tljhoo6r8u] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-tljhoo6r8u],
.section-header h2[b-tljhoo6r8u] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-tljhoo6r8u],
.section-header p[b-tljhoo6r8u] {
    margin: 3px 0 0;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-tljhoo6r8u] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-tljhoo6r8u],
.grid-container[b-tljhoo6r8u] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid,
.section-card[b-tljhoo6r8u]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid-search-box,
.section-card[b-tljhoo6r8u]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid thead,
.section-card[b-tljhoo6r8u]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid th,
.section-card[b-tljhoo6r8u]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid td,
.section-card[b-tljhoo6r8u]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid tbody tr:hover td,
.section-card[b-tljhoo6r8u]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid .dxbl-pager,
.section-card[b-tljhoo6r8u]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-tljhoo6r8u]  .dxbl-grid .dxbl-btn,
.section-card[b-tljhoo6r8u]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-tljhoo6r8u] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-icon[b-tljhoo6r8u] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-icon.neutral[b-tljhoo6r8u] {
    background: #f2f4f7;
    color: #778293;
}

.entity-info[b-tljhoo6r8u] {
    min-width: 0;
}

.entity-name[b-tljhoo6r8u] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-tljhoo6r8u] {
    max-width: 190px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-tljhoo6r8u] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-badge[b-tljhoo6r8u],
.code-badge[b-tljhoo6r8u],
.telemetry-badge[b-tljhoo6r8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.soft-badge[b-tljhoo6r8u] {
    background: #f2f6fb;
    color: #53657a;
}

.code-badge[b-tljhoo6r8u] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.telemetry-badge[b-tljhoo6r8u] {
    background: #edfafa;
    color: #178b88;
}

.status-badge[b-tljhoo6r8u] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-tljhoo6r8u] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-tljhoo6r8u] {
    background: #f1f3f6;
    color: #818b99;
}

.sensor-name[b-tljhoo6r8u] {
    max-width: 170px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-cell[b-tljhoo6r8u] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-tljhoo6r8u],
    .resume-grid[b-tljhoo6r8u] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-tljhoo6r8u],
    .alarmes-header[b-tljhoo6r8u] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-tljhoo6r8u],
    .resume-grid[b-tljhoo6r8u] {
        grid-template-columns: 1fr;
    }

    .content-card[b-tljhoo6r8u]  .dxbl-grid-search-box,
    .section-card[b-tljhoo6r8u]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


.section-card[b-tljhoo6r8u] {
    margin-bottom: 22px;
}

.alert-success[b-tljhoo6r8u],
.alert-danger[b-tljhoo6r8u] {
    margin-bottom: 18px !important;
    padding: 13px 16px !important;
    border-radius: 10px !important;
    font-size: 11.5px;
}

.texte-danger[b-tljhoo6r8u] {
    color: #d34e59 !important;
}

.texte-warning[b-tljhoo6r8u] {
    color: #d88418 !important;
}

.badge-acquittee[b-tljhoo6r8u],
.badge-non-acquittee[b-tljhoo6r8u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-acquittee[b-tljhoo6r8u] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.badge-non-acquittee[b-tljhoo6r8u] {
    background: #fff3df;
    color: #d88418;
}

.aucune-alarme[b-tljhoo6r8u] {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 35px;
    color: #8995a8;
    text-align: center;
    font-size: 11px;
}

.aucune-alarme-icon[b-tljhoo6r8u] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    border-radius: 13px;
    background: #e9f7ef;
    color: var(--iot-success);
    font-size: 19px;
    font-weight: 800;
}

.aucune-alarme strong[b-tljhoo6r8u] {
    color: var(--iot-ink);
    font-size: 14px;
}

@media (max-width: 768px) {
    .alarmes-page[b-tljhoo6r8u] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Administration/Capteurs.razor.rz.scp.css */
.capteurs-page[b-za4nvvbarq] {
    width: 100%;
    max-width: 1580px;
    margin: 0 auto;
    padding: 42px 35px;
}


.page-header[b-za4nvvbarq],
.alarmes-header[b-za4nvvbarq] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.page-label[b-za4nvvbarq] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-za4nvvbarq],
.alarmes-header h1[b-za4nvvbarq] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-za4nvvbarq],
.alarmes-header p[b-za4nvvbarq] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-za4nvvbarq] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-za4nvvbarq],
.resume-grid[b-za4nvvbarq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-za4nvvbarq],
.resume-card[b-za4nvvbarq] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-za4nvvbarq],
.resume-card:hover[b-za4nvvbarq] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-za4nvvbarq] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-za4nvvbarq] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-za4nvvbarq] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-za4nvvbarq] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-za4nvvbarq] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-za4nvvbarq],
.resume-card > span[b-za4nvvbarq] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-za4nvvbarq],
.resume-card > strong[b-za4nvvbarq] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.resume-card[b-za4nvvbarq] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.content-card[b-za4nvvbarq],
.section-card[b-za4nvvbarq] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-za4nvvbarq],
.section-header[b-za4nvvbarq] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-za4nvvbarq],
.section-header h2[b-za4nvvbarq] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-za4nvvbarq],
.section-header p[b-za4nvvbarq] {
    margin: 3px 0 0;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-za4nvvbarq] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-za4nvvbarq],
.grid-container[b-za4nvvbarq] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-za4nvvbarq]  .dxbl-grid,
.section-card[b-za4nvvbarq]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-za4nvvbarq]  .dxbl-grid-search-box,
.section-card[b-za4nvvbarq]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-za4nvvbarq]  .dxbl-grid thead,
.section-card[b-za4nvvbarq]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-za4nvvbarq]  .dxbl-grid th,
.section-card[b-za4nvvbarq]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-za4nvvbarq]  .dxbl-grid td,
.section-card[b-za4nvvbarq]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-za4nvvbarq]  .dxbl-grid tbody tr:hover td,
.section-card[b-za4nvvbarq]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-za4nvvbarq]  .dxbl-grid .dxbl-pager,
.section-card[b-za4nvvbarq]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-za4nvvbarq]  .dxbl-grid .dxbl-btn,
.section-card[b-za4nvvbarq]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-za4nvvbarq] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-icon[b-za4nvvbarq] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-icon.neutral[b-za4nvvbarq] {
    background: #f2f4f7;
    color: #778293;
}

.entity-info[b-za4nvvbarq] {
    min-width: 0;
}

.entity-name[b-za4nvvbarq] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-za4nvvbarq] {
    max-width: 190px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-za4nvvbarq] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-badge[b-za4nvvbarq],
.code-badge[b-za4nvvbarq],
.telemetry-badge[b-za4nvvbarq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.soft-badge[b-za4nvvbarq] {
    background: #f2f6fb;
    color: #53657a;
}

.code-badge[b-za4nvvbarq] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.telemetry-badge[b-za4nvvbarq] {
    background: #edfafa;
    color: #178b88;
}

.status-badge[b-za4nvvbarq] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-za4nvvbarq] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-za4nvvbarq] {
    background: #f1f3f6;
    color: #818b99;
}

.sensor-name[b-za4nvvbarq] {
    max-width: 170px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-cell[b-za4nvvbarq] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-za4nvvbarq],
    .resume-grid[b-za4nvvbarq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-za4nvvbarq],
    .alarmes-header[b-za4nvvbarq] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-za4nvvbarq],
    .resume-grid[b-za4nvvbarq] {
        grid-template-columns: 1fr;
    }

    .content-card[b-za4nvvbarq]  .dxbl-grid-search-box,
    .section-card[b-za4nvvbarq]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


@media (max-width: 768px) {
    .capteurs-page[b-za4nvvbarq] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Administration/Clients.razor.rz.scp.css */
.clients-page[b-k6kpj6rcah] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 42px 35px;
}


.page-header[b-k6kpj6rcah],
.alarmes-header[b-k6kpj6rcah] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.page-label[b-k6kpj6rcah] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-k6kpj6rcah],
.alarmes-header h1[b-k6kpj6rcah] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-k6kpj6rcah],
.alarmes-header p[b-k6kpj6rcah] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-k6kpj6rcah] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-k6kpj6rcah],
.resume-grid[b-k6kpj6rcah] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-k6kpj6rcah],
.resume-card[b-k6kpj6rcah] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-k6kpj6rcah],
.resume-card:hover[b-k6kpj6rcah] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-k6kpj6rcah] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-k6kpj6rcah] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-k6kpj6rcah] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-k6kpj6rcah] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-k6kpj6rcah] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-k6kpj6rcah],
.resume-card > span[b-k6kpj6rcah] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-k6kpj6rcah],
.resume-card > strong[b-k6kpj6rcah] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.resume-card[b-k6kpj6rcah] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.content-card[b-k6kpj6rcah],
.section-card[b-k6kpj6rcah] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-k6kpj6rcah],
.section-header[b-k6kpj6rcah] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-k6kpj6rcah],
.section-header h2[b-k6kpj6rcah] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-k6kpj6rcah],
.section-header p[b-k6kpj6rcah] {
    margin: 3px 0 0;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-k6kpj6rcah] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-k6kpj6rcah],
.grid-container[b-k6kpj6rcah] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid,
.section-card[b-k6kpj6rcah]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid-search-box,
.section-card[b-k6kpj6rcah]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid thead,
.section-card[b-k6kpj6rcah]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid th,
.section-card[b-k6kpj6rcah]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid td,
.section-card[b-k6kpj6rcah]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid tbody tr:hover td,
.section-card[b-k6kpj6rcah]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid .dxbl-pager,
.section-card[b-k6kpj6rcah]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-k6kpj6rcah]  .dxbl-grid .dxbl-btn,
.section-card[b-k6kpj6rcah]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-k6kpj6rcah] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-icon[b-k6kpj6rcah] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-icon.neutral[b-k6kpj6rcah] {
    background: #f2f4f7;
    color: #778293;
}

.entity-info[b-k6kpj6rcah] {
    min-width: 0;
}

.entity-name[b-k6kpj6rcah] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-k6kpj6rcah] {
    max-width: 190px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-k6kpj6rcah] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-badge[b-k6kpj6rcah],
.code-badge[b-k6kpj6rcah],
.telemetry-badge[b-k6kpj6rcah] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.soft-badge[b-k6kpj6rcah] {
    background: #f2f6fb;
    color: #53657a;
}

.code-badge[b-k6kpj6rcah] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.telemetry-badge[b-k6kpj6rcah] {
    background: #edfafa;
    color: #178b88;
}

.status-badge[b-k6kpj6rcah] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-k6kpj6rcah] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-k6kpj6rcah] {
    background: #f1f3f6;
    color: #818b99;
}

.sensor-name[b-k6kpj6rcah] {
    max-width: 170px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-cell[b-k6kpj6rcah] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-k6kpj6rcah],
    .resume-grid[b-k6kpj6rcah] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-k6kpj6rcah],
    .alarmes-header[b-k6kpj6rcah] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-k6kpj6rcah],
    .resume-grid[b-k6kpj6rcah] {
        grid-template-columns: 1fr;
    }

    .content-card[b-k6kpj6rcah]  .dxbl-grid-search-box,
    .section-card[b-k6kpj6rcah]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


@media (max-width: 768px) {
    .clients-page[b-k6kpj6rcah] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Administration/Equipements.razor.rz.scp.css */
/* =========================================================
   IOTLYNK - EQUIPEMENTS
   DESIGN INSPIRE DU DESIGN SYSTEM EDULYNK
   ========================================================= */


/* =========================================================
   PAGE
   ========================================================= */

.equipements-page[b-iupfu0wl54] {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 42px 35px;
}


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

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

.page-label[b-iupfu0wl54] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-iupfu0wl54] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-iupfu0wl54] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}


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

.alert-error[b-iupfu0wl54] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 14px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 11px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 12px;
}


/* =========================================================
   STATS
   ========================================================= */

.stats-grid[b-iupfu0wl54] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-iupfu0wl54] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32, 43, 61, .025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

    .stat-card:hover[b-iupfu0wl54] {
        transform: translateY(-1px);
        border-color: #dce3ec;
        box-shadow: 0 7px 20px rgba(32, 43, 61, .055);
    }

.stat-icon[b-iupfu0wl54] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 18px;
}

.stat-icon-success[b-iupfu0wl54] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-icon-neutral[b-iupfu0wl54] {
    background: #f2f4f7;
    color: #778293;
}

.stat-icon-client[b-iupfu0wl54] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-label[b-iupfu0wl54] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-iupfu0wl54] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}


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

.content-card[b-iupfu0wl54] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31, 45, 68, .025);
}

.grid-card[b-iupfu0wl54] {
    padding: 0;
}

.grid-toolbar[b-iupfu0wl54] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
}

.grid-title[b-iupfu0wl54] {
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-iupfu0wl54] {
    margin-top: 3px;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-iupfu0wl54] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--iot-muted);
    font-size: 12px;
}


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

.loading-state[b-iupfu0wl54],
.empty-state[b-iupfu0wl54] {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
}

.loading-state[b-iupfu0wl54] {
    gap: 13px;
    color: #8995a8;
    font-size: 11px;
}

.loading-spinner[b-iupfu0wl54] {
    width: 30px;
    height: 30px;
    border: 3px solid #e5eaf0;
    border-top-color: var(--iot-blue);
    border-radius: 50%;
    animation: equipments-spin-b-iupfu0wl54 .75s linear infinite;
}

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

.empty-icon[b-iupfu0wl54] {
    width: 54px;
    height: 54px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 20px;
}

.empty-state h3[b-iupfu0wl54] {
    margin: 0 0 8px;
    color: #202c3d;
    font-size: 15px;
}

.empty-state p[b-iupfu0wl54] {
    margin: 0;
    color: #8995a8;
    font-size: 11px;
}


/* =========================================================
   CONTENEUR GRID
   ========================================================= */

.equipements-grid-container[b-iupfu0wl54] {
    width: 100%;
    overflow-x: auto;
}


/* =========================================================
   DEVEXPRESS GRID
   ========================================================= */

.grid-card[b-iupfu0wl54]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}


/* SEARCH */

.grid-card[b-iupfu0wl54]  .dxbl-grid-search-box {
    width: 310px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}


/* HEADER */

.grid-card[b-iupfu0wl54]  .dxbl-grid thead {
    background: #f8fafc;
}

.grid-card[b-iupfu0wl54]  .dxbl-grid th {
    height: 49px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15px;
    vertical-align: middle;
}


/* CELLULES */

.grid-card[b-iupfu0wl54]  .dxbl-grid td {
    min-height: 64px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.grid-card[b-iupfu0wl54]  .dxbl-grid tbody tr {
    transition: background .12s ease;
}

    .grid-card[b-iupfu0wl54]  .dxbl-grid tbody tr:hover td {
        background: #f9fbfe !important;
    }


/* PAGER */

.grid-card[b-iupfu0wl54]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}


/* BOUTONS DEVEXPRESS */

.grid-card[b-iupfu0wl54]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}


/* =========================================================
   CELLULE CLIENT
   ========================================================= */

.client-cell[b-iupfu0wl54] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.client-icon[b-iupfu0wl54] {
    width: 31px;
    height: 31px;
    min-width: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f2f4f7;
    color: #778293;
    font-size: 12px;
}

.client-name[b-iupfu0wl54] {
    min-width: 0;
    overflow: hidden;
    color: #344054;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   SITE
   ========================================================= */

.site-cell[b-iupfu0wl54] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #526175;
}

    .site-cell i[b-iupfu0wl54] {
        color: #7690ad;
    }

    .site-cell span[b-iupfu0wl54] {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


/* =========================================================
   EQUIPEMENT
   ========================================================= */

.entity-cell[b-iupfu0wl54] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-icon[b-iupfu0wl54] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 15px;
}

.entity-info[b-iupfu0wl54] {
    min-width: 0;
}

.entity-name[b-iupfu0wl54] {
    max-width: 165px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-iupfu0wl54] {
    max-width: 165px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


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

.type-badge[b-iupfu0wl54] {
    max-width: 130px;
    display: inline-block;
    overflow: hidden;
    padding: 5px 9px;
    border-radius: 7px;
    background: #f2f6fb;
    color: #53657a;
    font-size: 11px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-badge[b-iupfu0wl54],
.iot-badge[b-iupfu0wl54] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    box-sizing: border-box;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
}

.code-badge[b-iupfu0wl54] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.iot-badge[b-iupfu0wl54] {
    background: #edfafa;
    color: #178b88;
}

.serial-value[b-iupfu0wl54] {
    color: #566376;
    font-size: 10.5px;
    font-weight: 600;
}


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

.status-badge[b-iupfu0wl54] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    box-sizing: border-box;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.status-dot[b-iupfu0wl54] {
    width: 6px;
    height: 6px;
    display: block;
    flex-shrink: 0;
    border-radius: 50%;
    background: currentColor;
}

.status-active[b-iupfu0wl54] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-iupfu0wl54] {
    background: #f1f3f6;
    color: #818b99;
}


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

.actions-cell[b-iupfu0wl54] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}


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

@media (max-width: 1200px) {

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


@media (max-width: 768px) {

    .equipements-page[b-iupfu0wl54] {
        padding: 24px 15px;
    }

    .page-header[b-iupfu0wl54] {
        flex-direction: column;
        align-items: stretch;
    }

        .page-header h1[b-iupfu0wl54] {
            font-size: 30px;
        }

    .stats-grid[b-iupfu0wl54] {
        grid-template-columns: 1fr;
    }

    .grid-toolbar[b-iupfu0wl54] {
        min-height: 68px;
        padding: 0 17px;
    }

    .toolbar-hint[b-iupfu0wl54] {
        display: none;
    }

    .grid-card[b-iupfu0wl54]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}
/* /Components/Pages/Administration/FormulesAbonnement.razor.rz.scp.css */
.plans-page[b-5071ztsilt] {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
    padding: 42px 35px;
}

/* =========================================================
   DESIGN SYSTEM IOTLYNK
   TABLEAUX / LISTES
   ========================================================= */

.page-header[b-5071ztsilt] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.page-label[b-5071ztsilt] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-5071ztsilt] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-5071ztsilt] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-5071ztsilt] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-5071ztsilt] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-5071ztsilt] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-5071ztsilt] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-5071ztsilt] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-5071ztsilt] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-5071ztsilt] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-5071ztsilt] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-5071ztsilt] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-5071ztsilt] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-5071ztsilt] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.content-card[b-5071ztsilt] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-5071ztsilt] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-5071ztsilt] {
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-5071ztsilt] {
    margin-top: 3px;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-5071ztsilt] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-5071ztsilt] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-5071ztsilt]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-5071ztsilt]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-5071ztsilt]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-5071ztsilt]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-5071ztsilt]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-5071ztsilt]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-5071ztsilt]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-5071ztsilt]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-5071ztsilt] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-avatar[b-5071ztsilt],
.entity-icon[b-5071ztsilt] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-avatar[b-5071ztsilt] {
    border-radius: 50%;
}

.entity-info[b-5071ztsilt] {
    min-width: 0;
}

.entity-name[b-5071ztsilt] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-5071ztsilt] {
    max-width: 200px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-5071ztsilt] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge[b-5071ztsilt] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-5071ztsilt] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-5071ztsilt] {
    background: #f1f3f6;
    color: #818b99;
}

.actions-cell[b-5071ztsilt] {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-5071ztsilt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-5071ztsilt] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-5071ztsilt] {
        grid-template-columns: 1fr;
    }

    .content-card[b-5071ztsilt]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


.limit-badge[b-5071ztsilt],
.history-badge[b-5071ztsilt],
.option-badge[b-5071ztsilt] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.limit-badge[b-5071ztsilt] {
    min-width: 52px;
    background: #edf5ff;
    color: var(--iot-blue);
}

.history-badge[b-5071ztsilt] {
    background: #f2f6fb;
    color: #53657a;
}

.option-yes[b-5071ztsilt] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.option-no[b-5071ztsilt] {
    background: #f1f3f6;
    color: #818b99;
}

@media (max-width: 768px) {
    .plans-page[b-5071ztsilt] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Administration/Sites.razor.rz.scp.css */
.sites-page[b-1frg5rrke7] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 42px 35px;
}


.page-header[b-1frg5rrke7],
.alarmes-header[b-1frg5rrke7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.page-label[b-1frg5rrke7] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-1frg5rrke7],
.alarmes-header h1[b-1frg5rrke7] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-1frg5rrke7],
.alarmes-header p[b-1frg5rrke7] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-1frg5rrke7] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-1frg5rrke7],
.resume-grid[b-1frg5rrke7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-1frg5rrke7],
.resume-card[b-1frg5rrke7] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-1frg5rrke7],
.resume-card:hover[b-1frg5rrke7] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-1frg5rrke7] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-1frg5rrke7] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-1frg5rrke7] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-1frg5rrke7] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-1frg5rrke7] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-1frg5rrke7],
.resume-card > span[b-1frg5rrke7] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-1frg5rrke7],
.resume-card > strong[b-1frg5rrke7] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.resume-card[b-1frg5rrke7] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.content-card[b-1frg5rrke7],
.section-card[b-1frg5rrke7] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-1frg5rrke7],
.section-header[b-1frg5rrke7] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-1frg5rrke7],
.section-header h2[b-1frg5rrke7] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-1frg5rrke7],
.section-header p[b-1frg5rrke7] {
    margin: 3px 0 0;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-1frg5rrke7] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-1frg5rrke7],
.grid-container[b-1frg5rrke7] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-1frg5rrke7]  .dxbl-grid,
.section-card[b-1frg5rrke7]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-1frg5rrke7]  .dxbl-grid-search-box,
.section-card[b-1frg5rrke7]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-1frg5rrke7]  .dxbl-grid thead,
.section-card[b-1frg5rrke7]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-1frg5rrke7]  .dxbl-grid th,
.section-card[b-1frg5rrke7]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-1frg5rrke7]  .dxbl-grid td,
.section-card[b-1frg5rrke7]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-1frg5rrke7]  .dxbl-grid tbody tr:hover td,
.section-card[b-1frg5rrke7]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-1frg5rrke7]  .dxbl-grid .dxbl-pager,
.section-card[b-1frg5rrke7]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-1frg5rrke7]  .dxbl-grid .dxbl-btn,
.section-card[b-1frg5rrke7]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-1frg5rrke7] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-icon[b-1frg5rrke7] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-icon.neutral[b-1frg5rrke7] {
    background: #f2f4f7;
    color: #778293;
}

.entity-info[b-1frg5rrke7] {
    min-width: 0;
}

.entity-name[b-1frg5rrke7] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-1frg5rrke7] {
    max-width: 190px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-1frg5rrke7] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-badge[b-1frg5rrke7],
.code-badge[b-1frg5rrke7],
.telemetry-badge[b-1frg5rrke7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.soft-badge[b-1frg5rrke7] {
    background: #f2f6fb;
    color: #53657a;
}

.code-badge[b-1frg5rrke7] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.telemetry-badge[b-1frg5rrke7] {
    background: #edfafa;
    color: #178b88;
}

.status-badge[b-1frg5rrke7] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-1frg5rrke7] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-1frg5rrke7] {
    background: #f1f3f6;
    color: #818b99;
}

.sensor-name[b-1frg5rrke7] {
    max-width: 170px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-cell[b-1frg5rrke7] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-1frg5rrke7],
    .resume-grid[b-1frg5rrke7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-1frg5rrke7],
    .alarmes-header[b-1frg5rrke7] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-1frg5rrke7],
    .resume-grid[b-1frg5rrke7] {
        grid-template-columns: 1fr;
    }

    .content-card[b-1frg5rrke7]  .dxbl-grid-search-box,
    .section-card[b-1frg5rrke7]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


@media (max-width: 768px) {
    .sites-page[b-1frg5rrke7] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Administration/TypesEquipements.razor.rz.scp.css */
.types-page[b-imnyqo0dc6] {
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 42px 35px;
}


.page-header[b-imnyqo0dc6],
.alarmes-header[b-imnyqo0dc6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
}

.page-label[b-imnyqo0dc6] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-imnyqo0dc6],
.alarmes-header h1[b-imnyqo0dc6] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-imnyqo0dc6],
.alarmes-header p[b-imnyqo0dc6] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-imnyqo0dc6] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-imnyqo0dc6],
.resume-grid[b-imnyqo0dc6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-imnyqo0dc6],
.resume-card[b-imnyqo0dc6] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-imnyqo0dc6],
.resume-card:hover[b-imnyqo0dc6] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-imnyqo0dc6] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-imnyqo0dc6] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-imnyqo0dc6] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-imnyqo0dc6] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-imnyqo0dc6] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-imnyqo0dc6],
.resume-card > span[b-imnyqo0dc6] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-imnyqo0dc6],
.resume-card > strong[b-imnyqo0dc6] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.resume-card[b-imnyqo0dc6] {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.content-card[b-imnyqo0dc6],
.section-card[b-imnyqo0dc6] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-imnyqo0dc6],
.section-header[b-imnyqo0dc6] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-imnyqo0dc6],
.section-header h2[b-imnyqo0dc6] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-imnyqo0dc6],
.section-header p[b-imnyqo0dc6] {
    margin: 3px 0 0;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-imnyqo0dc6] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-imnyqo0dc6],
.grid-container[b-imnyqo0dc6] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid,
.section-card[b-imnyqo0dc6]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid-search-box,
.section-card[b-imnyqo0dc6]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid thead,
.section-card[b-imnyqo0dc6]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid th,
.section-card[b-imnyqo0dc6]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid td,
.section-card[b-imnyqo0dc6]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid tbody tr:hover td,
.section-card[b-imnyqo0dc6]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid .dxbl-pager,
.section-card[b-imnyqo0dc6]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-imnyqo0dc6]  .dxbl-grid .dxbl-btn,
.section-card[b-imnyqo0dc6]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-imnyqo0dc6] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-icon[b-imnyqo0dc6] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-icon.neutral[b-imnyqo0dc6] {
    background: #f2f4f7;
    color: #778293;
}

.entity-info[b-imnyqo0dc6] {
    min-width: 0;
}

.entity-name[b-imnyqo0dc6] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-imnyqo0dc6] {
    max-width: 190px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-imnyqo0dc6] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soft-badge[b-imnyqo0dc6],
.code-badge[b-imnyqo0dc6],
.telemetry-badge[b-imnyqo0dc6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.soft-badge[b-imnyqo0dc6] {
    background: #f2f6fb;
    color: #53657a;
}

.code-badge[b-imnyqo0dc6] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.telemetry-badge[b-imnyqo0dc6] {
    background: #edfafa;
    color: #178b88;
}

.status-badge[b-imnyqo0dc6] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-imnyqo0dc6] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-imnyqo0dc6] {
    background: #f1f3f6;
    color: #818b99;
}

.sensor-name[b-imnyqo0dc6] {
    max-width: 170px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions-cell[b-imnyqo0dc6] {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-imnyqo0dc6],
    .resume-grid[b-imnyqo0dc6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-imnyqo0dc6],
    .alarmes-header[b-imnyqo0dc6] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-imnyqo0dc6],
    .resume-grid[b-imnyqo0dc6] {
        grid-template-columns: 1fr;
    }

    .content-card[b-imnyqo0dc6]  .dxbl-grid-search-box,
    .section-card[b-imnyqo0dc6]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


@media (max-width: 768px) {
    .types-page[b-imnyqo0dc6] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Administration/Utilisateurs.razor.rz.scp.css */
.users-page[b-t1hg916a88] {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 42px 35px;
}

/* =========================================================
   DESIGN SYSTEM IOTLYNK
   TABLEAUX / LISTES
   ========================================================= */

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

.page-label[b-t1hg916a88] {
    margin-bottom: 8px;
    color: var(--iot-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.35px;
}

.page-header h1[b-t1hg916a88] {
    margin: 0;
    color: var(--iot-ink);
    font-size: 36px;
    font-weight: 750;
    letter-spacing: -.5px;
}

.page-header p[b-t1hg916a88] {
    margin: 8px 0 0;
    color: var(--iot-muted);
    font-size: 14px;
    line-height: 1.5;
}

.alert-error[b-t1hg916a88] {
    margin-bottom: 22px;
    padding: 13px 16px;
    border: 1px solid #f3d2d5;
    border-radius: 10px;
    background: #fff5f6;
    color: var(--iot-danger);
    font-size: 11.5px;
    line-height: 1.5;
}

.stats-grid[b-t1hg916a88] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.stat-card[b-t1hg916a88] {
    min-height: 104px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px 21px;
    box-sizing: border-box;
    border: 1px solid var(--iot-border);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 9px rgba(32,43,61,.025);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.stat-card:hover[b-t1hg916a88] {
    transform: translateY(-1px);
    border-color: #dce3ec;
    box-shadow: 0 7px 20px rgba(32,43,61,.055);
}

.stat-icon[b-t1hg916a88] {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
}

.stat-blue[b-t1hg916a88] {
    background: #edf5ff;
    color: var(--iot-blue);
}

.stat-green[b-t1hg916a88] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.stat-violet[b-t1hg916a88] {
    background: #eef1ff;
    color: #5968c9;
}

.stat-neutral[b-t1hg916a88] {
    background: #f2f4f7;
    color: #778293;
}

.stat-label[b-t1hg916a88] {
    margin-bottom: 3px;
    color: var(--iot-muted);
    font-size: 11px;
}

.stat-value[b-t1hg916a88] {
    color: var(--iot-ink);
    font-size: 25px;
    font-weight: 750;
    line-height: 1.15;
}

.content-card[b-t1hg916a88] {
    overflow: hidden;
    border: 1px solid var(--iot-border);
    border-radius: 15px;
    background: #ffffff;
    box-shadow: 0 2px 11px rgba(31,45,68,.025);
}

.grid-toolbar[b-t1hg916a88] {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 22px;
    border-bottom: 1px solid var(--iot-border);
    background: linear-gradient(180deg,#ffffff 0%,#fcfdff 100%);
}

.grid-title[b-t1hg916a88] {
    color: var(--iot-ink);
    font-size: 14px;
    font-weight: 700;
}

.grid-subtitle[b-t1hg916a88] {
    margin-top: 3px;
    color: var(--iot-muted);
    font-size: 12px;
}

.toolbar-hint[b-t1hg916a88] {
    color: var(--iot-muted);
    font-size: 12px;
}

.grid-host[b-t1hg916a88] {
    width: 100%;
    overflow-x: auto;
}

.content-card[b-t1hg916a88]  .dxbl-grid {
    border: 0 !important;
    background: #ffffff !important;
}

.content-card[b-t1hg916a88]  .dxbl-grid-search-box {
    width: 300px;
    margin: 16px 20px 16px auto;
    border-radius: 10px !important;
}

.content-card[b-t1hg916a88]  .dxbl-grid thead {
    background: #f8fafc;
}

.content-card[b-t1hg916a88]  .dxbl-grid th {
    height: 48px;
    padding-left: 12px !important;
    padding-right: 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #f8fafc !important;
    color: #657286;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

.content-card[b-t1hg916a88]  .dxbl-grid td {
    min-height: 60px;
    padding: 10px 12px !important;
    border-top-color: var(--iot-border) !important;
    border-bottom-color: var(--iot-border) !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    background: #ffffff;
    color: #435064;
    font-size: 11px;
    vertical-align: middle;
}

.content-card[b-t1hg916a88]  .dxbl-grid tbody tr:hover td {
    background: #f9fbfe !important;
}

.content-card[b-t1hg916a88]  .dxbl-grid .dxbl-pager {
    min-height: 54px;
    padding: 10px 18px;
    border-top: 1px solid var(--iot-border);
    background: #ffffff;
}

.content-card[b-t1hg916a88]  .dxbl-grid .dxbl-btn {
    border-radius: 8px;
}

.entity-cell[b-t1hg916a88] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
}

.entity-avatar[b-t1hg916a88],
.entity-icon[b-t1hg916a88] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #edf5ff;
    color: var(--iot-blue);
    font-size: 11px;
    font-weight: 800;
}

.entity-avatar[b-t1hg916a88] {
    border-radius: 50%;
}

.entity-info[b-t1hg916a88] {
    min-width: 0;
}

.entity-name[b-t1hg916a88] {
    max-width: 190px;
    overflow: hidden;
    color: var(--iot-ink);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-description[b-t1hg916a88] {
    max-width: 200px;
    margin-top: 3px;
    overflow: hidden;
    color: #929dac;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-ellipsis[b-t1hg916a88] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-badge[b-t1hg916a88] {
    min-width: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

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

.status-active[b-t1hg916a88] {
    background: #e9f7ef;
    color: var(--iot-success);
}

.status-inactive[b-t1hg916a88] {
    background: #f1f3f6;
    color: #818b99;
}

.actions-cell[b-t1hg916a88] {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

@media (max-width: 1200px) {
    .stats-grid[b-t1hg916a88] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-header[b-t1hg916a88] {
        flex-direction: column;
        align-items: stretch;
    }

    .stats-grid[b-t1hg916a88] {
        grid-template-columns: 1fr;
    }

    .content-card[b-t1hg916a88]  .dxbl-grid-search-box {
        width: calc(100% - 32px);
        margin: 14px 16px;
    }
}


.contact-value[b-t1hg916a88] {
    color: #566376;
    font-size: 10.5px;
}

.role-badge[b-t1hg916a88] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.role-admin[b-t1hg916a88] {
    background: #eef1ff;
    color: #5968c9;
}

.role-client[b-t1hg916a88] {
    background: #edfafa;
    color: #178b88;
}

.role-default[b-t1hg916a88] {
    background: #f2f4f7;
    color: #778293;
}

@media (max-width: 768px) {
    .users-page[b-t1hg916a88] {
        padding: 24px 15px;
    }
}
/* /Components/Pages/Counter.razor.rz.scp.css */
.counter-block[b-celur6glrx] {
    align-items: center;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 17rem;
    justify-content: center;
    padding: 2.5rem 1.5rem 1.5rem;
    width: 16.875rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.counter-block .counter-content[b-celur6glrx] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.counter-block .counter-count[b-celur6glrx] {
    font-size: 7.5rem;
    font-weight: 400;
    line-height: 7.75rem;
}
/* /Components/Pages/Index/Index.razor.rz.scp.css */
[b-7wl474e299] .index-gridlayout {
    container-type: inline-size;
    height: auto;
    margin-top: auto;
    margin-bottom: auto;
    padding-bottom: 9rem;
}

[b-7wl474e299] .title {
    padding-bottom: 3rem;
    text-align: center;
}

[b-7wl474e299] .tiles {
    --tile-column-count: 4;

    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(var(--tile-column-count), max-content);
    justify-content: center;

    @container (max-width: 60.5rem) {
        --tile-column-count: 3;
    }
    @container (max-width: 45.125rem) {
        --tile-column-count: 2;
    }
    @container (max-width: 29.75rem) {
        --tile-column-count: 1;
    }
}
/* /Components/Pages/Index/IndexTile.razor.rz.scp.css */
.tile[b-2vhl621qiz] {
    border-radius: 0.75rem;
    height: 7.5rem;
    transition: box-shadow 0.2s;
    width: 14.375rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

.tile:hover[b-2vhl621qiz] {
    box-shadow: 0 4px 8px 0 rgba(170, 170, 170, 0.24), 0 0 2px 0 rgba(170, 170, 170, 0.2);
}

.tile[b-2vhl621qiz]  > a {
    text-decoration: none;
}

[b-2vhl621qiz] .tile-content {
    padding: 1rem;
}

[b-2vhl621qiz] .tile-icon {
    border-radius: 0.375rem;
    height: 2.75rem;
    padding: 0.75rem;
    width: 2.75rem;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
}

[b-2vhl621qiz] .tile-title {
    align-self: center;
    color: var(--dxds-color-content-neutral-default-rest);
    font-size: var(--dxds-font-size-base-md);
    font-weight: var(--dxds-font-weight-base-strong);
    letter-spacing: var(--dxds-letter-spacing-base-md);
    line-height: var(--dxds-line-height-base-md);
}

[b-2vhl621qiz] .tile-description {
    color: var(--dxds-color-content-neutral-subdued-rest);
    font-size: var(--dxds-font-size-base-sm);
    font-weight: var(--dxds-font-weight-base-default);
    letter-spacing: var(--dxds-letter-spacing-base-sm);
    line-height: var(--dxds-line-height-base-sm);
}
/* /Components/Pages/Supervision/SupervisionEquipement.razor.rz.scp.css */
/* =====================================================
           PAGE
           ===================================================== */

.supervision-page[b-3pu1d210f9] {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 35px;
}


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

.loading-zone[b-3pu1d210f9] {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #777;
}


.loading-spinner[b-3pu1d210f9] {
    width: 31px;
    height: 31px;
    border: 3px solid #e3e6e9;
    border-top-color: #2f74bd;
    border-radius: 50%;
    animation: supervision-spin-b-3pu1d210f9 0.8s linear infinite;
}


@keyframes supervision-spin-b-3pu1d210f9 {

    to {
        transform: rotate(360deg);
    }
}


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

.error-card[b-3pu1d210f9] {
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 40px;
    border: 1px solid #ead4d2;
    border-radius: 9px;
    background: #fff8f7;
}


.error-icon[b-3pu1d210f9] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fdebea;
    color: #b3261e;
    font-size: 26px;
    font-weight: 600;
}


.error-card h2[b-3pu1d210f9] {
    margin: 0 0 5px 0;
}


.error-card p[b-3pu1d210f9] {
    margin: 0 0 17px 0;
    color: #777;
}


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

.page-header[b-3pu1d210f9] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 25px;
}


.header-label[b-3pu1d210f9] {
    margin-bottom: 4px;
    color: #858a8f;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}


.page-header h1[b-3pu1d210f9] {
    margin: 0 0 5px 0;
    color: #202124;
    font-size: 31px;
    font-weight: 600;
}


.header-details[b-3pu1d210f9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: #72777c;
    font-size: 14px;
}


.equipment-id[b-3pu1d210f9] {
    font-weight: 600;
    color: #555b60;
}


.separator[b-3pu1d210f9] {
    color: #b0b4b8;
}


.header-actions[b-3pu1d210f9] {
    display: flex;
    gap: 10px;
}


/* =====================================================
           EQUIPEMENT
           ===================================================== */

.equipment-summary[b-3pu1d210f9] {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid #dce1e5;
    border-radius: 9px;
    background: white;
}


.equipment-summary-main[b-3pu1d210f9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 18px;
}


    .equipment-summary-main > div[b-3pu1d210f9] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


.summary-label[b-3pu1d210f9] {
    color: #7d8287;
    font-size: 12px;
}


.equipment-summary-main strong[b-3pu1d210f9] {
    color: #202124;
    font-size: 22px;
}


.equipment-info-grid[b-3pu1d210f9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 12px;
}


    .equipment-info-grid > div[b-3pu1d210f9] {
        padding: 13px;
        border-radius: 6px;
        background: #f8f9fa;
    }


    .equipment-info-grid span[b-3pu1d210f9] {
        display: block;
        margin-bottom: 4px;
        color: #7d8287;
        font-size: 11px;
    }


    .equipment-info-grid strong[b-3pu1d210f9] {
        color: #303234;
        font-size: 13px;
    }


/* =====================================================
           ETAT EQUIPEMENT
           ===================================================== */

.equipment-normal[b-3pu1d210f9],
.equipment-alarm[b-3pu1d210f9] {
    display: inline-block;
    padding: 6px 11px;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


.equipment-normal[b-3pu1d210f9] {
    background: #e8f5e9;
    color: #22752c;
}


.equipment-alarm[b-3pu1d210f9] {
    background: #fdecec;
    color: #b3261e;
}


/* =====================================================
           STATS
           ===================================================== */

.stats-grid[b-3pu1d210f9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}


.stat-card[b-3pu1d210f9] {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 18px 20px;
    border: 1px solid #dfe2e5;
    border-radius: 8px;
    background: white;
}


    .stat-card span[b-3pu1d210f9] {
        color: #777;
        font-size: 13px;
    }


    .stat-card strong[b-3pu1d210f9] {
        margin-top: 5px;
        color: #202124;
        font-size: 31px;
        font-weight: 600;
    }


.period-value[b-3pu1d210f9] {
    font-size: 22px !important;
}


.value-ok[b-3pu1d210f9] {
    color: #278033 !important;
}


.value-danger[b-3pu1d210f9] {
    color: #b3261e !important;
}


/* =====================================================
           ETAT GLOBAL
           ===================================================== */

.global-status[b-3pu1d210f9] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: 8px;
}


.global-ok[b-3pu1d210f9] {
    border: 1px solid #cce4cf;
    background: #f1f8f2;
    color: #275f2f;
}


.global-danger[b-3pu1d210f9] {
    border: 1px solid #efc8c5;
    background: #fff3f2;
    color: #9c2c25;
}


.global-icon[b-3pu1d210f9] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.75);
    font-size: 21px;
    font-weight: 600;
}


.global-status > div:last-child[b-3pu1d210f9] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}


.global-status strong[b-3pu1d210f9] {
    font-size: 14px;
}


.global-status span[b-3pu1d210f9] {
    font-size: 13px;
    opacity: 0.82;
}


/* =====================================================
           PERIODES
           ===================================================== */

.period-card[b-3pu1d210f9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 17px 20px;
    border: 1px solid #dfe2e5;
    border-radius: 8px;
    background: white;
}


    .period-card > div:first-child[b-3pu1d210f9] {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }


        .period-card > div:first-child strong[b-3pu1d210f9] {
            font-size: 14px;
        }


        .period-card > div:first-child span[b-3pu1d210f9] {
            color: #7d8287;
            font-size: 12px;
        }


.period-buttons[b-3pu1d210f9] {
    display: flex;
    gap: 6px;
}


.period-button[b-3pu1d210f9] {
    min-width: 72px;
    padding: 8px 12px;
    border: 1px solid #d5d9dd;
    border-radius: 5px;
    background: white;
    color: #45494d;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}


    .period-button:hover[b-3pu1d210f9] {
        background: #f4f6f8;
    }


.period-button-active[b-3pu1d210f9] {
    border-color: #2f74bd;
    background: #2f74bd;
    color: white;
}


    .period-button-active:hover[b-3pu1d210f9] {
        background: #2868aa;
    }


/* =====================================================
           CAPTEURS
           ===================================================== */

.sensors-container[b-3pu1d210f9] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.sensor-section[b-3pu1d210f9] {
    border: 1px solid #dce1e5;
    border-radius: 9px;
    background: white;
    overflow: hidden;
}


.sensor-header[b-3pu1d210f9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 21px 23px;
    border-bottom: 1px solid #e8eaec;
}


.sensor-code[b-3pu1d210f9] {
    margin-bottom: 3px;
    color: #858a8f;
    font-size: 11px;
    text-transform: uppercase;
}


.sensor-header h2[b-3pu1d210f9] {
    margin: 0 0 3px 0;
    color: #202124;
    font-size: 21px;
}


.sensor-type[b-3pu1d210f9] {
    color: #747a80;
    font-size: 13px;
}


/* =====================================================
           ETAT CAPTEUR
           ===================================================== */

.sensor-normal[b-3pu1d210f9],
.sensor-alarm[b-3pu1d210f9] {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 17px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}


.sensor-normal[b-3pu1d210f9] {
    background: #e8f5e9;
    color: #22752c;
}


.sensor-alarm[b-3pu1d210f9] {
    background: #fdecec;
    color: #b3261e;
}


/* =====================================================
           STATISTIQUES CAPTEUR
           ===================================================== */

.sensor-stats-grid[b-3pu1d210f9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 12px;
    padding: 20px 23px;
}


.sensor-stat[b-3pu1d210f9] {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    border-radius: 7px;
    background: #f8f9fa;
}


    .sensor-stat > span[b-3pu1d210f9] {
        color: #7c8186;
        font-size: 12px;
    }


    .sensor-stat > strong[b-3pu1d210f9] {
        margin-top: 5px;
        color: #202124;
        font-size: 19px;
    }


.main-value-card[b-3pu1d210f9] {
    background: #f4f8fc;
}


.main-sensor-value[b-3pu1d210f9] {
    font-size: 29px !important;
}


    .main-sensor-value small[b-3pu1d210f9] {
        font-size: 16px;
        font-weight: 400;
    }


.measurement-date[b-3pu1d210f9] {
    margin-top: 4px;
    color: #858a8f;
    font-size: 10px;
}


/* =====================================================
           SEUILS
           ===================================================== */

.threshold-zone[b-3pu1d210f9] {
    margin: 0 23px;
    padding: 16px;
    border: 1px solid #e3e6e9;
    border-radius: 7px;
    background: #fafbfc;
}


.threshold-title[b-3pu1d210f9] {
    margin-bottom: 13px;
    font-size: 13px;
}


.threshold-values[b-3pu1d210f9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
    gap: 12px;
}


    .threshold-values > div[b-3pu1d210f9] {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }


    .threshold-values span[b-3pu1d210f9] {
        color: #858a8f;
        font-size: 11px;
    }


    .threshold-values strong[b-3pu1d210f9] {
        color: #3b3e41;
        font-size: 13px;
    }


/* =====================================================
           GRAPHIQUE
           ===================================================== */

.chart-zone[b-3pu1d210f9] {
    padding: 23px;
}


.chart-header[b-3pu1d210f9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}


    .chart-header h3[b-3pu1d210f9] {
        margin: 0 0 3px 0;
        font-size: 17px;
    }


    .chart-header span[b-3pu1d210f9] {
        color: #80858a;
        font-size: 12px;
    }


.chart-container[b-3pu1d210f9] {
    width: 100%;
    min-height: 330px;
}


.chart-empty[b-3pu1d210f9] {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f8f9fa;
    color: #7d8287;
}


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

.empty-card[b-3pu1d210f9] {
    padding: 55px 30px;
    border: 1px solid #dfe2e5;
    border-radius: 9px;
    background: white;
    text-align: center;
}


    .empty-card h2[b-3pu1d210f9] {
        margin: 0 0 5px 0;
    }


    .empty-card p[b-3pu1d210f9] {
        margin: 0;
        color: #777;
    }


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

@media (max-width: 1000px) {

    .stats-grid[b-3pu1d210f9],
    .sensor-stats-grid[b-3pu1d210f9],
    .equipment-info-grid[b-3pu1d210f9] {
        grid-template-columns: repeat(2, 1fr);
    }


    .threshold-values[b-3pu1d210f9] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 700px) {

    .supervision-page[b-3pu1d210f9] {
        padding: 20px 15px;
    }


    .page-header[b-3pu1d210f9],
    .period-card[b-3pu1d210f9] {
        flex-direction: column;
        align-items: stretch;
    }


    .header-actions[b-3pu1d210f9] {
        flex-direction: column;
    }


    .stats-grid[b-3pu1d210f9],
    .sensor-stats-grid[b-3pu1d210f9],
    .equipment-info-grid[b-3pu1d210f9],
    .threshold-values[b-3pu1d210f9] {
        grid-template-columns: 1fr;
    }


    .period-buttons[b-3pu1d210f9] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }


    .period-button[b-3pu1d210f9] {
        width: 100%;
    }


    .sensor-header[b-3pu1d210f9] {
        align-items: flex-start;
    }
}