/* =========================================================
   YOBA POS — CORE
========================================================= */

:root{
    --blue:#035b87;
    --blue-dark:#035b87;
    --blue-light:#035b87;
    --blue-soft:#eaf6f8;

    --bg:#f5f8fa;
    --white:#ffffff;

    --text:#172b35;
    --muted:#87979f;

    --line:#e2eaee;

    --success:#198754;
    --danger:#dc3545;
    --warning:#f59e0b;

    --sidebar-width:92px;
    --topbar-height:72px;

    --shadow-card:
        0 18px 45px rgba(19,52,65,.08);

    --shadow-blue:
        0 12px 28px rgba(8,105,129,.20);
}

*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    margin:0;
    overflow:hidden;
}

body{
    font-family:"Inter","Poppins",sans-serif;
    background:var(--bg);
    color:var(--text);
    font-size:13px;
}

button,
input,
select{
    font-family:inherit;
}

button{
    cursor:pointer;
}


/* =========================================================
   LOADING
========================================================= */

#loadingScreen{
    position:fixed;
    inset:0;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,.16),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 90%,
            rgba(255,255,255,.12),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #07566b,
            #086981,
            #0b7f9c
        );

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

#loadingScreen.hide{
    opacity:0;
    visibility:hidden;
}

.loading-content{
    text-align:center;
    animation:loadingFloat 1.6s ease-in-out infinite alternate;
}

.loading-logo{
    width:78px;
    height:78px;

    margin:auto auto 18px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:23px;

    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.20);

    box-shadow:
        0 20px 50px rgba(0,0,0,.15),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.loading-logo i{
    width:32px;
    height:32px;
}

.loading-title{
    font-size:22px;
    font-weight:800;
    letter-spacing:-.04em;
}

.loading-subtitle{
    margin-top:4px;
    opacity:.72;
    font-size:11px;
}

.loading-spinner{
    width:27px;
    height:27px;

    margin:20px auto 0;

    border:2px solid rgba(255,255,255,.25);
    border-top-color:#fff;

    border-radius:50%;

    animation:spin .8s linear infinite;
}

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

@keyframes loadingFloat{
    from{
        opacity:.72;
        transform:translateY(5px);
    }

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


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

#loginScreen{
    position:fixed;
    inset:0;

    z-index:9000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:
        radial-gradient(
            circle at 10% 0%,
            rgba(8,105,129,.12),
            transparent 30%
        ),
        #f5f8fa;

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

#loginScreen.hide{
    opacity:0;
    visibility:hidden;
}

.login-card{
    width:min(430px,94vw);

    overflow:hidden;

    background:#fff;

    border:1px solid var(--line);
    border-radius:0 !important;

    box-shadow:
        0 30px 90px rgba(15,45,58,.15);

    animation:
        loginAppear .65s ease;
}

@keyframes loginAppear{
    from{
        opacity:0;
        transform:translateY(25px) scale(.97);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.login-top{
    position:relative;

    padding:34px 30px 31px;

    text-align:center;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255,255,255,.16),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            var(--blue-dark),
            var(--blue),
            var(--blue-light)
        );
}

.login-top::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    right:-90px;
    top:-100px;

    border-radius:50%;

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

.login-logo{
    position:relative;
    z-index:2;

    width:62px;
    height:62px;

    margin:0 auto 14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:19px;

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

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.13);
}

.login-logo i{
    width:29px;
    height:29px;
    stroke-width:1.8;
}

.login-brand{
    position:relative;
    z-index:2;

    margin:0;

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

    letter-spacing:-.04em;
}

.login-description{
    position:relative;
    z-index:2;

    margin:5px 0 0;

    font-size:11px;

    color:rgba(255,255,255,.72);
}

.login-body{
    padding:27px 30px 30px;

    text-align:center;
}

.pin-label{
    color:#8c9aa1;
    font-size:10px;
    margin-bottom:13px;
}

.pin-display{
    display:flex;
    justify-content:center;
    gap:12px;

    margin-bottom:25px;
}

.pin-dot{
    width:11px;
    height:11px;

    border-radius:50%;

    background:#e7eef1;

    border:1px solid #d6e0e4;

    transition:
        background .15s ease,
        transform .15s ease;
}

.pin-dot.active{
    background:var(--blue);
    border-color:var(--blue);

    transform:scale(1.15);

    box-shadow:
        0 0 0 5px rgba(8,105,129,.08);
}

.pin-pad{
    display:grid;

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

    gap:10px;
}

.pin-btn{
    height:54px;

    border:1px solid #d7e0e4;

    border-radius:13px;

    background:#fff;

    color:#334b56;

    font-size:16px;
    font-weight:600;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}

.pin-btn:active{
    transform:scale(.96);
}

.pin-btn.delete{
    color:#75868e;
}

.pin-btn.confirm{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;

    box-shadow:var(--shadow-blue);
}

.pin-note{
    margin-top:17px;

    color:#98a6ad;

    font-size:9px;
}


/* =========================================================
   APP
========================================================= */

#app{
    display:none;

    width:100vw;
    height:100vh;
}

.app-layout{
    width:100%;
    height:100%;

    display:flex;

    overflow:hidden;
}


/* =========================================================
   SIDEBAR
========================================================= */
.sidebar{
    position:fixed;

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

    width:var(--sidebar-width);
    min-width:var(--sidebar-width);

    z-index:1000;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:15px 9px;

    color:#fff;

    background: var(--blue);
    border-radius: 1rem;

    box-shadow:
        5px 0 25px rgba(0,70,90,.10);
}

.sidebar-logo{
    width:48px;
    height:48px;

    margin:6px auto 20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:15px;

    color:var(--blue);

    background:#fff;

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

.sidebar-logo i{
    width:23px;
    height:23px;
}

.sidebar-nav{
    width:100%;

    display:flex;
    flex-direction:column;

    gap:5px;
}

.nav-item-yoba{
    width:100%;
    min-height:67px;

    padding:8px 4px;

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

    gap:6px;

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

    border-radius:13px;
    cursor: pointer;
    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.nav-item-yoba i{
    width:20px;
    height:20px;
}

.nav-item-yoba span{
    font-size:9px;
    font-weight:600;
}

.nav-item-yoba:hover{
    color:#fff;
    background:rgba(255,255,255,.10);
}

.nav-item-yoba.active{
    color:var(--bg);
    
    background: rgba(231, 229, 229, 0.2); /* muito transparente */

    box-shadow:
        0 9px 22px rgba(0,0,0,.10);

    transform:translateY(-1px);
}

.sidebar-bottom{
    width:100%;

    margin-top:auto;

    padding-top:12px;

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


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

.main{
    width:calc(100% - var(--sidebar-width));

    height:100vh;

    margin-left:var(--sidebar-width);

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.topbar{
    height:var(--topbar-height);
    min-height:var(--topbar-height);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 25px;

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

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

.page-title{
    margin:0;

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

    letter-spacing:-.03em;
}

.page-subtitle{
    margin-top:3px;

    color:#94a2a9;

    font-size:9px;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:12px;
}

.cash-status{
    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 11px;

    color:#25745d;

    background:#f1faf6;

    border:1px solid #dcebe5;

    border-radius:9px;

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

.cash-status i{
    width:13px;
}

.avatar{
    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:11px;

    color:var(--blue);

    background:#eaf6f8;

    border:1px solid #d8e8ec;

    font-weight:700;
}

.content{
    flex:1;

    min-height:0;

    padding:21px 23px;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f7fafb,
            #f1f6f8
        );
}


/* =========================================================
   FADE ANIMATIONS
========================================================= */

.page-enter{
    animation:
        pageFade .45s ease both;
}

.fade-item{
    animation:
        fadeUp .45s ease both;
}

@keyframes pageFade{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(14px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.product-card{
    animation:
        fadeUp .35s ease both;
}


/* =========================================================
   DASHBOARD
========================================================= */

.dashboard-page{
    height:100%;

    overflow-y:auto;

    scrollbar-width:none;
}

.dashboard-page::-webkit-scrollbar{
    display:none;
}

.welcome{
    margin-bottom:18px;
}

.welcome h2{
    margin:0 0 4px;

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

    letter-spacing:-.04em;
}

.welcome p{
    margin:0;

    color:#87979f;

    font-size:11px;
}

.stat-card{
    height:100%;

    padding:18px;

    background:#fff;

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

    box-shadow:
        0 10px 30px rgba(20,50,62,.045);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.stat-card:hover{
    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(20,50,62,.08);
}

.stat-icon{
    width:40px;
    height:40px;

    margin-bottom:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    color:var(--blue);

    background:var(--blue-soft);
}

.stat-icon i{
    width:19px;
}

.stat-label{
    color:#8999a0;
    font-size:9px;
}

.stat-value{
    margin-top:3px;

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

    letter-spacing:-.035em;
}

.stat-growth{
    margin-top:4px;

    color:#60927f;

    font-size:9px;
}

.panel{
    padding:18px;

    background:#fff;

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

    box-shadow:
        0 10px 30px rgba(20,50,62,.045);
}

.panel-title{
    font-size:13px;
    font-weight:700;
}

.panel-subtitle{
    color:#95a3aa;
    font-size:9px;
}

.chart{
    height:220px;

    display:flex;
    align-items:flex-end;

    gap:14px;

    padding-top:25px;
}

.bar-wrap{
    position:relative;

    height:100%;

    flex:1;

    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.bar{
    width:100%;
    max-width:35px;

    background:
        linear-gradient(
            180deg,
            #38a9c4,
            #086981
        );

    border-radius:8px 8px 4px 4px;

    box-shadow:
        0 8px 20px rgba(8,105,129,.10);

    transition:
        transform .2s ease,
        filter .2s ease;
}

.bar:hover{
    transform:scaleY(1.03);
    filter:brightness(.95);
}

.bar-day{
    position:absolute;

    bottom:-22px;

    color:#9aa7ad;

    font-size:9px;
}

.recent-item{
    padding:12px 0;

    display:flex;
    align-items:center;
    justify-content:space-between;

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

.recent-item:last-child{
    border-bottom:0;
}

.sale-icon{
    width:34px;
    height:34px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:9px;

    color:var(--blue);

    background:var(--blue-soft);
}

.sale-icon i{
    width:16px;
}


/* =========================================================
   SALES
========================================================= */

#salesPage{
    height:100%;
    overflow:hidden;
}

.sales-page{
    height:100%;

    display:grid;

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

    gap:18px;

    overflow:hidden;
}

.sales-left{
    min-width:0;
    height:100%;

    display:flex;
    flex-direction:column;

    overflow:hidden;
}

.sales-header{
    min-height:47px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:9px;
}

.sales-brand{
    color:var(--blue);

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

    letter-spacing:-.055em;
}

.sales-brand span{
    color:#18323d;
    font-weight:700;
}

.customer-box{
    display:flex;
    align-items:center;
    gap:9px;
}

.customer-info{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}

.customer-label{
    color:#96a4aa;

    font-size:8px;
    text-transform:uppercase;

    letter-spacing:.08em;
}

.customer-name{
    color:#263e48;

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

.btn-edit-client{
    height:34px;

    padding:0 11px;

    display:flex;
    align-items:center;
    gap:5px;

    border:1px solid #dce7eb;
    border-radius:9px;

    color:var(--blue);

    background:#fff;

    font-size:9px;
    font-weight:600;

    transition:
        border-color .2s ease,
        background .2s ease;
}

.btn-edit-client:hover{
    background:var(--blue-soft);
    border-color:#bcd9e0;
}

.btn-edit-client i{
    width:13px;
}


/* SEARCH */

.search-row{
    display:flex;
    gap:10px;

    margin-bottom:13px;
}

.search-box{
    position:relative;

    flex:1;
}

.search-box-inner{
    position:relative;
}

.search-box-inner i{
    position:absolute;

    left:15px;
    top:50%;

    width:17px;
    height:17px;

    color:#8b9ca4;

    transform:translateY(-50%);

    transition:color .2s ease;
}

.search-box-inner:focus-within i{
    color:var(--blue);
}

.search-box input{
    width:100%;
    height:46px;

    padding:0 15px 0 43px;

    border:1px solid #dfe8ec;

    outline:none;

    color:#233d48;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(20,50,62,.035);

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

.search-box input::placeholder{
    color:#a2afb5;
    font-size:10px;
}

.search-box input:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 4px rgba(8,105,129,.08),
        0 10px 28px rgba(20,50,62,.06);
}


/* SALES BODY */

.sales-body{
    flex:1;

    min-height:0;

    display:grid;

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

    gap:14px;

    overflow:hidden;
}


/* PRODUCTS */

.products-area{
    min-width:0;

    height:100%;

    overflow-y:auto;

    padding-right:2px;

    scrollbar-width:none;
}

.products-area::-webkit-scrollbar{
    display:none;
}

.products-title{
    margin-bottom:9px;

    color:#71838c;

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

    text-transform:uppercase;

    letter-spacing:.09em;
}

.product-grid{
    display:grid;

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

    gap:10px;
}

.product-card{
    overflow:hidden;

    cursor:pointer;

    background:#fff;

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

    box-shadow:
        0 5px 18px rgba(15,45,58,.035);

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

.product-card:hover{
    transform:translateY(-2px);

    border-color:#bcd9e0;

    box-shadow:
        0 13px 28px rgba(8,105,129,.09);
}

.product-card:active{
    transform:scale(.98);
}

.product-image{
    height:76px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--blue);

    background:
        linear-gradient(
            145deg,
            #f6fafb,
            #edf6f8
        );
}

.product-image i{
    width:25px;
    height:25px;
    stroke-width:1.7;
}

.product-info{
    padding:9px;
}

.product-name{
    margin-bottom:5px;

    overflow:hidden;

    color:#314a55;

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

    white-space:nowrap;
    text-overflow:ellipsis;
}

.product-price{
    color:var(--blue);

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


/* =========================================================
   CATEGORIES
========================================================= */

.categories-area{
    height:100%;

    display:flex;
    flex-direction:column;

    gap:8px;

    overflow-y:auto;

    scrollbar-width:none;
}

.categories-area::-webkit-scrollbar{
    display:none;
}

.category{
    min-height:55px;

    border:0;
    border-radius:13px;

    color:#fff;

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

    gap:4px;

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

    box-shadow:
        0 7px 18px rgba(20,50,62,.07);

    transition:
        transform .2s ease,
        filter .2s ease;
}

.category:hover{
    transform:translateX(-2px);
    filter:brightness(.97);
}

.category.active{
    outline:
        3px solid rgba(8,105,129,.12);

    transform:translateX(-2px);
}

.category i{
    width:18px;
    height:18px;
}

.category.all{
    background:
        linear-gradient(
            145deg,
            #086981,
            #07566b
        );
}

.category.drinks{
    background:
        linear-gradient(
            145deg,
            #0b7f9c,
            #086981
        );
}

.category.food{
    background:
        linear-gradient(
            145deg,
            #e58b24,
            #cc6c08
        );
}

.category.snacks{
    background:
        linear-gradient(
            145deg,
            #ef9e4b,
            #df7b1d
        );
}

.category.hygiene{
    background:
        linear-gradient(
            145deg,
            #4daeff,
            #3189cc
        );
}

.category.other{
    background:
        linear-gradient(
            145deg,
            #64748b,
            #475569
        );
}


/* =========================================================
   CART
========================================================= */

.cart{
    height:100%;
    min-height:0;

    display:flex;
    flex-direction:column;

    overflow:hidden;

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

    border:1px solid #dfe9ee;
    border-radius:18px;

    box-shadow:
        0 15px 38px rgba(20,50,62,.075);
}

.cart-header{
    padding:15px 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;

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

.cart-title{
    font-size:13px;
    font-weight:700;
}

.cart-count{
    padding:5px 8px;

    border-radius:8px;

    color:var(--blue);

    background:var(--blue-soft);

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

.cart-items{
    flex:1;

    min-height:0;

    overflow-y:auto;

    padding:2px 15px;

    scrollbar-width:none;
}

.cart-items::-webkit-scrollbar{
    display:none;
}

.cart-empty{
    height:100%;

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    color:#9aa7ad;

    text-align:center;
}

.cart-empty i{
    width:35px;
    height:35px;

    margin-bottom:9px;

    opacity:.35;
}

.cart-empty small{
    margin-top:4px;

    font-size:9px;
}


/* CART ITEM */

.cart-item{
    padding:12px 0;

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

    animation:
        cartItemIn .3s ease both;
}

@keyframes cartItemIn{
    from{
        opacity:0;
        transform:translateX(8px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.cart-item:last-child{
    border-bottom:0;
}

.cart-item-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:8px;
}

.cart-product-name{
    color:#263f49;

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

    line-height:1.35;
}

.cart-unit-price{
    margin-top:3px;

    color:#9aa6ac;

    font-size:8px;
}

.cart-price{
    color:#1c3540;

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

    white-space:nowrap;
}

.cart-discount{
    margin-top:7px;

    display:flex;
    align-items:center;

    gap:6px;
}

.discount-label{
    color:#91a0a7;

    font-size:8px;
}

.discount-select{
    height:25px;

    padding:0 5px;

    border:1px solid #dce6ea;
    border-radius:7px;

    outline:none;

    color:#526771;

    background:#fff;

    font-size:8px;
}

.discount-select:focus{
    border-color:var(--blue);
}

.quantity-row{
    margin-top:9px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

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

.quantity button{
    width:27px;
    height:27px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #dce6ea;
    border-radius:8px;

    color:#526771;

    background:#fff;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}

.quantity button:hover{
    color:var(--blue);

    background:var(--blue-soft);

    border-color:#bcd9e0;
}

.quantity button i{
    width:12px;
    height:12px;
}

.quantity span{
    min-width:18px;

    text-align:center;

    color:#263f49;

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

.delete-item{
    width:28px;
    height:28px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:8px;

    color:var(--danger);

    background:#fff1f2;

    transition:
        background .15s ease,
        color .15s ease;
}

.delete-item:hover{
    color:#fff;
    background:var(--danger);
}

.delete-item i{
    width:13px;
}


/* TOTAL */

.cart-total{
    margin:10px 14px 0;

    padding:15px;

    color:#fff;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            #0a718a,
            #07566b
        );

    box-shadow:
        0 14px 28px rgba(8,105,129,.18);
}

.cart-total-label{
    opacity:.70;

    font-size:8px;

    text-transform:uppercase;

    letter-spacing:.1em;
}

.cart-total-value{
    margin-top:3px;

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

    letter-spacing:-.045em;
}


/* =========================================================
   PAYMENT
========================================================= */

.payment{
    padding:12px 14px 14px;

    border-top:1px solid var(--line);
}

.payment-title{
    margin-bottom:7px;

    color:#8999a0;

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

    text-transform:uppercase;

    letter-spacing:.08em;
}

.payment-methods{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:7px;

    margin-bottom:9px;
}

.payment-method{
    height:37px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    border:1px solid #dce7eb;
    border-radius:9px;

    color:#556b74;

    background:#fff;

    font-size:9px;
    font-weight:600;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.payment-method:hover{
    border-color:#bcd9e0;
}

.payment-method.active{
    color:var(--blue);

    background:var(--blue-soft);

    border-color:var(--blue);
}

.payment-method i{
    width:14px;
}

.cash-field{
    margin-bottom:8px;
}

.cash-field label{
    display:block;

    margin-bottom:4px;

    color:#8999a0;

    font-size:8px;
}

.cash-input{
    width:100%;
    height:37px;

    padding:0 10px;

    border:1px solid #dce7eb;
    border-radius:9px;

    outline:none;

    font-size:10px;
    font-weight:600;
}

.cash-input:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 3px rgba(8,105,129,.07);
}

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

    margin-bottom:8px;

    padding:8px 10px;

    border-radius:8px;

    color:var(--success);

    background:#eef9f3;
}

.change span{
    font-size:8px;
}

.change strong{
    font-size:10px;
}

.summary{
    padding-top:8px;

    margin-bottom:8px;

    border-top:1px solid var(--line);
}

.summary-line{
    display:flex;
    justify-content:space-between;

    margin-bottom:5px;

    color:#8d9ca3;

    font-size:8px;
}

.summary-line strong{
    color:#314953;
}

.summary-total{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:7px;

    color:#182f39;

    font-size:17px;
    font-weight:800;
}

.summary-total span:last-child{
    color:var(--blue);
}

.btn-finalize{
    width:100%;
    height:43px;

    border:0;
    border-radius:11px;

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #086981,
            #07566b
        );

    box-shadow:
        0 11px 23px rgba(8,105,129,.18);

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

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.btn-finalize:hover{
    transform:translateY(-1px);

    box-shadow:
        0 15px 28px rgba(8,105,129,.24);
}


/* =========================================================
   MODAL
========================================================= */

.yoba-modal-backdrop{
    position:fixed;
    inset:0;

    z-index:11000;

    display:none;

    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(10,28,36,.48);

    backdrop-filter:blur(7px);
}

.yoba-modal-backdrop.show{
    display:flex;

    animation:modalBackdrop .2s ease;
}

@keyframes modalBackdrop{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.yoba-modal{
    width:min(430px,94vw);

    padding:25px;

    background:#fff;

    border:1px solid #e3ecef;
    border-radius:22px;

    box-shadow:
        0 30px 90px rgba(0,0,0,.20);

    animation:
        modalIn .3s ease;
}

@keyframes modalIn{
    from{
        opacity:0;
        transform:translateY(15px) scale(.97);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.modal-icon{
    width:48px;
    height:48px;

    margin-bottom:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    color:var(--blue);

    background:var(--blue-soft);
}

.modal-icon i{
    width:22px;
}

.yoba-modal h3{
    margin:0 0 5px;

    font-size:16px;
    font-weight:700;
}

.yoba-modal p{
    margin:0 0 18px;

    color:#87979f;

    font-size:10px;
}

.modal-actions{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:9px;
}

.modal-actions button{
    height:42px;

    border-radius:11px;

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

.btn-modal-no{
    border:1px solid var(--line);

    color:#586d76;

    background:#fff;
}

.btn-modal-yes{
    border:1px solid var(--blue);

    color:#fff;

    background:var(--blue);

    box-shadow:var(--shadow-blue);
}


/* CLIENT MODAL */

.client-search{
    position:relative;

    margin-bottom:12px;
}

.client-search i{
    position:absolute;

    left:13px;
    top:50%;

    width:15px;

    color:#91a0a7;

    transform:translateY(-50%);
}

.client-search input{
    width:100%;
    height:40px;

    padding:0 12px 0 38px;

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

    outline:none;

    font-size:10px;
}

.client-search input:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 3px rgba(8,105,129,.07);
}

.form-label-yoba{
    display:block;

    margin-bottom:5px;

    color:#71838c;

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

.form-control-yoba{
    width:100%;
    height:41px;

    margin-bottom:12px;

    padding:0 11px;

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

    outline:none !important;

    font-size:10px;

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

.form-control-yoba:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 3px rgba(8,105,129,.07);
}

.client-results{
    max-height:130px;

    margin-bottom:14px;

    overflow-y:auto;

    scrollbar-width:none;
}

.client-results::-webkit-scrollbar{
    display:none;
}

.client-result{
    padding:9px 10px;

    margin-bottom:5px;

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

    cursor:pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}

.client-result:hover{
    border-color:#bcd9e0;
    background:var(--blue-soft);
}

.client-result strong{
    display:block;

    font-size:9px;
}

.client-result span{
    color:#8c9aa1;

    font-size:8px;
}


/* =========================================================
   TOAST
========================================================= */

.yoba-toast-wrap{
    position:fixed;

    right:20px;
    bottom:20px;

    z-index:12000;

    display:flex;
    flex-direction:column;

    gap:8px;
}

.yoba-toast{
    min-width:260px;
    max-width:360px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px 14px;

    color:#fff;

    background:#102a34;

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

    border-radius:13px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.18);

    font-size:10px;

    animation:
        toastIn .25s ease;
}

.yoba-toast.success{
    border-left:3px solid #44b58d;
}

.yoba-toast.warn{
    border-left:3px solid #e9a23b;
}

.yoba-toast.info{
    border-left:3px solid #38a9c4;
}

.yoba-toast i{
    width:16px;
    height:16px;

    flex:0 0 auto;
}

@keyframes toastIn{
    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:none;
    }
}


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

@media(max-width:1250px){

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

    .sales-page{
        grid-template-columns:
            minmax(0,1fr)
            350px;
    }
}

@media(max-width:1050px){

    .sidebar{
        width:78px;
        min-width:78px;
    }

    .main{
        width:calc(100% - 78px);
        margin-left:78px;
    }

    .nav-item-yoba span{
        font-size:8px;
    }

    .sales-page{
        grid-template-columns:
            minmax(0,1fr)
            330px;
    }
}

@media(max-width:850px){

    .sales-page{
        grid-template-columns:1fr;

        overflow-y:auto;
    }

    .sales-left{
        height:auto;
        overflow:visible;
    }

    .sales-body{
        grid-template-columns:1fr;

        overflow:visible;
    }

    .categories-area{
        height:auto;

        flex-direction:row;

        overflow-x:auto;
    }

    .category{
        min-width:90px;
    }

    .cart{
        min-height:520px;
    }
}

@media(max-width:650px){

    :root{
        --sidebar-width:68px;
    }

    .sidebar{
        width:68px;
        min-width:68px;

        padding-left:5px;
        padding-right:5px;
    }

    .main{
        width:calc(100% - 68px);
        margin-left:68px;
    }

    .content{
        padding:14px;
    }

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

    .cash-status{
        display:none;
    }

    .customer-info{
        display:none;
    }

    .sales-brand{
        font-size:22px;
    }

    .sales-header{
        align-items:center;
    }
}


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

.topbar {

    /* layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    /* espaçamento */
    padding: 18px 32px;

    /* aspeto clean */
    background: #ffffff;
    border-bottom: 1px solid #eef1f4;

    /* leve profundidade */
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);

    /* fixa no topo (opcional — remove se não quiseres) */
    position: sticky;
    top: 0;
    z-index: 50;
}


/* =========================================================
   LADO ESQUERDO — TÍTULO + SUBTÍTULO
========================================================= */

.topbar-left {

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;

    min-width: 0; /* permite ellipsis se o título for longo */
}

.page-title {

    /* tipografia */
    font-family: inherit;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;

    /* cor */
    color: #0f172a;

    /* limpar */
    margin: 0;
    letter-spacing: -0.3px;

    /* corta se for muito longo */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-subtitle {

    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: #94a3b8;

    margin: 0;
    letter-spacing: 0.1px;
}


/* =========================================================
   LADO DIREITO — STATUS + AVATAR
========================================================= */

.topbar-right {

    display: flex;
    align-items: center;
    gap: 16px;

    flex-shrink: 0;
}


/* =========================================================
   STATUS (utilizador logado)
========================================================= */

.cash-status {

    display: inline-flex;
    align-items: center;
    gap: 8px;

    /* cápsula */
    padding: 8px 14px;
    border-radius: 999px;

    /* fundo suave verde */
    background: #f0fdf4;
    border: 1px solid #dcfce7;

    /* tipografia */
    font-size: 13px;
    font-weight: 600;
    color: #166534;

    line-height: 1;
}

.cash-status .status-dot {

    /* bolinha verde com pulsar subtil */
    width: 8px;
    height: 8px;
    border-radius: 50%;

    background: #22c55e;

    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);

    flex-shrink: 0;
}

.cash-status .status-name {

    /* corta se o nome for muito longo */
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   AVATAR / BOTÃO LOGOUT
========================================================= */

.avatar {

    /* reset de botão */
    appearance: none;
    border: none;
    background: transparent;
    padding: 0;

    /* layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* tamanho */
    width: 42px;
    height: 42px;
    border-radius: 50%;

    /* aspeto */
    background: #f1f5f9;
    color: #475569;

    cursor: pointer;

    /* transição suave */
    transition:
        background-color 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}

.avatar svg,
.avatar i {

    width: 18px;
    height: 18px;

    stroke-width: 2;
}

.avatar:hover {

    background: #e2e8f0;
    color: #0f172a;

    transform: translateY(-1px);
}

.avatar:active {

    transform: translateY(0);
}

.avatar:focus-visible {

    outline: 2px solid #086981;
    outline-offset: 2px;
}


/* =========================================================
   RESPONSIVO (opcional)
========================================================= */

@media (max-width: 640px) {

    .topbar {

        padding: 14px 18px;
        gap: 12px;
    }

    .page-title {

        font-size: 18px;
    }

    .page-subtitle {

        font-size: 12px;
    }

    .cash-status {

        padding: 6px 10px;
        font-size: 12px;
    }

    .cash-status .status-name {

        max-width: 120px;
    }

    .avatar {

        width: 38px;
        height: 38px;
    }
}


/* =========================================================
   YOBA POS — PREMIUM UI OVERRIDES
   Sidebar intentionally preserved.
========================================================= */

/* Global smoothness */
html{
    scroll-behavior:smooth;
}

body{
    overflow:hidden;
    background:#f3f7f9;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* Main area */
.main{
    background:#f3f7f9;
}

/* Premium topbar */
.topbar{
    position:relative;
    z-index:900;
    height:74px;
    min-height:74px;
    padding:0 28px;
    background:rgba(255,255,255,.92);
    border-bottom:1px solid rgba(216,228,233,.85);
    box-shadow:0 4px 20px rgba(20,50,62,.035);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}

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

.page-title{
    color:#102d39;
    font-size:19px;
    font-weight:750;
    line-height:1.2;
    letter-spacing:-.035em;
}

.page-subtitle{
    margin-top:5px;
    color:#8a9aa2;
    font-size:9px;
    font-weight:500;
    letter-spacing:.01em;
}

/* Right side */
.topbar-right{
    display:flex;
    align-items:center;
    gap:9px;
}

/* Online/operator pill */
.cash-status{
    height:36px;
    padding:0 12px;
    border-radius:11px;
    color:#25745d;
    background:#f1faf6;
    border:1px solid #dcebe5;
    box-shadow:0 4px 14px rgba(30,90,70,.035);
}

.status-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#28a879;
    box-shadow:0 0 0 4px rgba(40,168,121,.10);
}

.status-name{
    font-size:9px;
    font-weight:650;
    white-space:nowrap;
}

/* Notification button */
.notification-btn{
    position:relative;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #dfe9ed;
    border-radius:11px;
    color:#49636d;
    background:#fff;
    box-shadow:0 5px 16px rgba(20,50,62,.045);
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.notification-btn:hover{
    color:var(--blue);
    background:var(--blue-soft);
    border-color:#c9dfe5;
    transform:translateY(-1px);
    box-shadow:0 8px 20px rgba(8,105,129,.10);
}

.notification-btn:active{
    transform:scale(.96);
}

.notification-btn i{
    width:17px;
    height:17px;
    stroke-width:1.9;
}

.notification-badge{
    position:absolute;
    top:7px;
    right:7px;
    width:6px;
    height:6px;
    border-radius:50%;
    background:#e04b55;
    border:2px solid #fff;
    box-sizing:content-box;
}

/* Logout */
.logout-btn{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e3dfe1;
    border-radius:11px;
    color:#b34a55;
    background:#fff;
    box-shadow:0 5px 16px rgba(20,50,62,.045);
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.logout-btn:hover{
    color:#fff;
    background:#d94c58;
    border-color:#d94c58;
    transform:translateY(-1px);
    box-shadow:0 9px 22px rgba(217,76,88,.20);
}

.logout-btn:active{
    transform:scale(.96);
}

.logout-btn i{
    width:17px;
    height:17px;
    stroke-width:1.9;
}

/* Hide old avatar styling if the new logout button is used */
.avatar{
    width:38px;
    height:38px;
    border-radius:11px;
}

/* Main content: scrollable but scrollbar invisible */
.content{
    flex:1;
    min-height:0;
    padding:24px 26px 30px;
    overflow-y:auto;
    overflow-x:hidden;
    background:
        radial-gradient(
            circle at 95% 5%,
            rgba(8,105,129,.045),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #f7fafb 0%,
            #f1f6f8 100%
        );
    scrollbar-width:none;
    -ms-overflow-style:none;
}

.content::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

/* Sections should not create an unnecessary second scrollbar */
.dashboard-page{
    height:auto;
    min-height:100%;
    overflow:visible;
}

.simple-page{
    min-height:100%;
    overflow:visible;
}

/* Dashboard header */
.welcome{
    position:relative;
    margin-bottom:22px;
    padding:22px 24px;
    overflow:hidden;
    border:1px solid rgba(220,232,237,.90);
    border-radius:20px;
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(8,105,129,.10),
            transparent 35%
        ),
        #fff;
    box-shadow:0 10px 30px rgba(20,50,62,.045);
}

.welcome::after{
    content:"";
    position:absolute;
    width:130px;
    height:130px;
    right:-65px;
    bottom:-80px;
    border-radius:50%;
    background:rgba(8,105,129,.045);
}

.welcome h2{
    position:relative;
    z-index:1;
    margin:0 0 5px;
    color:#122f3b;
    font-size:21px;
    font-weight:750;
    letter-spacing:-.045em;
}

.welcome p{
    position:relative;
    z-index:1;
    margin:0;
    color:#899aa2;
    font-size:11px;
}

/* Premium stat cards */
.stat-card{
    position:relative;
    min-height:154px;
    padding:19px;
    overflow:hidden;
    background:rgba(255,255,255,.94);
    border:1px solid rgba(221,232,237,.95);
    border-radius:18px;
    box-shadow:0 9px 28px rgba(20,50,62,.045);
}

.stat-card::after{
    content:"";
    position:absolute;
    width:95px;
    height:95px;
    right:-42px;
    top:-45px;
    border-radius:50%;
    background:rgba(8,105,129,.035);
    pointer-events:none;
}

.stat-icon{
    position:relative;
    z-index:1;
    width:42px;
    height:42px;
    margin-bottom:14px;
    border-radius:13px;
    color:var(--blue);
    background:#eaf6f8;
    border:1px solid #dceef2;
}

.stat-label{
    color:#8799a1;
    font-size:9px;
    font-weight:550;
}

.stat-value{
    color:#17323d;
    font-size:21px;
    font-weight:750;
    letter-spacing:-.04em;
}

.stat-growth{
    font-size:9px;
    font-weight:550;
}

/* Dashboard panels */
.panel{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(221,232,237,.95);
    border-radius:18px;
    box-shadow:0 9px 28px rgba(20,50,62,.045);
}

.panel-title{
    color:#17323d;
    font-size:13px;
    font-weight:720;
}

.panel-subtitle{
    color:#94a4ab;
    font-size:9px;
}

/* Buttons inside dashboard */
.panel .btn{
    border-color:#dce7eb;
    border-radius:9px;
    color:#58707a;
    background:#fff;
    font-size:9px;
    font-weight:600;
    transition:.2s ease;
}

.panel .btn:hover{
    color:var(--blue);
    background:var(--blue-soft);
    border-color:#bfdce3;
}

/* Generic premium cards / forms */
.simple-page .panel{
    padding:22px;
}

input,
select,
textarea{
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
}

/* Invisible scrollbars everywhere inside the app */
*{
    scrollbar-width:none;
}

*::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
}

/* Keep scroll functionality */
.dashboard-page,
.products-area,
.categories-area,
.cart-items,
.client-results,
.sales-page,
.content{
    -ms-overflow-style:none;
}

/* Mobile topbar */
@media(max-width:650px){
    .topbar{
        height:68px;
        min-height:68px;
        padding:0 14px;
    }

    .page-title{
        font-size:16px;
    }

    .page-subtitle{
        font-size:8px;
    }

    .topbar-right{
        gap:6px;
    }

    .notification-btn,
    .logout-btn,
    .avatar{
        width:35px;
        height:35px;
    }

    .cash-status{
        display:none;
    }

    .content{
        padding:16px 14px 24px;
    }

    .welcome{
        padding:18px;
        border-radius:16px;
    }
}
.sales-panel {
    padding: 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #edf1f3;
    box-shadow: 0 4px 20px rgba(20, 40, 50, 0.04);
}

.sales-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.panel-title {
    font-size: 17px;
    font-weight: 700;
    color: #172126;
    letter-spacing: -0.2px;
}

.panel-subtitle {
    margin-top: 5px;
    font-size: 13px;
    color: #89949a;
}

.sales-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #e6ecef;
    border-radius: 9px;
    background: #fff;
    color: #4e5b61;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.sales-filter:hover {
    border-color: #086981;
    color: #086981;
    background: #f8fcfd;
}

.sales-filter svg {
    width: 15px;
    height: 15px;
}

.sales-filter svg:last-child {
    width: 13px;
    height: 13px;
}

.sales-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 25px;
}

.sales-label {
    display: block;
    font-size: 12px;
    color: #9aa5aa;
    margin-bottom: 4px;
}

.sales-value {
    font-size: 26px;
    font-weight: 750;
    letter-spacing: -0.8px;
    color: #172126;
}

.sales-growth {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 2px;
}

.growth-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eaf7f4;
    color: #16856f;
}

.growth-icon svg {
    width: 16px;
    height: 16px;
}

.sales-growth strong {
    display: block;
    font-size: 13px;
    color: #16856f;
}

.sales-growth small {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    color: #9aa5aa;
}

.chart-container {
    position: relative;
    width: 100%;
    height: 285px;
    margin-top: 18px;
}