/* ==================================================================
   بتن شیمی خاورمیانه — سامانهٔ طراحی پنل
   رنگ‌ها از لوگو: سبز جنگلی + قرمز «پاور»
   ================================================================== */
:root {
    /* برند */
    --forest-950: #07231A;
    --forest-900: #0A2E1C;
    --forest-800: #0F3D24;
    --forest-700: #155A33;
    --green-700:  #1F7A3D;
    --green-600:  #2E8B4F;
    --green-500:  #3FAE6A;
    --green-100:  #D3ECDC;
    --green-50:   #EAF5EE;
    --red-700:    #A51C22;
    --red-600:    #C62128;
    --red-100:    #F6D3D5;
    --red-50:     #FCEEEF;
    --amber-700:  #9A5B00;
    --amber-50:   #FFF4E0;
    --blue-600:   #1E5FBF;
    --blue-50:    #E8F0FD;
    --violet-600: #6B46A8;
    --violet-50:  #F3EDFB;

    /* خنثی‌ها (متمایل به سبز) */
    --bg:        #F1F5F2;
    --surface:   #FFFFFF;
    --surface-2: #F6F9F7;
    --line:      #E1E9E4;
    --line-2:    #CFDCD4;
    --ink:       #12211A;
    --ink-2:     #2A3A31;
    --muted:     #5A6C61;
    --faint:     #8B9B91;

    /* نام‌های قدیمی که در استایل‌های داخل صفحه‌ها استفاده شده‌اند */
    --green:      var(--green-600);
    --green-dark: var(--green-700);
    --green-soft: var(--green-50);
    --red:        var(--red-600);
    --white:      #FFFFFF;

    /* فرم و سایه */
    --r-sm: 10px;
    --r:    14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --radius: var(--r);
    --sh-1: 0 1px 2px rgba(15,61,36,.05), 0 1px 1px rgba(15,61,36,.03);
    --sh-2: 0 1px 2px rgba(15,61,36,.04), 0 10px 28px rgba(15,61,36,.07);
    --sh-3: 0 18px 44px rgba(15,61,36,.16);
    --shadow: var(--sh-2);

    --ease:   cubic-bezier(.2,.8,.2,1);
    --spring: cubic-bezier(.34,1.56,.64,1);
    --sidebar-w: 266px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Vazirmatn, Tahoma, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: var(--ink);
    background:
        radial-gradient(900px 420px at 100% -10%, rgba(63,174,106,.10), transparent 60%),
        radial-gradient(700px 380px at 0% 110%, rgba(198,33,40,.04), transparent 60%),
        var(--bg);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
::selection { background: var(--green-100); color: var(--forest-900); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7D4CC; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #A9BAB0; background-clip: padding-box; border: 2px solid transparent; }

.ico { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ==================================================================
   چیدمان کلی
   ================================================================== */
.layout { display: flex; min-height: 100vh; }

/* ---------- منوی کناری ---------- */
.sidebar {
    position: sticky; top: 0;
    width: var(--sidebar-w); height: 100vh; height: 100dvh; flex-shrink: 0;
    display: flex; flex-direction: column;
    color: #D9EADF;
    background:
        radial-gradient(140% 55% at 100% 0%, rgba(63,174,106,.24), transparent 62%),
        radial-gradient(90% 40% at 0% 100%, rgba(198,33,40,.14), transparent 70%),
        linear-gradient(180deg, var(--forest-800) 0%, var(--forest-950) 100%);
    z-index: 60;
}
/* خط «پاور» در لبهٔ داخلی منو */
.sidebar::after {
    content: ""; position: absolute; top: 12%; bottom: 12%; inset-inline-end: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 30%, rgba(198,33,40,.45) 70%, transparent);
}

.brand {
    display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px);
    padding: clamp(10px, 2.4vh, 24px) 18px clamp(6px, 1.6vh, 16px);
    flex-shrink: 0;
}
.brand-chip {
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 20px;
    padding: clamp(6px, 1.3vh, 14px) clamp(10px, 2vh, 20px);
    box-shadow: 0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(46,139,79,.10);
    transition: transform .5s var(--spring);
    animation: brandIn .8s var(--spring) both;
}
.brand-chip:hover { transform: translateY(-2px) rotate(-1.5deg); }
.brand-logo { width: clamp(84px, 16vh, 150px); display: block; }
.brand-icon { width: 34px; height: 34px; display: none; border-radius: 8px; }
.brand-name { font-weight: 800; font-size: 14px; color: #fff; letter-spacing: -.01em; }
@keyframes brandIn { from { opacity: 0; transform: scale(.7) translateY(-8px); } to { opacity: 1; transform: none; } }

.menu {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    display: flex; flex-direction: column; gap: clamp(1px, .35vh, 3px);
    padding: clamp(2px, .6vh, 6px) 14px clamp(6px, 1.4vh, 14px);
    scrollbar-width: none;
}
.menu::-webkit-scrollbar { width: 0; }
.menu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); }
.menu-section {
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: rgba(217,234,223,.42); line-height: 1.6;
    padding: clamp(3px, 1.3vh, 14px) 12px clamp(1px, .45vh, 5px);
}
.menu-item {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    padding: clamp(3px, .9vh, 10px) 12px; border-radius: 12px; line-height: 1.6;
    color: rgba(226,240,231,.78); font-weight: 600; font-size: clamp(13px, 1.75vh, 14.5px);
    transition: background .25s var(--ease), color .25s, transform .25s var(--ease), box-shadow .25s;
    animation: navIn .55s var(--ease) both;
}
.menu-item:nth-of-type(1) { animation-delay: .05s; }
.menu-item:nth-of-type(2) { animation-delay: .09s; }
.menu-item:nth-of-type(3) { animation-delay: .13s; }
.menu-item:nth-of-type(4) { animation-delay: .17s; }
.menu-item:nth-of-type(5) { animation-delay: .21s; }
.menu-item:nth-of-type(6) { animation-delay: .25s; }
.menu-item:nth-of-type(7) { animation-delay: .29s; }
.menu-item:nth-of-type(8) { animation-delay: .33s; }
@keyframes navIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

.menu-icon { display: grid; place-items: center; flex-shrink: 0; width: clamp(26px, 3.7vh, 32px); height: clamp(26px, 3.7vh, 32px); border-radius: 10px; background: rgba(255,255,255,.06); transition: background .25s, transform .35s var(--spring); }
.menu-icon .ico { width: 18px; height: 18px; }
.menu-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.menu-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.menu-item:hover .menu-icon { transform: scale(1.08); background: rgba(255,255,255,.12); }

.menu-item.active {
    background: #fff; color: var(--green-700);
    box-shadow: 0 10px 26px rgba(0,0,0,.24);
}
.menu-item.active .menu-icon { background: var(--green-50); color: var(--green-700); }
/* نشانگر قرمز منوی فعال — مثل خط پاور لوگو */
.menu-item.active::before {
    content: ""; position: absolute; top: 50%; inset-inline-start: -14px;
    width: 4px; height: 58%; transform: translateY(-50%);
    border-radius: 4px; background: var(--red-600);
    box-shadow: 0 0 14px rgba(198,33,40,.85);
    animation: barIn .45s var(--spring) both .25s;
}
@keyframes barIn { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(-50%) scaleY(1); } }

.menu-item.locked { color: rgba(226,240,231,.34); cursor: not-allowed; }
.menu-item.locked:hover { background: transparent; color: rgba(226,240,231,.34); }
.menu-item.locked:hover .menu-icon { transform: none; background: rgba(255,255,255,.06); }
.menu-lock { display: grid; place-items: center; opacity: .7; }
.menu-lock .ico { width: 14px; height: 14px; }

.side-foot { flex-shrink: 0; padding: clamp(6px, 1.3vh, 12px) 14px calc(clamp(8px, 1.7vh, 16px) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); }
.side-user {
    display: flex; align-items: center; gap: 10px;
    padding: clamp(5px, 1.1vh, 10px); border-radius: 14px; background: rgba(255,255,255,.06);
}
.side-user .who { min-width: 0; flex: 1; line-height: 1.5; }
.side-user .who b { display: block; color: #fff; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who span { font-size: 12px; color: rgba(217,234,223,.6); }
.side-logout {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    color: #F3B7BA; background: rgba(198,33,40,.14); transition: .25s var(--ease);
}
.side-logout:hover { background: var(--red-600); color: #fff; transform: translateY(-1px); }
.side-logout .ico { width: 18px; height: 18px; }

.avatar {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center;
    font-weight: 800; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, var(--green-500), var(--green-700));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}

.side-backdrop { display: none; }

/* ---------- ستون اصلی ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 30px;
    background: rgba(241,245,242,.78);
    backdrop-filter: saturate(1.5) blur(14px);
    -webkit-backdrop-filter: saturate(1.5) blur(14px);
    border-bottom: 1px solid rgba(225,233,228,.9);
}
.menu-toggle {
    display: none; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    color: var(--ink-2); cursor: pointer; transition: .2s;
}
.menu-toggle:hover { border-color: var(--green-600); color: var(--green-700); }
.topbar-heading { min-width: 0; line-height: 1.35; }
.topbar-title { font-weight: 800; font-size: 20px; letter-spacing: -.015em; color: var(--ink); }
.topbar-crumb { font-size: 12.5px; color: var(--faint); }
.topbar-user { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.date-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.date-chip .ico { width: 16px; height: 16px; color: var(--green-600); }
.user-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 4px 4px 4px 14px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
}
.user-chip .avatar { width: 34px; height: 34px; border-radius: 999px; font-size: 13px; }
.user-meta { line-height: 1.35; }
.user-name { display: block; font-weight: 700; font-size: 13.5px; }
.user-role { display: block; font-size: 11.5px; color: var(--green-700); font-weight: 600; }
.logout-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 12px;
    background: var(--red-50); color: var(--red-600);
    font-weight: 700; font-size: 13.5px;
    transition: .25s var(--ease);
}
.logout-btn .ico { width: 17px; height: 17px; }
.logout-btn:hover { background: var(--red-600); color: #fff; box-shadow: 0 8px 20px rgba(198,33,40,.3); transform: translateY(-1px); }

.content {
    flex: 1; width: 100%; max-width: 1500px; margin-inline: auto;
    padding: 26px 30px 44px;
}
/* ورود پلکانی محتوای صفحه (توست و مودال مستثنا هستند) */
.content > :not(.toast):not(.modal-overlay):not(script) { animation: riseIn .6s var(--ease) both; }
.content > :nth-child(2) { animation-delay: .05s; }
.content > :nth-child(3) { animation-delay: .10s; }
.content > :nth-child(4) { animation-delay: .15s; }
.content > :nth-child(5) { animation-delay: .20s; }
.content > :nth-child(6) { animation-delay: .25s; }
.content > :nth-child(7) { animation-delay: .30s; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.site-footer {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    padding: 18px; font-size: 12.5px; color: var(--faint);
    border-top: 1px solid var(--line);
}
.site-footer i { width: 6px; height: 6px; border-radius: 50%; background: var(--red-600); display: inline-block; }

/* ==================================================================
   کارت، کاشی، شبکه
   ================================================================== */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-2);
    padding: 24px;
    margin-bottom: 22px;
}
.card h2 {
    margin: 0 0 6px; font-size: 18.5px; font-weight: 800; letter-spacing: -.012em;
    display: flex; align-items: center; gap: 8px; color: var(--ink);
}
.hint { color: var(--muted); font-size: 13.5px; }
.card .hint { margin: 0 0 18px; font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }

.tile {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; gap: 8px;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.tile::after {
    content: ""; position: absolute; z-index: -1;
    width: 150px; height: 150px; top: -60px; inset-inline-end: -60px; border-radius: 50%;
    background: radial-gradient(circle, rgba(63,174,106,.14), transparent 70%);
    transition: transform .6s var(--ease);
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--sh-3); border-color: var(--green-100); }
.tile:hover::after { transform: scale(1.7); }
.tile .tile-icon {
    width: 50px; height: 50px; border-radius: 15px;
    display: grid; place-items: center;
    background: var(--green-50); color: var(--green-700); font-size: 24px;
    transition: transform .5s var(--spring), background .3s, color .3s;
}
.tile .tile-icon .ico { width: 24px; height: 24px; }
.tile:hover .tile-icon { transform: rotate(-8deg) scale(1.08); background: var(--green-700); color: #fff; }
.tile .tile-title { font-weight: 800; font-size: 16.5px; color: var(--ink); }
.tile .tile-desc { color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.tile .tile-go {
    margin-top: auto; padding-top: 6px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 700; color: var(--green-700);
    opacity: .0; transform: translateX(8px); transition: .35s var(--ease);
}
.tile .tile-go .ico { width: 16px; height: 16px; }
.tile:hover .tile-go { opacity: 1; transform: none; }
.tile-locked { cursor: not-allowed; background: var(--surface-2); box-shadow: none; }
.tile-locked .tile-icon { background: #EDF1EE; color: var(--faint); }
.tile-locked .tile-title, .tile-locked .tile-desc { color: var(--faint); }
.tile-locked:hover { transform: none; box-shadow: none; border-color: var(--line); }
.tile-locked:hover::after { transform: none; }
.tile-locked:hover .tile-icon { transform: none; background: #EDF1EE; color: var(--faint); }

/* ==================================================================
   دکمه‌ها
   ================================================================== */
.btn {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 0; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.5;
    padding: 11px 20px; border-radius: 12px;
    transition: transform .18s var(--ease), box-shadow .3s var(--ease), background .3s, color .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid rgba(46,139,79,.35); outline-offset: 2px; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-green {
    color: #fff;
    background: linear-gradient(135deg, var(--green-600), var(--green-700));
    box-shadow: 0 6px 16px rgba(31,122,61,.26), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-green::before, .btn-red::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(110%); transition: transform .7s var(--ease);
}
.btn-green:hover, .btn-red:hover { transform: translateY(-1px); }
.btn-green:hover { box-shadow: 0 12px 26px rgba(31,122,61,.36), inset 0 1px 0 rgba(255,255,255,.16); }
.btn-green:hover::before, .btn-red:hover::before { transform: translateX(-110%); }
.btn-green:active, .btn-red:active { transform: scale(.97); }

.btn-red {
    color: #fff;
    background: linear-gradient(135deg, #D8343B, var(--red-700));
    box-shadow: 0 6px 16px rgba(198,33,40,.26), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-red:hover { box-shadow: 0 12px 26px rgba(198,33,40,.34); }

.btn-outline { background: var(--surface); color: var(--ink-2); border: 1.5px solid var(--line-2); }
.btn-outline:hover { border-color: var(--green-600); color: var(--green-700); background: var(--green-50); }

.btn-danger { background: var(--red-50); color: var(--red-600); border: 1.5px solid transparent; }
.btn-danger:hover { background: var(--red-600); color: #fff; box-shadow: 0 8px 18px rgba(198,33,40,.28); }

.btn-xs { padding: 6px 11px; font-size: 12.5px; border-radius: 9px; gap: 5px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.ripple {
    position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    background: currentColor; opacity: .22; transform: scale(0);
    animation: ripple .65s var(--ease) forwards;
}
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ==================================================================
   فرم‌ها
   ================================================================== */
.field { margin-bottom: 16px; }
.field label { display: block; margin-bottom: 7px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.field input, .field select, .field textarea,
.mini-select, .wh-search, .rline .rqty, .rline .eqty, .rline .enote, .rline .pqty, .rline .pprice, .packrow input {
    font-family: inherit; color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-2);
    transition: border-color .2s, box-shadow .25s, background .2s;
}
.field input, .field select, .field textarea {
    width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 14.5px;
}
.field input:hover, .field select:hover, .mini-select:hover, .wh-search:hover { border-color: #B6C8BD; }
.field input:focus, .field select:focus, .field textarea:focus,
.mini-select:focus, .wh-search:focus, .rline .rqty:focus, .rline .pqty:focus, .rline .pprice:focus, .packrow input:focus {
    outline: none; border-color: var(--green-600);
    box-shadow: 0 0 0 4px rgba(46,139,79,.14);
}
.field input::placeholder, .wh-search::placeholder { color: #A3B2A9; }
.field input[type="file"] { padding: 9px; background: var(--surface-2); cursor: pointer; }
.field input[type="file"]::file-selector-button {
    font-family: inherit; font-weight: 700; font-size: 13px;
    margin-inline-end: 12px; padding: 7px 14px; border: 0; border-radius: 9px;
    color: #fff; background: var(--green-700); cursor: pointer;
}
.mini-select { padding: 8px 12px; border-radius: 10px; font-size: 13.5px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--green-700); }

.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 13px 16px; margin-bottom: 16px; border-radius: 12px;
    font-weight: 600; border: 1px solid transparent;
    animation: riseIn .45s var(--ease) both;
}
.alert-error { background: var(--red-50); color: var(--red-700); border-color: var(--red-100); }
.alert-ok { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }

/* ==================================================================
   جدول‌ها
   ================================================================== */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
table.data th {
    background: var(--surface-2); color: var(--muted);
    font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
table.data td { text-align: right; vertical-align: middle; padding: 12px 14px; border-bottom: 1px solid var(--line); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody td { transition: background .18s; }
table.data tbody tr:hover td { background: #F3F9F5; }
.data td.num { text-align: center; font-variant-numeric: tabular-nums; }
.data .in  { color: var(--green-700); font-weight: 800; }
.data .out { color: var(--red-600); font-weight: 800; }
.mono { direction: ltr; unicode-bidi: isolate; white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 13px; letter-spacing: .02em; color: var(--ink-2); }
.data .row-actions { flex-wrap: nowrap; }
table.data td.row-actions { display: table-cell; white-space: nowrap; width: 1%; }
table.data td.row-actions > * + * { margin-inline-start: 6px; }
.pill-list { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pill-list .pill { margin: 0; }
.muted-cell { color: var(--faint); }

/* ==================================================================
   نشان‌ها (pill) و چیپ‌ها
   ================================================================== */
.pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; margin: 2px 0; border-radius: 999px;
    font-size: 12px; font-weight: 700; line-height: 1.6; white-space: nowrap;
    background: var(--green-50); color: var(--green-700);
}
.pill-ok  { background: var(--green-50); color: var(--green-700); }
.pill-ok::before, .pill-off::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-off { background: var(--red-50); color: var(--red-600); }
.pill-off::before { animation: pulseDot 1.6s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(198,33,40,.5); }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(198,33,40,.55); } 70% { box-shadow: 0 0 0 7px rgba(198,33,40,0); } 100% { box-shadow: 0 0 0 0 rgba(198,33,40,0); } }
.pill-all  { background: var(--blue-50); color: var(--blue-600); }
.pill-sys  { background: var(--amber-50); color: var(--amber-700); }
.pill-pack { background: var(--blue-50); color: var(--blue-600); }
.pill-grp  { background: var(--violet-50); color: var(--violet-600); }
.pill-prod, .pill-use { font-size: 13px; padding: 4px 12px; }
.pill-prod { background: var(--blue-50); color: var(--blue-600); }
.pill-use  { background: var(--violet-50); color: var(--violet-600); }

.chip {
    position: relative; overflow: hidden; isolation: isolate;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--muted);
    background: var(--surface); border: 1.5px solid var(--line-2);
    cursor: pointer; transition: all .25s var(--ease);
}
.chip b {
    min-width: 24px; padding: 0 7px; border-radius: 999px; text-align: center;
    font-size: 12px; font-weight: 800; color: var(--ink-2); background: var(--surface-2);
    transition: .25s;
}
.chip:hover { border-color: var(--green-600); color: var(--green-700); transform: translateY(-1px); }
.chip.on {
    color: #fff; border-color: transparent;
    background: linear-gradient(135deg, var(--green-600), var(--green-700));
    box-shadow: 0 6px 16px rgba(31,122,61,.28);
}
.chip.on b { color: #fff; background: rgba(255,255,255,.22); }

/* ==================================================================
   توست
   ================================================================== */
.toast {
    position: fixed; top: 22px; left: 50%; z-index: 999;
    display: flex; align-items: flex-start; gap: 11px;
    max-width: min(560px, 92vw); padding: 13px 20px 13px 18px; border-radius: 16px;
    color: #fff; background: var(--forest-800);
    font-weight: 700; font-size: 14px; line-height: 1.7; white-space: pre-line;
    box-shadow: 0 20px 46px rgba(7,35,26,.32);
    opacity: 0; pointer-events: none;
    transform: translate(-50%, -24px) scale(.96);
    transition: opacity .3s ease, transform .5s var(--spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.toast::before {
    content: ""; flex-shrink: 0; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%;
    display: grid; place-items: center; font-size: 13px; font-weight: 900;
    background: rgba(255,255,255,.2);
}
.toast-ok  { background: linear-gradient(135deg, var(--green-600), var(--forest-800)); }
.toast-ok::before  { content: "✓"; }
.toast-err { background: linear-gradient(135deg, #D8343B, var(--red-700)); }
.toast-err::before { content: "!"; }

/* ==================================================================
   مودال
   ================================================================== */
.modal-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: none; align-items: flex-start; justify-content: center;
    padding: 48px 16px; overflow-y: auto;
    background: rgba(7,35,26,.42);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; animation: fadeIn .25s ease both; }
.modal-box {
    position: relative; overflow: hidden;
    width: 100%; max-width: 640px;
    padding: 26px 26px 22px;
    background: var(--surface); border-radius: var(--r-xl);
    box-shadow: 0 34px 90px rgba(7,35,26,.38);
    animation: modalIn .5s var(--spring) both;
}
.modal-box::before {
    content: ""; position: absolute; top: 0; inset-inline: 0; height: 4px;
    background: linear-gradient(to left, var(--green-700), var(--green-500) 62%, var(--red-600));
}
@keyframes modalIn { from { opacity: 0; transform: translateY(26px) scale(.95); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.modal-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.modal-x {
    width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center;
    border: 0; border-radius: 11px; cursor: pointer;
    font-size: 15px; color: var(--muted); background: var(--surface-2);
    transition: .3s var(--ease);
}
.modal-x:hover { color: var(--red-600); background: var(--red-50); transform: rotate(90deg); }

/* مودال دوم و پنجرهٔ تأیید (روی مودال اصلی) */
.modal-box.modal-wide { max-width: 920px; }
.modal-top { z-index: 210; }
.modal-ask { z-index: 220; align-items: center; }
.ask-box { max-width: 500px; }
.ask-actions { display: flex; gap: 10px; margin-top: 18px; }
.ask-actions .btn { flex: 1; padding-block: 11px; }
.ask-p { margin: 0 0 8px; line-height: 1.9; }
.ask-sum { padding: 14px 16px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); text-align: center; }
.ask-meta { font-size: 13.5px; color: var(--muted); }
.ask-meta b { color: var(--ink); }
.ask-change { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ask-old { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }
.ask-new { color: var(--green-700); }
.ask-arrow { color: var(--muted); font-size: 18px; }
.ask-sec { margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.ask-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ask-list li { padding: 8px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.8; background: var(--blue-50); color: #1C3F73; }
.ask-bals { display: grid; gap: 4px; }
.ask-bal { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-radius: 10px; font-size: 13.5px; background: var(--green-50); }
.ask-bal s { color: var(--faint); }
.ask-bal b { color: var(--green-700); font-variant-numeric: tabular-nums; }
.ask-warn { margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 700; color: var(--amber-700); background: var(--amber-50); border: 1px solid #F4DDB0; }

/* کاردکس: ویرایش مقدار */
.qv { display: inline-flex; align-items: center; gap: 6px; }
.qedit {
    display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0;
    border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer;
    color: var(--muted); background: var(--surface); transition: .2s var(--ease);
}
.qedit .ico { width: 13px; height: 13px; stroke-width: 2.2; }
.qedit:hover { color: var(--green-700); border-color: var(--green-600); background: var(--green-50); }
.qedit-box { display: inline-flex; align-items: center; gap: 4px; }
.qinput {
    width: 84px; padding: 6px 8px; border-radius: 9px; font: inherit; font-size: 14px; text-align: center;
    border: 1.5px solid var(--green-600); box-shadow: 0 0 0 3px rgba(46,139,79,.14); outline: none;
}
.qedit-box .btn-xs, .nedit-box .btn-xs { padding: 5px 9px; }
.nv { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nv .qedit { flex-shrink: 0; }
.nedit-box { display: flex; align-items: center; gap: 4px; width: 100%; min-width: clamp(170px, 26vw, 300px); }
.ninput {
    flex: 1; width: 0; min-width: 0; padding: 6px 10px; border-radius: 9px; font: inherit; font-size: 14px;
    border: 1.5px solid var(--green-600); box-shadow: 0 0 0 3px rgba(46,139,79,.14); outline: none;
}
/* تبلت: دکمه‌های ✓ ✕ زیر کادر ویرایش تا جدول کاردکس افقی اسکرول نخورد */
@media (max-width: 900px) {
    .nedit-box { min-width: 0; flex-wrap: wrap; }
    .ninput { flex: 1 1 100%; width: 0; min-width: 110px; }
    .qedit-box { flex-wrap: wrap; justify-content: center; max-width: 110px; }
    .qedit-box .qinput { width: 100%; min-width: 70px; }
}
.ask-notes { display: grid; gap: 6px; margin-top: 10px; text-align: right; }
.ask-notes div { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.ask-notes span { flex-shrink: 0; min-width: 78px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.ask-notes s { color: var(--faint); }
.ask-notes b { color: var(--green-700); }

/* فهرست ظرف‌ها */
.linkbtn { margin-inline-start: 6px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; color: var(--blue-600); }
.linkbtn:hover { text-decoration: underline; }
.pu-list { display: grid; gap: 8px; margin-bottom: 14px; }
.pu-row {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line);
    animation: riseIn .3s var(--ease) both;
}
.pu-arrows { display: flex; flex-direction: column; gap: 2px; }
.pu-mv { width: 24px; height: 16px; padding: 0; border: 0; border-radius: 5px; cursor: pointer; font-size: 9px; line-height: 1; color: var(--muted); background: var(--line); }
.pu-mv:hover:not(:disabled) { color: #fff; background: var(--green-600); }
.pu-mv:disabled { opacity: .35; cursor: default; }
.pu-name { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 9px; font: inherit; font-size: 14px; border: 1.5px solid var(--line-2); background: var(--surface); }
.pu-name:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 3px rgba(46,139,79,.14); }
.pu-row .pu-save[hidden] { display: none; }
.pu-used { flex-shrink: 0; min-width: 76px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.pu-add { display: flex; gap: 8px; }
.pu-add input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 11px; font: inherit; font-size: 14px; border: 1.5px dashed var(--green-600); background: var(--green-50); }
.pu-add input:focus { outline: none; border-style: solid; box-shadow: 0 0 0 3px rgba(46,139,79,.14); }

/* منوی کشویی قابل جست‌وجو (select[data-search]) */
.ss { position: relative; min-width: 0; }
.ss-native {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important;
    opacity: 0; pointer-events: none; margin: 0 !important;
}
/* با .ss جلوتر تا قاعدهٔ کلی «.field input» (که background را ری‌ست می‌کند) رویش ننشیند */
.ss .ss-input {
    width: 100%; cursor: text;
    padding-inline-end: 34px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6C61' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 11px center;
}
.ss-input.mini-select { width: 100%; }
.ss.ss-open .ss-input {
    background-repeat: no-repeat; background-position: left 11px center;
    border-color: var(--green-600);
    box-shadow: 0 0 0 4px rgba(46,139,79,.14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%231F7A3D' stroke-width='2.2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.ss.ss-disabled .ss-input { cursor: not-allowed; background-color: var(--surface-2); color: var(--muted); }
.ss-list {
    display: none; position: fixed; z-index: 1000; overflow-y: auto; overscroll-behavior: contain;
    padding: 6px; border-radius: 14px; direction: rtl;
    background: var(--surface); border: 1px solid var(--line-2);
    box-shadow: 0 18px 44px rgba(7,35,26,.22);
    animation: fadeIn .15s ease both;
}
.ss-group {
    position: sticky; top: -6px; z-index: 1; margin: 0 -6px; padding: 7px 14px 5px;
    font-size: 11.5px; font-weight: 800; color: var(--green-700); letter-spacing: .02em;
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.ss-group:not(:first-child) { margin-top: 4px; }
.ss-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 12px; border-radius: 9px; cursor: pointer;
    font-size: 14px; line-height: 1.6; color: var(--ink);
}
.ss-opt.ss-hi { background: var(--green-50); }
.ss-opt.ss-sel { font-weight: 700; color: var(--green-700); }
.ss-opt.ss-sel::after { content: "✓"; font-weight: 800; }
.ss-opt mark { padding: 0 1px; border-radius: 3px; color: inherit; background: #FFE9A8; }
.ss-tag { flex-shrink: 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); }
.ss-empty { padding: 14px; text-align: center; font-size: 13.5px; color: var(--faint); }

/* برگهٔ خروج: نوع فاکتور، شماره‌های خودکار، اطلاعات راننده */
.inv-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; margin-bottom: 4px; }
.inv-type { flex: 1 1 260px; }
.seg-inv { margin-bottom: 0; }
.seg-inv .seg-opt input[value="unofficial"]:checked + span { background: linear-gradient(135deg, #C98A1B, var(--amber-700)); box-shadow: 0 6px 14px rgba(154,91,0,.26); }
.auto-nos { display: flex; gap: 10px; margin-bottom: 16px; }
.auto-no {
    display: grid; justify-items: center; gap: 1px; min-width: 118px; padding: 7px 14px;
    border-radius: 12px; background: var(--green-50); border: 1px dashed var(--green-100);
}
.auto-no span { font-size: 12px; font-weight: 700; color: var(--muted); }
.auto-no b { font-size: 22px; line-height: 1.2; color: var(--forest-800); font-variant-numeric: tabular-nums; }
.auto-no small { font-size: 10.5px; color: var(--faint); }
.driver-box { margin: 2px 0 14px; padding: 12px 16px 2px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.driver-box legend { padding: 0 8px; font-weight: 800; font-size: 14px; color: var(--ink-2); }
/* پلاک خودرو (مثل سامانه‌های دولتی) */
.plate {
    display: flex; align-items: stretch; direction: ltr; height: 44px; max-width: 290px;
    border: 2px solid #1A1A1A; border-radius: 9px; overflow: hidden; background: #fff;
}
.plate:focus-within { box-shadow: 0 0 0 4px rgba(46,139,79,.18); border-color: var(--green-700); }
.plate-flag { flex: 0 0 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 4px 0; background: #1D4FA8; color: #fff; }
.plate-flag i { width: 18px; height: 11px; border-radius: 1px; background: linear-gradient(#239F40 33%, #fff 33% 66%, #DA0000 66%); }
.plate-flag b { font-size: 6.5px; line-height: 1.15; text-align: center; font-family: Arial, sans-serif; }
.plate input, .plate select {
    min-width: 0; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: none;
    background: transparent !important; font: inherit; font-size: 20px; font-weight: 800; text-align: center; color: #111; padding: 0 !important;
}
.plate .pl-a { flex: 0 0 44px; }
.plate .pl-b { flex: 0 0 58px; }
.plate .pl-l { flex: 1 1 58px; font-size: 17px; }
.plate .pl-l::placeholder { font-size: 13px; }
.plate input::placeholder { color: #C5CDC8; font-weight: 700; }
.plate-iran { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 2px solid #1A1A1A; }
.plate-iran small { font-size: 10px; font-weight: 700; line-height: 1; color: #333; }
.plate-iran input { width: 100%; height: 24px; font-size: 18px; }
.plate input:focus, .plate select:focus { background: #EAF5EE !important; }

.rline-head { margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.rline-head span { flex-shrink: 0; }
.pill-official { background: var(--green-50); color: var(--green-700); }
.pill-unofficial { background: var(--amber-50); color: var(--amber-700); }
@media (max-width: 700px) {
    .auto-nos { width: 100%; }
    .auto-no { flex: 1; min-width: 0; }
    .rline.rline-head { display: none; }
    .rline .enote { flex: 1 1 100%; width: auto !important; }
}

/* ==================================================================
   فروش و خروج کالا
   ================================================================== */
.sl-head {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
    margin-bottom: 18px; padding: 24px 28px; border-radius: var(--r-lg); color: #fff;
    background: linear-gradient(135deg, var(--forest-900), var(--forest-800) 55%, var(--forest-700));
    box-shadow: var(--sh-2);
}
.sl-head::before {
    content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 3px;
    background: linear-gradient(to left, var(--green-500), rgba(63,174,106,.2) 60%, var(--red-600));
}
.sl-head::after {
    content: ""; position: absolute; z-index: -1; top: -90px; inset-inline-end: -70px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.11), transparent 70%);
}
.sl-head-main { display: flex; align-items: center; gap: 16px; flex: 1 1 380px; min-width: 0; }
.sl-head-ico {
    flex: 0 0 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff;
}
.sl-head-ico .ico { width: 28px; height: 28px; }
.btn.sl-new .ico { width: 19px; height: 19px; stroke-width: 2.4; }
.sl-h2-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--green-700); background: var(--green-50); }
.sl-h2-ico .ico { width: 19px; height: 19px; }
.btn-xs .ico { width: 15px; height: 15px; }
.sl-drv { display: inline-flex; align-items: center; gap: 5px; }
.sl-drv .ico { width: 15px; height: 15px; }
.sl-head h1 { margin: 0 0 4px; font-size: clamp(20px, 2.3vw, 25px); font-weight: 800; letter-spacing: -.015em; }
.sl-head p { margin: 0; font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.76); }
.btn.sl-new {
    padding: 13px 24px; font-size: 15px; font-weight: 800; color: var(--forest-800); background: #fff;
    border: 0; box-shadow: 0 10px 26px rgba(0,0,0,.2);
}
.btn.sl-new:hover { transform: translateY(-1px); background: var(--green-50); box-shadow: 0 14px 30px rgba(0,0,0,.26); }

.sl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.sl-stat {
    position: relative; min-width: 0; padding: 16px 20px; border-radius: var(--r);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
}
.sl-stat::before { content: ""; position: absolute; top: 16px; bottom: 16px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--st, var(--green-600)); }
.sl-stat > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sl-stat > b { display: block; margin: 3px 0 1px; font-size: 27px; font-weight: 800; line-height: 1.35; color: var(--ink); font-variant-numeric: tabular-nums; }
.sl-stat > small { display: block; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-stat.is-blue   { --st: var(--blue-600); }
.sl-stat.is-violet { --st: var(--violet-600); }
.sl-stat.is-amber  { --st: var(--amber-700); }
.sl-next { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 7px 0 4px !important; font-size: 13px !important; line-height: 1.2 !important; }
.sl-next em { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9px; font-style: normal; font-weight: 700; }
.sl-next em i { font-style: normal; font-size: 17px; font-weight: 800; }
.sl-next .is-off { background: var(--green-50); color: var(--green-700); }
.sl-next .is-un  { background: var(--amber-50); color: var(--amber-700); }

.sl-reg-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 18px; margin-bottom: 16px; }
.sl-reg-head .hint { margin: 0; }
.sl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sl-tools .wh-search { width: 290px; }
.sl-filter { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sl-filter button {
    padding: 7px 15px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--muted); transition: .2s var(--ease);
}
.sl-filter button:hover { color: var(--ink-2); }
.sl-filter button.on { background: var(--surface); color: var(--forest-800); box-shadow: 0 1px 3px rgba(15,61,36,.12); }

.sl-table td { vertical-align: middle; }
.sl-table td:nth-child(7), .sl-table .sl-drv, .sl-table .mono { white-space: nowrap; }
.sl-table td:nth-child(3) .cell-main b { font-weight: 700; }
.sl-table .cell-main { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.sl-no { display: inline-flex; align-items: stretch; overflow: hidden; border-radius: 9px; border: 1px solid var(--green-100); white-space: nowrap; }
.sl-no small { display: flex; align-items: center; padding: 0 9px; font-size: 11.5px; font-weight: 700; color: var(--green-700); background: var(--green-50); }
.sl-no b { padding: 3px 11px; font-size: 16px; font-weight: 800; color: var(--forest-800); font-variant-numeric: tabular-nums; }
.sl-no.is-un { border-color: #F2DCB0; }
.sl-no.is-un small { color: var(--amber-700); background: var(--amber-50); }
.sl-no.is-un b { color: var(--amber-700); }
.sl-sub { font-size: 12px; color: var(--faint); }
.sl-acts { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
#regPro .sl-acts { flex-wrap: wrap; max-width: 300px; }
.sl-empty { display: grid; justify-items: center; gap: 4px; padding: 26px 10px; text-align: center; }
.sl-empty b { font-size: 15px; color: var(--ink-2); }
.sl-empty span { font-size: 13.5px; color: var(--faint); }

/* فرم برگه */
.sl-modal { max-width: 900px; }
.doc-head {
    display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 14px;
    margin-bottom: 16px; padding: 14px 16px; border-radius: 16px;
    background: linear-gradient(135deg, var(--green-50), var(--surface-2)); border: 1px solid var(--green-100);
    transition: background .3s, border-color .3s;
}
.doc-head.is-un { background: linear-gradient(135deg, var(--amber-50), var(--surface-2)); border-color: #F2DCB0; }
.doc-type { flex: 1 1 230px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.doc-label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.doc-nos { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-no {
    display: grid; align-content: center; justify-items: center; gap: 2px; min-width: 110px; padding: 8px 14px;
    border-radius: 12px; background: var(--surface); border: 1px dashed var(--line-2);
}
.doc-no span { font-size: 12px; font-weight: 700; color: var(--muted); }
.doc-no b { font-size: 23px; line-height: 1.2; color: var(--forest-800); font-variant-numeric: tabular-nums; }
.doc-head.is-un .doc-no b { color: var(--amber-700); }
.doc-no small { font-size: 10.5px; color: var(--faint); }
.doc-date input {
    width: 138px; padding: 6px 10px; border-radius: 9px; border: 1.5px solid var(--line-2); background-color: var(--surface);
    font: inherit; font-size: 15px; font-weight: 700; text-align: center; color: var(--ink);
}
.doc-date input:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(46,139,79,.14); }

.fsec { margin-bottom: 14px; padding: 16px 18px 2px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.fsec h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 15px; font-weight: 800; color: var(--ink); }
.fsec h3 i {
    flex: 0 0 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-style: normal; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--green-600), var(--green-700));
}
.fsec h3 small { font-size: 12px; font-weight: 600; color: var(--faint); }
.fsec-count { margin-inline-start: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--green-700); background: var(--green-50); }
.fsec .field label em { font-style: normal; color: var(--red-600); }
.fgrid { display: grid; gap: 0 14px; }
.fgrid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fgrid-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.fsec-items { padding-bottom: 16px; }
#lines, #pLines { counter-reset: ln; }
#lines .rline, #pLines .rline { counter-increment: ln; }
.rl-no {
    flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
    font-size: 13px; font-weight: 800; color: var(--green-700); background: var(--green-50);
}
#lines .rl-no::before, #pLines .rl-no::before { content: counter(ln, persian); }
.rline-head .rl-no { height: auto; font-size: 11px; color: var(--muted); background: transparent; }
.sl-addline { margin-top: 2px; }
.sl-note { margin: 14px 0 0; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.ff-sum { flex: 1 1 220px; font-size: 13.5px; color: var(--muted); }
.ff-sum b { color: var(--ink); font-variant-numeric: tabular-nums; }
.form-foot .btn { padding: 12px 22px; }
.form-foot .btn-green { min-width: 230px; }

/* نتیجهٔ ثبت و تأیید حذف */
.sl-done { padding: 6px 4px 2px; text-align: center; }
.sl-done-ico .ico { width: 38px; height: 38px; stroke-width: 2.6; }
.sl-done-ico {
    width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; background: linear-gradient(135deg, var(--green-500), var(--green-700));
    box-shadow: 0 14px 32px rgba(31,122,61,.32); animation: modalIn .6s var(--spring) both;
}
.sl-done h3 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--ink); }
.sl-done p { margin: 0 0 22px; line-height: 2; color: var(--muted); }
.sl-done p b { color: var(--ink); }
.sl-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sl-done-actions .btn { flex: 1 1 170px; padding-block: 12px; }
.sl-ask-title { margin: 4px 0; font-size: 18px; font-weight: 800; color: var(--ink); }

/* تب‌های «برگه‌های خروج» و «پیش‌فاکتورها» */
.sl-tabs { display: flex; gap: 6px; margin-bottom: 16px; padding: 5px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.sl-tabs button {
    flex: 0 1 auto; padding: 10px 22px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
    font: inherit; font-size: 14.5px; font-weight: 700; color: var(--muted); transition: .25s var(--ease);
}
.sl-tabs button:hover { color: var(--ink-2); background: var(--surface-2); }
.sl-tabs button.on { color: #fff; background: linear-gradient(135deg, var(--green-600), var(--green-700)); box-shadow: 0 6px 14px rgba(31,122,61,.24); }

/* پیش‌فاکتور */
.sl-no.is-pro { border-color: #D9CCF0; }
.sl-no.is-pro small { color: var(--violet-600); background: var(--violet-50); }
.sl-no.is-pro b { color: var(--violet-600); }
.sl-exp { color: var(--red-600) !important; font-weight: 700; }
.pill.sl-st-open   { background: var(--green-50); color: var(--green-700); }
.pill.sl-st-conv   { background: var(--blue-50);  color: var(--blue-600); }
.pill.sl-st-cancel { background: var(--red-50);   color: var(--red-600); }
.doc-head.is-pro { background: linear-gradient(135deg, var(--violet-50), var(--surface-2)); border-color: #E2D8F5; }
.doc-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.8; color: var(--muted); }
.fgrid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid-full { grid-column: 1 / -1; }
.rline.pro-line .pamount {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 0; padding: 7px 10px; border-radius: 9px;
    background: var(--surface-2); border: 1.5px solid var(--line-2); color: var(--ink);
    font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden;
}
.rline.pro-line .pamount b { color: var(--forest-800); }
.rline.pro-line .pamount::before { content: "مبلغ"; display: none; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rline-head.pro-line .pamount { min-height: 0; padding: 0; background: transparent; border: 0; }
.pro-total { display: grid; gap: 4px; margin: 4px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13.5px; }
.pro-total div { display: flex; justify-content: space-between; gap: 12px; }
.pro-total b { font-variant-numeric: tabular-nums; color: var(--ink); }
.pro-total .grand { margin-top: 4px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 15px; font-weight: 800; color: var(--green-700); }
.pro-total .grand b { color: var(--green-700); }
.sl-frombar {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 11px 14px;
    border-radius: 12px; background: var(--blue-50); color: #1C3F73; font-size: 13.5px; line-height: 1.8;
}
.sl-frombar .ico { flex-shrink: 0; margin-top: 3px; width: 18px; height: 18px; }

@media (max-width: 700px) {
    .sl-tabs { margin-bottom: 12px; }
    .sl-tabs button { flex: 1; padding: 10px 8px; font-size: 13.5px; }
    .fgrid-3 { grid-template-columns: minmax(0, 1fr); }
    #pLines .rline .pitem, #pLines .rline .ss { flex: 1 1 calc(100% - 42px) !important; }
    #pLines .rline input, #lines .rline input { min-width: 0; }
    #pLines .rline .pqty { order: 2; flex: 1 1 70px; }
    #pLines .rline .pprice { order: 3; flex: 1 1 110px; }
    #pLines .rline .pamount { order: 4; flex: 1 1 calc(100% - 42px); width: auto !important; justify-content: space-between; }
    #pLines .rline .pamount::before { display: block; }
    #pLines .rline .rl-del { order: 5; flex: 0 0 auto; height: 38px; }
}

@media (max-width: 1100px) {
    .sl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .sl-head { padding: 18px 16px; border-radius: 16px; margin-bottom: 14px; }
    .sl-head-main { flex-basis: 100%; gap: 12px; }
    .sl-head-ico { flex-basis: 46px; height: 46px; border-radius: 13px; }
    .sl-head-ico .ico { width: 23px; height: 23px; }
    .sl-head p { font-size: 13px; }
    .btn.sl-new { width: 100%; }
    .sl-stats { gap: 10px; margin-bottom: 14px; }
    .sl-stat { padding: 12px 14px; }
    .sl-stat > b { font-size: 22px; }
    .sl-tools, .sl-tools .wh-search { width: 100%; min-width: 0; }
    .sl-filter { width: 100%; }
    .sl-filter button { flex: 1; }
    .sl-table .cell-main { align-items: flex-end; }
    .sl-acts { width: 100%; flex-wrap: wrap; }
    .sl-acts .btn { flex: 1 1 auto; }
    .doc-head { padding: 12px; }
    .doc-nos { width: 100%; }
    .doc-no { flex: 1 1 0; min-width: 0; padding: 7px 8px; }
    .doc-no b { font-size: 20px; }
    .doc-date { flex-basis: 100%; }
    .doc-date input { width: 100%; }
    .fsec { padding: 14px 12px 2px; }
    .fgrid-2, .fgrid-12 { grid-template-columns: minmax(0, 1fr); }
    #lines .rline { padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
    #lines .rline .ss, #lines .rline select { flex: 1 1 calc(100% - 42px) !important; }
    #lines .rline .eqty { order: 2; flex: 1 1 60px; }
    #lines .rline .rl-del { order: 3; flex: 0 0 auto; height: 38px; }
    #lines .rline .enote { order: 4; }
    .form-foot .btn { flex: 1 1 auto; }
    .form-foot .btn-green { flex-basis: 100%; min-width: 0; order: -1; }
    .ff-sum { flex-basis: 100%; order: -2; text-align: center; }
}
@media (max-width: 340px) {
    .sl-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .sl-stat { padding: 11px 12px; }
    .sl-stat > span { font-size: 11.5px; }
    .sl-stat > b { font-size: 20px; }
    .sl-next em { padding: 3px 7px; font-size: 11.5px; }
    .sl-next em i { font-size: 15px; }
}

/* تقویم شمسی */
.jd-pop {
    display: none; position: fixed; z-index: 1000; width: 280px; padding: 10px;
    border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2);
    box-shadow: 0 18px 44px rgba(7,35,26,.22); font-family: inherit; animation: fadeIn .15s ease both;
}
.jd-head { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.jd-title { flex: 1; text-align: center; font-weight: 800; font-size: 15px; color: var(--forest-800); }
.jd-nav { width: 30px; height: 30px; border: 0; border-radius: 9px; cursor: pointer; font-size: 16px; font-weight: 800; color: var(--ink-2); background: var(--surface-2); }
.jd-nav:hover { background: var(--green-50); color: var(--green-700); }
.jd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.jd-wd { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 3px 0; }
.jd-day {
    height: 34px; border: 0; border-radius: 9px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
    color: var(--ink); background: transparent; font-variant-numeric: tabular-nums;
}
.jd-day:hover { background: var(--green-50); }
.jd-fri { color: var(--red-600); }
.jd-today { box-shadow: inset 0 0 0 1.5px var(--green-600); }
.jd-sel { background: linear-gradient(135deg, var(--green-600), var(--green-700)) !important; color: #fff !important; box-shadow: 0 4px 10px rgba(31,122,61,.3); }
.jd-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.jd-btn { flex: 1; padding: 7px; border: 1px solid var(--line-2); border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; color: var(--green-700); background: var(--surface); }
.jd-btn:hover { background: var(--green-50); }
.jd-clear { color: var(--muted); }
input.jd-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6C61' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 10px center; padding-left: 32px !important;
}

/* گزارش: ردیف برگهٔ خروج و پنجرهٔ جزئیات */
table.data tr.slip-row { cursor: pointer; }
table.data tr.slip-row td { background: #F7FBF8; }
table.data tr.slip-row:hover td { background: var(--green-50); }
table.data tr.pro-row td { background: #F9F6FD; }
table.data tr.pro-row:hover td { background: var(--violet-50); }
.slip-buyer { color: var(--ink-2); }
.slip-more { font-size: 12.5px; font-weight: 800; color: var(--green-700); white-space: nowrap; }
.sd-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.sd-nos { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-nos div { display: grid; justify-items: center; min-width: 96px; padding: 6px 12px; border-radius: 12px; background: var(--green-50); }
.sd-nos span { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.sd-nos b { font-size: 17px; color: var(--forest-800); font-variant-numeric: tabular-nums; }
.sd-sec { margin-top: 12px; }
.sd-sec h3 { margin: 0 0 8px; font-size: 14px; color: var(--green-700); }
.sd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.sd-i { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.sd-i span { flex-shrink: 0; color: var(--muted); font-size: 13px; }
.sd-i b { min-width: 0; overflow-wrap: anywhere; }
.sd-table tfoot td { font-weight: 800; background: var(--green-50); }
.sd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sd-actions .btn { flex: 1 1 150px; }
.plate.plate-sm { display: inline-flex; align-items: stretch; height: 30px; max-width: none; border-width: 1.5px; border-radius: 6px; font-weight: 800; }
.plate.plate-sm .plate-flag { flex: 0 0 16px; padding: 3px 0; justify-content: flex-start; }
.plate.plate-sm .plate-flag i { width: 10px; height: 7px; }
.plate.plate-sm > b { display: flex; align-items: center; padding: 0 5px; font-size: 15px; }
.plate.plate-sm .plate-iran { flex: 0 0 auto; padding: 0 6px; border-left-width: 1.5px; }
.plate.plate-sm .plate-iran small { font-size: 7px; }
.plate.plate-sm .plate-iran b { font-size: 13px; line-height: 1; }
@media (max-width: 700px) {
    .sd-grid { grid-template-columns: minmax(0, 1fr); }
    .sd-nos { width: 100%; }
    .sd-nos div { flex: 1 1 0; min-width: 0; padding: 6px; }
    .sd-nos b { font-size: 15px; white-space: nowrap; }
    .sd-nos div:last-child { flex-grow: 1.4; }
    .sd-i { flex-wrap: wrap; row-gap: 4px; }
}
@media (max-width: 380px) {
    .sd-nos { gap: 6px; }
    .sd-nos span { font-size: 10.5px; }
    .sd-nos b { font-size: 13.5px; }
    .plate.plate-sm > b { padding: 0 3px; font-size: 13px; }
}

/* کنترل انتخابی ورود/خروج */
.seg { display: flex; gap: 10px; margin-bottom: 16px; padding: 5px; background: var(--surface-2); border-radius: 14px; border: 1px solid var(--line); }
.seg-opt { flex: 1; }
.seg-opt input { display: none; }
.seg-opt span {
    display: block; text-align: center; padding: 10px; border-radius: 10px;
    font-weight: 700; color: var(--muted); cursor: pointer; transition: .3s var(--ease);
}
.seg-opt span:hover { color: var(--ink-2); }
.seg-opt input:checked + span {
    color: #fff; background: linear-gradient(135deg, var(--green-600), var(--green-700));
    box-shadow: 0 6px 14px rgba(31,122,61,.26);
}
.seg-opt input[value="out"]:checked + span {
    background: linear-gradient(135deg, #D8343B, var(--red-700));
    box-shadow: 0 6px 14px rgba(198,33,40,.26);
}

/* ==================================================================
   داشبورد
   ================================================================== */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 30px 32px; margin-bottom: 22px; border-radius: var(--r-xl);
    color: #fff;
    background: linear-gradient(125deg, var(--forest-800) 0%, var(--forest-700) 55%, var(--green-700) 100%);
    box-shadow: 0 22px 50px rgba(15,61,36,.28);
}
.hero-blob { position: absolute; z-index: -1; border-radius: 50%; filter: blur(46px); opacity: .55; animation: floatBlob 16s ease-in-out infinite; }
.hero-blob.b1 { width: 320px; height: 320px; top: -140px; inset-inline-start: -60px; background: #3FAE6A; }
.hero-blob.b2 { width: 260px; height: 260px; bottom: -150px; inset-inline-start: 38%; background: var(--red-600); opacity: .35; animation-delay: -6s; }
.hero-mark {
    position: absolute; z-index: -1; width: 250px; height: 250px;
    inset-inline-end: -30px; top: 50%; margin-top: -125px;
    color: rgba(255,255,255,.10); animation: markFloat 9s ease-in-out infinite;
}
.hero-mark svg { width: 100%; height: 100%; }
@keyframes markFloat { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(-4deg); } }
.hero-hello { margin: 0 0 4px; font-size: 14px; color: rgba(255,255,255,.72); font-weight: 600; }
.hero h1 { margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.35; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-meta span {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16);
}
.hero-meta .ico { width: 15px; height: 15px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 26px; }
.kpi {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 4px;
    padding: 20px 20px 18px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1);
    transition: transform .4s var(--ease), box-shadow .4s var(--ease);
    animation: riseIn .6s var(--ease) both;
}
.kpi:nth-child(2) { animation-delay: .07s; }
.kpi:nth-child(3) { animation-delay: .14s; }
.kpi:nth-child(4) { animation-delay: .21s; }
.kpi:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.kpi::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 3px; background: var(--kpi, var(--green-600)); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.kpi-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--kpi-soft, var(--green-50)); color: var(--kpi, var(--green-700)); }
.kpi-icon .ico { width: 20px; height: 20px; }
.kpi-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; font-variant-numeric: tabular-nums; color: var(--ink); }
.kpi-sub { font-size: 12.5px; color: var(--faint); }
.kpi.is-red   { --kpi: var(--red-600);   --kpi-soft: var(--red-50); }
.kpi.is-blue  { --kpi: var(--blue-600);  --kpi-soft: var(--blue-50); }
.kpi.is-amber { --kpi: var(--amber-700); --kpi-soft: var(--amber-50); }

.section-title { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; font-size: 16px; font-weight: 800; color: var(--ink-2); }
.section-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ==================================================================
   ماژول‌ها
   ================================================================== */
/* --- انبار --- */
.wh-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.wh-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.wh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wh-search {
    min-width: 230px; padding: 10px 14px 10px 38px; border-radius: 12px; font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%238B9B91' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 12px center;
}

.alertbar {
    display: flex; align-items: center; gap: 10px;
    margin-top: 14px; padding: 11px 16px; border-radius: 12px; cursor: pointer;
    font-weight: 700; font-size: 14px; color: var(--red-700);
    background: var(--red-50); border: 1px solid var(--red-100);
    transition: .3s var(--ease);
    animation: riseIn .4s var(--ease) both;
}
.alertbar:hover { border-color: var(--red-600); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(198,33,40,.12); }
.alertbar.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #D8343B, var(--red-700)); box-shadow: 0 10px 22px rgba(198,33,40,.28); }

.wh-table .row-low td { background: #FDF5F5; }
.wh-table .row-low td:first-child { box-shadow: inset -3px 0 0 var(--red-600); }
.wh-table tbody tr.row-low:hover td { background: #FBEDEE; }
.wh-table .row-off td { opacity: .55; }
.row-variant td { background: #FAFCFB; }
.wh-table .row-variant td:nth-child(3) { padding-inline-start: 30px; }
.vbranch { color: var(--green-600); font-weight: 800; margin-inline-end: 4px; }
.row-group td { background: #F2F8F4; font-weight: 600; }

.chkcol { width: 42px; text-align: center !important; padding-inline: 6px !important; }
.wh-table.wh-ro .chkcol { display: none; }
.wh-table td.c-name { min-width: 170px; }
.wh-table td.mono { white-space: nowrap; }
.code-inline { display: none; direction: ltr; unicode-bidi: isolate; font-size: 11.5px; color: var(--muted); letter-spacing: .02em; }
.unit-inline { display: none; margin-inline-start: 3px; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.wh-table .acts { display: flex; gap: 6px; }
.wh-table .acts > .btn { flex-shrink: 0; }
.wh-wrap { container: whtable / inline-size; }
@media not all and (max-width: 700px) {
    /* جدول کم‌عرض: ستون‌های کمکی پنهان، واحد کنار موجودی */
    @container whtable (max-width: 1240px) {
        .wh-table .c-kg, .wh-table .c-min, .wh-table .c-unit { display: none; }
        .wh-table .unit-inline { display: inline; }
        .wh-table th, .wh-table td { padding-inline: 10px; }
    }
    /* کم‌عرض‌تر: دکمه‌ها دو ردیف (۲×۲) */
    @container whtable (max-width: 900px) {
        .wh-table .acts { display: grid; grid-template-columns: repeat(2, max-content); gap: 5px; }
        .wh-table td.c-name { min-width: 150px; }
    }
    /* تبلت: دسته پنهان، کد زیر نام */
    @container whtable (max-width: 820px) {
        .wh-table .c-cat, .wh-table .c-code { display: none; }
        .wh-table .code-inline { display: block; }
        .wh-table th, .wh-table td { padding-inline: 8px; }
        .wh-table td.c-name { min-width: 130px; }
    }
}
.chkcol input { width: 17px; height: 17px; cursor: pointer; }
.wh-table tr.row-sel td { background: #E7F4EC; }
.wh-table tr.row-sel.row-low td { background: #F7EAEB; }

.bulkbar {
    display: none; align-items: center; gap: 10px;
    margin-top: 14px; padding: 10px 14px 10px 10px; border-radius: 14px;
    font-weight: 700; color: #fff;
    background: linear-gradient(135deg, var(--forest-700), var(--forest-900));
    box-shadow: 0 12px 28px rgba(15,61,36,.28);
}
.bulkbar.on { display: flex; animation: riseIn .35s var(--spring) both; }
.bulkbar span { margin-inline-end: auto; }
.bulkbar .btn-outline { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
.bulkbar .btn-outline:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
.bulkbar .btn-danger { background: var(--red-600); color: #fff; }
.bulkbar .btn-danger:hover { background: #fff; color: var(--red-600); }

.danger-zone { border-color: var(--red-100); background: linear-gradient(180deg, #FFF, #FDF6F6); }
.danger-zone h2 { color: var(--red-600); font-size: 17px; }

/* فهرست ظرف‌ها در فرم کالا */
.packbox { padding: 16px; border-radius: 14px; background: var(--green-50); border: 1px dashed var(--green-100); }
.packhead, .packrow { display: grid; grid-template-columns: 1.4fr 1fr 34px; gap: 8px; }
.packhead { padding: 0 2px 6px; font-size: 12px; font-weight: 700; color: var(--green-700); }
.packrow { align-items: center; margin-bottom: 8px; animation: riseIn .3s var(--ease) both; }
.packrow input { width: 100%; padding: 8px 10px; border-radius: 9px; font-size: 14px; }
.packrow .mini-select { width: 100%; }
.packrow .pbal { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--green-700); }
.packrow .pdel-note { text-align: center; opacity: .45; cursor: help; }
.addpack { margin-top: 2px; }

/* --- تولید --- */
.rline { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; animation: riseIn .3s var(--ease) both; }
.rline .rqty, .rline .eqty, .rline .enote, .rline .pqty, .rline .pprice { padding: 8px 10px; border-radius: 9px; font-size: 14px; text-align: center; }
.rline .eqty:focus, .rline .enote:focus, .rline .pqty:focus, .rline .pprice:focus { outline: none; border-color: var(--green-600); box-shadow: 0 0 0 4px rgba(46,139,79,.14); }
.recipe-preview { margin: 14px 0 4px; }
.recipe-preview .pv-title { margin-bottom: 7px; font-size: 13px; font-weight: 700; color: var(--green-700); }
.recipe-preview .pv-row {
    display: flex; justify-content: space-between;
    padding: 8px 12px; margin-bottom: 5px; border-radius: 10px;
    font-size: 14px; background: var(--green-50);
    animation: riseIn .3s var(--ease) both;
}
.recipe-preview .pv-row b { color: var(--green-700); font-variant-numeric: tabular-nums; }
.recipe-preview .pv-warn { padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--amber-700); background: var(--amber-50); border: 1px solid #F4DDB0; }

/* --- نقش‌ها --- */
.role-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.role-form .role-name { flex: 0 1 280px; margin: 0; }
.perm-pick { flex: 1; min-width: 240px; display: flex; flex-wrap: wrap; gap: 8px; }
.perm-chip {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
    padding: 8px 13px; border-radius: 11px; font-size: 14px; font-weight: 600;
    background: var(--surface-2); border: 1.5px solid var(--line-2);
    transition: .25s var(--ease);
}
.perm-chip:hover { border-color: var(--green-600); transform: translateY(-1px); }
.perm-chip input { width: 16px; height: 16px; }
.perm-chip:has(input:checked) { color: var(--green-700); background: var(--green-50); border-color: var(--green-600); }

/* --- گزارش‌ها --- */
.rep-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.rep-controls .field { margin: 0; min-width: 150px; }
.rep-controls .btn { padding: 11px 18px; }

/* ==================================================================
   صفحهٔ ورود
   ================================================================== */
.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(135deg, #EEF5F0, #F4F6F8);
}
.login-card {
    width: 100%; max-width: 400px; padding: 34px; text-align: center;
    background: #fff; border-radius: 22px; box-shadow: 0 12px 40px rgba(31,41,51,.12);
}
.login-card img { width: 180px; margin-bottom: 10px; }
.login-card h1 { margin: 0 0 4px; font-size: 20px; }
.login-card .sub { margin: 0 0 24px; font-size: 14px; color: var(--muted); }
.login-card .field { text-align: right; }
.login-card .btn { width: 100%; margin-top: 6px; }

.auth-body { overflow-x: hidden; overflow-y: auto; }
.auth-bg { position: fixed; inset: 0; z-index: 0; background: linear-gradient(135deg, #0F3D24 0%, #17663B 45%, #1F7A3D 100%); }
.auth-bg .blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: floatBlob 16s ease-in-out infinite; }
.blob-1 { width: 420px; height: 420px; background: #3FAE6A; top: -120px; inset-inline-start: -100px; }
.blob-2 { width: 360px; height: 360px; background: #C62128; bottom: -120px; inset-inline-end: -80px; animation-delay: -5s; }
.blob-3 { width: 300px; height: 300px; background: #2E8B4F; top: 40%; inset-inline-end: 20%; animation-delay: -9s; }
@keyframes floatBlob {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-30px) scale(1.1); }
    66%     { transform: translate(-30px,25px) scale(.95); }
}
.bubbles { position: absolute; inset: 0; overflow: hidden; }
.bubbles span { position: absolute; bottom: -60px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.14); animation: rise linear infinite; }
.bubbles span:nth-child(1)  { left: 5%;  width: 22px; height: 22px; animation-duration: 14s; }
.bubbles span:nth-child(2)  { left: 12%; animation-duration: 11s; animation-delay: 2s; }
.bubbles span:nth-child(3)  { left: 20%; width: 10px; height: 10px; animation-duration: 16s; }
.bubbles span:nth-child(4)  { left: 28%; animation-duration: 12s; animation-delay: 4s; }
.bubbles span:nth-child(5)  { left: 36%; width: 26px; height: 26px; animation-duration: 18s; }
.bubbles span:nth-child(6)  { left: 44%; animation-duration: 10s; animation-delay: 1s; }
.bubbles span:nth-child(7)  { left: 52%; width: 8px; height: 8px; animation-duration: 15s; }
.bubbles span:nth-child(8)  { left: 60%; animation-duration: 13s; animation-delay: 3s; }
.bubbles span:nth-child(9)  { left: 68%; width: 20px; height: 20px; animation-duration: 17s; }
.bubbles span:nth-child(10) { left: 76%; animation-duration: 11s; animation-delay: 2s; }
.bubbles span:nth-child(11) { left: 84%; width: 12px; height: 12px; animation-duration: 14s; }
.bubbles span:nth-child(12) { left: 90%; animation-duration: 19s; animation-delay: 5s; }
.bubbles span:nth-child(13) { left: 96%; width: 16px; height: 16px; animation-duration: 12s; }
.bubbles span:nth-child(14) { left: 48%; width: 18px; height: 18px; animation-duration: 20s; animation-delay: 6s; }
@keyframes rise {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    10%  { opacity: .6; }
    90%  { opacity: .5; }
    100% { transform: translateY(-105vh) scale(1.3); opacity: 0; }
}
.auth-body .login-wrap { position: relative; z-index: 1; background: none; padding: 16px; }
.auth-body .login-card {
    padding: 26px 32px;
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.reveal { animation: cardIn .7s var(--ease) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(28px) scale(.96); } to { opacity: 1; transform: none; } }
.login-logo-ring {
    display: flex; align-items: center; justify-content: center;
    width: fit-content; margin: 0 auto 16px; padding: 18px 26px; border-radius: 28px; background: #fff;
    box-shadow: 0 8px 22px rgba(31,41,51,.12), inset 0 0 0 1px rgba(46,139,79,.08);
    animation: logoPop .8s .15s var(--ease) both;
}
.login-logo-ring img { width: 190px; max-width: 58vw; height: auto; display: block; margin: 0 auto; }
@keyframes logoPop { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.auth-body .login-card h1 { margin-bottom: 4px; font-size: 22px; color: var(--green-700); }
.auth-body .login-card .sub { margin: 0 0 18px; font-size: 13px; color: var(--muted); }
.field-icon { position: relative; }
.field-icon .fi { position: absolute; inset-inline-start: 12px; top: 40px; font-size: 16px; opacity: .6; pointer-events: none; }
.field-icon input { padding-inline-start: 40px; }
.toggle-pw { position: absolute; inset-inline-end: 10px; top: 34px; padding: 4px; border: 0; background: none; font-size: 16px; opacity: .5; cursor: pointer; }
.toggle-pw.on { opacity: 1; }
.btn-login::after {
    content: ""; position: absolute; top: 0; inset-inline-start: -120%;
    width: 60%; height: 100%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
    animation: sheen 3.2s ease-in-out infinite;
}
@keyframes sheen { 0%,60% { inset-inline-start: -120%; } 100% { inset-inline-start: 140%; } }
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,122,61,.4); }
.login-foot { margin: 18px 0 0; font-size: 12px; letter-spacing: .5px; color: var(--muted); }
.shake { animation: shake .4s; }
@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
    60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

/* ==================================================================
   واکنش‌گرا — از گوشی کوچک تا نمایشگر عریض
   ================================================================== */

/* ---------- نمایشگرهای خیلی عریض ---------- */
@media (min-width: 1800px) {
    :root { --sidebar-w: 280px; }
    .content { max-width: 1640px; }
}

/* ---------- لپ‌تاپ کوچک و تبلت افقی ---------- */
@media (max-width: 1280px) {
    :root { --sidebar-w: 240px; }
    .topbar { padding: 12px 22px; }
    .content { padding: 22px 22px 40px; }
}
@media (max-width: 1100px) {
    .date-chip { display: none; }
}

/* ---------- منوی کناری بدون اسکرول: جمع‌وجورشدن با کاهش ارتفاع صفحه ---------- */
@media (max-height: 880px) {
    .brand-logo { width: clamp(80px, 12.5vh, 118px); }
}
@media (max-height: 720px) {
    .brand-name { display: none; }
}
@media (max-height: 620px) {
    /* عنوان گروه‌ها به خط جداکنندهٔ نازک تبدیل می‌شود */
    .menu-section {
        height: 1px; padding: 0; margin: 4px 12px;
        font-size: 0; line-height: 0; color: transparent;
        background: rgba(255,255,255,.09);
    }
    .menu-section:first-child { display: none; }
    .side-user .who { display: none; }
    .side-user { justify-content: space-between; }
}
@media (max-height: 520px) {
    .brand-logo { display: none; }
    .brand-icon { display: block; }
    .brand-chip { padding: 4px; border-radius: 12px; }
    .menu-icon .ico { width: 16px; height: 16px; }
}

/* ---------- تبلت و گوشی: منوی کشویی ---------- */
@media (max-width: 980px) {
    :root { --sidebar-w: 280px; }
    .sidebar {
        position: fixed; inset-block: 0; inset-inline-start: 0;
        width: min(var(--sidebar-w), 86vw);
        visibility: hidden; transform: translateX(105%);
        transition: transform .45s var(--ease), visibility 0s linear .45s;
        box-shadow: -24px 0 60px rgba(0,0,0,.28);
    }
    body.menu-open { overflow: hidden; }
    body.menu-open .sidebar { visibility: visible; transform: none; transition: transform .45s var(--ease), visibility 0s; }
    .side-backdrop {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(7,35,26,.45);
        backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        opacity: 0; pointer-events: none; transition: opacity .35s;
    }
    body.menu-open .side-backdrop { opacity: 1; pointer-events: auto; }
    .menu-toggle { display: grid; }
    .topbar { gap: 10px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); }
    .content { padding: 18px 16px 32px; }
    .hero { padding: 24px 22px; }
    .hero-mark { width: 180px; height: 180px; margin-top: -90px; }
}

/* گوشی افقی (کوتاه و پهن): منوی کشویی پهن‌تر و دوستونه تا بدون اسکرول جا شود */
@media (max-width: 980px) and (max-height: 520px) {
    .sidebar { width: min(640px, 94vw); }
    .brand { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 16px 4px; }
    .brand-name { display: block; font-size: 13px; }
    .menu {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start; column-gap: 8px; row-gap: 2px;
    }
    .menu-section { grid-column: 1 / -1; }
    .menu-item.active::before { display: none; }
    .menu-item.active { box-shadow: inset -3px 0 0 var(--red-600), 0 6px 16px rgba(0,0,0,.2); }
    .side-user .who { display: block; }
}

/* ---------- گوشی عمودی و تبلت کوچک ---------- */
@media (max-width: 700px) {
    .user-meta { display: none; }
    .user-chip { padding: 0; border: 0; background: transparent; }
    .logout-btn { padding: 9px; }
    .logout-btn span { display: none; }
    .topbar-crumb { display: none; }
    .topbar-title { font-size: 17px; }
    .content { padding: 14px 12px 28px; }
    .card { padding: 16px; border-radius: 16px; margin-bottom: 16px; }
    .card h2 { font-size: 17px; }

    /* نوار ابزار انبار */
    .wh-top { gap: 10px; }
    .wh-filters { width: 100%; }
    .wh-tools { width: 100%; }
    .wh-tools > * { flex: 1 1 auto; }
    .wh-tools .mini-select { flex: 1 1 150px; }
    .wh-search { min-width: 0; width: 100%; flex: 1 1 100%; }
    .wh-top > div:first-child:not(.wh-filters) { width: 100%; }
    .wh-top > .btn { width: 100%; }
    .bulkbar { flex-wrap: wrap; }
    .bulkbar span { flex: 1 1 100%; }
    .bulkbar .btn { flex: 1 1 auto; }
    .rep-controls .field { flex: 1 1 140px; min-width: 0; }
    .rep-controls .btn { flex: 1 1 auto; }
    .role-form > *, .role-form .role-name { flex: 1 1 100%; }
    .role-form > .btn { width: 100%; }
    .perm-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 8px; }
    .perm-chip { padding: 9px 10px; font-size: 13px; line-height: 1.5; }
    .user-form { gap: 0 14px !important; }
    .user-form .field { margin-bottom: 12px; }
    .perm-pick { min-width: 0; }

    /* ---- جدول‌ها به شکل کارت ---- */
    .table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
    table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
    table.data thead { display: none; }
    table.data tbody tr {
        position: relative;
        margin-bottom: 10px; padding: 4px 14px;
        background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
        box-shadow: var(--sh-1);
    }
    table.data tbody tr > td { background: transparent !important; box-shadow: none !important; }
    table.data td {
        display: flex; align-items: center; justify-content: space-between; gap: 14px;
        min-height: 40px; padding: 8px 0 !important;
        text-align: left; border-bottom: 1px dashed var(--line);
        overflow-wrap: anywhere;
    }
    table.data tbody tr:last-child td { border-bottom: 1px dashed var(--line); }
    table.data td:last-child, table.data tbody tr:last-child td:last-child { border-bottom: 0; }
    table.data td::before {
        content: attr(data-label);
        flex-shrink: 0; max-width: 45%;
        font-size: 12.5px; font-weight: 700; color: var(--muted); text-align: right;
    }
    table.data td:not([data-label])::before, table.data td[data-label=""]::before { display: none; }
    table.data td[colspan] { justify-content: center; text-align: center; border-bottom: 0; }
    .data td.num { text-align: left; }
    table.data td.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; padding-top: 10px !important; white-space: normal; width: 100%; }
    table.data td.row-actions > * + * { margin-inline-start: 0; }
    .wh-table td.row-actions .acts { display: grid; width: 100%; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
    /* محتوای چندتکه (نام + نشان‌ها، فهرست دسترسی‌ها) یک بلوک بماند و بپیچد */
    table.data td > .cell-main, table.data td > .pill-list { min-width: 0; text-align: left; }
    table.data td > .pill-list { justify-content: flex-end; }
    table.data td > select { min-width: 0; max-width: 60%; }
    table.data td.row-actions::before { display: none; }
    /* ردیف جمع در حالت کارت: یک کارت سبز با «جمع» و مقدارهای برچسب‌دار */
    table.data tfoot { display: block; }
    table.data tfoot tr { display: block; padding: 4px 14px; background: var(--green-50); border: 1px solid var(--line); border-radius: 14px; }
    table.data tfoot td { display: flex; background: transparent !important; border-bottom: 0; }
    table.data tfoot td:empty { display: none; }
    table.data tfoot td[colspan] { justify-content: flex-start; text-align: right; border-bottom: 1px dashed var(--line); }
    table.data td.row-actions .btn { flex: 1 1 auto; }
    /* خانهٔ انتخاب در گوشهٔ کارت */
    table.data td.chkcol {
        position: absolute; top: 10px; inset-inline-end: 12px;
        width: auto !important; min-height: 0; padding: 0 !important; border: 0;
    }
    table.data td.chkcol + td { padding-inline-end: 34px !important; }
    /* خانه‌های کد/تاریخ در حالت کارت راست‌به‌چپ بمانند تا برچسب سر جایش باشد */
    table.data td.mono { direction: rtl; unicode-bidi: normal; }
    table.data td.chkcol input { width: 20px; height: 20px; }
    /* وضعیت ردیف‌ها در حالت کارت */
    table.data tbody tr.row-low { background: #FDF5F5; border-color: var(--red-100); box-shadow: inset -4px 0 0 var(--red-600), var(--sh-1); }
    table.data tbody tr.row-sel { background: #EEF8F2; border-color: var(--green-600); }
    table.data tbody tr.row-variant { margin-inline-start: 16px; width: calc(100% - 16px); }
    .wh-table .row-variant td:nth-child(3) { padding-inline-start: 0 !important; }
    table.data tbody tr:hover td { background: transparent !important; }

    /* ---- مودال: برگهٔ کشویی از پایین ---- */
    .modal-overlay { padding: 0; align-items: flex-end; overflow: hidden; }
    .modal-box {
        max-width: none !important; max-height: 94vh; max-height: 94dvh; overflow-y: auto;
        border-radius: 22px 22px 0 0;
        padding: 26px 16px calc(18px + env(safe-area-inset-bottom));
        animation: sheetIn .45s var(--ease) both;
    }
    .modal-box::after {
        content: ""; position: absolute; top: 10px; left: 50%;
        width: 42px; height: 4px; border-radius: 4px;
        background: var(--line-2); transform: translateX(-50%);
    }
    .modal-head { margin-bottom: 14px; }
    .modal-ask { align-items: flex-end; }
    .pu-row { flex-wrap: wrap; }
    .pu-name { flex: 1 1 calc(100% - 40px); }
    .pu-used { flex: 1; }
    .ask-change { font-size: 19px; }
    .modal-head h2 { font-size: 16px; }
    .rline { flex-wrap: wrap; }
    .rline select, .rline .ss { flex: 1 1 100% !important; }
    .rline input { flex: 1 1 90px; width: auto !important; }
    .rline .ss-input { width: 100% !important; }

    .toast { top: calc(10px + env(safe-area-inset-top)); max-width: calc(100vw - 24px); width: max-content; }

    /* ---- داشبورد ---- */
    .hero { padding: 20px 18px; border-radius: 18px; }
    .hero h1 { font-size: 22px; }
    .hero-meta span { font-size: 12px; }
    .hero-mark { width: 140px; height: 140px; margin-top: -70px; inset-inline-end: -24px; }
}
@keyframes sheetIn { from { transform: translateY(100%); } to { transform: none; } }

/* فرم‌های چندستونی داخل مودال و کارت */
@media (max-width: 900px) {
    .modal-box .grid[style*="1fr 1fr 1fr"],
    .modal-box .grid[style*="2fr 1fr"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .modal-box .grid, .card .grid { grid-template-columns: minmax(0, 1fr) !important; }
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
    .kpi { padding: 14px 14px 12px; }
    .kpi-val { font-size: 23px; }
    .kpi-label { font-size: 12px; }
    .kpi-icon { width: 32px; height: 32px; border-radius: 10px; }
    .kpi-icon .ico { width: 17px; height: 17px; }
    .kpi-sub { font-size: 11.5px; }
    .grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .tile { padding: 16px; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 2px; }
    .tile .tile-icon { width: 44px; height: 44px; }
    .tile .tile-title { flex: 1; }
    .tile .tile-desc { flex: 1 1 100%; }
    .tile .tile-go { display: none; }
    .chip { padding: 6px 11px; font-size: 13px; }
}
@media (max-width: 360px) {
    .kpis { grid-template-columns: minmax(0, 1fr); }
    .topbar-title { font-size: 15px; }
}

/* ---------- صفحهٔ ورود در صفحه‌های کوتاه ---------- */
.auth-body .login-wrap { min-height: 100vh; min-height: 100dvh; }
@media (max-height: 700px) {
    .login-logo-ring { padding: 12px 18px; margin-bottom: 10px; }
    .login-logo-ring img { width: 150px; }
    .auth-body .login-card { padding: 18px 24px; }
    .auth-body .login-card h1 { font-size: 19px; }
    .auth-body .login-card .sub { margin-bottom: 10px; }
    .auth-body .login-card .field { margin-bottom: 10px; }
}
/* گوشی افقی: لوگو کنار فرم */
@media (max-height: 500px) and (min-width: 600px) {
    .auth-body .login-card {
        max-width: 700px;
        display: grid; grid-template-columns: 210px minmax(0, 1fr);
        grid-auto-flow: row dense; column-gap: 26px; align-items: center;
    }
    .auth-body .login-card > .login-logo-ring,
    .auth-body .login-card > h1,
    .auth-body .login-card > .sub { grid-column: 1; }
    .auth-body .login-card > .field,
    .auth-body .login-card > .alert,
    .auth-body .login-card > .btn { grid-column: 2; }
    .auth-body .login-card > .login-logo-ring { margin: 0 auto 6px; justify-self: center; }
    .auth-body .login-card > .login-logo-ring img { width: 150px; }
}

/* ---------- لمسی: حذف حالت‌های «هاور» که روی گوشی گیر می‌کنند ---------- */
@media (hover: none) {
    .tile:hover, .kpi:hover, .chip:hover, .perm-chip:hover,
    .btn-green:hover, .btn-red:hover, .logout-btn:hover, .alertbar:hover { transform: none; }
    .tile:hover::after { transform: none; }
    .tile .tile-go { opacity: 1; transform: none; }
}
@media (pointer: coarse) {
    .btn-xs { min-height: 34px; padding-inline: 12px; }
    .chkcol input, input[type="checkbox"] { min-width: 18px; min-height: 18px; }
}


/* --- گزارش انبار --- */
.wh-rep-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.wh-rep-head h2 { margin-bottom: 6px; }
.wh-rep-head > div:first-child { flex: 1 1 320px; }
.wh-rep-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wh-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.whcat { cursor: pointer; user-select: none; }
.whcat input { position: absolute; opacity: 0; pointer-events: none; }
.whcat-box {
    position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
    padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line-2);
    background: var(--surface-2); transition: .25s var(--ease);
}
.whcat:hover .whcat-box { border-color: var(--green-600); transform: translateY(-1px); }
.whcat input:checked + .whcat-box { background: var(--green-50); border-color: var(--green-600); box-shadow: 0 8px 20px rgba(31,122,61,.10); }
.whcat input:focus-visible + .whcat-box { box-shadow: 0 0 0 4px rgba(46,139,79,.2); }
.whcat-top { display: flex; align-items: center; gap: 8px; }
.whcat-ico { font-size: 20px; }
.whcat-name { flex: 1; font-weight: 800; }
.whcat-check {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px;
    font-size: 13px; font-weight: 800; color: transparent; border: 1.5px solid var(--line-2); background: var(--surface);
}
.whcat input:checked + .whcat-box .whcat-check { color: #fff; background: var(--green-600); border-color: var(--green-600); }
.whcat-count { font-size: 24px; font-weight: 800; color: var(--forest-800); font-variant-numeric: tabular-nums; }
.whcat-count small { font-size: 12px; font-weight: 600; color: var(--muted); }
.whcat-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; font-weight: 700; }
.whcat-meta span { padding: 2px 8px; border-radius: 999px; }
.wm-low { color: var(--red-600); background: var(--red-50); }
.wm-out { color: var(--ink-2); background: #E9EDEA; }
.wm-ok { color: var(--green-700); background: var(--surface); }
.wh-rep-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.wh-opt { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; cursor: pointer; }
.wh-opt input { width: 17px; height: 17px; }
.wh-opt span { font-weight: 400; color: var(--muted); font-size: 13px; }
@media (max-width: 700px) {
    .wh-rep-actions, .wh-rep-actions .btn { flex: 1 1 auto; }
    .wh-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .whcat-box { padding: 12px; }
    .whcat-count { font-size: 20px; }
}

/* نسخهٔ چاپی گزارش انبار (فقط هنگام چاپ دیده می‌شود) */
#whPrintArea { display: none; }
.whp { font-family: Vazirmatn, Tahoma, sans-serif; color: #111; font-size: 11px; }
.whp-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 3px solid #1F7A3D; }
.whp-head img { width: 78px; }
.whp-title { text-align: center; }
.whp-title h1 { margin: 0; font-size: 20px; color: #0F3D24; }
.whp-title p { margin: 2px 0 0; color: #555; font-size: 12px; }
.whp-meta { text-align: left; font-size: 11.5px; line-height: 1.9; }
.whp table { width: 100%; border-collapse: collapse; }
.whp th, .whp td { border: 1px solid #C9D3CD; padding: 4px 6px; text-align: center; }
.whp th { background: #1F7A3D; color: #fff; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.whp thead { display: table-header-group; }
.whp tr { break-inside: avoid; }
.whp td.l { text-align: right; }
.whp td.code { direction: ltr; font-size: 10.5px; }
.whp-sum { margin-bottom: 14px; }
.whp-sum td { font-size: 12px; }
.whp-sec { margin-top: 14px; }
.whp-sec h2 { margin: 0 0 6px; font-size: 14px; color: #0F3D24; break-after: avoid; }
.whp-sec h2 small { font-weight: 400; color: #666; font-size: 11px; }
.whp .r-low td { background: #FCEEEF; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.whp .r-out td { background: #EEF1EF; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.whp .r-over td { background: #FFF4E0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.whp .r-off td { color: #888; }
.whp .st { font-weight: 700; }
.whp .st-ok { color: #1F7A3D; } .whp .st-low, .whp .t-low { color: #A51C22; font-weight: 700; } .whp .st-over { color: #9A5B00; }
.whp-empty { color: #777; margin: 4px 0; }

/* ==================================================================
   چاپ
   ================================================================== */
@media print {
    .wh-rep { display: none !important; }
    body.printing-wh > *:not(#whPrintArea) { display: none !important; }
    body.printing-wh #whPrintArea { display: block; }
    body.printing-wh { background: #fff; }
    .sidebar, .topbar, .site-footer, .rep-controls, .toast, .side-backdrop { display: none !important; }
    .layout, .main { display: block; }
    .content { padding: 0; max-width: none; }
    .content > * { animation: none !important; }
    .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    body { background: #fff; }
}

/* ==================================================================
   احترام به تنظیم «کاهش حرکت» سیستم
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}