:root {
    --navy: #0b1f33;
    --navy-2: #102b46;
    --navy-3: #183b5c;
    --gold: #c9a24a;
    --gold-soft: #f3ead3;
    --surface: #ffffff;
    --background: #f5f7fa;
    --line: #e4e8ee;
    --text: #16202a;
    --muted: #6e7885;
    --success: #187355;
    --danger: #b42318;
    --shadow:
        0 18px 50px
        rgba(11, 31, 51, .09);
    --radius: 22px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: var(--text);
    background: var(--background);
}

button,
input,
select,
textarea {
    font: inherit;
}

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

a {
    color: inherit;
}

.hidden {
    display: none !important;
}

/* BRAND */

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
    color: #fff;
}

.brand-lockup.dark {
    color: var(--navy);
}

.brand-lockup > div:last-child,
.brand-lockup > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.brand-lockup strong {
    letter-spacing: .055em;
    font-size: 15px;
}

.brand-lockup span,
.brand-lockup small {
    font-size: 11px;
    opacity: .7;
}

.brand-mark {
    width: 43px;
    height: 43px;
    border-radius: 14px;
    display: inline-grid;
    place-items: center;
    background:
        linear-gradient(
            145deg,
            var(--gold),
            #eed994
        );
    color: var(--navy);
    font-weight: 900;
    box-shadow:
        0 10px 28px
        rgba(201, 162, 74, .22);
}

.brand-mark.small {
    width: 34px;
    height: 34px;
    border-radius: 11px;
}

.eyebrow {
    color: var(--gold);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
}

/* BUTTONS */

.primary-button,
.secondary-button,
.outline-button,
.text-button {
    border: 0;
    border-radius: 13px;
    min-height: 48px;
    padding: 0 22px;
    font-weight: 750;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

.primary-button {
    background: var(--navy);
    color: #fff;
    box-shadow:
        0 10px 24px
        rgba(11, 31, 51, .17);
}

.primary-button:hover {
    transform: translateY(-1px);
    box-shadow:
        0 14px 30px
        rgba(11, 31, 51, .23);
}

.primary-button.compact {
    min-height: 44px;
    width: auto;
}

.secondary-button {
    background: #eef1f5;
    color: var(--navy);
}

.outline-button {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
}

.text-button {
    background: transparent;
    color: var(--navy);
}

.text-link {
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
}

/* AUTH */

.auth-body {
    background: #fff;
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        minmax(360px, .92fr)
        minmax(480px, 1.08fr);
}

.auth-brand-panel {
    position: relative;
    padding: 42px 55px;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(201, 162, 74, .18),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #071a2c,
            var(--navy-2)
        );
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.auth-brand-panel::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid
        rgba(255,255,255,.08);
    border-radius: 50%;
    right: -170px;
    bottom: -170px;
}

.auth-brand-content {
    margin: auto 0;
    max-width: 580px;
}

.auth-brand-content h1 {
    font-size:
        clamp(42px, 5vw, 72px);
    line-height: .98;
    margin: 20px 0 28px;
    letter-spacing: -.055em;
}

.auth-brand-content p {
    max-width: 480px;
    line-height: 1.75;
    font-size: 16px;
    color:
        rgba(255,255,255,.72);
}

.brand-points {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.brand-points span {
    border: 1px solid
        rgba(255,255,255,.12);
    background:
        rgba(255,255,255,.06);
    padding: 9px 13px;
    border-radius: 100px;
    font-size: 12px;
}

.auth-brand-footer {
    font-size: 11px;
    color:
        rgba(255,255,255,.45);
}

.auth-form-panel {
    display: grid;
    place-items: center;
    padding: 50px;
}

.auth-form-wrap {
    width: min(100%, 470px);
}

.mobile-brand {
    display: none;
}

.auth-heading {
    margin-bottom: 31px;
}

.auth-heading h2 {
    font-size: 34px;
    letter-spacing: -.035em;
    margin: 10px 0 10px;
}

.auth-heading p {
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.auth-form {
    display: grid;
    gap: 18px;
}

.field {
    display: grid;
    gap: 8px;
}

.field > span {
    font-size: 13px;
    font-weight: 700;
    color: #35404c;
}

.field small {
    font-weight: 500;
    color: var(--muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 13px;
    padding: 14px 15px;
    outline: none;
    color: var(--text);
    transition:
        border .17s ease,
        box-shadow .17s ease;
}

.field textarea {
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color:
        rgba(201, 162, 74, .9);
    box-shadow:
        0 0 0 4px
        rgba(201, 162, 74, .12);
}

.form-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.check-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
}

.form-alert {
    border-radius: 13px;
    padding: 13px 15px;
    margin: 0 0 18px;
    font-size: 13px;
}

.form-alert.error {
    background: #fff0ef;
    color: var(--danger);
    border: 1px solid #ffd4d0;
}

.form-alert.success {
    background: #edf9f4;
    color: var(--success);
    border: 1px solid #c7eadc;
}

.auth-secondary {
    margin-top: 24px;
    text-align: center;
    color: var(--muted);
    font-size: 13px;
}

.auth-secondary a {
    color: var(--navy);
    font-weight: 800;
}

/* LANDING */

.landing {
    background:
        radial-gradient(
            circle at 80% 20%,
            var(--gold-soft),
            transparent 25%
        ),
        #fbfbfc;
}

.landing-header {
    min-height: 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1240px;
    margin: auto;
    padding: 0 30px;
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero {
    min-height:
        calc(100vh - 86px);
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 60px;
    align-items: center;
    max-width: 1240px;
    margin: auto;
    padding: 40px 30px 80px;
}

.hero-copy h1 {
    font-size:
        clamp(52px, 6vw, 82px);
    letter-spacing: -.065em;
    line-height: .96;
    margin: 22px 0 28px;
}

.hero-copy h1 span {
    color: var(--gold);
}

.hero-copy > p {
    font-size: 18px;
    color: var(--muted);
    line-height: 1.7;
    max-width: 610px;
}

.hero-badge {
    display: inline-flex;
    border: 1px solid
        rgba(201, 162, 74, .3);
    background: var(--gold-soft);
    color: #725715;
    padding: 8px 12px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.hero-actions {
    margin-top: 32px;
    display: flex;
    gap: 10px;
}

.product-window {
    border-radius: 28px;
    padding: 24px;
    background: var(--navy);
    color: #fff;
    box-shadow:
        0 35px 90px
        rgba(11,31,51,.24);
    transform: perspective(1000px)
        rotateY(-3deg);
}

.product-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color:
        rgba(255,255,255,.68);
}

.status-dot {
    background:
        rgba(38, 176, 125, .13);
    color: #77ddb8;
    padding: 7px 10px;
    border-radius: 100px;
}

.product-heading {
    display: grid;
    gap: 7px;
    margin: 70px 0 25px;
}

.product-heading span {
    color:
        rgba(255,255,255,.55);
    font-size: 12px;
}

.product-heading strong {
    font-size: 30px;
}

.preview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.preview-card {
    background:
        rgba(255,255,255,.07);
    border: 1px solid
        rgba(255,255,255,.08);
    padding: 19px;
    border-radius: 18px;
    display: grid;
    gap: 9px;
}

.preview-card.wide {
    grid-column: 1 / -1;
}

.preview-card span {
    font-size: 11px;
    color: var(--gold);
}

.preview-card p {
    color:
        rgba(255,255,255,.65);
    line-height: 1.6;
    margin: 0;
    font-size: 13px;
}

/* ONBOARDING */

.onboarding-body {
    background: #fff;
}

.onboarding-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns:
        350px minmax(0, 1fr);
}

.onboarding-aside {
    position: fixed;
    width: 350px;
    inset: 0 auto 0 0;
    padding: 34px;
    background:
        linear-gradient(
            160deg,
            #071a2c,
            #102c47
        );
    color: #fff;
    display: flex;
    flex-direction: column;
}

.onboarding-copy {
    margin: 50px 0 38px;
}

.onboarding-copy h1 {
    font-size: 29px;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.onboarding-copy p {
    color:
        rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.65;
}

.onboarding-progress-list {
    display: grid;
    gap: 5px;
    overflow: auto;
}

.progress-item {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 9px 11px;
    border-radius: 11px;
    color:
        rgba(255,255,255,.45);
    transition: .2s ease;
}

.progress-item span {
    width: 27px;
    height: 27px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    border: 1px solid
        rgba(255,255,255,.14);
    font-size: 11px;
}

.progress-item strong {
    font-size: 12px;
}

.progress-item.active {
    color: #fff;
    background:
        rgba(255,255,255,.08);
}

.progress-item.active span {
    border-color: var(--gold);
    color: var(--gold);
}

.progress-item.done span {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy);
}

.onboarding-main {
    grid-column: 2;
    min-height: 100vh;
    padding: 70px
        clamp(35px, 8vw, 120px);
}

.onboarding-main form {
    max-width: 880px;
    margin: auto;
}

.onboarding-mobile-head {
    display: none;
}

.onboarding-alert {
    max-width: 880px;
    margin: 0 auto 20px;
}

.wizard-step {
    display: none;
    animation:
        stepIn .3s ease both;
}

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

@keyframes stepIn {
    from {
        opacity: 0;
        transform:
            translateY(7px);
    }

    to {
        opacity: 1;
        transform:
            translateY(0);
    }
}

.step-heading {
    max-width: 670px;
    margin-bottom: 35px;
}

.step-heading h2 {
    font-size:
        clamp(30px, 4vw, 46px);
    letter-spacing: -.045em;
    line-height: 1.06;
    margin: 10px 0 14px;
}

.step-heading p {
    color: var(--muted);
    line-height: 1.7;
    margin: 0;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.span-2 {
    grid-column: span 2;
}

.category-grid,
.type-grid,
.module-grid,
.objectives-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 12px;
}

.selection-card,
.type-card {
    text-align: left;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 17px;
    padding: 18px;
    cursor: pointer;
    display: grid;
    gap: 7px;
    transition: .18s ease;
}

.selection-card:hover,
.type-card:hover,
.selection-card.selected,
.type-card.selected {
    border-color: var(--gold);
    box-shadow:
        0 10px 28px
        rgba(11,31,51,.08);
    transform: translateY(-1px);
}

.selection-code {
    width: 35px;
    height: 35px;
    border-radius: 10px;
    background: var(--gold-soft);
    color: #806219;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 10px;
}

.selection-card small,
.type-card span {
    color: var(--muted);
    font-size: 11px;
}

.business-types-panel {
    margin-top: 26px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
}

.panel-title {
    font-weight: 800;
    margin-bottom: 14px;
}

.select-all-card,
.radio-card,
.reminder-card,
.objective-card,
.module-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: .17s ease;
}

.select-all-card,
.radio-card,
.reminder-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px;
}

.select-all-card {
    margin-bottom: 15px;
    background: #f9fafb;
}

.select-all-card span,
.radio-card span,
.reminder-card span {
    display: grid;
    gap: 4px;
}

.select-all-card small,
.radio-card small,
.reminder-card small {
    color: var(--muted);
    line-height: 1.5;
}

.module-card {
    padding: 16px;
    position: relative;
    display: grid;
    gap: 8px;
}

.module-card input {
    position: absolute;
    top: 14px;
    right: 14px;
}

.module-card.selected {
    border-color: var(--gold);
    background:
        linear-gradient(
            180deg,
            #fff,
            #fffdf8
        );
}

.module-engine {
    font-size: 9px;
    letter-spacing: .11em;
    color: var(--muted);
}

.recommended-label {
    color: #8a6818;
    min-height: 14px;
}

.choice-stack {
    display: grid;
    gap: 11px;
}

.radio-card.recommended {
    border-color:
        rgba(201,162,74,.65);
}

.reminder-card {
    margin-top: 24px;
    background: #f8fafc;
}

.money-input {
    display: grid;
    grid-template-columns:
        1fr auto;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 13px;
    overflow: hidden;
    background: #fff;
}

.money-input input {
    border: 0;
    border-radius: 0;
}

.money-input span {
    padding: 0 14px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
}

.objective-card {
    min-height: 85px;
    padding: 16px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.objective-card:has(input:checked) {
    border-color: var(--gold);
    background: #fffdf8;
}

.review-card {
    border: 1px solid var(--line);
    border-radius: 19px;
    overflow: hidden;
}

.review-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--line);
}

.review-line:last-child {
    border-bottom: 0;
}

.review-line span {
    color: var(--muted);
}

.generation-card {
    margin-top: 20px;
    border-radius: 19px;
    padding: 22px;
    background: var(--navy);
    color: #fff;
    display: flex;
    gap: 18px;
    align-items: center;
}

.generation-card p {
    margin: 7px 0 0;
    color:
        rgba(255,255,255,.62);
    line-height: 1.55;
}

.generation-mark {
    min-width: 53px;
    width: 53px;
    height: 53px;
    border-radius: 16px;
    background: var(--gold);
    color: var(--navy);
    display: grid;
    place-items: center;
    font-weight: 900;
}

.wizard-footer {
    max-width: 880px;
    margin: 45px auto 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
}

.wizard-spacer {
    flex: 1;
}

/* DASHBOARD */

.app-body {
    background: var(--background);
}

.app-shell {
    display: grid;
    grid-template-columns:
        270px minmax(0, 1fr);
    min-height: 100vh;
}

.app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 270px;
    background: var(--navy);
    color: #fff;
    padding: 26px 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.business-context {
    margin: 28px 0 22px;
    padding: 15px;
    background:
        rgba(255,255,255,.06);
    border: 1px solid
        rgba(255,255,255,.07);
    border-radius: 15px;
    display: grid;
    gap: 5px;
}

.business-context small,
.business-context span {
    color:
        rgba(255,255,255,.5);
    font-size: 10px;
}

.business-context strong {
    font-size: 13px;
}

.app-menu {
    display: grid;
    gap: 3px;
}

.app-menu a,
.app-menu span {
    padding: 11px 12px;
    border-radius: 10px;
    color:
        rgba(255,255,255,.62);
    font-size: 12px;
    text-decoration: none;
}

.app-menu a.active {
    color: #fff;
    background:
        rgba(255,255,255,.08);
}

.logout-form {
    margin-top: auto;
    padding-top: 25px;
}

.logout-form button {
    width: 100%;
    background: transparent;
    border: 1px solid
        rgba(255,255,255,.12);
    color:
        rgba(255,255,255,.65);
    min-height: 42px;
    border-radius: 11px;
    cursor: pointer;
}

.app-main {
    grid-column: 2;
    padding: 32px
        clamp(25px, 4vw, 55px)
        60px;
}

.app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-bottom: 30px;
}

.app-topbar h1 {
    margin: 6px 0 0;
    font-size: 28px;
    letter-spacing: -.035em;
}

.business-chip {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 800;
}

.dashboard-hero {
    border-radius: 24px;
    padding: 30px;
    background:
        radial-gradient(
            circle at 85% 0,
            rgba(201,162,74,.18),
            transparent 28%
        ),
        var(--navy);
    color: #fff;
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: center;
}

.dashboard-hero h2 {
    font-size: 29px;
    margin: 12px 0 9px;
    letter-spacing: -.035em;
}

.dashboard-hero p {
    margin: 0;
    color:
        rgba(255,255,255,.6);
    max-width: 660px;
    line-height: 1.6;
}

.score-placeholder {
    min-width: 160px;
    padding: 18px;
    border-radius: 17px;
    background:
        rgba(255,255,255,.07);
    border: 1px solid
        rgba(255,255,255,.08);
    display: grid;
    gap: 7px;
}

.score-placeholder span {
    color: var(--gold);
    font-size: 10px;
    font-weight: 800;
}

.score-placeholder strong {
    font-size: 38px;
}

.score-placeholder small {
    color:
        rgba(255,255,255,.5);
}

.kpi-grid {
    display: grid;
    grid-template-columns:
        repeat(4, 1fr);
    gap: 14px;
    margin: 18px 0;
}

.kpi-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 19px;
    display: grid;
    gap: 8px;
}

.kpi-card > span {
    color: var(--muted);
    font-size: 11px;
}

.kpi-card strong {
    font-size: 21px;
    letter-spacing: -.025em;
}

.kpi-card small {
    color: #98a0aa;
    font-size: 10px;
}

.dashboard-columns {
    display: grid;
    grid-template-columns:
        1.3fr .7fr;
    gap: 18px;
}

.dashboard-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 21px;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.panel-header h3 {
    margin: 5px 0 0;
    font-size: 18px;
}

.panel-header > strong {
    background: var(--gold-soft);
    color: #765914;
    min-width: 37px;
    height: 37px;
    border-radius: 11px;
    display: grid;
    place-items: center;
}

.active-modules {
    display: grid;
    grid-template-columns:
        repeat(2, 1fr);
    gap: 9px;
}

.active-module {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.active-module > span {
    min-width: 32px;
    height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: #f0f3f6;
    font-size: 9px;
    font-weight: 900;
}

.active-module div {
    display: grid;
    gap: 3px;
}

.active-module strong {
    font-size: 11px;
}

.active-module small {
    color: var(--muted);
    font-size: 9px;
}

.branch-row {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.branch-row:last-child {
    border-bottom: 0;
}

.branch-row div {
    display: grid;
    gap: 4px;
}

.branch-row strong {
    font-size: 12px;
}

.branch-row span,
.branch-row small {
    color: var(--muted);
    font-size: 10px;
}

/* RESPONSIVE */

@media (max-width: 1050px) {

    .category-grid,
    .type-grid,
    .module-grid,
    .objectives-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

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

}

@media (max-width: 860px) {

    .auth-shell {
        display: block;
    }

    .auth-brand-panel {
        display: none;
    }

    .auth-form-panel {
        min-height: 100vh;
        padding: 35px 22px;
    }

    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        margin-bottom: 55px;
    }

    .onboarding-shell {
        display: block;
    }

    .onboarding-aside {
        display: none;
    }

    .onboarding-main {
        padding: 25px 20px 45px;
    }

    .onboarding-mobile-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 45px;
    }

    .onboarding-mobile-head > span {
        color: var(--muted);
        font-size: 11px;
    }

    .app-shell {
        display: block;
    }

    .app-sidebar {
        position: static;
        width: 100%;
        height: auto;
    }

    .app-menu {
        display: none;
    }

    .logout-form {
        display: none;
    }

    .app-main {
        padding: 25px 18px 50px;
    }

    .dashboard-columns {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 640px) {

    .landing-header {
        padding: 0 18px;
    }

    .landing-header
    .brand-lockup span:last-child
    small {
        display: none;
    }

    .hero {
        display: block;
        padding: 50px 20px;
    }

    .hero-product {
        margin-top: 55px;
    }

    .product-window {
        transform: none;
    }

    .hero-copy h1 {
        font-size: 49px;
    }

    .form-grid,
    .category-grid,
    .type-grid,
    .module-grid,
    .objectives-grid,
    .kpi-grid,
    .active-modules {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }

    .dashboard-hero {
        display: grid;
    }

    .score-placeholder {
        min-width: 0;
    }

    .app-topbar {
        align-items: flex-start;
    }

}

/* =========================================================
   OHI MESSA CORE 1.3B
   Multi-entreprises / équipe
   ========================================================= */

.workspace-body {
    background: var(--background);
}

.workspace-shell {
    min-height: 100vh;
}

.workspace-header {
    height: 82px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 clamp(20px, 5vw, 65px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.workspace-content {
    width: min(1180px, calc(100% - 40px));
    margin: auto;
    padding: 55px 0 80px;
}

.workspace-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 32px;
}

.workspace-heading h1 {
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -.05em;
    margin: 8px 0 10px;
}

.workspace-heading p {
    max-width: 640px;
    color: var(--muted);
    line-height: 1.65;
    margin: 0;
}

.workspace-count {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--gold-soft);
    display: grid;
    place-items: center;
    color: #755a16;
    font-size: 19px;
}

.business-list-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.business-list-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 21px;
    padding: 21px;
    min-height: 275px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition:
        transform .18s ease,
        border .18s ease,
        box-shadow .18s ease;
}

.business-list-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.business-list-card.current {
    border-color:
        rgba(201, 162, 74, .7);
}

.business-list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.business-letter {
    width: 45px;
    height: 45px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--navy);
    color: #fff;
    font-weight: 900;
}

.current-badge {
    border-radius: 100px;
    background: #edf8f3;
    color: #187355;
    padding: 7px 10px;
    font-size: 10px;
    font-weight: 800;
}

.business-list-card small {
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 800;
    font-size: 9px;
}

.business-list-card h2 {
    margin: 8px 0 6px;
    font-size: 22px;
    letter-spacing: -.03em;
}

.business-list-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.business-list-card form,
.business-open-button {
    width: 100%;
}

.business-list-card form {
    margin-top: auto;
}

.business-list-card > .outline-button {
    margin-top: auto;
}

.workspace-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 21px;
    padding: 22px;
    margin-top: 18px;
}

.workspace-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.workspace-panel-head h2 {
    margin: 6px 0 0;
    font-size: 22px;
}

.team-invite-grid {
    display: grid;
    grid-template-columns:
        1.2fr .8fr .8fr auto;
    gap: 12px;
    align-items: end;
}

.team-submit {
    white-space: nowrap;
}

.team-list {
    display: grid;
}

.team-row {
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 76px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.team-row:last-child {
    border-bottom: 0;
}

.team-person {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 240px;
    margin-right: auto;
}

.team-avatar {
    min-width: 39px;
    width: 39px;
    height: 39px;
    border-radius: 12px;
    background: var(--navy);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 12px;
}

.team-avatar.pending {
    background: var(--gold-soft);
    color: #775c18;
}

.team-person > div {
    display: grid;
    gap: 4px;
}

.team-person strong {
    font-size: 12px;
}

.team-person span {
    color: var(--muted);
    font-size: 10px;
}

.team-access-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.team-access-form select {
    min-height: 38px;
    max-width: 170px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 0 9px;
    font-size: 11px;
}

.mini-button {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: #eef1f4;
    color: var(--navy);
    padding: 0 12px;
    cursor: pointer;
    font-weight: 700;
    font-size: 10px;
}

.danger-link {
    border: 0;
    background: transparent;
    color: #b42318;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
}

.owner-chip {
    background: var(--gold-soft);
    color: #785d18;
    border-radius: 100px;
    padding: 8px 12px;
    font-size: 10px;
    font-weight: 800;
}

.invite-result {
    border: 1px solid
        rgba(201, 162, 74, .5);
    background: #fffdf7;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 18px;
    display: grid;
    gap: 13px;
}

.invite-result p {
    color: var(--muted);
    margin: 5px 0 0;
    font-size: 12px;
}

.invite-result input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 12px;
    background: #fff;
}

.invitation-summary {
    display: grid;
    gap: 10px;
    margin: 25px 0;
}

.invitation-summary > div {
    border: 1px solid var(--line);
    border-radius: 13px;
    padding: 13px 15px;
    display: grid;
    gap: 4px;
}

.invitation-summary span {
    color: var(--muted);
    font-size: 10px;
}

.invitation-summary strong {
    font-size: 12px;
}

.invitation-actions {
    display: grid;
    gap: 10px;
}

.app-menu a {
    display: block;
}

.business-chip {
    text-decoration: none;
}

@media (max-width: 1000px) {
    .business-list-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .team-invite-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .team-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 650px) {
    .workspace-header {
        padding: 0 16px;
    }

    .workspace-content {
        width: min(
            100% - 28px,
            1180px
        );
        padding-top: 30px;
    }

    .business-list-grid,
    .team-invite-grid {
        grid-template-columns: 1fr;
    }

    .workspace-heading {
        align-items: flex-start;
    }

    .team-row {
        display: grid;
    }

    .team-person {
        min-width: 0;
    }

    .team-access-form {
        display: grid;
        grid-template-columns: 1fr;
    }

    .team-access-form select {
        max-width: none;
        width: 100%;
    }
}

/* =========================================================
   OHI MESSA 1.3C
   Identité Bordeaux + Or
   Centre des permissions
   ========================================================= */

:root {
    --messa-bordeaux: #720027;
    --messa-bordeaux-dark: #4f001c;
    --messa-bordeaux-soft: #f8eef2;
    --messa-gold: #d2a12d;
    --messa-gold-dark: #9f7411;
    --messa-gold-soft: #fbf4df;
}

.permission-body {
    margin: 0;
    background: #f7f7f8;
    color: #211d20;
}

.permission-shell {
    min-height: 100vh;
}

.permission-topbar {
    height: 82px;
    padding: 0 clamp(20px, 5vw, 68px);
    background: #fff;
    border-bottom: 1px solid #e9e5e7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 50;
}

.messa-new-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    text-decoration: none;
    color: var(--messa-bordeaux);
}

.messa-new-brand > span:last-child {
    display: grid;
    gap: 2px;
}

.messa-new-brand strong {
    font-size: 15px;
    letter-spacing: .07em;
}

.messa-new-brand small {
    color: #81777b;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.messa-new-mark {
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        linear-gradient(
            145deg,
            var(--messa-bordeaux),
            var(--messa-bordeaux-dark)
        );
    color: var(--messa-gold);
    border: 2px solid
        var(--messa-gold);
    font-weight: 900;
    box-shadow:
        0 9px 25px
        rgba(114, 0, 39, .14);
}

.permission-top-actions {
    display: flex;
    gap: 8px;
}

.permission-main {
    width:
        min(
            1240px,
            calc(100% - 40px)
        );
    margin: auto;
    padding: 52px 0 85px;
}

.permission-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 30px;
}

.permission-heading h1 {
    font-size:
        clamp(36px, 5vw, 56px);
    line-height: 1;
    letter-spacing: -.055em;
    margin: 9px 0 15px;
    color: var(--messa-bordeaux-dark);
}

.permission-heading p {
    max-width: 720px;
    color: #71696d;
    line-height: 1.7;
    margin: 0;
}

.permission-eyebrow {
    font-size: 10px;
    color: var(--messa-gold-dark);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-weight: 900;
}

.permission-primary,
.permission-link-button {
    min-height: 44px;
    border-radius: 12px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
}

.permission-primary {
    background:
        linear-gradient(
            135deg,
            var(--messa-bordeaux),
            var(--messa-bordeaux-dark)
        );
    color: #fff;
    border: 1px solid
        var(--messa-bordeaux);
    box-shadow:
        0 10px 25px
        rgba(114,0,39,.16);
}

.permission-link-button {
    background: #fff;
    border: 1px solid #dedadd;
    color: var(--messa-bordeaux);
}

.permission-kpis {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap: 13px;
    margin-bottom: 20px;
}

.permission-kpis article {
    background: #fff;
    border: 1px solid #e7e3e5;
    border-radius: 18px;
    padding: 18px;
    display: grid;
    gap: 10px;
}

.permission-kpis span {
    color: #82797d;
    font-size: 10px;
}

.permission-kpis strong {
    color: var(--messa-bordeaux);
    font-size: 27px;
    letter-spacing: -.04em;
}

.permission-section {
    background: #fff;
    border: 1px solid #e7e3e5;
    border-radius: 22px;
    padding: 23px;
    margin-top: 17px;
}

.permission-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    padding-bottom: 20px;
}

.permission-section-head h2 {
    font-size: 22px;
    margin: 6px 0 0;
    color: var(--messa-bordeaux-dark);
}

.permission-section-head p {
    width: min(430px, 100%);
    margin: 0;
    color: #857c80;
    font-size: 11px;
    line-height: 1.6;
}

.role-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.role-card {
    border: 1px solid #e5e1e3;
    border-radius: 18px;
    padding: 17px;
    display: flex;
    flex-direction: column;
    min-height: 250px;
    gap: 18px;
}

.role-card.system {
    background:
        linear-gradient(
            180deg,
            #fff,
            #fffcf5
        );
}

.role-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.role-symbol {
    width: 39px;
    height: 39px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--messa-bordeaux);
    color: var(--messa-gold);
    font-weight: 900;
}

.role-system-badge,
.role-custom-badge,
.protected-role-badge {
    border-radius: 100px;
    padding: 7px 10px;
    font-size: 9px;
    font-weight: 800;
}

.role-system-badge,
.protected-role-badge {
    background:
        var(--messa-gold-soft);
    color:
        var(--messa-gold-dark);
}

.role-custom-badge {
    background:
        var(--messa-bordeaux-soft);
    color:
        var(--messa-bordeaux);
}

.role-card-content small {
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--messa-gold-dark);
    font-size: 9px;
    font-weight: 800;
}

.role-card-content h3 {
    margin: 7px 0;
    color: var(--messa-bordeaux-dark);
    font-size: 18px;
}

.role-card-content p {
    color: #827a7e;
    font-size: 10px;
    line-height: 1.55;
    margin: 0;
}

.role-stat-row {
    margin-top: auto;
    display: flex;
    gap: 18px;
    padding-top: 13px;
    border-top: 1px solid #eee9eb;
    color: #857d81;
    font-size: 9px;
}

.role-stat-row strong {
    color: var(--messa-bordeaux);
}

.role-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.role-actions a,
.role-actions button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--messa-bordeaux);
    cursor: pointer;
    font-size: 10px;
    font-weight: 800;
    text-decoration: none;
}

.role-actions button.danger {
    color: #a92323;
}

.permission-audit-list {
    display: grid;
}

.permission-audit-row {
    min-height: 62px;
    display: grid;
    grid-template-columns:
        auto 1fr auto;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #eee9eb;
}

.permission-audit-row:last-child {
    border-bottom: 0;
}

.audit-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--messa-gold);
}

.permission-audit-row > div {
    display: grid;
    gap: 4px;
}

.permission-audit-row strong {
    font-size: 11px;
}

.permission-audit-row small,
.permission-audit-row time {
    color: #8d8488;
    font-size: 9px;
}

.permission-empty {
    border: 1px dashed #ded7da;
    border-radius: 15px;
    padding: 25px;
    color: #857c80;
}

.role-editor {
    max-width: 1180px;
}

.role-editor-info {
    background: #fff;
    border: 1px solid #e5e1e3;
    border-radius: 20px;
    padding: 20px;
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 16px;
}

.role-description-field {
    grid-column: 1 / -1;
}

.permission-matrix-toolbar {
    margin: 18px 0 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background:
        var(--messa-bordeaux-dark);
    color: #fff;
    border-radius: 17px;
    padding: 16px 18px;
}

.permission-matrix-toolbar > div:first-child {
    display: grid;
    gap: 4px;
}

.permission-matrix-toolbar span {
    color:
        rgba(255,255,255,.58);
    font-size: 10px;
}

.matrix-toolbar-actions {
    display: flex;
    gap: 8px;
}

.matrix-toolbar-actions button {
    border: 1px solid
        rgba(255,255,255,.18);
    background:
        rgba(255,255,255,.08);
    color: #fff;
    border-radius: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: 9px;
}

.permission-matrix {
    display: grid;
    gap: 11px;
}

.permission-module-card {
    background: #fff;
    border: 1px solid #e7e2e4;
    border-radius: 19px;
    overflow: hidden;
}

.permission-module-head {
    min-height: 67px;
    padding: 14px 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fcfafb;
    border-bottom: 1px solid #ebe6e8;
}

.permission-module-head > div {
    display: grid;
    gap: 3px;
}

.permission-module-head > div > span {
    color: var(--messa-gold-dark);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .12em;
}

.permission-module-head h2 {
    margin: 0;
    font-size: 15px;
    color: var(--messa-bordeaux-dark);
}

.module-select-all {
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 9px;
    font-weight: 800;
    color: #71696d;
}

.permission-actions-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0,1fr));
    gap: 0;
}

.permission-action {
    min-height: 82px;
    padding: 13px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-right: 1px solid #eee9eb;
    border-bottom: 1px solid #eee9eb;
    cursor: pointer;
    position: relative;
}

.permission-action.sensitive {
    background: #fffbf3;
}

.permission-action-copy {
    display: grid;
    gap: 4px;
    padding-right: 55px;
}

.permission-action-copy strong {
    font-size: 10px;
    color: #382f33;
}

.permission-action-copy small {
    font-size: 8px;
    color: #90878b;
    line-height: 1.4;
}

.risk-pill {
    position: absolute;
    right: 10px;
    top: 11px;
    border-radius: 100px;
    padding: 5px 7px;
    font-size: 7px;
    font-weight: 900;
}

.risk-low {
    background: #edf6f2;
    color: #277358;
}

.risk-medium {
    background: #f5f1e5;
    color: #8a6818;
}

.risk-critical {
    background: #fae9e7;
    color: #a02e26;
}

.role-editor-footer {
    position: sticky;
    bottom: 15px;
    margin-top: 19px;
    padding: 13px;
    background:
        rgba(255,255,255,.93);
    backdrop-filter: blur(10px);
    border: 1px solid #e4dfe1;
    border-radius: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    box-shadow:
        0 14px 50px
        rgba(44, 25, 33, .12);
}

.protected-role-panel {
    background: var(--messa-gold-soft);
    border: 1px solid #ebd695;
    border-radius: 18px;
    padding: 20px;
}

.protected-role-panel p {
    color: #7c672e;
    margin: 8px 0 0;
}

@media (max-width: 1000px) {
    .permission-kpis,
    .role-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }

    .permission-actions-grid {
        grid-template-columns:
            repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 650px) {
    .permission-main {
        width:
            min(
                calc(100% - 26px),
                1240px
            );
        padding-top: 30px;
    }

    .permission-topbar {
        padding: 0 14px;
    }

    .permission-top-actions {
        display: none;
    }

    .permission-heading {
        display: grid;
    }

    .permission-kpis,
    .role-grid,
    .role-editor-info,
    .permission-actions-grid {
        grid-template-columns: 1fr;
    }

    .role-description-field {
        grid-column: auto;
    }

    .permission-section-head,
    .permission-matrix-toolbar {
        display: grid;
        gap: 15px;
    }

    .permission-section-head p {
        width: auto;
    }

    .matrix-toolbar-actions {
        flex-wrap: wrap;
    }
}

/* =========================================================
   OHI MESSA CORE 1.3C-3
   Contexte entreprise / établissement
   ========================================================= */

.app-context-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.scope-switcher {
    position: relative;
}

.scope-switcher > summary {
    list-style: none;
    min-width: 190px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 13px;
    padding: 9px 13px;
    cursor: pointer;
    display: grid;
    gap: 2px;
}

.scope-switcher > summary::-webkit-details-marker {
    display: none;
}

.scope-switcher > summary span {
    color: var(--messa-gold-dark, #9f7411);
    text-transform: uppercase;
    letter-spacing: .09em;
    font-size: 8px;
    font-weight: 900;
}

.scope-switcher > summary strong {
    color: var(--messa-bordeaux, #720027);
    font-size: 11px;
}

.scope-switcher-menu {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: 280px;
    background: #fff;
    border: 1px solid #e5e1e3;
    border-radius: 16px;
    box-shadow:
        0 20px 55px
        rgba(38, 21, 28, .16);
    padding: 8px;
    z-index: 100;
}

.scope-switcher-menu form {
    margin: 0;
}

.scope-switcher-menu button {
    width: 100%;
    border: 0;
    background: transparent;
    border-radius: 11px;
    padding: 11px 12px;
    display: grid;
    gap: 3px;
    text-align: left;
    cursor: pointer;
}

.scope-switcher-menu button:hover,
.scope-switcher-menu button.active {
    background:
        var(
            --messa-gold-soft,
            #fbf4df
        );
}

.scope-switcher-menu button span {
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size: 11px;
    font-weight: 800;
}

.scope-switcher-menu button small {
    color: #8a8185;
    font-size: 9px;
}

@media (max-width: 700px) {
    .app-context-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .scope-switcher > summary {
        min-width: 165px;
    }

    .scope-switcher-menu {
        width: 250px;
    }
}

/* =========================================================
   OHI MESSA POS ENGINE 1.0A
   ========================================================= */

.pos-body {
    margin: 0;
    background: #f7f6f7;
    color: #251f22;
}

.pos-shell {
    min-height: 100vh;
}

.pos-topbar {
    min-height: 82px;
    padding:
        0 clamp(18px, 4vw, 62px);
    background: #fff;
    border-bottom:
        1px solid #e7e2e4;
    display: flex;
    align-items: center;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.pos-topbar-context {
    margin-left: auto;
    border-left:
        1px solid #e6e1e3;
    padding-left: 18px;
    display: grid;
    gap: 2px;
}

.pos-topbar-context span {
    color:
        var(
            --messa-gold-dark,
            #9f7411
        );
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .11em;
    font-weight: 900;
}

.pos-topbar-context strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 11px;
}

.pos-main {
    width:
        min(
            1240px,
            calc(100% - 40px)
        );
    margin: auto;
    padding: 48px 0 85px;
}

.pos-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 20px;
}

.pos-heading h1 {
    margin: 8px 0 12px;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size:
        clamp(
            36px,
            5vw,
            55px
        );
    letter-spacing: -.055em;
    line-height: 1;
}

.pos-heading p {
    max-width: 650px;
    color: #786f73;
    margin: 0;
    line-height: 1.65;
}

.pos-heading-stats {
    display: flex;
    gap: 10px;
}

.pos-heading-stats article {
    min-width: 115px;
    background: #fff;
    border:
        1px solid #e5e0e2;
    border-radius: 17px;
    padding: 15px;
    display: grid;
    gap: 8px;
}

.pos-heading-stats span {
    color: #877e82;
    font-size: 9px;
}

.pos-heading-stats strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 24px;
}

.pos-panel {
    background: #fff;
    border:
        1px solid #e6e1e3;
    border-radius: 22px;
    padding: 21px;
    margin-top: 15px;
}

.pos-panel-heading {
    margin-bottom: 18px;
}

.pos-panel-heading h2 {
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    margin: 6px 0 0;
    font-size: 20px;
}

.pos-register-form {
    display: grid;
    grid-template-columns:
        1fr .7fr .9fr auto;
    gap: 11px;
    align-items: end;
}

.pos-register-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 12px;
}

.pos-register-card {
    border:
        1px solid #e7e2e4;
    border-radius: 19px;
    padding: 16px;
    display: grid;
    gap: 18px;
    min-height: 230px;
}

.pos-register-card.is-open {
    border-color:
        rgba(
            210,
            161,
            45,
            .65
        );
    background:
        linear-gradient(
            180deg,
            #fff,
            #fffdf7
        );
}

.pos-register-card > header {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.pos-register-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background:
        var(
            --messa-bordeaux,
            #720027
        );
    color:
        var(
            --messa-gold,
            #d2a12d
        );
    display: grid;
    place-items: center;
    font-weight: 900;
}

.pos-register-card header > div:nth-child(2) {
    display: grid;
    gap: 2px;
}

.pos-register-card header span {
    color: #8a8084;
    font-size: 8px;
}

.pos-register-card h3 {
    margin: 0;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size: 14px;
}

.pos-register-card header small {
    color: #9b9396;
    font-size: 8px;
}

.pos-status {
    margin-left: auto;
    border-radius: 100px;
    padding: 6px 8px;
    font-weight: 800;
    font-size: 8px !important;
}

.pos-status.open {
    background: #edf7f2;
    color: #267556 !important;
}

.pos-status.closed {
    background: #f2f0f1;
    color: #756d71 !important;
}

.pos-session-summary {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 7px;
}

.pos-session-summary > div {
    background: #f8f6f7;
    border-radius: 11px;
    padding: 10px;
    display: grid;
    gap: 4px;
}

.pos-session-summary span {
    color: #8d8588;
    font-size: 8px;
}

.pos-session-summary strong {
    font-size: 10px;
}

.pos-open-form {
    margin-top: auto;
    display: grid;
    gap: 10px;
}

.pos-open-form label {
    display: grid;
    gap: 6px;
}

.pos-open-form span {
    color: #7b7276;
    font-size: 9px;
    font-weight: 700;
}

.pos-open-form input,
.pos-session-actions input,
.pos-session-actions textarea {
    width: 100%;
    box-sizing: border-box;
    border:
        1px solid #ddd7da;
    border-radius: 10px;
    padding: 10px;
    background: #fff;
    font: inherit;
    font-size: 10px;
}

.pos-session-actions {
    margin-top: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pos-session-actions details {
    flex: 1;
    min-width: 75px;
    position: relative;
}

.pos-session-actions summary {
    list-style: none;
    border:
        1px solid #ddd7da;
    border-radius: 9px;
    min-height: 35px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 9px;
    font-weight: 800;
}

.pos-session-actions summary::-webkit-details-marker {
    display: none;
}

.pos-session-actions details > form {
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: calc(100% + 8px);
    width: 225px;
    padding: 11px;
    border:
        1px solid #e3dddf;
    border-radius: 13px;
    background: #fff;
    box-shadow:
        0 18px 45px
        rgba(50, 27, 36, .15);
    display: grid;
    gap: 7px;
}

.pos-session-actions form button {
    border: 0;
    border-radius: 9px;
    min-height: 35px;
    background:
        var(
            --messa-bordeaux,
            #720027
        );
    color: #fff;
    cursor: pointer;
    font-weight: 800;
    font-size: 9px;
}

.pos-session-actions .danger-zone summary {
    color: #a42626;
}

.pos-session-actions .danger-zone form button {
    background: #a42626;
}

.pos-session-table {
    display: grid;
}

.pos-session-row {
    min-height: 65px;
    display: grid;
    grid-template-columns:
        1.3fr 1fr .7fr .8fr;
    align-items: center;
    gap: 14px;
    border-bottom:
        1px solid #eee9eb;
}

.pos-session-row:last-child {
    border-bottom: 0;
}

.pos-session-row > div {
    display: grid;
    gap: 3px;
}

.pos-session-row span {
    color: #91888c;
    font-size: 8px;
}

.pos-session-row strong {
    color: #40373b;
    font-size: 10px;
}

@media (max-width: 1000px) {
    .pos-register-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

    .pos-register-form {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 680px) {
    .pos-main {
        width:
            calc(100% - 26px);
        padding-top: 28px;
    }

    .pos-topbar {
        padding:
            0 13px;
    }

    .pos-topbar >
    .permission-link-button {
        display: none;
    }

    .pos-heading {
        display: grid;
    }

    .pos-heading-stats {
        width: 100%;
    }

    .pos-heading-stats article {
        flex: 1;
    }

    .pos-register-grid,
    .pos-register-form {
        grid-template-columns: 1fr;
    }

    .pos-session-row {
        grid-template-columns:
            1fr 1fr;
        padding: 12px 0;
    }
}

/* =========================================================
   OHI MESSA POS ENGINE 1.0B
   Ventes / paiements / reçu
   ========================================================= */

.pos-topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pos-sale-main {
    max-width: 1380px;
}

.pos-sale-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 18px;
}

.pos-sale-heading h1,
.pos-no-session h1 {
    margin: 8px 0 12px;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size:
        clamp(
            34px,
            5vw,
            54px
        );
    letter-spacing: -.055em;
    line-height: 1;
}

.pos-sale-heading p,
.pos-no-session p {
    margin: 0;
    max-width: 650px;
    color: #7c7377;
    line-height: 1.65;
}

.pos-total-card {
    min-width: 220px;
    padding: 18px;
    border-radius: 19px;
    color: #fff;
    background:
        linear-gradient(
            140deg,
            var(
                --messa-bordeaux,
                #720027
            ),
            var(
                --messa-bordeaux-dark,
                #4f001c
            )
        );
    box-shadow:
        0 16px 45px
        rgba(91, 0, 31, .18);
    display: grid;
    gap: 6px;
}

.pos-total-card span {
    color:
        rgba(
            255,
            255,
            255,
            .65
        );
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.pos-total-card strong {
    color:
        var(
            --messa-gold,
            #d2a12d
        );
    font-size: 25px;
}

.pos-total-card small {
    color:
        rgba(
            255,
            255,
            255,
            .72
        );
}

.pos-sale-layout {
    display: grid;
    grid-template-columns:
        minmax(
            0,
            1.65fr
        )
        minmax(
            320px,
            .75fr
        );
    gap: 15px;
    align-items: start;
}

.pos-sale-right {
    position: sticky;
    top: 97px;
}

.pos-panel-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.pos-secondary-button,
.pos-fill-button {
    border: 1px solid #ded8db;
    background: #fff;
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    border-radius: 10px;
    min-height: 38px;
    padding: 0 12px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 800;
}

.sale-lines {
    display: grid;
    gap: 10px;
}

.sale-line-row {
    border:
        1px solid #e5e0e2;
    border-radius: 15px;
    padding: 13px;
    display: grid;
    gap: 11px;
}

.sale-line-main {
    display: grid;
    grid-template-columns:
        1.5fr .7fr;
    gap: 9px;
}

.sale-line-values {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 8px;
}

.sale-line-row label {
    display: grid;
    gap: 5px;
}

.sale-line-row label span {
    color: #81787c;
    font-size: 8px;
    font-weight: 700;
}

.sale-line-row input,
.payment-row input,
.payment-row select {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    border:
        1px solid #ddd7da;
    border-radius: 10px;
    padding: 0 10px;
    background: #fff;
    font: inherit;
    font-size: 10px;
}

.sale-line-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 30px;
}

.sale-line-footer strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
}

.sale-line-footer button,
.payment-row button {
    border: 0;
    background: transparent;
    color: #a62b2b;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.pos-customer-grid {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );
    gap: 10px;
}

.pos-payment-panel {
    margin-top: 0;
}

.sale-payments {
    display: grid;
    gap: 8px;
}

.payment-row {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 7px;
    padding:
        10px 0;
    border-bottom:
        1px solid #eee9eb;
}

.payment-row >
[data-payment-reference] {
    grid-column:
        1 / -1;
}

.pos-fill-button {
    width: 100%;
    margin-top: 10px;
}

.pos-checkout-summary {
    display: grid;
    gap: 8px;
    margin:
        17px 0;
    padding:
        14px 0;
    border-top:
        1px solid #e8e2e5;
    border-bottom:
        1px solid #e8e2e5;
}

.pos-checkout-summary > div {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: #766d71;
    font-size: 10px;
}

.pos-checkout-summary strong {
    color: #3b3236;
}

.pos-checkout-summary .final {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
}

.pos-complete-sale {
    width: 100%;
}

.pos-sales-history {
    display: grid;
}

.pos-sale-history-row {
    min-height: 65px;
    display: grid;
    grid-template-columns:
        1.3fr 1fr .8fr auto;
    align-items: center;
    gap: 14px;
    border-bottom:
        1px solid #eee9eb;
    color: inherit;
    text-decoration: none;
}

.pos-sale-history-row:last-child {
    border-bottom: 0;
}

.pos-sale-history-row > div {
    display: grid;
    gap: 3px;
}

.pos-sale-history-row span {
    color: #91888c;
    font-size: 8px;
}

.pos-sale-history-row strong {
    font-size: 10px;
}

.sale-status {
    border-radius: 100px;
    padding: 6px 8px;
    font-size: 8px;
    font-weight: 800;
}

.sale-completed {
    background: #edf7f2;
    color: #277557 !important;
}

.sale-cancelled,
.sale-refunded {
    background: #f9eaea;
    color: #9c2c2c !important;
}

.pos-no-session {
    background: #fff;
    border:
        1px solid #e7e2e4;
    border-radius: 23px;
    padding: 35px;
}

.pos-no-session .permission-primary {
    margin-top: 20px;
}

.receipt-body {
    margin: 0;
    background: #f2f0f1;
    color: #252024;
}

.receipt-page {
    width:
        min(
            520px,
            calc(100% - 26px)
        );
    margin: auto;
    padding: 25px 0 60px;
}

.receipt-toolbar {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 15px;
}

.receipt-toolbar button {
    font: inherit;
}

.receipt-ticket {
    background: #fff;
    border-radius: 21px;
    padding: 28px;
    box-shadow:
        0 18px 60px
        rgba(44, 27, 34, .11);
}

.receipt-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    text-align: left;
    padding-bottom: 18px;
    border-bottom:
        1px dashed #ddd6d9;
}

.receipt-logo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border:
        2px solid
        var(
            --messa-gold,
            #d2a12d
        );
    background:
        var(
            --messa-bordeaux,
            #720027
        );
    color:
        var(
            --messa-gold,
            #d2a12d
        );
    font-weight: 900;
}

.receipt-header h1 {
    margin: 0;
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 18px;
    letter-spacing: .08em;
}

.receipt-header p {
    margin: 3px 0 0;
    color: #8c8387;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.receipt-business {
    padding: 17px 0;
    display: grid;
    text-align: center;
    gap: 3px;
}

.receipt-business strong {
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size: 14px;
}

.receipt-business span {
    color: #857c80;
    font-size: 9px;
}

.receipt-meta {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 8px;
    padding-bottom: 17px;
    border-bottom:
        1px dashed #ddd6d9;
}

.receipt-meta > div,
.receipt-customer {
    display: grid;
    gap: 3px;
}

.receipt-meta span,
.receipt-customer span {
    color: #91888c;
    font-size: 8px;
}

.receipt-meta strong,
.receipt-customer strong {
    font-size: 9px;
}

.receipt-customer {
    padding: 14px 0;
    border-bottom:
        1px dashed #ddd6d9;
}

.receipt-customer small {
    color: #81787c;
    font-size: 8px;
}

.receipt-lines {
    padding: 12px 0;
}

.receipt-line {
    padding: 9px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 15px;
}

.receipt-line > div {
    display: grid;
    gap: 3px;
}

.receipt-line strong {
    font-size: 10px;
}

.receipt-line span,
.receipt-line small {
    color: #82797d;
    font-size: 8px;
}

.receipt-totals {
    border-top:
        1px dashed #ddd6d9;
    border-bottom:
        1px dashed #ddd6d9;
    padding: 13px 0;
    display: grid;
    gap: 7px;
}

.receipt-totals > div,
.receipt-payments > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 9px;
}

.receipt-grand-total {
    margin-top: 5px;
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 13px !important;
    font-weight: 900;
}

.receipt-payments {
    padding: 14px 0;
    display: grid;
    gap: 7px;
}

.receipt-section-title {
    color:
        var(
            --messa-gold-dark,
            #9f7411
        );
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 8px;
    font-weight: 900;
}

.receipt-change {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-weight: 800;
}

.receipt-status {
    margin-top: 10px;
    padding: 11px;
    text-align: center;
    border-radius: 11px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
}

.receipt-status-completed {
    background: #edf7f2;
    color: #257355;
}

.receipt-status-cancelled,
.receipt-status-refunded {
    background: #fae9e9;
    color: #9f2929;
}

.receipt-footer {
    margin-top: 22px;
    padding-top: 16px;
    border-top:
        1px dashed #ddd6d9;
    text-align: center;
    color: #928a8d;
    font-size: 8px;
}

.receipt-danger-actions {
    margin-top: 13px;
    display: grid;
    gap: 8px;
}

.receipt-danger-actions details {
    background: #fff;
    border:
        1px solid #e0dadd;
    border-radius: 13px;
    padding: 11px;
}

.receipt-danger-actions summary {
    cursor: pointer;
    color: #a12d2d;
    font-size: 9px;
    font-weight: 800;
}

.receipt-danger-actions form {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.receipt-danger-actions textarea {
    min-height: 75px;
    border:
        1px solid #ded8da;
    border-radius: 9px;
    padding: 10px;
}

.receipt-danger-actions button {
    min-height: 37px;
    border: 0;
    border-radius: 9px;
    background: #a12d2d;
    color: #fff;
    cursor: pointer;
    font-weight: 800;
}

@media (max-width: 900px) {
    .pos-sale-layout {
        grid-template-columns: 1fr;
    }

    .pos-sale-right {
        position: static;
    }
}

@media (max-width: 680px) {
    .pos-topbar-actions >
    .permission-link-button {
        display: none;
    }

    .pos-sale-heading {
        display: grid;
    }

    .pos-total-card {
        min-width: 0;
    }

    .sale-line-main,
    .sale-line-values,
    .pos-customer-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .pos-sale-history-row {
        grid-template-columns:
            1fr 1fr;
        padding: 11px 0;
    }
}

@media print {
    .no-print {
        display: none !important;
    }

    .receipt-body {
        background: #fff;
    }

    .receipt-page {
        width: 100%;
        padding: 0;
    }

    .receipt-ticket {
        box-shadow: none;
        border-radius: 0;
    }
}

/* =========================================================
   OHI MESSA INVENTORY ENGINE 1.0A
   ========================================================= */

.inventory-body {
    margin: 0;
    background: #f7f6f7;
    color: #282125;
}

.inventory-shell {
    min-height: 100vh;
}

.inventory-main {
    width:
        min(
            1280px,
            calc(100% - 40px)
        );
    margin: auto;
    padding: 46px 0 85px;
}

.inventory-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 25px;
    margin-bottom: 18px;
}

.inventory-heading h1 {
    margin: 8px 0 12px;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size:
        clamp(
            36px,
            5vw,
            55px
        );
    letter-spacing: -.055em;
    line-height: 1;
}

.inventory-heading p {
    margin: 0;
    max-width: 650px;
    color: #7d7478;
    line-height: 1.65;
}

.inventory-kpis {
    display: flex;
    gap: 9px;
}

.inventory-kpis article {
    min-width: 105px;
    padding: 14px;
    border:
        1px solid #e4dfe1;
    border-radius: 16px;
    background: #fff;
    display: grid;
    gap: 7px;
}

.inventory-kpis span {
    color: #8e8589;
    font-size: 8px;
}

.inventory-kpis strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 23px;
}

.inventory-panel {
    margin-top: 14px;
    background: #fff;
    border:
        1px solid #e5e0e2;
    border-radius: 21px;
    padding: 20px;
}

.inventory-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 17px;
}

.inventory-panel-head h2 {
    margin: 6px 0 0;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size: 20px;
}

.inventory-panel-head p {
    max-width: 420px;
    margin: 0;
    color: #857c80;
    font-size: 10px;
    line-height: 1.55;
}

.inventory-item-form {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 10px;
    align-items: end;
}

.inventory-item-form >
.permission-primary {
    min-height: 43px;
}

.inventory-adjust-form {
    display: grid;
    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );
    gap: 10px;
    align-items: end;
}

.inventory-table {
    display: grid;
}

.inventory-table-head,
.inventory-table-row {
    display: grid;
    grid-template-columns:
        1.5fr 1.1fr .6fr .6fr .8fr;
    gap: 14px;
    align-items: center;
}

.inventory-table-head {
    min-height: 38px;
    padding: 0 10px;
    color: #8a8185;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.inventory-table-row {
    min-height: 62px;
    padding: 0 10px;
    border-top:
        1px solid #eee9eb;
}

.inventory-table-row > div:first-child {
    display: grid;
    gap: 3px;
}

.inventory-table-row strong {
    font-size: 10px;
}

.inventory-table-row span {
    color: #877e82;
    font-size: 9px;
}

.inventory-state {
    width: max-content;
    padding: 6px 8px;
    border-radius: 100px;
    font-weight: 800;
}

.inventory-state.ok {
    background: #edf7f2;
    color: #277456;
}

.inventory-state.low {
    background: #faeee5;
    color: #a45a22;
}

.inventory-movement-list {
    display: grid;
}

.inventory-movement-row {
    min-height: 60px;
    display: grid;
    grid-template-columns:
        1.3fr 1.4fr .5fr .8fr;
    gap: 14px;
    align-items: center;
    border-bottom:
        1px solid #eee9eb;
}

.inventory-movement-row:last-child {
    border-bottom: 0;
}

.inventory-movement-row > div {
    display: grid;
    gap: 3px;
}

.inventory-movement-row span {
    color: #8a8185;
    font-size: 9px;
}

.inventory-movement-row strong {
    font-size: 10px;
}

.stock-positive {
    color: #267456;
}

.stock-negative {
    color: #a33232;
}

.inventory-catalog-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 10px;
}

.inventory-item-card {
    border:
        1px solid #e4dfe1;
    border-radius: 17px;
    padding: 15px;
    display: grid;
    gap: 11px;
}

.inventory-item-card.archived {
    opacity: .55;
}

.inventory-item-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #8d8488;
    font-size: 8px;
}

.inventory-item-type {
    color:
        var(
            --messa-gold-dark,
            #9f7411
        );
    text-transform: uppercase;
    font-weight: 900;
}

.inventory-item-card h3 {
    margin: 0;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
    font-size: 14px;
}

.inventory-item-codes {
    display: grid;
    gap: 3px;
    color: #8d8488;
    font-size: 8px;
}

.inventory-item-price {
    padding-top: 10px;
    border-top:
        1px solid #eee9eb;
    display: grid;
    gap: 3px;
}

.inventory-item-price span {
    color: #8d8488;
    font-size: 8px;
}

.inventory-item-price strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 13px;
}

.inventory-archive-button {
    border: 0;
    background: transparent;
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    padding: 0;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

@media (max-width: 1100px) {
    .inventory-item-form {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .inventory-adjust-form {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    .inventory-catalog-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }
}

@media (max-width: 760px) {
    .inventory-main {
        width:
            calc(100% - 26px);
        padding-top: 28px;
    }

    .inventory-heading {
        display: grid;
    }

    .inventory-kpis {
        width: 100%;
    }

    .inventory-kpis article {
        flex: 1;
        min-width: 0;
    }

    .inventory-item-form,
    .inventory-adjust-form {
        grid-template-columns:
            1fr 1fr;
    }

    .inventory-catalog-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .inventory-table-head {
        display: none;
    }

    .inventory-table-row,
    .inventory-movement-row {
        grid-template-columns:
            1fr 1fr;
        padding: 12px 5px;
    }
}

@media (max-width: 520px) {
    .inventory-item-form,
    .inventory-adjust-form,
    .inventory-catalog-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   OHI MESSA INVENTORY POS 1.0B
   Catalogue + scanner + stock
   ========================================================= */

.pos-catalog-tools {
    display: grid;
    grid-template-columns:
        1.2fr 1.4fr auto;
    align-items: end;
    gap: 9px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #fbf8f9,
            #fffaf0
        );
    border:
        1px solid #e7dfe2;
}

.pos-catalog-tools >
.pos-secondary-button {
    min-height: 43px;
}

.sale-line-catalog {
    display: grid;
    grid-template-columns:
        minmax(
            0,
            1fr
        )
        auto;
    gap: 10px;
    align-items: end;
}

.sale-line-catalog label {
    display: grid;
    gap: 5px;
}

.sale-line-catalog label span {
    color: #81787c;
    font-size: 8px;
    font-weight: 700;
}

.sale-line-catalog select {
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    border:
        1px solid #ddd7da;
    border-radius: 10px;
    background: #fff;
    padding: 0 10px;
    font: inherit;
    font-size: 10px;
}

.sale-stock-indicator {
    min-width: 115px;
    min-height: 38px;
    box-sizing: border-box;
    padding: 0 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f0f2;
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 8px;
    font-weight: 800;
}

.sale-line-row
input[readonly] {
    background: #f6f4f5;
    color: #5f565a;
}

@media (
    max-width: 760px
) {
    .pos-catalog-tools {
        grid-template-columns:
            1fr;
    }

    .sale-line-catalog {
        grid-template-columns:
            1fr;
    }

    .sale-stock-indicator {
        justify-content:
            flex-start;
    }
}

/* =========================================================
   OHI MESSA INVENTORY 1.0C
   Transferts / Inventaires / Alertes
   ========================================================= */

.inventory-operations-grid {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 14px;
    align-items: start;
}

.inventory-operations-grid
.inventory-panel {
    margin-top: 0;
}

.inventory-operation-branches {
    display: grid;
    grid-template-columns:
        1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.inventory-fixed-branch {
    min-height: 43px;
    border:
        1px solid #e0dadd;
    border-radius: 11px;
    padding: 9px 11px;
    box-sizing: border-box;
    display: grid;
    gap: 3px;
}

.inventory-fixed-branch span {
    color: #8a8185;
    font-size: 8px;
}

.inventory-fixed-branch strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 10px;
}

.inventory-operation-lines {
    display: grid;
    gap: 7px;
    margin-bottom: 8px;
}

.inventory-transfer-line {
    display: grid;
    grid-template-columns:
        1.4fr .7fr auto;
    gap: 7px;
}

.inventory-transfer-line
select,
.inventory-transfer-line
input {
    min-height: 40px;
    border:
        1px solid #ddd7da;
    border-radius: 10px;
    background: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    font: inherit;
    font-size: 10px;
}

.inventory-transfer-line
button {
    border: 0;
    background: transparent;
    color: #a22e2e;
    cursor: pointer;
    font-size: 8px;
    font-weight: 800;
}

.inventory-note-field {
    margin:
        12px 0;
}

.inventory-note-field textarea {
    min-height: 70px;
    resize: vertical;
}

.inventory-count-list {
    max-height: 420px;
    overflow: auto;
    display: grid;
    margin-top: 12px;
    border:
        1px solid #e7e1e3;
    border-radius: 13px;
}

.inventory-count-row {
    display: grid;
    grid-template-columns:
        1fr .7fr;
    gap: 12px;
    min-height: 61px;
    align-items: center;
    padding: 8px 11px;
    border-bottom:
        1px solid #eee9eb;
}

.inventory-count-row:last-child {
    border-bottom: 0;
}

.inventory-count-row >
div {
    display: grid;
    gap: 3px;
}

.inventory-count-row
strong {
    font-size: 10px;
}

.inventory-count-row
span {
    color: #8b8286;
    font-size: 8px;
}

.inventory-count-row
label {
    display: grid;
    gap: 4px;
}

.inventory-count-row
input {
    width: 100%;
    min-height: 37px;
    box-sizing: border-box;
    border:
        1px solid #ddd7da;
    border-radius: 9px;
    padding: 0 9px;
}

.inventory-threshold-form {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 10px;
    align-items: end;
}

.inventory-alert-panel {
    margin-bottom: 14px;
    padding: 19px;
    border-radius: 20px;
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fff
        );
    border:
        1px solid
        rgba(
            210,
            161,
            45,
            .38
        );
}

.inventory-alert-panel h2 {
    margin: 6px 0 15px;
    color:
        var(
            --messa-bordeaux-dark,
            #4f001c
        );
}

.inventory-alert-grid {
    display: grid;
    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );
    gap: 8px;
}

.inventory-alert-grid article {
    border:
        1px solid #eadfca;
    background: #fff;
    border-radius: 13px;
    padding: 12px;
    display: grid;
    gap: 6px;
}

.inventory-alert-grid
article > span {
    color: #938578;
    font-size: 8px;
}

.inventory-alert-grid
article > strong {
    color:
        var(
            --messa-bordeaux,
            #720027
        );
    font-size: 11px;
}

.inventory-alert-grid
article > div {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    font-size: 8px;
}

.inventory-history-list {
    display: grid;
}

.inventory-history-row {
    min-height: 64px;
    display: grid;
    grid-template-columns:
        1fr 1fr 1fr .6fr;
    gap: 14px;
    align-items: center;
    border-bottom:
        1px solid #eee9eb;
}

.inventory-history-row:last-child {
    border-bottom: 0;
}

.inventory-history-row > div {
    display: grid;
    gap: 3px;
}

.inventory-history-row span {
    color: #8b8286;
    font-size: 8px;
}

.inventory-history-row strong {
    color: #40383c;
    font-size: 10px;
}

@media (
    max-width: 900px
) {
    .inventory-operations-grid {
        grid-template-columns:
            1fr;
    }

    .inventory-alert-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .inventory-threshold-form {
        grid-template-columns:
            1fr 1fr;
    }
}

@media (
    max-width: 600px
) {
    .inventory-operation-branches,
    .inventory-threshold-form {
        grid-template-columns:
            1fr;
    }

    .inventory-transfer-line {
        grid-template-columns:
            1fr .7fr;
    }

    .inventory-count-row,
    .inventory-history-row {
        grid-template-columns:
            1fr 1fr;
    }

    .inventory-alert-grid {
        grid-template-columns:
            1fr;
    }
}