/* ==========================================================
   OHI MESSA UI 2.0
   Direction artistique officielle
   Bordeaux + Or
   ========================================================== */

:root {

    --messa-bordeaux-950: #3d0016;
    --messa-bordeaux-900: #4d001c;
    --messa-bordeaux-800: #5e0022;
    --messa-bordeaux-700: #6f0028;

    --messa-bordeaux: #720029;

    --messa-bordeaux-500: #8b173f;
    --messa-bordeaux-100: #f3e8ec;
    --messa-bordeaux-50: #faf5f7;


    --messa-gold-900: #8d620c;
    --messa-gold-700: #aa7813;

    --messa-gold: #d1a128;

    --messa-gold-400: #e1b94e;
    --messa-gold-200: #f0db9f;
    --messa-gold-100: #faf1d5;


    --messa-bg: #f7f5f6;
    --messa-bg-soft: #fbfafb;

    --messa-surface: #ffffff;

    --messa-border: #e8e1e4;
    --messa-border-strong: #d9ced2;

    --messa-text: #241d20;
    --messa-text-soft: #71666b;
    --messa-text-muted: #91868a;

    --messa-success: #247455;
    --messa-success-bg: #eaf6f0;

    --messa-warning: #9e6813;
    --messa-warning-bg: #fff5df;

    --messa-danger: #a82f3d;
    --messa-danger-bg: #fae9ec;

    --messa-radius-xs: 8px;
    --messa-radius-sm: 11px;
    --messa-radius: 16px;
    --messa-radius-lg: 22px;
    --messa-radius-xl: 28px;

    --messa-shadow-xs:
        0 3px 10px rgba(49, 16, 28, .035);

    --messa-shadow:
        0 12px 32px rgba(49, 16, 28, .065);

    --messa-shadow-lg:
        0 24px 65px rgba(49, 16, 28, .10);

    --messa-gradient:
        linear-gradient(
            138deg,
            var(--messa-bordeaux-900),
            var(--messa-bordeaux)
        );

    --messa-gradient-gold:
        linear-gradient(
            135deg,
            #b47e12,
            #e1b94e
        );

    --messa-transition:
        180ms cubic-bezier(.2,.8,.2,1);
}


/* ==========================================================
   BASE
   ========================================================== */

html {
    background: var(--messa-bg);
    color-scheme: light;
}

body {
    color: var(--messa-text);
    background:
        radial-gradient(
            circle at 90% -10%,
            rgba(209, 161, 40, .08),
            transparent 31%
        ),
        radial-gradient(
            circle at -8% 25%,
            rgba(114, 0, 41, .055),
            transparent 27%
        ),
        var(--messa-bg);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


::selection {
    color: #fff;
    background:
        var(--messa-bordeaux);
}


a,
button,
input,
select,
textarea {
    transition:
        border-color var(--messa-transition),
        background var(--messa-transition),
        color var(--messa-transition),
        box-shadow var(--messa-transition),
        transform var(--messa-transition);
}


button,
a {
    -webkit-tap-highlight-color:
        transparent;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid
        rgba(209, 161, 40, .28);

    outline-offset: 2px;
}


/* ==========================================================
   OFFICIAL BRAND
   ========================================================== */

.messa-brand-v2,
.messa-new-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    min-width: 0;

    color:
        var(--messa-text);

    text-decoration: none;
}


.messa-brand-v2-mark,
.messa-new-mark {
    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    border: 0 !important;
    border-radius: 50%;

    background:
        #fff
        url('/assets/brand/ohi-messa-mark.webp')
        center / cover
        no-repeat !important;

    color:
        transparent !important;

    font-size: 0 !important;

    box-shadow:
        0 7px 20px
        rgba(86, 0, 31, .13);

    overflow: hidden;
}


.messa-brand-v2-mark img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.messa-brand-v2-copy,
.messa-new-brand > span:last-child {
    min-width: 0;

    display: grid;

    gap: 2px;
}


.messa-brand-v2-copy strong,
.messa-new-brand > span:last-child > strong {
    display: flex;
    gap: 5px;

    align-items: baseline;

    color:
        var(--messa-bordeaux);

    font-size: 15px;
    line-height: 1;

    letter-spacing: .055em;

    font-style: normal;

    white-space: nowrap;
}


.messa-brand-v2-copy strong b {
    color:
        var(--messa-bordeaux);

    font-weight: 900;
}


.messa-brand-v2-copy strong em {
    color:
        var(--messa-gold-700);

    font-style: normal;

    font-weight: 900;
}


.messa-brand-v2-copy small,
.messa-new-brand > span:last-child > small {
    color:
        var(--messa-gold-900);

    font-size: 7px;
    font-weight: 800;

    letter-spacing: .13em;

    text-transform: uppercase;

    white-space: nowrap;
}


.messa-brand-v2-light
.messa-brand-v2-copy strong b {
    color: #fff;
}


.messa-brand-v2-light
.messa-brand-v2-copy small {
    color:
        rgba(255,255,255,.7);
}


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

.messa-sidebar,
.dashboard-sidebar,
.app-sidebar {
    color: #fff;

    background:
        radial-gradient(
            circle at 95% 7%,
            rgba(209, 161, 40, .18),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #57001f 0%,
            #680025 45%,
            #49001a 100%
        ) !important;

    border-right:
        1px solid
        rgba(255,255,255,.06);

    box-shadow:
        12px 0 40px
        rgba(55,0,20,.08);
}


.messa-sidebar a,
.dashboard-sidebar a,
.app-sidebar a {
    color:
        rgba(255,255,255,.78);
}


.messa-sidebar nav a,
.dashboard-sidebar nav a,
.app-sidebar nav a {
    border-radius:
        12px;

    transition:
        var(--messa-transition);
}


.messa-sidebar nav a:hover,
.dashboard-sidebar nav a:hover,
.app-sidebar nav a:hover {
    color: #fff;

    background:
        rgba(255,255,255,.075);

    transform:
        translateX(2px);
}


.messa-sidebar nav a.active,
.dashboard-sidebar nav a.active,
.app-sidebar nav a.active,
.messa-sidebar nav a[aria-current="page"] {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(209,161,40,.22),
            rgba(255,255,255,.075)
        );

    box-shadow:
        inset 3px 0
        var(--messa-gold);
}


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

.messa-topbar,
.dashboard-topbar,
.pos-topbar,
.app-topbar {
    background:
        rgba(255,255,255,.94) !important;

    border-color:
        var(--messa-border) !important;

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        0 7px 25px
        rgba(56, 20, 33, .045);
}


.pos-topbar-context {
    border-left-color:
        var(--messa-border) !important;
}


.pos-topbar-context span {
    color:
        var(--messa-gold-900) !important;
}


.pos-topbar-context strong {
    color:
        var(--messa-bordeaux) !important;
}


/* ==========================================================
   PANELS / CARDS
   ========================================================== */

.messa-card,
.dashboard-card,
.kpi-card,
.stat-card,
.permission-card,
.permission-panel,
.pos-panel,
.inventory-panel,
.inventory-alert-panel {
    background:
        rgba(255,255,255,.97);

    border-color:
        var(--messa-border) !important;

    border-radius:
        var(--messa-radius-lg) !important;

    box-shadow:
        var(--messa-shadow-xs);

    transition:
        box-shadow var(--messa-transition),
        border-color var(--messa-transition),
        transform var(--messa-transition);
}


.messa-card:hover,
.dashboard-card:hover,
.kpi-card:hover,
.stat-card:hover {
    border-color:
        rgba(114,0,41,.15) !important;

    box-shadow:
        var(--messa-shadow);

    transform:
        translateY(-2px);
}


/* ==========================================================
   TITRES
   ========================================================== */

h1,
h2,
h3 {
    color:
        var(--messa-bordeaux-900);
}


.permission-eyebrow {
    color:
        var(--messa-gold-900) !important;

    font-weight: 900;

    letter-spacing: .12em;
}


.pos-heading h1,
.pos-sale-heading h1,
.inventory-heading h1,
.pos-no-session h1 {
    color:
        var(--messa-bordeaux-900) !important;
}


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

.pos-heading-stats article,
.inventory-kpis article {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            160deg,
            #fff,
            #fdfafb
        ) !important;

    border:
        1px solid
        var(--messa-border) !important;

    border-radius:
        var(--messa-radius) !important;

    box-shadow:
        var(--messa-shadow-xs);
}


.pos-heading-stats article::before,
.inventory-kpis article::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 3px;

    background:
        var(--messa-gradient-gold);
}


.pos-heading-stats strong,
.inventory-kpis strong {
    color:
        var(--messa-bordeaux) !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.permission-primary {
    border:
        1px solid
        var(--messa-bordeaux) !important;

    border-radius:
        11px !important;

    color: #fff !important;

    background:
        var(--messa-gradient) !important;

    box-shadow:
        0 8px 20px
        rgba(114,0,41,.13);

    text-decoration: none;

    font-weight: 800;
}


.permission-primary:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 11px 26px
        rgba(114,0,41,.19);
}


.permission-primary:active {
    transform:
        translateY(0);
}


.permission-link-button,
.pos-secondary-button,
.pos-fill-button {
    color:
        var(--messa-bordeaux) !important;

    background: #fff !important;

    border:
        1px solid
        var(--messa-border-strong) !important;

    border-radius:
        11px !important;

    text-decoration: none;
}


.permission-link-button:hover,
.pos-secondary-button:hover,
.pos-fill-button:hover {
    color:
        var(--messa-bordeaux-900) !important;

    border-color:
        rgba(114,0,41,.25) !important;

    background:
        var(--messa-bordeaux-50) !important;
}


/* ==========================================================
   FORMS
   ========================================================== */

.field {
    display: grid;

    gap: 6px;
}


.field > span,
.sale-line-row label span,
.inventory-count-row label span {
    color:
        var(--messa-text-soft) !important;

    font-weight: 750;
}


input,
select,
textarea {
    color:
        var(--messa-text);

    background:
        #fff;

    border-color:
        var(--messa-border-strong) !important;

    border-radius:
        var(--messa-radius-sm) !important;
}


input:hover,
select:hover,
textarea:hover {
    border-color:
        #cbbbc1 !important;
}


input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--messa-bordeaux-500) !important;

    box-shadow:
        0 0 0 4px
        rgba(114,0,41,.075) !important;

    outline: none;
}


/* ==========================================================
   STATUS
   ========================================================== */

.pos-status.open,
.inventory-state.ok,
.sale-completed {
    color:
        var(--messa-success) !important;

    background:
        var(--messa-success-bg) !important;
}


.inventory-state.low {
    color:
        var(--messa-warning) !important;

    background:
        var(--messa-warning-bg) !important;
}


.sale-cancelled,
.sale-refunded,
.receipt-status-cancelled,
.receipt-status-refunded {
    color:
        var(--messa-danger) !important;

    background:
        var(--messa-danger-bg) !important;
}


/* ==========================================================
   POS
   ========================================================== */

.pos-register-card {
    border-color:
        var(--messa-border) !important;

    border-radius:
        18px !important;

    background:
        #fff !important;
}


.pos-register-card.is-open {
    border-color:
        rgba(209,161,40,.50) !important;

    background:
        linear-gradient(
            160deg,
            #fff,
            #fffcf4
        ) !important;
}


.pos-register-icon {
    color:
        var(--messa-gold) !important;

    background:
        var(--messa-gradient) !important;

    box-shadow:
        0 8px 20px
        rgba(114,0,41,.16);
}


.pos-total-card {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(209,161,40,.20),
            transparent 35%
        ),
        var(--messa-gradient) !important;
}


.pos-total-card strong {
    color:
        #e8bd51 !important;
}


.pos-catalog-tools {
    background:
        linear-gradient(
            135deg,
            var(--messa-bordeaux-50),
            #fffaf0
        ) !important;

    border-color:
        rgba(114,0,41,.10) !important;
}


/* ==========================================================
   INVENTORY
   ========================================================== */

.inventory-alert-panel {
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fff
        ) !important;

    border-color:
        rgba(209,161,40,.30) !important;
}


.inventory-item-card {
    background: #fff;

    border-color:
        var(--messa-border) !important;

    border-radius:
        17px !important;
}


.inventory-item-type {
    color:
        var(--messa-gold-900) !important;
}


.inventory-item-price strong {
    color:
        var(--messa-bordeaux) !important;
}


.stock-positive {
    color:
        var(--messa-success) !important;
}


.stock-negative {
    color:
        var(--messa-danger) !important;
}


/* ==========================================================
   RECEIPTS
   ========================================================== */

.receipt-logo {
    border: 0 !important;

    background:
        #fff
        url('/assets/brand/ohi-messa-mark.webp')
        center / cover
        no-repeat !important;

    color: transparent !important;

    font-size: 0 !important;
}


.receipt-header h1 {
    color:
        var(--messa-bordeaux) !important;
}


.receipt-grand-total {
    color:
        var(--messa-bordeaux) !important;
}


/* ==========================================================
   AUTH BRAND
   ========================================================== */

.messa-auth-brand-v2 {
    position: fixed;

    left: 26px;
    top: 22px;

    z-index: 50;

    display: flex;
    align-items: center;

    gap: 9px;

    color:
        var(--messa-bordeaux);

    text-decoration: none;
}


.messa-auth-brand-v2 img {
    width: 47px;
    height: 47px;

    border-radius: 50%;

    object-fit: cover;

    box-shadow:
        0 8px 25px
        rgba(74,0,27,.12);
}


.messa-auth-brand-v2 > span {
    display: grid;

    gap: 2px;
}


.messa-auth-brand-v2 strong {
    color:
        var(--messa-bordeaux);

    font-size: 14px;
    letter-spacing: .06em;
}


.messa-auth-brand-v2 small {
    color:
        var(--messa-gold-900);

    font-size: 6px;
    font-weight: 800;

    letter-spacing: .11em;
}


/* ==========================================================
   MICRO ANIMATIONS
   ========================================================== */

.messa-reveal {
    opacity: 0;

    transform:
        translateY(7px);

    transition:
        opacity 420ms ease,
        transform 420ms ease;
}


.messa-reveal.messa-visible {
    opacity: 1;

    transform:
        translateY(0);
}


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

* {
    scrollbar-width:
        thin;

    scrollbar-color:
        #c9b5bc
        transparent;
}


*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}


*::-webkit-scrollbar-thumb {
    border-radius: 20px;

    background:
        #c9b5bc;
}


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

@media (
    max-width: 700px
) {

    .messa-auth-brand-v2 {
        position: static;

        margin:
            14px auto 4px;

        width:
            max-content;
    }


    .messa-brand-v2-mark,
    .messa-new-mark {
        width: 41px;
        height: 41px;
    }


    .messa-brand-v2-copy small,
    .messa-new-brand > span:last-child > small {
        font-size: 6px;
    }


    .pos-topbar {
        min-height:
            70px !important;
    }

}


/* ==========================================================
   REDUCE MOTION
   ========================================================== */

@media (
    prefers-reduced-motion:
    reduce
) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;
    }

}


/* ==========================================================
   OHI MESSA ONBOARDING DESIGN 2.1
   ========================================================== */


/* ----------------------------------------------------------
   PAGE
   ---------------------------------------------------------- */

body.messa-onboarding-v21 {
    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:
        #faf8f9 !important;
}


.messa-onboarding-shell-v21 {
    min-height: 100vh;

    display: grid !important;

    grid-template-columns:
        350px
        minmax(0, 1fr) !important;

    background:
        #faf8f9;
}


/* ----------------------------------------------------------
   SIDEBAR
   ---------------------------------------------------------- */

.messa-onboarding-sidebar-v21 {
    position: sticky !important;

    top: 0 !important;

    min-height: 100vh !important;

    box-sizing: border-box;

    padding:
        31px
        30px
        32px !important;

    color: #fff !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(225,185,78,.24),
            transparent 25%
        ),
        radial-gradient(
            circle at 0% 100%,
            rgba(225,185,78,.08),
            transparent 28%
        ),
        linear-gradient(
            160deg,
            #4b001b 0%,
            #650024 42%,
            #73002a 73%,
            #52001d 100%
        ) !important;

    border-right:
        1px solid
        rgba(255,255,255,.07);

    box-shadow:
        14px 0 45px
        rgba(58,0,21,.11);

    overflow: hidden;
}


.messa-onboarding-sidebar-v21::before {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    right: -130px;
    bottom: -110px;

    border:
        1px solid
        rgba(225,185,78,.18);

    border-radius: 50%;

    pointer-events: none;
}


.messa-onboarding-sidebar-v21::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -70px;
    bottom: -67px;

    border:
        1px solid
        rgba(225,185,78,.16);

    border-radius: 50%;

    pointer-events: none;
}


/* ----------------------------------------------------------
   ANCIEN LOGO
   ---------------------------------------------------------- */

.messa-onboarding-legacy-brand-v21 {
    display:
        none !important;
}


/* ----------------------------------------------------------
   BRAND OFFICIEL
   ---------------------------------------------------------- */

.messa-onboarding-brand-v21 {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 56px;

    color: #fff;

    text-decoration: none;
}


.messa-onboarding-brand-mark-v21 {
    flex:
        0 0 auto;

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: #fff;

    overflow: hidden;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.16);
}


.messa-onboarding-brand-mark-v21 img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


.messa-onboarding-brand-copy-v21 {
    display: grid;

    gap: 5px;
}


.messa-onboarding-brand-copy-v21 strong {
    display: flex;

    align-items: baseline;

    gap: 5px;

    color: #fff;

    font-size: 17px;

    letter-spacing: .065em;

    line-height: 1;
}


.messa-onboarding-brand-copy-v21 strong b {
    color: #fff;

    font-weight: 900;
}


.messa-onboarding-brand-copy-v21 strong em {
    color:
        #e5bc51;

    font-style: normal;

    font-weight: 900;
}


.messa-onboarding-brand-copy-v21 small {
    color:
        rgba(255,255,255,.66);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .12em;
}


/* ----------------------------------------------------------
   SIDEBAR COPY
   ---------------------------------------------------------- */

.messa-onboarding-side-eyebrow-v21 {
    color:
        #e4b846 !important;

    font-size:
        10px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .14em !important;

    text-transform:
        uppercase;
}


.messa-onboarding-side-title-v21 {
    color:
        #fff !important;

    max-width:
        270px;

    margin-top:
        22px !important;

    margin-bottom:
        16px !important;

    font-size:
        clamp(
            25px,
            2vw,
            32px
        ) !important;

    font-weight:
        760 !important;

    line-height:
        1.17 !important;

    letter-spacing:
        -.035em !important;
}


/*
 * Ancien paragraphe descriptif :
 * tout texte secondaire du panneau.
 */

.messa-onboarding-sidebar-v21 p {
    color:
        rgba(
            255,
            255,
            255,
            .62
        ) !important;

    line-height:
        1.65 !important;
}


/* ----------------------------------------------------------
   ETAPES
   ---------------------------------------------------------- */

.messa-onboarding-step-row-v21 {
    min-height:
        44px !important;

    margin:
        4px 0 !important;

    padding:
        0 12px !important;

    display:
        flex !important;

    align-items:
        center !important;

    gap:
        11px !important;

    border:
        1px solid
        transparent !important;

    border-radius:
        12px !important;

    background:
        transparent !important;
}


.messa-onboarding-step-row-v21
.messa-onboarding-step-label-v21 {
    color:
        rgba(
            255,
            255,
            255,
            .53
        ) !important;

    font-weight:
        700 !important;
}


.messa-onboarding-step-row-v21.is-active {
    border-color:
        rgba(
            229,
            188,
            81,
            .30
        ) !important;

    background:
        linear-gradient(
            90deg,
            rgba(229,188,81,.18),
            rgba(255,255,255,.055)
        ) !important;

    box-shadow:
        inset
        3px 0
        #e5bc51;
}


.messa-onboarding-step-row-v21.is-active
.messa-onboarding-step-label-v21 {
    color:
        #fff !important;
}


.messa-onboarding-step-row-v21.is-complete
.messa-onboarding-step-label-v21 {
    color:
        rgba(
            255,
            255,
            255,
            .82
        ) !important;
}


/* Numéros déjà présents */

.messa-onboarding-step-row-v21
span:first-child:not(
    .messa-onboarding-step-label-v21
) {
    border-color:
        rgba(
            255,
            255,
            255,
            .20
        ) !important;

    color:
        rgba(
            255,
            255,
            255,
            .66
        ) !important;
}


.messa-onboarding-step-row-v21.is-active
span:first-child:not(
    .messa-onboarding-step-label-v21
) {
    border-color:
        #e5bc51 !important;

    color:
        #e5bc51 !important;
}


/* ----------------------------------------------------------
   MAIN
   ---------------------------------------------------------- */

.messa-onboarding-main-v21 {
    position: relative;

    min-width: 0;

    min-height: 100vh;

    box-sizing: border-box;

    padding:
        62px
        clamp(
            48px,
            8vw,
            140px
        )
        80px !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(209,161,40,.07),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #fff,
            #fcfafb
        ) !important;
}


.messa-onboarding-content-v21 {
    width: 100%;

    max-width:
        900px !important;

    margin:
        0 auto !important;
}


/* ----------------------------------------------------------
   BADGE PROGRESSION
   ---------------------------------------------------------- */

.messa-onboarding-progress-v21 {
    position: absolute;

    top: 24px;
    right: 34px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        8px 11px;

    border:
        1px solid
        #eadfe3;

    border-radius:
        100px;

    background:
        rgba(
            255,
            255,
            255,
            .86
        );

    box-shadow:
        0 6px 20px
        rgba(
            74,
            0,
            27,
            .05
        );

    backdrop-filter:
        blur(10px);
}


.messa-onboarding-progress-v21 span {
    color:
        #8c7f84;

    font-size:
        8px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.messa-onboarding-progress-v21 strong {
    color:
        #6d0028;

    font-size:
        11px;
}


.messa-onboarding-progress-v21 i {
    color:
        #cf9f29;

    font-style: normal;
}


/* ----------------------------------------------------------
   MAIN HEADINGS
   ---------------------------------------------------------- */

.messa-onboarding-main-eyebrow-v21 {
    color:
        #b27c13 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .12em !important;
}


.messa-onboarding-title-v21 {
    color:
        #5d0022 !important;

    margin-top:
        10px !important;

    margin-bottom:
        14px !important;

    font-size:
        clamp(
            35px,
            4vw,
            50px
        ) !important;

    font-weight:
        780 !important;

    line-height:
        1.05 !important;

    letter-spacing:
        -.05em !important;
}


/* ----------------------------------------------------------
   FORM
   ---------------------------------------------------------- */

.messa-onboarding-main-v21 form {
    margin-top:
        38px !important;
}


.messa-onboarding-label-v21 {
    color:
        #60565a !important;

    font-weight:
        750 !important;
}


.messa-onboarding-field-v21 {
    min-height:
        49px !important;

    border:
        1px solid
        #ddd1d6 !important;

    border-radius:
        12px !important;

    background:
        #fff !important;

    color:
        #2b2226 !important;

    box-shadow:
        0 2px 5px
        rgba(54,20,32,.018);
}


.messa-onboarding-field-v21:hover {
    border-color:
        #cbb8c0 !important;
}


.messa-onboarding-field-v21:focus {
    border-color:
        #79123a !important;

    outline: none !important;

    box-shadow:
        0 0 0 4px
        rgba(
            114,
            0,
            41,
            .075
        ) !important;
}


/* ----------------------------------------------------------
   CONTINUER
   ---------------------------------------------------------- */

.messa-onboarding-continue-v21 {
    min-height:
        47px !important;

    padding:
        0 24px !important;

    border:
        1px solid
        #650024 !important;

    border-radius:
        12px !important;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #57001f,
            #7a0b35
        ) !important;

    box-shadow:
        0 11px 28px
        rgba(
            94,
            0,
            34,
            .17
        ) !important;

    font-weight:
        850 !important;

    cursor:
        pointer;
}


.messa-onboarding-continue-v21:hover {
    transform:
        translateY(-1px);

    border-color:
        #a67416 !important;

    box-shadow:
        0 15px 33px
        rgba(
            94,
            0,
            34,
            .23
        ) !important;
}


.messa-onboarding-continue-v21::after {
    content:
        " →";

    color:
        #e5bc51;

    margin-left:
        6px;
}


/* ----------------------------------------------------------
   MOBILE / TABLETTE
   ---------------------------------------------------------- */

@media (
    max-width: 980px
) {

    .messa-onboarding-shell-v21 {
        grid-template-columns:
            280px
            minmax(0,1fr) !important;
    }


    .messa-onboarding-sidebar-v21 {
        padding:
            26px 20px !important;
    }


    .messa-onboarding-main-v21 {
        padding:
            72px
            34px
            60px !important;
    }

}


@media (
    max-width: 760px
) {

    .messa-onboarding-shell-v21 {
        display:
            block !important;
    }


    .messa-onboarding-sidebar-v21 {
        position:
            relative !important;

        min-height:
            auto !important;

        width:
            100% !important;

        padding:
            18px
            18px
            15px !important;

        border-right:
            0;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .08
            );
    }


    .messa-onboarding-brand-v21 {
        margin-bottom:
            18px;
    }


    .messa-onboarding-brand-mark-v21 {
        width:
            48px;

        height:
            48px;
    }


    .messa-onboarding-side-title-v21,
    .messa-onboarding-side-eyebrow-v21,
    .messa-onboarding-sidebar-v21 p {
        display:
            none !important;
    }


    .messa-onboarding-step-row-v21 {
        display:
            none !important;
    }


    .messa-onboarding-step-row-v21.is-active {
        display:
            flex !important;

        margin-top:
            8px !important;
    }


    .messa-onboarding-main-v21 {
        min-height:
            auto;

        padding:
            68px
            18px
            45px !important;
    }


    .messa-onboarding-progress-v21 {
        top:
            17px;

        right:
            18px;
    }


    .messa-onboarding-title-v21 {
        font-size:
            34px !important;
    }

}


/* ==========================================================
   OHI MESSA DASHBOARD UI 2.2
   ========================================================== */

body.messa-dashboard-v22 {
    margin: 0;

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        276px
        minmax(0, 1fr);

    color:
        #241d20;

    background:
        #f6f4f5;

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


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

.messa-sidebar-v22 {
    position: sticky;

    top: 0;

    z-index: 100;

    min-height: 100vh;

    max-height: 100vh;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    padding:
        22px
        16px
        17px;

    overflow-y: auto;

    color: #fff;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(224,181,69,.17),
            transparent 23%
        ),
        linear-gradient(
            165deg,
            #450018 0%,
            #590020 33%,
            #6b0027 69%,
            #470019 100%
        );

    border-right:
        1px solid
        rgba(255,255,255,.06);

    box-shadow:
        14px 0 45px
        rgba(54,0,20,.07);
}


.messa-sidebar-top-v22 {
    display: flex;

    align-items: center;

    justify-content:
        space-between;

    min-height: 56px;
}


.messa-sidebar-brand-v22 {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;

    color: #fff;

    text-decoration: none;
}


.messa-sidebar-logo-v22 {
    width: 45px;
    height: 45px;

    flex:
        0 0 45px;

    overflow: hidden;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 8px 24px
        rgba(0,0,0,.17);
}


.messa-sidebar-logo-v22 img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.messa-sidebar-brand-copy-v22 {
    display: grid;

    gap: 3px;

    min-width: 0;
}


.messa-sidebar-brand-copy-v22 strong {
    display: flex;

    align-items: baseline;

    gap: 4px;

    color: #fff;

    font-size: 14px;

    line-height: 1;

    letter-spacing: .065em;
}


.messa-sidebar-brand-copy-v22 strong b {
    color: #fff;
}


.messa-sidebar-brand-copy-v22 strong em {
    color:
        #e2b84b;

    font-style: normal;
}


.messa-sidebar-brand-copy-v22 small {
    color:
        rgba(255,255,255,.57);

    font-size: 6px;

    font-weight: 800;

    letter-spacing: .1em;
}


.messa-sidebar-close-v22 {
    display: none;

    width: 36px;
    height: 36px;

    place-items: center;

    border: 0;

    border-radius: 9px;

    background:
        rgba(255,255,255,.08);

    cursor: pointer;
}


.messa-sidebar-close-v22 svg {
    width: 17px;

    fill: none;

    stroke: #fff;

    stroke-width: 2;
}


/* ==========================================================
   ENTREPRISE ACTIVE
   ========================================================== */

.messa-business-card-v22 {
    margin:
        22px
        0
        22px;

    padding: 13px;

    display: grid;

    gap: 6px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.075),
            rgba(224,181,69,.075)
        );
}


.messa-business-card-label-v22 {
    color:
        #deb442;

    font-size: 7px;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: .12em;
}


.messa-business-card-v22 > strong {
    overflow: hidden;

    color: #fff;

    font-size: 11px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.messa-business-card-meta-v22 {
    display: flex;

    gap: 8px;

    color:
        rgba(255,255,255,.53);

    font-size: 7px;
}


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

.messa-nav-v22 {
    display: grid;

    gap: 18px;

    flex: 1;
}


.messa-nav-section-v22 {
    display: grid;

    gap: 4px;
}


.messa-nav-label-v22 {
    padding:
        0
        10px
        7px;

    color:
        rgba(255,255,255,.37);

    font-size: 7px;

    font-weight: 850;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.messa-nav-item-v22 {
    min-height: 41px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 10px;

    color:
        rgba(255,255,255,.68);

    border:
        1px solid
        transparent;

    border-radius: 11px;

    text-decoration: none;

    font-size: 9px;

    font-weight: 700;

    transition:
        160ms ease;
}


.messa-nav-item-v22:hover {
    color: #fff;

    background:
        rgba(255,255,255,.065);
}


.messa-nav-item-v22.active {
    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(224,181,69,.19),
            rgba(255,255,255,.055)
        );

    border-color:
        rgba(224,181,69,.12);

    box-shadow:
        inset
        3px 0
        #deb442;
}


.messa-nav-item-v22.muted {
    color:
        rgba(255,255,255,.36);

    cursor: default;
}


.messa-nav-icon-v22 {
    width: 18px;
    height: 18px;

    flex:
        0 0 18px;

    display: grid;

    place-items: center;
}


.messa-nav-icon-v22 svg {
    width: 17px;
    height: 17px;

    fill:
        currentColor;
}


.messa-nav-badge-v22 {
    margin-left: auto;

    min-width: 19px;

    box-sizing: border-box;

    padding:
        3px
        5px;

    color:
        #fff;

    border-radius:
        100px;

    background:
        rgba(255,255,255,.13);

    font-size: 7px;

    text-align: center;
}


.messa-nav-badge-v22.warning {
    color:
        #5a3c00;

    background:
        #e1b649;
}


.messa-nav-soon-v22 {
    margin-left: auto;

    color:
        #d7ae44;

    font-size: 6px;

    font-weight: 850;
}


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

.messa-sidebar-footer-v22 {
    padding-top: 18px;
}


.messa-user-card-v22 {
    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        10px;

    border-top:
        1px solid
        rgba(255,255,255,.075);
}


.messa-user-avatar-v22,
.messa-topbar-avatar-v22 {
    width: 35px;
    height: 35px;

    flex:
        0 0 35px;

    display: grid;

    place-items: center;

    color:
        #fff;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a77012,
            #ddaE36
        );

    font-size: 9px;

    font-weight: 900;

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.12);
}


.messa-user-copy-v22 {
    display: grid;

    min-width: 0;

    gap: 2px;
}


.messa-user-copy-v22 strong {
    overflow: hidden;

    color: #fff;

    font-size: 8px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.messa-user-copy-v22 small {
    color:
        rgba(255,255,255,.45);

    font-size: 7px;
}


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

.messa-dashboard-main-v22 {
    min-width: 0;
}


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

.messa-dashboard-topbar-v22 {
    position: sticky;

    top: 0;

    z-index: 80;

    min-height: 68px;

    box-sizing: border-box;

    padding:
        0
        clamp(
            20px,
            3vw,
            38px
        );

    display: flex;

    align-items: center;

    justify-content:
        space-between;

    background:
        rgba(255,255,255,.91);

    border-bottom:
        1px solid
        #eae4e6;

    backdrop-filter:
        blur(18px);

    box-shadow:
        0 5px 20px
        rgba(61,20,35,.035);
}


.messa-topbar-left-v22,
.messa-topbar-right-v22 {
    display: flex;

    align-items: center;

    gap: 12px;
}


.messa-topbar-left-v22 > div {
    display: grid;

    gap: 2px;
}


.messa-dashboard-kicker-v22 {
    color:
        #9d761d;

    font-size: 7px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .1em;
}


.messa-topbar-left-v22 strong {
    color:
        #4d001c;

    font-size: 10px;
}


.messa-date-chip-v22 {
    min-height: 37px;

    box-sizing: border-box;

    padding:
        0 11px;

    display: flex;

    align-items: center;

    gap: 7px;

    color:
        #706569;

    border:
        1px solid
        #e8e0e3;

    border-radius:
        10px;

    background: #fff;

    font-size: 8px;
}


.messa-date-chip-v22 svg,
.messa-topbar-icon-v22 svg,
.messa-mobile-menu-v22 svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.messa-topbar-icon-v22 {
    position: relative;

    width: 37px;
    height: 37px;

    display: grid;

    place-items: center;

    color:
        #6b5f64;

    border:
        1px solid
        #e8e0e3;

    border-radius:
        10px;

    background: #fff;

    cursor: pointer;
}


.messa-topbar-icon-v22 > span {
    position: absolute;

    right: 7px;
    top: 7px;

    width: 6px;
    height: 6px;

    border:
        2px solid
        #fff;

    border-radius: 50%;

    background:
        #d8a82f;
}


.messa-mobile-menu-v22 {
    display: none;

    width: 38px;
    height: 38px;

    place-items: center;

    color:
        #5b0021;

    border:
        1px solid
        #e7dfe2;

    border-radius:
        10px;

    background: #fff;

    cursor: pointer;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.messa-dashboard-content-v22 {
    width:
        min(
            1420px,
            calc(100% - 52px)
        );

    margin:
        0 auto;

    padding:
        42px
        0
        65px;
}


/* ==========================================================
   HERO
   ========================================================== */

.messa-dashboard-hero-v22 {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    gap: 25px;

    margin-bottom:
        24px;
}


.messa-hero-eyebrow-v22 {
    color:
        #a27619;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.messa-dashboard-hero-v22 h1 {
    margin:
        8px 0 7px;

    color:
        #4c001b;

    font-size:
        clamp(
            32px,
            4vw,
            47px
        );

    line-height: 1;

    letter-spacing:
        -.05em;
}


.messa-dashboard-hero-v22 p {
    margin: 0;

    color:
        #82777b;

    font-size: 10px;
}


.messa-hero-actions-v22 {
    display: flex;

    gap: 8px;
}


.messa-action-primary-v22,
.messa-action-secondary-v22 {
    min-height: 42px;

    box-sizing: border-box;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding:
        0 15px;

    border-radius:
        11px;

    text-decoration: none;

    font-size: 8px;

    font-weight: 850;
}


.messa-action-primary-v22 {
    color: #fff;

    border:
        1px solid
        #5c0021;

    background:
        linear-gradient(
            135deg,
            #50001d,
            #76002b
        );

    box-shadow:
        0 9px 24px
        rgba(91,0,33,.15);
}


.messa-action-primary-v22 svg {
    width: 15px;
    height: 15px;

    fill: none;

    stroke: currentColor;

    stroke-width: 2;
}


.messa-action-secondary-v22 {
    color:
        #650024;

    border:
        1px solid
        #dfd4d8;

    background: #fff;
}


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

.messa-kpi-grid-v22 {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 12px;

    margin-bottom: 13px;
}


.messa-kpi-v22 {
    position: relative;

    min-width: 0;

    padding: 17px;

    overflow: hidden;

    border:
        1px solid
        #e9e2e4;

    border-radius:
        17px;

    background:
        linear-gradient(
            155deg,
            #fff,
            #fdfbfc
        );

    box-shadow:
        0 5px 18px
        rgba(57,20,33,.025);
}


.messa-kpi-v22::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    right: -38px;
    top: -39px;

    border:
        13px solid
        rgba(209,161,40,.055);

    border-radius: 50%;
}


.messa-kpi-top-v22 {
    min-height: 32px;

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    margin-bottom: 13px;
}


.messa-kpi-icon-v22 {
    width: 31px;
    height: 31px;

    display: grid;

    place-items: center;

    color:
        #690026;

    border-radius: 9px;

    background:
        #f6edf0;
}


.messa-kpi-icon-v22.gold {
    color:
        #9c6f13;

    background:
        #fff5dc;
}


.messa-kpi-icon-v22.warning {
    color:
        #a06516;

    background:
        #fff1dd;
}


.messa-kpi-icon-v22.success {
    color:
        #247455;

    background:
        #eaf6f0;
}


.messa-kpi-icon-v22 svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.messa-kpi-trend-v22 {
    padding:
        4px 6px;

    border-radius:
        100px;

    font-size: 7px;

    font-weight: 850;
}


.messa-kpi-trend-v22.positive {
    color:
        #247455;

    background:
        #eaf6f0;
}


.messa-kpi-trend-v22.negative {
    color:
        #a6313d;

    background:
        #f9e9ec;
}


.messa-kpi-label-v22 {
    display: block;

    margin-bottom: 6px;

    color:
        #83777c;

    font-size: 8px;

    font-weight: 700;
}


.messa-kpi-v22 > strong {
    display: block;

    color:
        #3c0016;

    font-size:
        clamp(
            22px,
            2vw,
            28px
        );

    letter-spacing:
        -.035em;
}


.messa-kpi-v22 > strong small {
    color:
        #907f85;

    font-size: 8px;

    letter-spacing: 0;
}


.messa-kpi-v22 p {
    margin:
        7px 0 0;

    color:
        #a09599;

    font-size: 7px;
}


/* ==========================================================
   CARDS
   ========================================================== */

.messa-dashboard-main-grid-v22,
.messa-dashboard-bottom-grid-v22 {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(310px, .8fr);

    gap: 13px;

    margin-bottom: 13px;
}


.messa-dashboard-card-v22 {
    min-width: 0;

    padding: 19px;

    border:
        1px solid
        #e9e2e4;

    border-radius:
        18px;

    background: #fff;

    box-shadow:
        0 5px 20px
        rgba(57,20,33,.025);
}


.messa-card-heading-v22 {
    min-height: 41px;

    display: flex;

    align-items: flex-start;

    justify-content:
        space-between;

    gap: 15px;

    margin-bottom: 15px;
}


.messa-card-heading-v22 > div {
    display: grid;

    gap: 4px;
}


.messa-card-heading-v22 span {
    color:
        #a0771e;

    font-size: 7px;

    font-weight: 850;

    text-transform: uppercase;

    letter-spacing: .1em;
}


.messa-card-heading-v22 h2 {
    margin: 0;

    color:
        #4f001d;

    font-size: 15px;

    letter-spacing:
        -.025em;
}


.messa-card-heading-v22 > a {
    color:
        #6a0027;

    font-size: 8px;

    font-weight: 800;

    text-decoration: none;
}


.messa-period-v22 {
    padding:
        5px 7px;

    color:
        #8b7e83 !important;

    border:
        1px solid
        #ebe4e6;

    border-radius:
        8px;

    background:
        #faf8f9;

    font-size:
        6px !important;
}


/* ==========================================================
   CHART
   ========================================================== */

.messa-chart-v22 {
    height: 250px;

    box-sizing: border-box;

    padding:
        18px
        7px
        0;

    border-radius:
        13px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 48px,
            #f0ecee 49px
        );
}


.messa-chart-bars-v22 {
    height: 100%;

    display: grid;

    grid-template-columns:
        repeat(
            6,
            1fr
        );

    gap:
        clamp(
            12px,
            3vw,
            30px
        );

    align-items: end;
}


.messa-chart-column-v22 {
    height: 100%;

    display: grid;

    grid-template-rows:
        1fr
        22px;

    gap: 7px;

    text-align: center;
}


.messa-chart-value-v22 {
    min-height: 0;

    display: flex;

    align-items: end;

    justify-content: center;
}


.messa-chart-value-v22 span {
    width:
        min(
            34px,
            70%
        );

    min-height: 4px;

    border-radius:
        7px 7px 2px 2px;

    background:
        linear-gradient(
            180deg,
            #d6a52d,
            #75002b
        );

    box-shadow:
        0 8px 20px
        rgba(112,0,40,.08);
}


.messa-chart-column-v22 small {
    color:
        #8d8186;

    font-size: 7px;

    font-weight: 700;
}


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

.messa-quick-grid-v22 {
    display: grid;

    gap: 7px;
}


.messa-quick-item-v22 {
    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        8px 10px;

    color:
        inherit;

    border:
        1px solid
        #ece5e7;

    border-radius:
        12px;

    background:
        #fff;

    text-decoration: none;
}


.messa-quick-item-v22:hover {
    border-color:
        rgba(112,0,40,.17);

    background:
        #fcf8fa;

    transform:
        translateX(2px);
}


.messa-quick-icon-v22 {
    width: 34px;
    height: 34px;

    flex:
        0 0 34px;

    display: grid;

    place-items: center;

    color:
        #690026;

    border-radius: 9px;

    background:
        #f5eaee;
}


.messa-quick-icon-v22 svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}


.messa-quick-item-v22 > span:last-child {
    min-width: 0;

    display: grid;

    gap: 2px;
}


.messa-quick-item-v22 strong {
    color:
        #4c001c;

    font-size: 9px;
}


.messa-quick-item-v22 small {
    color:
        #968a8f;

    font-size: 7px;
}


/* ==========================================================
   ACTIVITY
   ========================================================== */

.messa-activity-list-v22 {
    display: grid;
}


.messa-activity-row-v22 {
    min-height: 61px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    gap: 11px;

    align-items: center;

    border-bottom:
        1px solid
        #f0ebed;
}


.messa-activity-row-v22:last-child {
    border-bottom: 0;
}


.messa-activity-icon-v22 {
    width: 32px;
    height: 32px;

    display: grid;

    place-items: center;

    color:
        #a57516;

    border-radius: 9px;

    background:
        #fff5dc;
}


.messa-activity-icon-v22 svg {
    width: 15px;
    height: 15px;

    fill: currentColor;
}


.messa-activity-main-v22,
.messa-activity-amount-v22 {
    display: grid;

    gap: 3px;
}


.messa-activity-main-v22 strong,
.messa-activity-amount-v22 strong {
    color:
        #443a3e;

    font-size: 9px;
}


.messa-activity-main-v22 span,
.messa-activity-amount-v22 span {
    color:
        #988d91;

    font-size: 7px;
}


.messa-activity-amount-v22 {
    text-align: right;
}


/* ==========================================================
   EMPTY
   ========================================================== */

.messa-empty-v22 {
    min-height: 180px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.messa-empty-icon-v22 {
    width: 39px;
    height: 39px;

    display: grid;

    place-items: center;

    margin-bottom: 8px;

    color:
        #a2771b;

    border-radius: 50%;

    background:
        #fff4da;
}


.messa-empty-icon-v22 svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;
}


.messa-empty-v22 strong {
    color:
        #4b001b;

    font-size: 9px;
}


.messa-empty-v22 p {
    max-width: 230px;

    margin:
        5px 0 0;

    color:
        #9c9094;

    font-size: 7px;

    line-height: 1.5;
}


/* ==========================================================
   INTELLIGENCE
   ========================================================== */

.messa-intelligence-card-v22 {
    position: relative;

    padding:
        24px;

    overflow: hidden;

    color: #fff;

    border-radius:
        18px;

    background:
        radial-gradient(
            circle at 92% 7%,
            rgba(229,188,81,.22),
            transparent 30%
        ),
        linear-gradient(
            150deg,
            #4b001b,
            #720029
        );

    box-shadow:
        0 15px 40px
        rgba(76,0,27,.13);
}


.messa-intelligence-card-v22::after {
    content: "";

    position: absolute;

    right: -65px;
    bottom: -75px;

    width: 180px;
    height: 180px;

    border:
        1px solid
        rgba(229,188,81,.16);

    border-radius: 50%;
}


.messa-intelligence-mark-v22 {
    width: 45px;
    height: 45px;

    margin-bottom: 20px;

    overflow: hidden;

    border-radius: 50%;

    background: #fff;
}


.messa-intelligence-mark-v22 img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.messa-intelligence-label-v22 {
    color:
        #e3b747;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.messa-intelligence-card-v22 h2 {
    max-width: 280px;

    margin:
        8px 0 10px;

    color: #fff;

    font-size: 22px;

    line-height: 1.08;

    letter-spacing:
        -.035em;
}


.messa-intelligence-card-v22 p {
    position: relative;

    z-index: 2;

    max-width: 340px;

    margin: 0;

    color:
        rgba(255,255,255,.62);

    font-size: 8px;

    line-height: 1.65;
}


.messa-intelligence-pill-v22 {
    width: max-content;

    margin-top: 20px;

    padding:
        6px 8px;

    color:
        #f1cf74;

    border:
        1px solid
        rgba(229,188,81,.25);

    border-radius: 100px;

    background:
        rgba(229,188,81,.08);

    font-size: 7px;

    font-weight: 800;
}


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

.messa-dashboard-footer-v22 {
    min-height: 48px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 11px;

    color:
        #a09599;

    font-size: 6px;

    font-weight: 850;

    letter-spacing: .12em;
}


.messa-dashboard-footer-v22
span:first-child {
    color:
        #690026;

    margin-right: 10px;
}


.messa-dashboard-footer-v22 i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        #d2a129;
}


/* ==========================================================
   OVERLAY
   ========================================================== */

.messa-dashboard-overlay-v22 {
    display: none;
}


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

@media (
    max-width: 1100px
) {

    body.messa-dashboard-v22 {
        grid-template-columns:
            235px
            minmax(0, 1fr);
    }


    .messa-sidebar-v22 {
        padding-left: 12px;
        padding-right: 12px;
    }


    .messa-kpi-grid-v22 {
        grid-template-columns:
            1fr 1fr;
    }


    .messa-dashboard-main-grid-v22,
    .messa-dashboard-bottom-grid-v22 {
        grid-template-columns:
            1fr;
    }

}


@media (
    max-width: 780px
) {

    body.messa-dashboard-v22 {
        display: block;
    }


    .messa-sidebar-v22 {
        position: fixed;

        left: 0;
        top: 0;

        width: 276px;

        transform:
            translateX(-102%);

        transition:
            transform
            220ms
            cubic-bezier(.2,.8,.2,1);
    }


    body.messa-sidebar-open-v22
    .messa-sidebar-v22 {
        transform:
            translateX(0);
    }


    .messa-sidebar-close-v22,
    .messa-mobile-menu-v22 {
        display: grid;
    }


    .messa-dashboard-overlay-v22 {
        position: fixed;

        inset: 0;

        z-index: 90;

        background:
            rgba(25,4,11,.42);

        backdrop-filter:
            blur(2px);
    }


    body.messa-sidebar-open-v22
    .messa-dashboard-overlay-v22 {
        display: block;
    }


    .messa-dashboard-content-v22 {
        width:
            calc(100% - 28px);

        padding-top:
            28px;
    }


    .messa-dashboard-hero-v22 {
        align-items:
            flex-start;

        flex-direction:
            column;
    }


    .messa-hero-actions-v22 {
        width: 100%;
    }


    .messa-action-primary-v22,
    .messa-action-secondary-v22 {
        flex: 1;
    }


    .messa-date-chip-v22 {
        display: none;
    }

}


@media (
    max-width: 540px
) {

    .messa-dashboard-topbar-v22 {
        padding:
            0 14px;
    }


    .messa-kpi-grid-v22 {
        grid-template-columns:
            1fr;
    }


    .messa-dashboard-hero-v22 h1 {
        font-size: 34px;
    }


    .messa-hero-actions-v22 {
        display: grid;
    }


    .messa-chart-v22 {
        height: 210px;
    }


    .messa-dashboard-card-v22,
    .messa-intelligence-card-v22 {
        padding: 15px;
    }

}

/* ==========================================================
   OHI MESSA — ONBOARDING VALIDATION 2.3-B2
   ========================================================== */

.messa-validation-list {
    margin:
        7px 0 0;

    padding-left:
        17px;
}

.messa-validation-list li {
    margin:
        3px 0;

    line-height:
        1.45;
}