:root{
    --taraf-green:#087565;
    --taraf-green-strong:#055f53;
    --taraf-green-deep:#064c46;
    --taraf-mint:#eaf8f4;
    --taraf-navy:#102a43;
    --taraf-canvas:#f4f7f8;
    --taraf-surface:#ffffff;
    --taraf-border:#d8e2e5;
    --taraf-shadow-sm:0 4px 14px rgba(15,41,66,.06);
    --taraf-shadow:0 14px 40px rgba(15,41,66,.09);
    --taraf-shadow-lg:0 26px 70px rgba(15,41,66,.17);
    --taraf-radius-sm:12px;
    --taraf-radius:18px;
    --taraf-radius-lg:24px;
    --taraf-header-height:76px;
}

html{scroll-padding-top:9rem}
body{
    color:var(--taraf-navy);
    background:
        radial-gradient(circle at 85% -10%,rgba(8,117,101,.12),transparent 28rem),
        linear-gradient(180deg,#fbfcfc 0,var(--taraf-canvas) 38rem);
}
body::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    opacity:.28;
    pointer-events:none;
    background-image:linear-gradient(rgba(8,117,101,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(8,117,101,.025) 1px,transparent 1px);
    background-size:24px 24px;
}
::selection{background:#bfe7dc;color:#073d37}

.app-header{
    position:sticky;
    top:0;
    z-index:80;
    border-bottom-color:rgba(216,226,229,.9);
    background:rgba(255,255,255,.92);
    box-shadow:0 8px 30px rgba(15,41,66,.07);
    backdrop-filter:blur(18px) saturate(150%);
}
.app-header__inner{min-height:var(--taraf-header-height)}
.app-brand__mark{
    border-radius:16px;
    background:linear-gradient(145deg,#0b8977,#074f49 70%,#102a43);
    box-shadow:0 9px 24px rgba(8,117,101,.25),inset 0 1px 0 rgba(255,255,255,.28);
}
.app-brand strong{font-size:1.05rem;letter-spacing:-.01em}
.user-chip{border-color:#d7e5e2;background:#f6fbf9;box-shadow:inset 0 1px 0 #fff}
.user-chip__avatar{color:#fff;background:linear-gradient(145deg,var(--taraf-green),var(--taraf-green-deep))}

.primary-nav{
    top:var(--taraf-header-height);
    z-index:70;
    overflow:visible;
    background:rgba(255,255,255,.94);
    box-shadow:0 6px 20px rgba(15,41,66,.04);
}
.primary-nav__inner{overflow:visible;align-items:center;gap:.45rem;padding:.55rem 0}
.primary-nav a,.nav-group summary{min-height:46px}
.nav-direct,.nav-group summary{
    display:flex;
    align-items:center;
    gap:.55rem;
    padding:.55rem .75rem;
    border:1px solid transparent;
    border-radius:12px;
    color:#405469;
    font-size:.86rem;
    font-weight:850;
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    list-style:none;
    transition:background .16s,border-color .16s,color .16s,transform .16s;
}
.nav-group summary::-webkit-details-marker{display:none}
.nav-direct:hover,.nav-direct:focus-visible,.nav-group summary:hover,.nav-group summary:focus-visible,.nav-group[open]>summary{
    border-color:#c7e0da;
    color:var(--taraf-green-deep);
    background:var(--taraf-mint);
}
.nav-direct[aria-current="page"],.nav-group.is-active>summary{color:#fff;background:linear-gradient(135deg,var(--taraf-green),var(--taraf-green-strong));box-shadow:0 7px 18px rgba(8,117,101,.2)}
.nav-symbol{
    display:grid;
    place-items:center;
    flex:0 0 28px;
    width:28px;
    height:28px;
    border-radius:9px;
    color:var(--taraf-green-deep);
    background:#dff2ed;
    font-size:.76rem;
    font-weight:950;
}
.nav-direct[aria-current="page"] .nav-symbol,.nav-group.is-active>summary .nav-symbol{color:var(--taraf-green-deep);background:#fff}
.nav-chevron{width:7px;height:7px;margin-inline-start:.1rem;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .16s}
.nav-group[open] .nav-chevron{transform:rotate(225deg)}
.nav-group{position:relative}
.nav-group__menu{
    position:absolute;
    inset-block-start:calc(100% + .55rem);
    inset-inline-start:0;
    z-index:90;
    display:grid;
    grid-template-columns:repeat(2,minmax(190px,1fr));
    gap:.4rem;
    width:min(460px,calc(100vw - 2rem));
    padding:.75rem;
    border:1px solid #d7e3e6;
    border-radius:18px;
    background:rgba(255,255,255,.98);
    box-shadow:var(--taraf-shadow-lg);
    transform-origin:top right;
    animation:taraf-menu-in .16s ease-out;
}
.nav-group--admin .nav-group__menu{inset-inline-start:auto;inset-inline-end:0}
.nav-group__menu--wide{grid-template-columns:repeat(3,minmax(155px,1fr));width:min(620px,calc(100vw - 2rem))}
.nav-group__heading{grid-column:1/-1;padding:.25rem .35rem .65rem;border-bottom:1px solid #e3eaed}
.nav-group__heading strong,.nav-group__heading small{display:block}
.nav-group__heading small{color:#6d7e8e}
.nav-group__menu a{
    display:grid;
    align-content:center;
    gap:.12rem;
    min-height:64px;
    padding:.7rem .8rem;
    border:1px solid transparent;
    border-radius:12px;
    color:#253c53;
    white-space:normal;
}
.nav-group__menu a small{font-size:.7rem;font-weight:650;color:#738392}
.nav-group__menu a:hover,.nav-group__menu a:focus-visible,.nav-group__menu a[aria-current="page"]{border-color:#c6e2db;background:#edf8f5;color:var(--taraf-green-deep)}
@keyframes taraf-menu-in{from{opacity:0;transform:translateY(-5px) scale(.98)}to{opacity:1;transform:none}}
.nav-scrim,.mobile-dock{display:none}

.container{width:min(1480px,calc(100% - 2.5rem));margin:2rem auto 5rem}
.page-heading,.page-hero,.onboarding-hero{
    position:relative;
    overflow:hidden;
    padding:clamp(1.2rem,2.4vw,1.8rem);
    border:1px solid #d6e5e2;
    border-radius:var(--taraf-radius-lg);
    background:linear-gradient(130deg,#fff 0,#f2faf8 60%,#e8f6f2 100%);
    box-shadow:var(--taraf-shadow-sm);
}
.page-heading::after,.page-hero::after,.onboarding-hero::after{
    content:"";
    position:absolute;
    inset-inline-end:-60px;
    inset-block-start:-85px;
    width:210px;
    height:210px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(8,117,101,.14),transparent 68%);
    pointer-events:none;
}
.page-heading h1,.page-hero h1,.onboarding-hero h1{letter-spacing:-.035em;margin-bottom:.3rem}
.page-heading p,.page-hero p{max-width:760px;color:#607286}
.eyebrow{letter-spacing:.08em;color:var(--taraf-green);font-size:.72rem}

.panel,.card,main>article,.form-section,.auth-card,.empty-state{
    border-color:var(--taraf-border);
    border-radius:var(--taraf-radius);
    background:rgba(255,255,255,.97);
    box-shadow:var(--taraf-shadow-sm);
}
.panel,.card{margin-block:1rem;padding:clamp(1rem,2.2vw,1.45rem)}
.panel:hover,.card:hover{border-color:#c4d7d3}
.section-heading{padding-bottom:.75rem;border-bottom:1px solid #e4ebed}
.section-heading h2{letter-spacing:-.02em}

.cards,.finance-grid,.permission-grid,.tile-grid{gap:1rem}
.summary-card,.finance-card{
    border-color:#d9e6e3;
    background:linear-gradient(145deg,#fff,#f7fbfa);
    box-shadow:0 8px 24px rgba(15,41,66,.055);
    transition:transform .16s,box-shadow .16s,border-color .16s;
}
.summary-card:hover,.finance-card:hover{transform:translateY(-2px);border-color:#b9d8d0;box-shadow:0 14px 30px rgba(15,41,66,.09)}
.summary-card__icon{width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(145deg,var(--taraf-green),var(--taraf-green-deep));box-shadow:0 8px 18px rgba(8,117,101,.2)}
.finance-card>strong{font-size:clamp(1.35rem,2vw,1.75rem);font-variant-numeric:tabular-nums}

input,select,textarea{
    border-color:#aebdc7;
    border-radius:12px;
    background:#fff;
    box-shadow:inset 0 1px 2px rgba(15,41,66,.035);
}
input:hover,select:hover,textarea:hover{border-color:#718796}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--taraf-green);outline:3px solid rgba(8,117,101,.2);box-shadow:0 0 0 1px var(--taraf-green)}
label{color:#233b52;font-size:.88rem}
label small{margin-top:.28rem;font-weight:500}
.button{border-radius:12px;background:linear-gradient(135deg,var(--taraf-green),var(--taraf-green-strong));box-shadow:0 6px 14px rgba(8,117,101,.14)}
.button:hover:not(:disabled){background:linear-gradient(135deg,#096f62,#044e47);box-shadow:0 10px 22px rgba(8,117,101,.22);transform:translateY(-1px)}
.button.secondary{border:1px solid #c7dcd7;background:#edf6f4;box-shadow:none}
.button.ghost{border:1px solid #d1dde1;background:#fff;color:#40566a;box-shadow:none}
.button.danger{background:linear-gradient(135deg,#c43227,#9e2018)}
.notice{border:1px solid #dce6e9;border-inline-start-width:5px;border-radius:14px;box-shadow:var(--taraf-shadow-sm)}

.table-wrap{border-color:#d7e1e5;border-radius:16px;box-shadow:0 4px 15px rgba(15,41,66,.04);scrollbar-color:#a9beb8 #edf2f3}
table{font-variant-numeric:tabular-nums}
th{position:sticky;top:0;z-index:1;padding:.85rem;background:#edf4f3;color:#344c5f;font-size:.78rem;letter-spacing:.01em;white-space:nowrap}
td{padding:.85rem;color:#263d52;vertical-align:middle}
tbody tr:nth-child(even){background:#fafcfc}
tbody tr:hover{background:#f0f8f6}
tbody tr:last-child td{border-bottom:0}
.status-pill,.badge{border:1px solid rgba(8,117,101,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}

.pos-layout{gap:1.25rem}
.pos-catalog,.cart{border-radius:22px}
.pos-tile,.catalog-tile{border-color:#d6e2e5;border-radius:16px;box-shadow:0 5px 16px rgba(15,41,66,.045);transition:transform .16s,border-color .16s,box-shadow .16s}
.pos-tile:hover,.pos-tile:focus-visible,.catalog-tile:hover{transform:translateY(-2px);border-color:#80bdae;box-shadow:0 12px 26px rgba(8,117,101,.11)}
.product-card{overflow:hidden;background:linear-gradient(160deg,#fff,#f8fbfa)}
.barcode-scan{border-width:1px;border-color:#9bcfc2;border-radius:16px;background:linear-gradient(135deg,#e9f8f4,#f7fcfb)}
.cart-total{border-radius:14px;background:linear-gradient(135deg,#e3f6f0,#f5fbf9)}
.tender-card{border-radius:16px;box-shadow:0 5px 18px rgba(15,41,66,.045)}

.auth-shell{padding-block:clamp(1.5rem,6vh,4rem)}
.auth-card{border-radius:26px;box-shadow:var(--taraf-shadow-lg)}
.auth-brand{box-shadow:0 12px 28px rgba(8,117,101,.28)}
.session-options{border-radius:14px;background:#f7faf9}

.app-footer{padding:1rem;border:0;border-radius:14px;background:rgba(255,255,255,.6)}

@media(min-width:761px){
    .nav-group__menu{max-height:min(70vh,540px);overflow:auto}
}

@media(max-width:1000px){
    .container{width:calc(100% - 1.5rem)}
    .nav-direct,.nav-group summary{padding-inline:.55rem}
    .nav-symbol{display:none}
}

@media(max-width:760px){
    :root{--taraf-header-height:64px}
    html{scroll-padding-top:5rem}
    body{padding-bottom:78px}
    body.nav-open{overflow:hidden}
    .app-header__inner{width:calc(100% - 1rem)}
    .primary-nav{
        position:fixed!important;
        z-index:120!important;
        inset-block:0!important;
        inset-inline-start:0!important;
        inset-inline-end:auto!important;
        display:block!important;
        width:min(90vw,390px);
        max-height:none!important;
        overflow:auto!important;
        padding:1rem;
        border:0;
        border-radius:0 24px 24px 0;
        background:#fff;
        box-shadow:var(--taraf-shadow-lg);
        transform:translateX(110%);
        visibility:hidden;
        transition:transform .22s ease,visibility .22s;
    }
    [dir="ltr"] .primary-nav{inset-inline-start:auto!important;inset-inline-end:0!important;border-radius:24px 0 0 24px;transform:translateX(110%)}
    .nav-open .primary-nav{transform:none;visibility:visible}
    .primary-nav::before{content:"القائمة الرئيسية";display:block;padding:.4rem .35rem 1rem;color:var(--taraf-navy);font-size:1.25rem;font-weight:950}
    .primary-nav__inner{display:grid!important;width:100%!important;gap:.55rem;padding:0!important;overflow:visible!important}
    .nav-direct,.nav-group summary{width:100%;min-height:52px;padding:.65rem .75rem;border-color:#e0e8ea;background:#f9fbfb}
    .nav-symbol{display:grid}
    .nav-group{width:100%}
    .nav-group__menu,.nav-group__menu--wide{
        position:static;
        grid-template-columns:1fr;
        width:100%;
        max-height:none;
        margin-top:.4rem;
        padding:.45rem;
        border-radius:14px;
        box-shadow:none;
        animation:none;
    }
    .nav-group__heading{display:none}
    .nav-group__menu a{min-height:54px;padding:.6rem .75rem;background:#fff}
    .nav-scrim{position:fixed;z-index:110;inset:0;width:100%;height:100%;border:0;background:rgba(9,27,43,.55);backdrop-filter:blur(3px)}
    .nav-open .nav-scrim{display:block}
    .mobile-dock{
        position:fixed;
        z-index:100;
        inset-inline:0;
        bottom:0;
        display:flex;
        justify-content:space-around;
        gap:.15rem;
        min-height:68px;
        padding:.45rem max(.45rem,env(safe-area-inset-right)) calc(.4rem + env(safe-area-inset-bottom)) max(.45rem,env(safe-area-inset-left));
        border-top:1px solid #d6e2e5;
        background:rgba(255,255,255,.96);
        box-shadow:0 -10px 30px rgba(15,41,66,.1);
        backdrop-filter:blur(16px);
    }
    .mobile-dock a,.mobile-dock button{display:grid;place-items:center;gap:.1rem;min-width:54px;min-height:52px;padding:.25rem;border:0;border-radius:12px;background:transparent;color:#526778;text-decoration:none;font:inherit;font-weight:800}
    .mobile-dock a>span,.mobile-dock button>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#edf4f3;color:var(--taraf-green-deep);font-size:.72rem;font-weight:950}
    .mobile-dock small{font-size:.64rem;color:inherit}
    .mobile-dock a[aria-current="page"]{color:var(--taraf-green-deep);background:#eaf8f4}
    .mobile-dock a[aria-current="page"]>span{color:#fff;background:var(--taraf-green)}
    .container{width:calc(100% - 1rem);margin:1rem auto 2rem}
    .page-heading,.page-hero,.onboarding-hero{border-radius:18px}
    .panel,.card,.form-section{border-radius:16px}
    .table-wrap{margin-inline:-.15rem;border-radius:13px}
    th,td{padding:.72rem}
    .finance-grid{gap:.65rem}
}

@media(max-width:480px){
    .page-heading,.page-hero,.onboarding-hero{padding:1rem}
    .page-heading h1,.page-hero h1{font-size:1.55rem}
    .panel,.card{padding:.9rem}
    .summary-card,.finance-card{min-height:108px;padding:.9rem}
    .finance-grid{grid-template-columns:1fr 1fr}
    .finance-card>strong{font-size:1.25rem}
    .form-actions{gap:.55rem}
    .button{min-height:50px}
}

@media(prefers-reduced-motion:reduce){.nav-group__menu{animation:none}.primary-nav,.summary-card,.finance-card,.pos-tile,.catalog-tile{transition:none!important}}
@media print{body{padding-bottom:0;background:#fff}.mobile-dock,.nav-scrim{display:none!important}}