/* سامانه سایا — سیستم طراحی (رنگ‌ها از لوگو و سربرگ شرکت) */
@font-face { font-family: Vazirmatn; font-weight: 400; font-display: swap; src: url(../vendor/fonts/Vazirmatn-Regular.woff2) format('woff2'); }
@font-face { font-family: Vazirmatn; font-weight: 500; font-display: swap; src: url(../vendor/fonts/Vazirmatn-Medium.woff2) format('woff2'); }
@font-face { font-family: Vazirmatn; font-weight: 700; font-display: swap; src: url(../vendor/fonts/Vazirmatn-Bold.woff2) format('woff2'); }

:root {
  --brand: #DC1F3D;
  --brand-hover: #C21633;
  --brand-soft: #FCE8EB;
  --coral: #FC7154;
  --maroon: #7D1317;
  --charcoal: #3F3D3E;
  --charcoal-2: #4A4748;

  --bg: #F6F4F4;
  --surface: #FFFFFF;
  --surface-2: #FAF8F8;
  --border: #E9E4E5;
  --border-strong: #D8D1D2;
  --text: #2B2A2B;
  --text-2: #6E6667;
  --text-3: #9A9293;

  --success: #2E7D4F; --success-bg: #E6F4EC;
  --warning: #8A5A00; --warning-bg: #FFF3D9;
  --danger: #B3122B;  --danger-bg: #FCE6E9;
  --info: #285E9C;    --info-bg: #E7F0FA;

  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(63, 61, 62, .06), 0 4px 16px rgba(63, 61, 62, .05);
  --sidebar: 248px;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body { margin: 0; font-family: Vazirmatn, Tahoma, sans-serif; background: var(--bg); color: var(--text);
       line-height: 1.75; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }
h1, h2, h3 { font-weight: 700; margin: 0; line-height: 1.4; }
h1 { font-size: 1.45rem; } h2 { font-size: 1.1rem; } h3 { font-size: 1rem; }
.muted { color: var(--text-2); } .faint { color: var(--text-3); } .small { font-size: .85rem; }
.ltr { direction: ltr; unicode-bidi: embed; }
.num { font-feature-settings: "tnum"; }
[x-cloak], .hidden { display: none !important; }

/* ---------- چیدمان ---------- */
.app { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { background: var(--charcoal); color: #D9D4D5; padding: 18px 14px; position: sticky; top: 0; height: 100vh;
           display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; }
.brand img { width: 40px; height: 40px; border-radius: 10px; background: #fff; padding: 3px; object-fit: contain; }
.brand b { display: block; font-size: 1rem; }
.brand span { font-size: .75rem; color: #B9B2B3; }
.nav-title { font-size: .72rem; color: #9C9495; padding: 14px 10px 4px; }
.nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); color: #DDD8D9;
            transition: background .15s, color .15s; }
.nav-link i { font-size: 1.2rem; opacity: .9; }
.nav-link:hover { background: var(--charcoal-2); color: #fff; }
.nav-link.active { background: var(--brand); color: #fff; }
.nav-link .count { margin-inline-start: auto; background: var(--coral); color: #fff; font-size: .72rem; border-radius: 999px;
                   padding: 0 7px; min-width: 22px; text-align: center; }
.nav-link .ext { margin-inline-start: auto; font-size: .9rem; opacity: .5; }
.sidebar .me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid #555152; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 500; flex: none; }
.me .who { font-size: .85rem; color: #fff; line-height: 1.4; }
.me .who small { display: block; color: #B9B2B3; font-size: .72rem; }
.me form { margin-inline-start: auto; }
.icon-btn { background: none; border: 0; color: inherit; cursor: pointer; padding: 6px; border-radius: 8px; font-size: 1.15rem; line-height: 1; }
.icon-btn:hover { background: rgba(255,255,255,.08); }

.main { padding: 22px 28px 40px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.topbar .sub { color: var(--text-2); font-size: .85rem; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mobile-bar { display: none; }

/* ---------- کارت ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-head h2 i { color: var(--brand); }
.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.grid-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stack > * + * { margin-top: 16px; }

.kpi { position: relative; overflow: hidden; }
.kpi .label { color: var(--text-2); font-size: .85rem; display: flex; align-items: center; gap: 6px; }
.kpi .value { font-size: 1.75rem; font-weight: 700; margin: 4px 0 0; }
.kpi .value small { font-size: .8rem; font-weight: 400; color: var(--text-2); }
.kpi .hint { font-size: .8rem; color: var(--text-3); }
.kpi .ico { position: absolute; left: 16px; top: 16px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
            background: var(--brand-soft); color: var(--brand); font-size: 1.3rem; }
.kpi.alert { border-color: #F7C3B6; }
.kpi.alert .ico { background: #FFE9E2; color: #C24127; }
.kpi.alert .value { color: #C24127; }

/* ---------- دکمه ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 500; font-size: .92rem;
       border-radius: var(--radius); padding: 8px 16px; border: 1px solid var(--border-strong); background: var(--surface);
       color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn-ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn-danger { color: var(--danger); border-color: #F2C2CA; }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger); }
.btn-sm { padding: 4px 12px; font-size: .85rem; }
.btn i { font-size: 1.1rem; }

/* ---------- برچسب و پیشرفت ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; padding: 2px 10px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg); color: var(--danger); }
.badge-info    { background: var(--info-bg); color: var(--info); }
.badge-muted   { background: #EFEBEC; color: var(--text-2); }
.badge-brand   { background: var(--brand-soft); color: var(--maroon); }
.code { font-weight: 700; letter-spacing: .5px; color: var(--charcoal); font-feature-settings: "tnum"; }
.progress { height: 7px; background: #F1E6E8; border-radius: 99px; overflow: hidden; min-width: 70px; }
.progress > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.progress.over > span { background: var(--maroon); }
.progress.paid { background: #E3F1E8; }
.progress.paid > span { background: var(--success); }
.progress.paid.over > span { background: #1F5E3A; }
.progress + .progress-label + .progress { margin-top: 6px; }
.progress-label { font-size: .75rem; color: var(--text-2); }

/* ---------- جدول ---------- */
.table-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
table.table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table th { text-align: right; font-weight: 500; color: var(--text-2); font-size: .8rem; padding: 10px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 11px 8px; border-bottom: 1px solid #F1EDEE; vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .1s; }
.table tbody tr.link:hover { background: var(--surface-2); cursor: pointer; }
.table .end { text-align: left; }

/* ---------- فهرست ---------- */
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F1EDEE; }
.list-item:last-child { border-bottom: 0; }
.list-item .body { flex: 1; min-width: 0; }
.list-item .title { font-weight: 500; }
.empty { text-align: center; padding: 28px 10px; color: var(--text-2); }
.empty i { font-size: 2.2rem; color: #CFC6C7; display: block; margin-bottom: 6px; }

/* ---------- فیلتر ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.search { position: relative; flex: 1; min-width: 220px; max-width: 380px; }
.search i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.search input[type=search] { padding-right: 36px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { padding: 5px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .85rem; }
.chip:hover { border-color: var(--border-strong); color: var(--text); }
.chip.on { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }

/* ---------- فرم ---------- */
input[type=text], input[type=password], input[type=number], input[type=search], input:not([type]), select, textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 8px 12px; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220, 31, 61, .12); }
.field { margin-bottom: 14px; }
.field > label { display: block; font-size: .85rem; font-weight: 500; margin-bottom: 5px; }
.field .help { font-size: .78rem; color: var(--text-3); margin-top: 3px; }
.field .error, .errorlist { color: var(--danger); font-size: .8rem; margin: 4px 0 0; padding: 0; list-style: none; }
.field.has-error input, .field.has-error select { border-color: var(--danger); }
.req::after { content: ' *'; color: var(--brand); }
.form-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 6px; }
.form-section > h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--charcoal); }
.form-section > h3 i { color: var(--brand); }
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
.choice-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice-cards label { position: relative; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--border-strong); border-radius: var(--radius);
                      padding: 12px 14px; cursor: pointer; font-weight: 500; transition: border-color .15s, background .15s; margin: 0; }
.choice-cards label:hover { border-color: var(--text-3); }
.choice-cards input { accent-color: var(--brand); width: 18px; height: 18px; margin: 0; }
.choice-cards label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--maroon); }
.code-preview { display: flex; align-items: center; gap: 12px; background: var(--charcoal); color: #fff; border-radius: var(--radius); padding: 12px 16px; min-height: 58px; }
.code-preview .code { color: #fff; font-size: 1.35rem; }
.code-preview .faint { color: #B9B2B3; }
.form-footer { position: sticky; bottom: 0; background: linear-gradient(transparent, var(--bg) 30%); padding: 18px 0 4px; display: flex; gap: 10px; }
.check { display: flex; align-items: center; gap: 8px; } .check input { accent-color: var(--brand); width: 18px; height: 18px; }

/* ---------- مراحل امضا ---------- */
.steps { display: flex; gap: 0; }
.step { flex: 1; text-align: center; position: relative; padding-top: 4px; }
/* خط اتصال هر مرحله به مرحله قبلی (که در راست‌به‌چپ سمت راست است) */
.step::before { content: ''; position: absolute; top: 20px; left: 50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--brand); }
.step .dot { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center;
             background: var(--surface); border: 2px solid var(--border-strong); color: var(--text-3); font-size: 1rem; }
.step.done .dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.current .dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 5px var(--brand-soft); }
.step .name { font-weight: 500; font-size: .88rem; }
.step .meta { font-size: .75rem; color: var(--text-2); }

/* ---------- جزئیات ---------- */
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.dl div { min-width: 0; }
.dl dt { font-size: .78rem; color: var(--text-2); }
.dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.metric { padding: 12px 14px; background: var(--surface-2); border-radius: var(--radius); }
.metric .k { font-size: .78rem; color: var(--text-2); }
.metric .v { font-size: 1.15rem; font-weight: 700; }
.metric.pos .v { color: var(--success); } .metric.neg .v { color: var(--danger); }
.callout { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); font-size: .9rem; }
.callout i { font-size: 1.25rem; margin-top: 1px; }
.callout-warning { background: var(--warning-bg); color: var(--warning); }
.callout-danger { background: var(--danger-bg); color: var(--danger); }
.callout-info { background: var(--info-bg); color: var(--info); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; overflow-x: auto; }
.tab { padding: 8px 14px; border: 0; background: none; font: inherit; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }
details.reject summary { list-style: none; cursor: pointer; }
details.reject summary::-webkit-details-marker { display: none; }
details.reject[open] { flex-basis: 100%; }

/* ---------- باسکول و آزمایشگاه ---------- */
input.big { font-size: 1.3rem; font-weight: 700; padding: 10px 14px; letter-spacing: .5px; }
.weigh-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; background: var(--surface-2); }
.weigh-info { display: flex; align-items: center; gap: 12px; }
.weigh-info > div:nth-child(2) { flex: 1; min-width: 0; }
.weigh-info .title { font-weight: 500; }
.plate { border: 2px solid var(--charcoal); border-radius: 8px; padding: 4px 10px; font-weight: 700; background: #fff; white-space: nowrap; min-width: 110px; text-align: center; }
/* ورود پلاک در چهار خانه، شبیه پلاک واقعی */
.plate-input { display: flex; align-items: stretch; border: 2px solid var(--charcoal); border-radius: 8px; background: #fff; overflow: hidden; max-width: 340px; }
.plate-input input, .plate-input select { border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 1.15rem; padding: 8px 2px; min-width: 0; background: transparent; }
.plate-input input:focus, .plate-input select:focus { box-shadow: inset 0 -3px 0 var(--brand); }
.plate-input > input:nth-of-type(1) { flex: 2; }
.plate-input > select { flex: 2.4; cursor: pointer; }
.plate-input > input:nth-of-type(2) { flex: 3; }
.plate-flag { flex: 0 0 30px; background: #1F4FA3; color: #fff; font-size: .5rem; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 4px 2px; }
.plate-flag i { width: 16px; height: 10px; margin-bottom: auto; background: linear-gradient(#239F40 33%, #fff 33% 66%, #DA0000 66%); }
.plate-iran { flex: 2; display: flex; flex-direction: column; border-left: 2px solid var(--charcoal); }
.plate-iran small { font-size: .62rem; text-align: center; color: var(--text-3); padding-top: 2px; }
.plate-iran input { padding-top: 0; }
.field.has-error .plate-input { border-color: var(--danger); }
.sheba-input { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.sheba-input:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(220, 31, 61, .12); }
.sheba-input b { padding: 0 10px; color: var(--text-2); border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; background: var(--surface-2); }
.sheba-input input { border: 0 !important; box-shadow: none !important; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.sheba-input .count { padding: 0 10px; font-size: .78rem; color: var(--text-3); white-space: nowrap; }
.sheba-input .count.ok { color: var(--success); font-weight: 700; }
.site-info { margin-top: 8px; border: 1.5px solid var(--brand); background: var(--brand-soft); border-radius: var(--radius); padding: 10px 12px; }
.site-main { display: flex; align-items: center; gap: 10px; color: var(--maroon); }
.site-main > i { font-size: 1.6rem; color: var(--brand); }
.site-main b { font-size: 1.1rem; }
.site-meta { margin-top: 6px; color: var(--text-2); }
.weigh-exit { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.weigh-exit input { flex: 1; min-width: 150px; }
.weigh-row.batch.overdue { background: #FFF6F3; border-color: #F7C3B6; }
.batch-code { border: 2px solid var(--brand); color: var(--maroon); border-radius: 8px; padding: 4px 10px; font-weight: 700; background: #fff; white-space: nowrap; }
.weigh-row .chip { padding: 1px 10px; }
.scan { display: flex; gap: 8px; }
.scan input { font-size: 1.1rem; }
.lab-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 860px) { .lab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .weigh-info { flex-wrap: wrap; } }

/* ---------- پیام‌ها ---------- */
.toasts { position: fixed; bottom: 18px; left: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: 380px; }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
         padding: 12px 14px; box-shadow: 0 8px 28px rgba(0,0,0,.12); animation: slide .25s ease-out; font-size: .9rem; }
.toast i { font-size: 1.25rem; }
.toast.success i { color: var(--success); } .toast.error i { color: var(--danger); } .toast.warning i { color: #C27C00; } .toast.info i { color: var(--info); }
@keyframes slide { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- ورود ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.login .art { background: var(--charcoal); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 48px; color: #fff; }
.login .art::before { content: ''; position: absolute; inset: -20% -10% auto auto; width: 120%; height: 70%; background: var(--brand); transform: rotate(-8deg); border-radius: 0 0 50% 50%; opacity: .95; }
.login .art::after { content: ''; position: absolute; inset: -25% -15% auto auto; width: 120%; height: 62%; background: #2F2D2E; transform: rotate(-8deg); border-radius: 0 0 50% 50%; }
.login .art > * { position: relative; z-index: 1; }
.login .art h1 { font-size: 2rem; } .login .art p { color: #D9D4D5; max-width: 420px; }
.login .panel { display: grid; place-items: center; padding: 32px; }
.login .box { width: 100%; max-width: 380px; }
.login .box img { width: 72px; margin-bottom: 10px; }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-main { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; inset: 0 0 0 auto; width: 270px; z-index: 40; transform: translateX(100%); transition: transform .2s; }
  body.nav-open .sidebar { transform: none; box-shadow: -10px 0 40px rgba(0,0,0,.25); }
  .mobile-bar { display: flex; align-items: center; justify-content: space-between; background: var(--charcoal); color: #fff; padding: 10px 16px; position: sticky; top: 0; z-index: 30; }
  .mobile-bar img { height: 30px; border-radius: 6px; background: #fff; padding: 2px; }
  .main { padding: 16px; }
  .grid-2, .grid-3, .cols-2, .cols-3, .cols-4, .dl { grid-template-columns: minmax(0, 1fr); }
  .login { grid-template-columns: minmax(0, 1fr); } .login .art { display: none; }
  .hide-sm { display: none; }
}
@media (max-width: 520px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
@media print { .sidebar, .mobile-bar, .topbar .actions, .toasts { display: none !important; } .app { display: block; } }