:root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-soft:#f8f9fd;
    --surface-accent:#f0efff;
    --ink:#10182d;
    --muted:#6e7890;
    --line:#e2e7f0;
    --navy:#0b1730;
    --navy-2:#142445;
    --accent:#6557f5;
    --accent-soft:#ebe9ff;
    --green:#168562;
    --green-soft:#e6f7f1;
    --red:#d9514e;
    --red-soft:#fff0ef;
    --amber:#ad7614;
    --shadow:0 12px 36px rgba(31,45,78,.07);
    --radius:20px;
}

*{box-sizing:border-box}

html{
    background:var(--bg);
}

body{
    margin:0;
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
}

button,
input,
select{
    font:inherit;
}

button{
    cursor:pointer;
}

img{
    display:block;
}

.hidden{
    display:none !important;
}

/* -------------------------------------------------- */
/* Shared                                             */
/* -------------------------------------------------- */

.logo{
    width:112px;
    height:auto;
    object-fit:contain;
}

.pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:30px;
    padding:5px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    white-space:nowrap;
}

.pill.demo{
    color:#5949d4;
    background:#eeecff;
}

.pill.ok{
    color:#107056;
    background:#e8f8f2;
}

.pill.warn{
    color:#9b6610;
    background:#fff5df;
}

.muted{
    color:var(--muted);
}

.eyebrow{
    color:var(--accent);
    font-size:12px;
    font-weight:850;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.primary-btn,
.secondary-btn{
    min-height:46px;
    border-radius:12px;
    padding:0 18px;
    font-weight:800;
    border:0;
}

.primary-btn{
    background:var(--navy);
    color:#fff;
}

.primary-btn:hover{
    background:#132342;
}

.secondary-btn{
    background:#fff;
    color:var(--ink);
    border:1px solid var(--line);
}

.primary-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

/* -------------------------------------------------- */
/* Welcome / onboarding                               */
/* -------------------------------------------------- */

.welcome{
    min-height:100vh;
    display:grid;
    grid-template-columns:minmax(340px,1fr) minmax(520px,1.05fr);
    background:
        radial-gradient(circle at 15% 8%,rgba(101,87,245,.10),transparent 34%),
        var(--bg);
}

.welcome-hero{
    min-height:100vh;
    padding:42px clamp(28px,5vw,72px);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    background:
        linear-gradient(145deg,#ffffff 0%,#f7f8fd 55%,#eef0fb 100%);
    border-right:1px solid var(--line);
    position:relative;
    overflow:hidden;
}

.welcome-hero:after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    right:-210px;
    bottom:-140px;
    border-radius:50%;
    background:
        radial-gradient(circle,#8176ff 0%,#a8a1ff 27%,transparent 68%);
    opacity:.16;
}

.hero-copy{
    position:relative;
    z-index:2;
    max-width:620px;
}

.hero-copy h1{
    font-size:clamp(42px,5.4vw,74px);
    line-height:.98;
    letter-spacing:-.055em;
    margin:28px 0 18px;
}

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

.hero-features{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
    margin-top:42px;
}

.hero-feature{
    padding:18px;
    border:1px solid rgba(209,216,230,.8);
    border-radius:18px;
    background:rgba(255,255,255,.72);
    backdrop-filter:blur(8px);
}

.hero-feature-icon{
    width:38px;
    height:38px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:var(--accent-soft);
    color:var(--accent);
    font-size:18px;
    font-weight:900;
    margin-bottom:12px;
}

.hero-feature strong{
    display:block;
    font-size:13px;
    margin-bottom:5px;
}

.hero-feature span{
    display:block;
    font-size:12px;
    line-height:1.45;
    color:var(--muted);
}

.hero-bottom{
    position:relative;
    z-index:2;
    font-size:12px;
    color:var(--muted);
}

.welcome-panel{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:38px clamp(22px,4vw,64px);
}

.wizard{
    width:min(640px,100%);
}

.wizard-progress{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
}

.progress-item{
    flex:1;
    height:4px;
    border-radius:999px;
    background:#dde2ec;
}

.progress-item.active{
    background:var(--accent);
}

.wizard-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:26px;
    padding:clamp(24px,4vw,38px);
    box-shadow:var(--shadow);
}

.wizard-card h2{
    font-size:30px;
    margin:5px 0 8px;
    letter-spacing:-.035em;
}

.wizard-card .intro{
    color:var(--muted);
    margin-bottom:26px;
    line-height:1.5;
}

.choice-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.choice{
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    border-radius:16px;
    padding:17px;
    min-height:108px;
    text-align:left;
    transition:.16s ease;
}

.choice:hover{
    transform:translateY(-1px);
    border-color:#c6c2ff;
}

.choice.selected{
    border-color:var(--accent);
    background:#f5f3ff;
    box-shadow:0 0 0 2px rgba(101,87,245,.07);
}

.choice-title{
    display:block;
    font-weight:850;
    margin-bottom:6px;
}

.choice-desc{
    display:block;
    font-size:12px;
    line-height:1.45;
    color:var(--muted);
}

.language-grid{
    grid-template-columns:repeat(3,1fr);
}

.language-choice{
    min-height:92px;
    text-align:center;
}

.flag{
    font-size:22px;
    margin-bottom:7px;
}

.wizard-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-top:24px;
}

.wizard-actions .primary-btn{
    min-width:154px;
}

.store-select{
    width:100%;
    height:50px;
    border:1px solid #ccd3df;
    border-radius:12px;
    padding:0 13px;
    background:#fff;
    color:var(--ink);
}

.demo-note{
    margin-top:18px;
    padding:12px 14px;
    background:#f8f8fd;
    border:1px solid var(--line);
    border-radius:13px;
    font-size:12px;
    color:var(--muted);
    line-height:1.45;
}

/* -------------------------------------------------- */
/* Application shell                                  */
/* -------------------------------------------------- */

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

.sidebar{
    min-height:100vh;
    background:
        linear-gradient(180deg,#0b1730 0%,#101e3a 100%);
    color:#fff;
    padding:25px 17px;
    display:flex;
    flex-direction:column;
    position:sticky;
    top:0;
    height:100vh;
}

.sidebar .logo{
    width:104px;
    filter:brightness(0) invert(1);
    margin:4px 10px 28px;
}

.tenant-small{
    font-size:11px;
    color:#9eabc1;
    margin:0 10px 20px;
}

.nav{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.nav-btn{
    border:0;
    width:100%;
    min-height:44px;
    padding:0 13px;
    border-radius:12px;
    background:transparent;
    color:#cad3e2;
    display:flex;
    align-items:center;
    gap:11px;
    text-align:left;
    font-size:13px;
    font-weight:700;
}

.nav-btn:hover{
    background:rgba(255,255,255,.06);
    color:#fff;
}

.nav-btn.active{
    background:linear-gradient(135deg,#41529c,#5667be);
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.nav-icon{
    width:22px;
    text-align:center;
    font-size:16px;
}

.sidebar-bottom{
    margin-top:auto;
}

.demo-card{
    margin:14px 2px 0;
    padding:14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:rgba(255,255,255,.05);
}

.demo-card strong{
    font-size:12px;
}

.demo-card p{
    font-size:11px;
    color:#abb6c9;
    line-height:1.45;
    margin:6px 0 0;
}

.app-main{
    min-width:0;
}

.topbar{
    height:72px;
    padding:0 clamp(18px,3vw,34px);
    display:flex;
    align-items:center;
    gap:18px;
    background:rgba(255,255,255,.94);
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    z-index:25;
    backdrop-filter:blur(10px);
}

.mobile-logo{
    display:none;
}

.topbar-title{
    font-size:14px;
    font-weight:850;
}

.topbar-spacer{
    flex:1;
}

.lang-switch{
    display:flex;
    padding:3px;
    border-radius:10px;
    background:#f0f2f7;
}

.lang-switch button{
    height:31px;
    min-width:39px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--muted);
    font-size:10px;
    font-weight:850;
}

.lang-switch button.active{
    background:var(--navy);
    color:#fff;
}

.role-menu{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:11px;
    color:var(--muted);
}

.avatar{
    width:34px;
    height:34px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#6c5cf4,#766ee8);
    color:#fff;
    font-weight:850;
}

.content{
    width:min(1480px,100%);
    padding:30px clamp(18px,3vw,34px) 70px;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;
    margin-bottom:22px;
}

.page-head h1{
    margin:0;
    font-size:31px;
    letter-spacing:-.04em;
}

.page-head p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
}

.date-chip{
    border:1px solid var(--line);
    background:#fff;
    border-radius:12px;
    padding:9px 12px;
    color:var(--muted);
    font-size:11px;
    white-space:nowrap;
}

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

.kpi{
    min-height:130px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:17px;
    padding:18px;
    box-shadow:0 4px 16px rgba(31,45,78,.025);
}

.kpi-top{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:11px;
    margin-bottom:15px;
}

.kpi-icon{
    width:30px;
    height:30px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#efedff;
    color:var(--accent);
    font-weight:900;
}

.kpi strong{
    display:block;
    font-size:28px;
    line-height:1;
    letter-spacing:-.025em;
}

.kpi small{
    display:block;
    margin-top:12px;
    color:var(--muted);
    font-size:10px;
}

.dashboard-grid{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);
    gap:16px;
}

.panel{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:19px;
    min-width:0;
}

.panel + .panel{
    margin-top:16px;
}

.panel-title-row{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    margin-bottom:17px;
}

.panel h2{
    font-size:15px;
    margin:0;
}

.panel-note{
    color:var(--muted);
    font-size:10px;
}

.chart-bars{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.bar-row{
    display:grid;
    grid-template-columns:130px minmax(80px,1fr) 70px;
    gap:11px;
    align-items:center;
}

.bar-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    color:#444e63;
}

.bar-track{
    height:8px;
    border-radius:999px;
    background:#edf0f5;
    overflow:hidden;
}

.bar-fill{
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,#6658f4,#7a6ff9);
}

.bar-fill.green{
    background:linear-gradient(90deg,#3ab992,#63d7b6);
}

.bar-value{
    text-align:right;
    font-size:11px;
    font-weight:800;
}

.store-list{
    display:flex;
    flex-direction:column;
}

.store-row{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid #eef1f5;
}

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

.rank{
    width:27px;
    height:27px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#f0efff;
    color:#5d4ee0;
    font-size:10px;
    font-weight:850;
}

.store-name{
    min-width:0;
}

.store-name strong{
    display:block;
    font-size:11px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

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

.store-metric{
    font-size:11px;
    font-weight:850;
}

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

.quick-btn{
    min-height:72px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:13px;
    text-align:left;
    padding:12px;
    color:var(--ink);
}

.quick-btn:hover{
    border-color:#c8c3ff;
    background:#faf9ff;
}

.quick-btn strong{
    display:block;
    font-size:11px;
    margin-bottom:5px;
}

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

.table-wrap{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    width:100%;
    border-collapse:collapse;
    font-size:11px;
}

th,
td{
    padding:11px 10px;
    text-align:left;
    border-bottom:1px solid #edf0f4;
    white-space:nowrap;
}

th{
    color:var(--muted);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.search-box{
    display:flex;
    gap:10px;
    margin-bottom:17px;
}

.search-box input{
    flex:1;
    min-width:0;
    height:47px;
    border:1px solid #ccd4e0;
    border-radius:12px;
    padding:0 14px;
    color:var(--ink);
    background:#fff;
}

.search-box button{
    min-width:110px;
}

.product-results{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
}

.product-card{
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
    padding:14px;
    text-align:left;
    color:var(--ink);
}

.product-card:hover{
    border-color:#c8c3ff;
}

.product-card strong{
    display:block;
    font-size:12px;
    margin-bottom:6px;
}

.product-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    font-size:10px;
    color:var(--muted);
}

.detail-card{
    margin-top:14px;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
}

.detail-head{
    padding:16px;
    background:#f8f9fc;
    border-bottom:1px solid var(--line);
}

.detail-head h3{
    margin:0 0 6px;
    font-size:17px;
}

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

.stock-row{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:11px 14px;
    border-bottom:1px solid #edf0f4;
}

.stock-row:nth-child(odd){
    border-right:1px solid #edf0f4;
}

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

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

.settings-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.settings-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px;
}

.settings-card h3{
    margin:0 0 8px;
    font-size:14px;
}

.settings-card p{
    color:var(--muted);
    font-size:11px;
    line-height:1.5;
}

.mobile-bottom{
    display:none;
}

.loading{
    padding:40px 0;
    text-align:center;
    color:var(--muted);
    font-size:12px;
}

.error-box{
    padding:14px;
    border-radius:12px;
    background:var(--red-soft);
    color:#a53d3a;
    font-size:11px;
}

/* -------------------------------------------------- */
/* Responsive                                         */
/* -------------------------------------------------- */

@media(max-width:1050px){
    .welcome{
        grid-template-columns:1fr;
    }

    .welcome-hero{
        min-height:auto;
        padding-bottom:34px;
        border-right:0;
        border-bottom:1px solid var(--line);
    }

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

    .welcome-panel{
        min-height:auto;
        padding-top:32px;
        padding-bottom:54px;
    }

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

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

@media(max-width:820px){
    .app-shell{
        display:block;
    }

    .sidebar{
        display:none;
    }

    .topbar{
        height:62px;
        padding:0 15px;
    }

    .mobile-logo{
        display:block;
    }

    .mobile-logo .logo{
        width:88px;
    }

    .topbar-title{
        font-size:11px;
    }

    .role-menu .role-text{
        display:none;
    }

    .content{
        padding:20px 14px 90px;
    }

    .page-head{
        display:block;
    }

    .page-head h1{
        font-size:25px;
    }

    .date-chip{
        display:inline-flex;
        margin-top:12px;
    }

    .mobile-bottom{
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        position:fixed;
        z-index:40;
        left:10px;
        right:10px;
        bottom:10px;
        min-height:62px;
        padding:5px;
        border:1px solid rgba(216,222,233,.92);
        border-radius:18px;
        background:rgba(255,255,255,.96);
        box-shadow:0 10px 35px rgba(20,30,55,.15);
        backdrop-filter:blur(12px);
    }

    .mobile-nav-btn{
        border:0;
        background:transparent;
        border-radius:12px;
        color:#69748b;
        font-size:9px;
        font-weight:800;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;

        min-width:0;
        width:100%;
        overflow:hidden;
        padding:4px 2px;
    }

    .mobile-nav-btn span{
        display:block;
        width:100%;
        min-width:0;
        text-align:center;
        line-height:1.12;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .mobile-nav-btn.active{
        color:var(--accent);
        background:#f2f0ff;
    }

    .mobile-nav-btn b{
        font-size:15px;
    }

    .product-results{
        grid-template-columns:1fr;
    }
}

@media(max-width:620px){
    .welcome-hero{
        padding:26px 20px 28px;
    }

    .hero-copy h1{
        font-size:39px;
        margin-top:24px;
    }

    .hero-copy p{
        font-size:15px;
    }

    .hero-features{
        grid-template-columns:1fr;
    }

    .hero-feature{
        display:grid;
        grid-template-columns:42px 1fr;
        column-gap:10px;
        padding:13px;
    }

    .hero-feature-icon{
        grid-row:1 / 3;
        margin:0;
    }

    .welcome-panel{
        padding:22px 14px 40px;
    }

    .wizard-card{
        padding:21px 16px;
        border-radius:20px;
    }

    .wizard-card h2{
        font-size:24px;
    }

    .choice-grid,
    .language-grid{
        grid-template-columns:1fr;
    }

    .choice,
    .language-choice{
        min-height:auto;
    }

    .language-choice{
        text-align:left;
        display:grid;
        grid-template-columns:34px 1fr;
        align-items:center;
    }

    .language-choice .flag{
        margin:0;
    }

    .wizard-actions{
        align-items:stretch;
    }

    .wizard-actions button{
        flex:1;
    }

    .kpi-grid{
        grid-template-columns:1fr 1fr;
        gap:10px;
    }

    .kpi{
        min-height:115px;
        padding:14px;
    }

    .kpi strong{
        font-size:22px;
    }

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

    .bar-row{
        grid-template-columns:95px minmax(70px,1fr) 54px;
    }

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

    .stock-row:nth-child(odd){
        border-right:0;
    }

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

    .search-box{
        display:grid;
        grid-template-columns:1fr;
    }

    .search-box button{
        min-height:44px;
    }
}



@media(max-width:820px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    .app-shell,
    .app-main{
        width:100%;
        max-width:100%;
        min-width:0;
        overflow-x:hidden;
    }

    .topbar{
        width:100%;
        max-width:100%;
        min-width:0;
        gap:8px;
    }

    /* Role avatar is unnecessary in the compact mobile header.
       Role remains available in Settings. */
    .role-menu{
        display:none;
    }

    .topbar-title{
        min-width:0;
        max-width:92px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        flex-shrink:1;
    }

    .topbar-spacer{
        min-width:0;
    }

    .topbar .pill.demo,
    .lang-switch{
        flex-shrink:0;
    }

    .mobile-bottom{
        box-sizing:border-box;
        width:auto;
        max-width:calc(100vw - 20px);
        left:10px;
        right:10px;
    }

    .mobile-nav-btn{
        min-width:0;
        max-width:100%;
    }
}




.network-wide{
    margin-top:16px;
}

.store-toolbar{
    display:grid;
    grid-template-columns:minmax(220px,1fr) 220px;
    gap:10px;
    margin-bottom:16px;
}

.store-toolbar input,
.store-toolbar select{
    height:44px;
    border:1px solid #ccd4e0;
    border-radius:11px;
    padding:0 13px;
    background:#fff;
    color:var(--ink);
    min-width:0;
}

.store-card-grid-v2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.store-card-v2{
    display:block;
    width:100%;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
    color:var(--ink);
    padding:16px;
    text-align:left;
    transition:
        border-color .15s ease,
        transform .15s ease,
        box-shadow .15s ease;
}

.store-card-v2:hover{
    border-color:#c6c2ff;
    transform:translateY(-1px);
    box-shadow:0 7px 22px rgba(34,45,78,.06);
}

.store-card-head-v2{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    margin-bottom:15px;
}

.store-card-name-v2{
    min-width:0;
}

.store-card-name-v2 strong{
    display:block;
    font-size:13px;
    margin-bottom:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.store-card-name-v2 span{
    color:var(--muted);
    font-size:10px;
}

.store-card-metrics-v2{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    padding:12px 0;
    border-top:1px solid #eef1f5;
    border-bottom:1px solid #eef1f5;
}

.store-card-metric-v2{
    min-width:0;
}

.store-card-metric-v2 span{
    display:block;
    color:var(--muted);
    font-size:9px;
    margin-bottom:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.store-card-metric-v2 strong{
    display:block;
    font-size:14px;
}

.store-card-activity-v2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:12px;
}

.mini-activity-v2{
    min-width:0;
}

.mini-activity-label-v2{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    font-size:9px;
    color:var(--muted);
    margin-bottom:5px;
}

.mini-track-v2{
    height:5px;
    border-radius:999px;
    overflow:hidden;
    background:#edf0f5;
}

.mini-fill-v2{
    height:100%;
    border-radius:999px;
    background:#6a5cf5;
}

.mini-fill-v2.green{
    background:#38b98f;
}

.store-card-open-v2{
    margin-top:12px;
    font-size:10px;
    font-weight:850;
    color:var(--accent);
}

.activity-list-v2{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.activity-row-v2{
    display:grid;
    grid-template-columns:150px minmax(100px,1fr) 65px 65px;
    gap:11px;
    align-items:center;
    width:100%;
    border:0;
    background:transparent;
    color:var(--ink);
    padding:4px 0;
    text-align:left;
}

.activity-row-v2:hover .activity-name-v2{
    color:var(--accent);
}

.activity-name-v2{
    font-size:11px;
    font-weight:750;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.activity-bars-v2{
    display:grid;
    gap:5px;
}

.activity-track-v2{
    height:5px;
    border-radius:999px;
    background:#edf0f5;
    overflow:hidden;
}

.activity-fill-out-v2,
.activity-fill-in-v2{
    height:100%;
    border-radius:999px;
}

.activity-fill-out-v2{
    background:#7164f5;
}

.activity-fill-in-v2{
    background:#45c19a;
}

.activity-value-v2{
    font-size:10px;
    font-weight:800;
    text-align:right;
}

.activity-value-v2.out{
    color:#5c50dd;
}

.activity-value-v2.in{
    color:#168562;
}

.section-subline-v2{
    margin-top:-8px;
    margin-bottom:15px;
    font-size:10px;
    color:var(--muted);
}

.back-row-v2{
    margin-bottom:16px;
}

.back-link-v2{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:36px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--ink);
    font-size:10px;
    font-weight:800;
}

.store-detail-head-v2{
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:flex-start;
    margin-bottom:18px;
}

.store-detail-head-v2 h1{
    margin:0;
    font-size:28px;
    letter-spacing:-.035em;
}

.store-detail-head-v2 p{
    margin:6px 0 0;
    color:var(--muted);
    font-size:11px;
}

.movement-list-v2{
    display:flex;
    flex-direction:column;
}

.movement-row-v2{
    display:grid;
    grid-template-columns:minmax(180px,1fr) 145px 75px 80px;
    gap:12px;
    align-items:center;
    padding:11px 0;
    border-bottom:1px solid #edf0f4;
}

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

.movement-product-v2{
    min-width:0;
}

.movement-product-v2 strong{
    display:block;
    font-size:11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.movement-product-v2 span{
    color:var(--muted);
    font-size:9px;
}

.movement-time-v2{
    color:var(--muted);
    font-size:9px;
}

.movement-stock-v2{
    font-size:10px;
    text-align:right;
}

.movement-delta-v2{
    text-align:right;
    font-size:11px;
    font-weight:850;
}

.movement-delta-v2.down{
    color:var(--red);
}

.movement-delta-v2.up{
    color:var(--green);
}

.empty-v2{
    padding:25px 0;
    text-align:center;
    color:var(--muted);
    font-size:11px;
}

@media(max-width:820px){

    .store-card-grid-v2{
        grid-template-columns:1fr;
    }

    .store-toolbar{
        grid-template-columns:1fr;
    }

    .activity-row-v2{
        grid-template-columns:95px minmax(70px,1fr) 47px 47px;
        gap:7px;
    }

    .activity-name-v2{
        font-size:10px;
    }

    .activity-value-v2{
        font-size:9px;
    }

    .store-detail-head-v2{
        display:block;
    }

    .store-detail-head-v2 h1{
        font-size:24px;
    }

    .movement-row-v2{
        grid-template-columns:minmax(0,1fr) auto;
        gap:5px 10px;
        padding:12px 0;
    }

    .movement-time-v2{
        grid-column:1;
        grid-row:2;
    }

    .movement-stock-v2{
        grid-column:2;
        grid-row:1;
    }

    .movement-delta-v2{
        grid-column:2;
        grid-row:2;
    }
}

@media(max-width:480px){

    .store-card-metrics-v2{
        grid-template-columns:1fr 1fr 1fr;
        gap:5px;
    }

    .store-card-v2{
        padding:14px;
    }

    .store-card-metric-v2 strong{
        font-size:12px;
    }
}


/* ==================================================
   OTALEX PLATFORM SHELL V2
   ================================================== */

.platform-splash{
    position:fixed;
    inset:0;
    z-index:10000;

    display:grid;
    place-items:center;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(101,87,245,.08),
            transparent 34%
        ),
        #f8f9fd;

    opacity:1;

    transition:
        opacity .22s ease,
        visibility .22s ease;
}

.platform-splash.leaving{
    opacity:0;
    visibility:hidden;
}

.splash-center{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:25px;

    transform:translateY(-8px);
}

.splash-network{
    min-height:82px;

    display:grid;
    place-items:center;

    animation:
        tenantSplashIn
        .58s
        cubic-bezier(.2,.75,.25,1)
        both;
}

.splash-wordmark{
    min-width:184px;
    height:72px;

    padding:0 30px;

    border-radius:4px;

    display:grid;
    place-items:center;

    background:
        var(--tenant-brand);

    color:#fff;

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

    font-weight:900;
    letter-spacing:.025em;

    box-shadow:
        0 18px 42px
        rgba(15,31,66,.16);
}

.splash-network-image{
    display:block;

    max-width:220px;
    max-height:84px;

    width:auto;
    height:auto;

    object-fit:contain;
}

.splash-powered{
    display:flex;
    align-items:center;

    gap:10px;

    color:#8a93a5;

    font-size:10px;
    font-weight:700;

    opacity:0;

    animation:
        splashPoweredIn
        .35s
        .33s
        ease
        forwards;
}

.splash-powered img{
    width:78px;
    height:auto;
}

@keyframes tenantSplashIn{

    from{
        opacity:0;
        transform:
            translateY(8px)
            scale(.94);
    }

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

@keyframes splashPoweredIn{

    from{
        opacity:0;
        transform:
            translateY(4px);
    }

    to{
        opacity:.8;
        transform:
            translateY(0);
    }
}


.demo-off .pill.demo,
.demo-off .demo-card{
    display:none !important;
}


/* Basic RTL groundwork.
   Full Hebrew language pack comes with HC tenant config. */

html[dir="rtl"] body{
    direction:rtl;
}

html[dir="rtl"] .nav-btn,
html[dir="rtl"] .choice,
html[dir="rtl"] .quick-btn,
html[dir="rtl"] .product-card,
html[dir="rtl"] .store-card-v2,
html[dir="rtl"] th,
html[dir="rtl"] td{
    text-align:start;
}

html[dir="rtl"] .bar-value,
html[dir="rtl"] .activity-value-v2,
html[dir="rtl"] .movement-stock-v2,
html[dir="rtl"] .movement-delta-v2{
    text-align:end;
}


@media(max-width:620px){

    .splash-wordmark{
        min-width:158px;
        height:62px;

        padding:0 24px;

        font-size:34px;
    }

    .splash-powered img{
        width:70px;
    }
}


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

    .splash-network,
    .splash-powered{
        animation:none;
        opacity:1;
    }

    .platform-splash{
        transition:none;
    }
}


/* ==================================================
   STORE DIRECTOR DEPARTMENT MAP PROTOTYPE
   UI-only prototype data
   ================================================== */

.store-director-prototype{
    margin-top:16px;
}

.prototype-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;

    margin-bottom:14px;
    padding:11px 14px;

    border:1px solid #e5e0ff;
    border-radius:13px;

    background:#f8f6ff;

    color:#6557a8;

    font-size:10px;
    line-height:1.4;
}

.prototype-banner strong{
    font-size:10px;
}

.dept-workspace{
    display:grid;
    grid-template-columns:minmax(0,1fr) 0fr;
    gap:0;

    align-items:start;

    transition:
        grid-template-columns .28s ease,
        gap .28s ease;
}

.dept-workspace.shelf-open{
    grid-template-columns:
        minmax(0,1fr)
        minmax(340px,.62fr);

    gap:16px;
}

.department-map-panel{
    min-width:0;
}

.department-map{
    display:grid;

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

    grid-auto-rows:92px;

    gap:10px;
}

.department-tile{
    position:relative;

    border:1px solid var(--line);
    border-radius:16px;

    background:#fff;

    padding:14px;

    text-align:left;
    color:var(--ink);

    overflow:hidden;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.department-tile:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 22px
        rgba(28,43,76,.07);
}

.department-tile.active{
    box-shadow:
        0 0 0 2px
        rgba(101,87,245,.14);
}

.department-tile:before{
    content:"";

    position:absolute;

    left:0;
    right:0;
    top:0;

    height:5px;
}

.department-tile.state-green:before{
    background:#43bd8f;
}

.department-tile.state-yellow:before{
    background:#e0ad42;
}

.department-tile.state-red:before{
    background:#e0645e;
}

.department-tile.state-gray:before{
    background:#9aa3b2;
}

.department-tile.state-green{
    background:
        linear-gradient(
            145deg,
            #fff,
            #f3fbf8
        );
}

.department-tile.state-yellow{
    background:
        linear-gradient(
            145deg,
            #fff,
            #fffaf0
        );
}

.department-tile.state-red{
    background:
        linear-gradient(
            145deg,
            #fff,
            #fff5f4
        );
}

.department-tile.state-gray{
    background:
        linear-gradient(
            145deg,
            #fff,
            #f7f8fa
        );
}

.department-tile-name{
    display:block;

    font-size:13px;
    font-weight:850;

    margin-bottom:7px;
}

.department-tile-meta{
    display:flex;
    align-items:center;
    gap:7px;

    color:var(--muted);

    font-size:10px;
}

.department-status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
}

.state-green .department-status-dot{
    background:#43bd8f;
}

.state-yellow .department-status-dot{
    background:#e0ad42;
}

.state-red .department-status-dot{
    background:#e0645e;
}

.state-gray .department-status-dot{
    background:#9aa3b2;
}

.department-tile-count{
    position:absolute;

    right:12px;
    bottom:11px;

    min-width:29px;
    height:29px;

    padding:0 8px;

    display:grid;
    place-items:center;

    border-radius:999px;

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

    border:1px solid rgba(150,160,180,.24);

    font-size:11px;
    font-weight:900;
}

.dept-bedroom{
    grid-column:span 4;
}

.dept-mattresses{
    grid-column:span 5;
}

.dept-furniture{
    grid-column:span 3;
}

.dept-home-textiles{
    grid-column:span 5;
}

.dept-bathroom{
    grid-column:span 3;
}

.dept-garden{
    grid-column:span 4;
}

.dept-seasonal{
    grid-column:span 4;
}

.department-map-legend{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-top:14px;

    color:var(--muted);

    font-size:9px;
}

.map-legend-item{
    display:flex;
    align-items:center;
    gap:6px;
}

.legend-dot{
    width:8px;
    height:8px;
    border-radius:50%;
}

.legend-dot.green{
    background:#43bd8f;
}

.legend-dot.yellow{
    background:#e0ad42;
}

.legend-dot.red{
    background:#e0645e;
}

.legend-dot.gray{
    background:#9aa3b2;
}


/* --------------------------------------------------
   Problem shelf
   -------------------------------------------------- */

.problem-shelf{
    min-width:0;

    opacity:0;

    transform:
        translateX(24px)
        scale(.985);

    pointer-events:none;

    transition:
        opacity .24s ease,
        transform .28s ease;
}

.dept-workspace.shelf-open
.problem-shelf{
    opacity:1;

    transform:
        translateX(0)
        scale(1);

    pointer-events:auto;
}

.problem-shelf-inner{
    position:sticky;
    top:88px;

    max-height:
        calc(100vh - 112px);

    overflow:auto;

    border:1px solid var(--line);
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 18px 48px
        rgba(25,38,68,.10);
}

.problem-shelf-head{
    position:sticky;
    top:0;
    z-index:3;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;

    padding:17px;

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

    border-bottom:
        1px solid var(--line);

    backdrop-filter:blur(10px);
}

.problem-shelf-head h3{
    margin:2px 0 4px;

    font-size:18px;
    letter-spacing:-.02em;
}

.problem-shelf-head p{
    margin:0;

    color:var(--muted);
    font-size:10px;
}

.shelf-close{
    width:32px;
    height:32px;

    border:1px solid var(--line);
    border-radius:10px;

    background:#fff;

    color:var(--muted);

    font-size:17px;
}

.problem-shelf-body{
    padding:14px;
}

.problem-task{
    border:1px solid var(--line);
    border-radius:14px;

    background:#fff;

    padding:14px;

    margin-bottom:10px;
}

.problem-task:last-child{
    margin-bottom:0;
}

.problem-task.high{
    border-left:
        4px solid #e0645e;
}

.problem-task.medium{
    border-left:
        4px solid #e0ad42;
}

.problem-task.low{
    border-left:
        4px solid #43bd8f;
}

.problem-task-top{
    display:flex;

    justify-content:space-between;
    align-items:flex-start;

    gap:10px;

    margin-bottom:9px;
}

.problem-task-product{
    min-width:0;
}

.problem-task-product strong{
    display:block;

    font-size:12px;

    margin-bottom:3px;
}

.problem-task-product span{
    color:var(--muted);

    font-size:9px;
}

.problem-priority{
    flex-shrink:0;

    padding:4px 7px;

    border-radius:999px;

    font-size:8px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.04em;
}

.problem-priority.high{
    color:#b8433f;
    background:#fff0ef;
}

.problem-priority.medium{
    color:#94620d;
    background:#fff4de;
}

.problem-priority.low{
    color:#117052;
    background:#e8f8f2;
}

.problem-action{
    margin:10px 0;

    font-size:11px;
    font-weight:750;

    line-height:1.4;
}

.problem-source{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    color:var(--muted);

    font-size:9px;
}

.problem-task-actions{
    display:grid;

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

    gap:6px;

    margin-top:12px;
}

.problem-task-actions button{
    min-height:32px;

    border:1px solid var(--line);
    border-radius:9px;

    background:#fff;

    color:var(--ink);

    font-size:9px;
    font-weight:750;
}

.problem-task-actions button:hover{
    background:#f8f7ff;

    border-color:#cbc5ff;
}

.problem-task-actions
button.primary-task{
    border-color:transparent;

    background:var(--navy);

    color:#fff;
}

.no-department-tasks{
    padding:28px 10px;

    text-align:center;

    color:var(--muted);

    font-size:10px;
    line-height:1.5;
}


/* --------------------------------------------------
   Store Director overview
   -------------------------------------------------- */

.store-health-strip{
    display:grid;

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

    gap:10px;

    margin-bottom:16px;
}

.health-mini-card{
    padding:12px 13px;

    border:1px solid var(--line);
    border-radius:14px;

    background:#fff;
}

.health-mini-card span{
    display:block;

    color:var(--muted);

    font-size:9px;

    margin-bottom:5px;
}

.health-mini-card strong{
    font-size:17px;
}

.health-mini-card.red strong{
    color:#d6534e;
}

.health-mini-card.yellow strong{
    color:#ae7a17;
}

.health-mini-card.green strong{
    color:#168562;
}

.health-mini-card.gray strong{
    color:#788294;
}


/* --------------------------------------------------
   Mobile: real bottom sheet
   -------------------------------------------------- */

.mobile-shelf-backdrop{
    display:none;
}

@media(max-width:820px){

    .dept-workspace,
    .dept-workspace.shelf-open{
        display:block;
    }

    .department-map{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        grid-auto-rows:100px;
    }

    .dept-bedroom,
    .dept-mattresses,
    .dept-furniture,
    .dept-home-textiles,
    .dept-bathroom,
    .dept-garden,
    .dept-seasonal{
        grid-column:span 1;
    }

    .dept-mattresses,
    .dept-garden{
        grid-column:span 2;
    }

    .problem-shelf{
        position:fixed;

        z-index:120;

        left:8px;
        right:8px;
        bottom:8px;

        max-height:72vh;

        opacity:1;

        transform:
            translateY(
                calc(100% + 24px)
            );

        pointer-events:none;

        transition:
            transform .30s
            cubic-bezier(.2,.8,.2,1);
    }

    .dept-workspace.shelf-open
    .problem-shelf{
        transform:
            translateY(0);

        pointer-events:auto;
    }

    .problem-shelf-inner{
        position:relative;

        top:auto;

        max-height:72vh;

        border-radius:20px;

        box-shadow:
            0 18px 60px
            rgba(15,27,52,.28);
    }

    .problem-shelf-head:before{
        content:"";

        position:absolute;

        top:7px;
        left:50%;

        width:38px;
        height:4px;

        margin-left:-19px;

        border-radius:999px;

        background:#d7dbe3;
    }

    .problem-shelf-head{
        padding-top:22px;
    }

    .mobile-shelf-backdrop{
        display:block;

        position:fixed;
        inset:0;

        z-index:110;

        background:
            rgba(8,15,31,.24);

        opacity:0;

        pointer-events:none;

        transition:
            opacity .22s ease;
    }

    body.department-shelf-open
    .mobile-shelf-backdrop{
        opacity:1;

        pointer-events:auto;
    }

    .store-health-strip{
        grid-template-columns:
            1fr 1fr;
    }

    .prototype-banner{
        align-items:flex-start;
    }
}

@media(max-width:480px){

    .department-map{
        grid-auto-rows:92px;
    }

    .department-tile{
        padding:12px;
    }

    .department-tile-name{
        font-size:11px;
    }

    .problem-task-actions{
        grid-template-columns:1fr;
    }
}

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

    .dept-workspace,
    .problem-shelf,
    .department-tile,
    .mobile-shelf-backdrop{
        transition:none;
    }
}


/* ==================================================
   TENANT ACTION CATALOG
   ================================================== */

.problem-action-title{
    margin-top:10px;

    font-size:13px;
    font-weight:900;

    color:var(--ink);
}

.problem-action{
    margin-top:5px;

    font-size:10px;
    font-weight:550;

    line-height:1.55;

    color:#404b60;
}

.problem-confirmation{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:10px;

    margin:10px 0 11px;

    padding:8px 10px;

    border-radius:10px;

    background:#f7f8fb;

    color:var(--muted);

    font-size:9px;
}

.problem-confirmation span{
    min-width:0;
}

.problem-confirmation strong{
    flex-shrink:0;

    padding:3px 6px;

    border-radius:7px;

    background:#eeecff;

    color:#5949d4;

    font-size:8px;

    text-transform:uppercase;
    letter-spacing:.04em;
}

@media(max-width:480px){

    .problem-action-title{
        font-size:12px;
    }

    .problem-action{
        font-size:10px;
    }

    .problem-confirmation{
        align-items:flex-start;
    }
}