.notif-bell-btn .cnt{position:absolute;top:-4px;right:-4px;background:var(--danger);color:#fff;border-radius:50%;min-width:17px;height:17px;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-shadow:0 0 0 2px var(--surface);}
.notif-dropdown{display:none;position:absolute;top:calc(100% + 10px);inset-inline-start:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);min-width:270px;box-shadow:var(--shadow-lg);z-index:30;padding:6px;}
.notif-dropdown.open{display:block;}
.notif-item{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--text);font-size:12.5px;}
.notif-item:hover{background:var(--surface-2);}
.notif-item .lb{flex:1;}
.notif-item .cnt{background:var(--danger-light);color:var(--danger);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:700;}

.settle-bar-row td{padding:0 8px 10px;}
.settle-bar{height:4px;border-radius:2px;background:var(--danger-light);overflow:hidden;}
.settle-bar-fill{height:100%;background:var(--success);border-radius:2px;}
.warn-pill{display:inline-block;font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:700;background:var(--danger-light);color:var(--danger);margin:2px 3px 2px 0;}
.pending-approval-row td{background:var(--warn-light);border-inline-start:3px solid var(--warn);}
.pending-approval-row td:first-child{border-start-start-radius:8px;border-end-start-radius:8px;}

.picker{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:6px;}
.picker summary{padding:11px 14px;cursor:pointer;font-size:13px;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:600;}
.picker summary::-webkit-details-marker{display:none;}
.picker summary::after{content:'▾';color:var(--text-secondary);}
.picker[open] summary{border-bottom:1px solid var(--border);}
.picker-body{padding:10px 12px;}
.picker-list{max-height:180px;overflow-y:auto;margin-top:6px;}
.picker-row{display:flex;align-items:center;gap:6px;padding:5px 2px;font-size:12.5px;}
.balance-pos{color:var(--danger);font-weight:700;}
.balance-neg{color:var(--success);font-weight:700;}
.hint{font-size:11.5px;color:var(--text-secondary);margin-top:4px;}

.barchart{display:flex;flex-direction:column;gap:11px;}
.bar-row{display:grid;grid-template-columns:90px 1fr 110px;align-items:center;gap:8px;font-size:12.5px;}
.bar-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{background:var(--surface-2);border-radius:6px;height:14px;overflow:hidden;}
.bar-fill{background:linear-gradient(90deg,var(--primary),var(--accent));height:100%;border-radius:6px;}
.bar-value{text-align:left;font-variant-numeric:tabular-nums;color:var(--text-secondary);}

.donut-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.donut{width:150px;height:150px;border-radius:50%;flex:none;position:relative;box-shadow:var(--shadow-sm);}
.donut::after{content:'';position:absolute;inset:26px;background:var(--surface);border-radius:50%;}
.legend{flex:1;min-width:180px;}
.legend-row{display:flex;align-items:center;gap:8px;font-size:12.5px;padding:4px 0;}
.legend-dot{width:10px;height:10px;border-radius:50%;flex:none;}
.legend-row .lv{margin-inline-start:auto;color:var(--text-secondary);}

/* Login / guest screen — سرمه‌ای تخت، دقیقاً همان رنگِ منوی کناری. این آخرین
   صفحه‌ای بود که هنوز روی گرادیانِ سبزِ طرحِ قدیم مانده بود. svh کنارِ vh هست
   چون در موبایل نوارِ آدرسِ مرورگر 100vh را بلندتر از صفحه می‌کند. */
.login-shell{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--am-nav,#151d2b);}
.login-card{position:relative;overflow:hidden;background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px 32px 30px;width:100%;max-width:380px;}
/* نوارِ نازکِ بالای کارت = همان نارنجیِ «CRM» در لوگو؛ تنها لکهٔ رنگِ برند
   روی یک زمینهٔ کاملاً خنثی */
.login-card::before{content:'';position:absolute;top:0;inset-inline:0;height:3px;background:var(--accent);}
.login-card .logo{justify-content:center;font-size:25px;margin-bottom:5px;}
.login-card h3.title{margin:0 0 24px;text-align:center;font-size:13px;font-weight:500;color:var(--text-secondary);line-height:1.7;}
.login-card .formrow{margin-bottom:14px;}
.login-card .formrow .fl{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600;color:var(--text-secondary);}
.login-card input[type=text],.login-card input[type=password]{width:100%;padding:11px 13px;font-family:inherit;font-size:14px;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);transition:border-color .15s,box-shadow .15s;}
.login-card input[type=text]:focus,.login-card input[type=password]:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light);}
.login-card .msg.error{margin:0 0 14px;font-size:12.5px;}
.login-card button[type=submit]{margin-top:8px;padding:12px;font-size:14.5px;font-weight:700;}

.jalali-dp{display:none;position:fixed;z-index:2000;width:268px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:10px;}
.jalali-dp.open{display:block;}
.jalali-dp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.jalali-dp-title{font-size:13px;font-weight:700;color:var(--primary);background:transparent;border:none;font-family:inherit;cursor:pointer;padding:2px 8px;border-radius:8px;}
.jalali-dp-title:hover{background:var(--primary-light);}
.jalali-dp-grid-3col{grid-template-columns:repeat(3,1fr);gap:6px;}
.jalali-dp-cell{text-align:center;font-size:12.5px;padding:12px 4px;border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;}
.jalali-dp-cell:hover{background:var(--primary-light);}
.jalali-dp-cell.today{font-weight:700;color:var(--accent);}
.jalali-dp-cell.selected{background:var(--primary);color:#fff;}
.jalali-dp-nav{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;width:26px;height:26px;font-size:14px;cursor:pointer;color:var(--text);line-height:1;}
.jalali-dp-nav:hover{background:var(--primary-light);}
.jalali-dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.jalali-dp-weekday{text-align:center;font-size:10.5px;color:var(--text-secondary);font-weight:700;padding:4px 0;}
.jalali-dp-day{text-align:center;font-size:12px;padding:6px 0;border-radius:8px;cursor:pointer;font-variant-numeric:tabular-nums;}
.jalali-dp-day:hover{background:var(--primary-light);}
.jalali-dp-day.empty{cursor:default;}
.jalali-dp-day.empty:hover{background:transparent;}
.jalali-dp-day.today{font-weight:700;color:var(--accent);}
.jalali-dp-day.selected{background:var(--primary);color:#fff;}
.jalali-dp-footer{display:flex;justify-content:space-between;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--border);}

.mobile-tabbar{display:none;}
.mobile-menu-backdrop{display:none;}
.mobile-menu-close{display:none;}

@media (max-width: 640px){
  body{padding:10px;}
  header{flex-wrap:wrap;gap:10px;}
  .logo{font-size:17px;}
  .navlinks{flex-wrap:wrap;gap:6px;}
  .navlinks a{padding:8px 10px;font-size:12px;}
  .note{font-size:11.5px;padding:8px 10px;}
  .card{padding:14px;}
  .grid3, .grid2, .grid4{grid-template-columns:1fr;}
  .row2, .row3{grid-template-columns:1fr;}
  .metric .value{font-size:20px;}
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  th, td{font-size:11.5px;padding:6px 5px;}

  /* rows become label:value cards (mobile_tables.js stamps data-label from
     the header row) — replaces the horizontal-scroll fallback above for
     any table it enhances. */
  table.card-table{display:block;white-space:normal;overflow-x:visible;}
  table.card-table thead, table.card-table tr:first-child{display:none;}
  table.card-table tbody{display:block;}
  table.card-table tr{
    display:block;border:1px solid var(--border);border-radius:var(--radius);
    margin-bottom:10px;padding:6px 12px;background:var(--surface);
  }
  table.card-table td{
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    border:none;border-bottom:1px solid var(--surface-2);padding:8px 0;
    text-align:start;white-space:normal;
  }
  table.card-table td:last-child{border-bottom:none;}
  table.card-table td::before{
    content:attr(data-label);font-weight:700;color:var(--text-secondary);
    font-size:11px;flex:none;
  }
  table.card-table .settle-bar-row td{display:block;}
  table.card-table .settle-bar-row td::before{content:none;}
  /* label-less cells (e.g. a lone action button/link, header th was empty)
     have nothing for justify-content:space-between to push against —
     without this, the link ends up stuck to one edge with a big empty
     gap beside it instead of filling the row. */
  table.card-table td:not([data-label])::before{content:none;}
  table.card-table td:not([data-label]) > a{flex:1;text-align:center;}
  .dash-tile{padding:14px 6px;}
  .dash-tile .ic{font-size:24px;}
  .dash-tile .lb{font-size:11.5px;}
  .btn, .btn-primary, .btn-sm, .btn-xs{font-size:12.5px;}
  .btn, .btn-primary{min-height:44px;}
  .app-shell{flex-direction:column;}

  /* sidebar becomes a full-screen off-canvas menu, opened via the
     bottom tab bar's "بیشتر" button — replaces the old horizontal
     scrolling nav row, which made links hard to find on a phone. */
  .sidebar{
    display:none;position:fixed;inset:0;z-index:300;width:100%;height:100%;
    flex-direction:column;overflow-y:auto;box-shadow:none;
    padding-top:calc(20px + env(safe-area-inset-top,0px));
  }
  .sidebar.mobile-open{display:flex;}
  .sidebar-links{flex-direction:column;flex:1;}
  .sidebar-links a{border-inline-start:none;font-size:15px;padding:14px 12px;}

  /* the hover-triggered submenu (نمایندگان ▾) only makes sense on desktop —
     touchscreens have no hover, and the JS-computed popup position (based
     on a narrow desktop sidebar) lands off-screen once the sidebar goes
     full-width here. Simplest fix: skip the popup entirely and always show
     the sub-links inline, right under the parent link — there's plenty of
     room in a full-screen mobile menu anyway. */
  .has-submenu > .submenu{
    display:flex !important;position:static !important;
    box-shadow:none;border:none;background:none;padding:0 0 0 22px;min-width:0;
  }
  .has-submenu > .submenu a{font-size:13.5px;padding:10px 12px;color:rgba(255,255,255,.75);}
  .sidebar-user{border-top:1px solid rgba(255,255,255,.14);border-inline-start:none;padding-top:12px;flex-direction:column;}
  .mobile-menu-close{display:block;}

  .main-content{padding:14px;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));}
  .login-card{padding:26px 22px;}

  .mobile-tabbar{
    display:flex;position:fixed;bottom:0;inset-inline:0;z-index:250;
    background:var(--surface);border-top:1px solid var(--border);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -2px 10px rgba(20,30,20,.08);
  }
  .mobile-tabbar a, .mobile-tabbar button{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    min-height:48px;justify-content:center;
    font-size:10.5px;color:var(--text-secondary);text-decoration:none;
    background:none;border:none;font-family:inherit;padding:4px 2px;
  }
  .mobile-tabbar .ic{font-size:19px;line-height:1;}
  .mobile-tabbar a.active{color:var(--primary);font-weight:700;}

  .mobile-menu-backdrop{
    display:none;position:fixed;inset:0;background:rgba(15,20,15,.45);z-index:290;
  }
  .mobile-menu-backdrop.open{display:block;}
}

/* تبِ فعالِ گزارش‌ها/فیلترها سرمه‌ای می‌شود تا با منوی کناری هم‌خانواده باشد
   (قبلاً سبزِ برند بود و با دکمه‌های اصلیِ سبز قاطی می‌شد). این‌جا نوشته شده
   و نه در theme.css، چون آن فایل به سقفِ ~۱۶ کیلوبایتیِ پاسخِ هاست نزدیک است. */
.navlinks a.active, .navlinks label.active{
  background:var(--am-nav,#151d2b);
  border-color:var(--am-nav,#151d2b);
  color:#fff;
}
/* فهرست «اقدام اخیر» تا حالا هیچ استایلی نداشت و سه‌تا اطلاعات را پشت‌سرهم
   با خط تیره می‌چسباند. حالا سطرِ فرادادهٔ کم‌رنگ بالا، موضوعِ اقدام پایین. */
.logentry{padding:9px 0;border-bottom:1px solid var(--border);}
.logentry:last-child{border-bottom:0;}
.logentry .d{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:11.5px;color:var(--text-secondary);}
.logentry .d .pill{margin:0;}
.logentry .d .what{font-weight:700;color:var(--text);}
/* زمان به انتهای سطر رانده می‌شود تا ستونِ چشمیِ خودش را بسازد */
.logentry .d .when{margin-inline-start:auto;font-variant-numeric:tabular-nums;}
.logentry .subj{margin-top:3px;font-size:12.5px;line-height:1.6;}
/* --- سلسله‌مراتبِ اقدام‌ها --------------------------------------------
   دکمهٔ مخرب پررنگ‌ترین عنصرِ هر ردیف بود: قرمزِ توپُر، در کنارِ «تایید»ِ
   خطیِ کم‌رنگ. وزن برعکس شد — مخرب خطی با متنِ قرمز می‌ماند و فقط روی
   هاور توپُر می‌شود (پس هنوز پیدا می‌شود، ولی چشم را نمی‌دزدد). */
.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--border-strong);}
.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger);}
/* و در عوض، کارِ اصلیِ همان ردیف توپُر می‌شود */
.btn-ok{background:var(--primary);color:#fff;border-color:var(--primary);}
.btn-ok:hover{background:var(--primary-dark);color:#fff;border-color:var(--primary-dark);}

/* کلاسِ .active روی دکمه‌های بازهٔ گزارش از قبل در تمپلیت‌ها بود ولی هیچ
   قاعده‌ای نداشت — یعنی هیچ‌وقت معلوم نبود کدام بازه اعمال شده. */
.btn.active,.btn.active:hover{background:var(--am-nav,#151d2b);border-color:var(--am-nav,#151d2b);color:#fff;}

/* سرستونِ چسبان. هیچ جدولی در این پروژه <thead> ندارد — سرستون‌ها مستقیم
   <tr><th> هستند — پس سلکتور باید ردیفِ اول را هدف بگیرد. شرطِ :not(:has(td))
   جدول‌های کلید/مقدار را کنار می‌گذارد (آنجا <th> برچسبِ ردیف است، نه سرستون،
   و چسباندنش غلط می‌شود). مرورگرِ بدونِ :has() کلِ قاعده را نادیده می‌گیرد —
   یعنی چسبان نمی‌شود ولی چیزی هم نمی‌شکند.
   با border-collapse:collapse مرزِ پایینِ th هنگام اسکرول ناپدید می‌شود،
   پس خطش را با box-shadow می‌کشیم نه border. */
table tr:first-child:not(:has(td)) th{position:sticky;top:0;z-index:2;box-shadow:inset 0 -2px 0 var(--border);}
@media print{table tr:first-child th{position:static;box-shadow:none;}}
/* ─── کادرِ جست‌وجوی کشویی‌های بلند (static/js/searchable_select.js) ───
   خودِ اسکریپت این دو کلاس را می‌سازد؛ اگر جاوااسکریپت اجرا نشود هیچ‌کدام
   رندر نمی‌شوند و کشویی مثل قبل کار می‌کند. */
.searchable-box{width:100%;margin-bottom:6px;}
.searchable-hint{margin:4px 0 0;font-size:12px;}

/* ─── جدولِ کلید/مقدارِ صفحه‌های فقط‌خواندنی ───
   main.css به همهٔ جدول‌ها width:100% می‌دهد؛ این‌جا لازم نیست و ستونِ
   برچسب را بی‌دلیل پهن می‌کند. `table.kv` ویژگی‌مندیِ بالاتری دارد و
   بر آن غالب می‌شود. */
table.kv{width:auto;border-collapse:collapse;}
table.kv td{padding:5px 0;vertical-align:top;border:0;}
table.kv td.k{color:var(--text-secondary);white-space:nowrap;padding-left:20px;}