/* ============================================================
CRM Amintech — UI tokens & components
منوی سرمه‌ای · آیکون‌های رنگی نرم · زنگ اعلان با ضربان
همه‌چیز با پیشوند .am- تا با CSS فعلی سایت تداخل نکند.
============================================================ */
:root{
/* --- surfaces --- */
--am-paper:#f7f4ec; /* پس‌زمینهٔ صفحه */
--am-card:#ffffff; /* کارت */
--am-card-2:#fdfcf8; /* کارت فرعی/داخلی */
--am-line:#e6e2d6; /* خط جداکننده */
--am-line-2:#f1ede2;
/* --- text --- */
--am-ink:#1c2620;
--am-ink-2:#3d5849;
--am-muted:#6b7a72;
--am-faint:#9aa79f;
/* --- brand --- */
--am-orange:#e8873b; /* نارنجی لوگو */
--am-green:#1f7a4d; /* سبز برند (دکمه‌ها، لینک‌ها، نمودارها) */
/* --- sidebar (navy) --- */
--am-nav:#151d2b;
--am-nav-text:#c2cddd;
--am-nav-text-on:#ffffff;
--am-nav-active-bg:rgba(255,255,255,.09);
--am-nav-accent:#6fb0ff; /* نوار کنار ردیف فعال */
/* --- status (رزرو؛ هرگز به‌عنوان رنگ یک سری در نمودار استفاده نشود) --- */
--am-good:#3f8f5f;
--am-warn:#b8781d;
--am-crit:#b23b2e;
--am-badge:#c0392b;
/* --- chart categorical (قرینهٔ PALETTE در dashboard_tags.py) --- */
--am-c1:#39a85b; --am-c2:#f0932b; --am-c3:#2d9cdb; --am-c4:#e0518f; --am-c5:#8b5cf6;
/* --- chart sequential (یک رنگ، روشن→تیره) --- */
--am-s1:#dfece5; --am-s2:#a9cdb9; --am-s3:#6ea98a; --am-s4:#3d8b68; --am-s5:#1f7a4d; --am-s6:#14563a;
--am-track:#ece7db;
--am-r-sm:10px; --am-r:16px; --am-r-lg:18px;
}
/* ============================================================
1) آیکون — پایه
استفاده:
============================================================ */
.am-ic{width:24px;height:24px;flex:none;color:currentColor}
.am-ic-sm{width:19px;height:19px}
.am-ic-lg{width:26px;height:26px}
/* کاشی رنگی نرم دور آیکون (کارت‌های کارتابل و ردیف‌های اعلان) */
.am-tile-ic{
width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none;
color:var(--am-hue);
background:color-mix(in srgb,var(--am-hue) 13%,#fff);
border:1px solid color-mix(in srgb,var(--am-hue) 22%,#fff);
}
.am-tile-ic.am-sm{width:36px;height:36px;border-radius:11px}
/* رنگ هر بخش — روی عنصر ست شود: style="--am-hue:#39a85b" یا کلاس زیر */
.am-h-dashboard {--am-hue:#39a85b}
.am-h-customers {--am-hue:#e0518f}
.am-h-invoices {--am-hue:#2d9cdb}
.am-h-transactions{--am-hue:#8b5cf6}
.am-h-warehouse {--am-hue:#c2853a}
.am-h-reps {--am-hue:#12a37a}
.am-h-reports {--am-hue:#f0932b}
.am-h-products {--am-hue:#d9534f}
.am-h-pricing {--am-hue:#e0518f}
.am-h-messages {--am-hue:#2d9cdb}
.am-h-training {--am-hue:#12a37a}
.am-h-members {--am-hue:#8b5cf6}
.am-h-settings {--am-hue:#7b8794}
.am-h-alert {--am-hue:#d9534f}
.am-h-payment {--am-hue:#12a37a}
.am-h-cancel {--am-hue:#7b8794}
.am-h-approved {--am-hue:#39a85b}
.am-h-cheque {--am-hue:#8b5cf6}
/* ============================================================
2) منوی کناری — سرمه‌ای
============================================================ */
.am-sidebar{background:var(--am-nav);border-radius:var(--am-r-lg);padding:14px 10px;width:212px}
.am-sidebar__brand{color:#fff;text-align:center;font-weight:800;font-size:14px;padding:6px 0 12px}
.am-sidebar__brand b{color:var(--am-orange)}
.am-nav-item{
position:relative;display:flex;align-items:center;gap:10px;
color:var(--am-nav-text);padding:8px 10px;border-radius:var(--am-r-sm);
font-size:13px;text-decoration:none;transition:background .15s,color .15s;
}
.am-nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.am-nav-item.is-active{background:var(--am-nav-active-bg);color:var(--am-nav-text-on);font-weight:700}
/* نوار باریک کنار لبهٔ پنل (سمت راست در RTL) */
.am-nav-item.is-active::after{
content:"";position:absolute;inset-inline-start:-10px;top:6px;bottom:6px;
width:3px;border-radius:3px;background:var(--am-nav-accent);
}
/* آیکون منو: نسخهٔ روشن‌شدهٔ رنگ همان بخش (۶۰٪ رنگ + ۴۰٪ سفید) */
.am-nav-item .am-ic{color:color-mix(in srgb,var(--am-hue) 60%,#fff)}
@supports not (color:color-mix(in srgb,red 50%,#fff)){
.am-h-dashboard .am-ic,.am-h-approved .am-ic{color:#88cb9d}
.am-h-customers .am-ic,.am-h-pricing .am-ic{color:#ec97bc}
.am-h-invoices .am-ic,.am-h-messages .am-ic{color:#81c4e9}
.am-h-transactions .am-ic,.am-h-members .am-ic,.am-h-cheque .am-ic{color:#b99dfa}
.am-h-warehouse .am-ic{color:#dab689}
.am-h-reps .am-ic,.am-h-training .am-ic,.am-h-payment .am-ic{color:#71c8af}
.am-h-reports .am-ic{color:#f6be80}
.am-h-products .am-ic,.am-h-alert .am-ic{color:#e89895}
.am-h-settings .am-ic,.am-h-cancel .am-ic{color:#b0b7bf}
}
/* ============================================================
3) زنگ اعلان + بَج + ضربان
============================================================ */
.am-bell{
position:relative;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
background:#fff;border:1px solid var(--am-line);box-shadow:0 3px 12px rgba(20,67,47,.13);
cursor:pointer;transition:transform .18s;
}
.am-bell:hover{transform:translateY(-2px)}
.am-bell .am-ic{width:25px;height:25px;color:#e08a2e} /* زنگ نارنجی */
.am-bell__ring{transform-origin:50% 18%;display:grid;place-items:center}
.am-bell:hover .am-bell__ring{animation:am-ring .7s ease}
@keyframes am-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(11deg)}30%{transform:rotate(-9deg)}
45%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}80%{transform:rotate(2deg)}}
/* داخل نوار بالای تیره (اگر زنگ در هدر سرمه‌ای بنشیند) */
.am-bell--bar{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.2);box-shadow:none}
.am-bell--bar .am-ic{width:20px;height:20px;color:#fff}
.am-badge{
position:absolute;top:-3px;inset-inline-start:-3px;
background:var(--am-badge);color:#fff;border:2px solid var(--am-paper);
border-radius:999px;min-width:22px;height:22px;padding:0 5px;
font-size:11.5px;font-weight:700;display:grid;place-items:center;line-height:1;
}
.am-badge--dot{min-width:12px;height:12px;padding:0;top:2px;inset-inline-start:2px}
/* حلقهٔ ضربان — فقط وقتی کار «نیاز به رسیدگی» وجود دارد؛ با باز شدن پنل کلاس برداشته شود */
.am-bell.is-urgent::after{
content:"";position:absolute;top:-3px;inset-inline-start:-3px;width:22px;height:22px;
border-radius:999px;background:var(--am-badge);opacity:.45;
animation:am-pulse 1.9s ease-out infinite;pointer-events:none;
}
@keyframes am-pulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(2);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
.am-bell.is-urgent::after,.am-bell:hover .am-bell__ring{animation:none}
}
/* ============================================================
4) پنل اعلان‌ها
============================================================ */
.am-pop{background:#fff;border:1px solid var(--am-line);border-radius:var(--am-r-lg);
box-shadow:0 14px 34px rgba(20,67,47,.13);overflow:hidden;width:392px;max-width:92vw}
.am-pop__hd{display:flex;align-items:center;justify-content:space-between;
padding:13px 16px;border-bottom:1px solid var(--am-line);background:var(--am-card-2)}
.am-pop__hd .am-title{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.am-pop__hd .am-total{background:#f3e1de;color:#a33627;border-radius:999px;padding:1px 8px;font-size:11.5px;font-weight:700}
.am-pop__group{font-size:11px;color:var(--am-muted);padding:9px 16px 4px;background:#fbf9f3}
.am-pop__row{display:flex;align-items:center;gap:11px;padding:11px 14px;
border-bottom:1px solid var(--am-line-2);cursor:pointer;text-decoration:none;color:inherit}
.am-pop__row:hover{background:#fbf9f3}
.am-pop__row:last-child{border-bottom:0}
.am-pop__row .am-tx{flex:1;font-size:12.8px;font-weight:500;line-height:1.65}
.am-pop__row .am-chev{color:#c3ccc7}
.am-pop__ft{padding:11px 16px;text-align:center;background:#fbf9f3;border-top:1px solid var(--am-line)}
/* شمارندهٔ هر ردیف — رنگ بر اساس فوریت، نه همه‌جا قرمز */
.am-count{border-radius:999px;min-width:24px;height:24px;padding:0 7px;font-size:12px;font-weight:700;
display:grid;place-items:center;flex:none}
.am-count--hi{background:#f6e0dd;color:#a83626} /* معوق */
.am-count--md{background:#fbeedd;color:#a4682a} /* منتظر اقدام */
.am-count--lo{background:#e6f0e9;color:#2b6a4e} /* در جریان */
/* ============================================================
5) کارت‌های کارتابل
============================================================ */
.am-kartabl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.am-kcard{position:relative;background:var(--am-card-2);border:1px solid var(--am-line);
border-radius:var(--am-r);padding:16px 12px 14px;text-align:center;
display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:inherit;
transition:transform .15s,box-shadow .15s}
.am-kcard:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,67,47,.08)}
.am-kcard__cap{font-size:12.5px;font-weight:500;line-height:1.6;color:#33413a}
.am-kcard .am-badge{border-color:var(--am-card-2);top:8px;inset-inline-start:8px;min-width:19px;height:19px;font-size:11px}
/* ============================================================
6) نمودارها
============================================================ */
.am-bar-row{display:grid;grid-template-columns:152px 1fr auto;align-items:center;gap:11px;margin-bottom:11px}
.am-bar-row .am-lbl{font-size:12.5px;color:var(--am-ink-2)}
.am-bar-track{position:relative;height:15px;background:var(--am-track);border-radius:5px;overflow:hidden}
.am-bar-fill{display:block;height:100%;border-radius:5px;background:var(--am-c1)}
.am-bar-track.is-empty{background:repeating-linear-gradient(135deg,#f2eee4 0 5px,#ece7db 5px 10px);opacity:.7}
.am-bar-val{font-size:12px;font-weight:600;color:var(--am-ink-2);font-variant-numeric:tabular-nums}
.am-bar-val.is-zero{color:var(--am-faint);font-weight:400}
.am-axis{margin-top:14px;padding-top:9px;border-top:1px solid var(--am-line-2);
display:grid;grid-template-columns:152px 1fr auto;gap:11px}
.am-axis .am-ticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--am-faint);
font-variant-numeric:tabular-nums}
/* دونات: هر بخش یک با stroke-dasharray روی گروهِ rotate(-90) */
.am-donut{position:relative;width:150px;height:150px;flex:none}
.am-donut svg{width:150px;height:150px;display:block}
.am-donut__seg{transition:opacity .15s}
.am-donut-wrap:hover .am-donut__seg{opacity:.55}
.am-donut-wrap .am-donut__seg:hover{opacity:1}
.am-donut__center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none}
.am-donut__center .am-big{font-size:21px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.am-donut__center .am-sm{font-size:10.5px;color:var(--am-faint);margin-top:2px}
.am-donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.am-legend{flex:1;min-width:150px;display:flex;flex-direction:column;gap:9px}
.am-legend__item{display:flex;align-items:center;gap:8px;font-size:12.3px;color:var(--am-ink-2);line-height:1.5}
.am-legend__dot{width:10px;height:10px;border-radius:3px;flex:none}
.am-legend__pc{margin-inline-start:auto;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.am-legend__amt{color:var(--am-faint);font-size:11px}
/* KPI */
.am-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px}
.am-stat{background:var(--am-card-2);border:1px solid var(--am-line);border-radius:var(--am-r);padding:14px 16px}
.am-stat .am-k{font-size:11.5px;color:var(--am-muted)}
.am-stat .am-v{font-size:23px;font-weight:800;margin:2px 0 1px;font-variant-numeric:tabular-nums}
.am-stat .am-u{font-size:11.5px;color:var(--am-faint);font-weight:400}
.am-stat .am-note{font-size:11px;color:var(--am-faint);margin-top:3px}
/* برچسب کوچک (مثلاً «تا امروز») */
.am-flag{display:inline-block;background:#fbeedd;color:#a4682a;border-radius:6px;
padding:0 7px;font-size:11px;font-weight:600}
@media (max-width:560px){
.am-bar-row,.am-axis{grid-template-columns:104px 1fr auto}
}
/* ============================================================
7) پل به مارک‌آپ فعلی سایت
کلاس‌های قدیمی (.sidebar-links a و ...) ویژگی بالاتری از .am-* دارند،
پس این چند قاعده مشخصاً همان‌ها را هدف می‌گیرد تا آیکون/رنگ جدید
واقعاً اعمال شود — بدون دست‌زدن به فایل‌های CSS قبلی.
============================================================ */
.sidebar.am-sidebar{border-radius:0;width:236px;padding:20px 14px}
.sidebar-links .ic{display:inline-flex;align-items:center;justify-content:center;width:20px;vertical-align:middle}
.sidebar-links a{display:flex;align-items:center;gap:9px}
.sidebar-links a .am-ic{color:color-mix(in srgb,var(--am-hue) 60%,#fff)}
.sidebar-links a.active{border-inline-start-color:var(--am-nav-accent)}
.mobile-tabbar .ic{display:inline-flex;align-items:center;justify-content:center}
.mobile-tabbar .am-ic{width:20px;height:20px}
/* پنل اعلان روی همان .notif-dropdown می‌نشیند (تا JSِ باز/بسته دست‌نخورده
بماند)، پس padding/min-widthِ قدیمی باید خنثی شود تا ردیف‌ها لبه‌به‌لبه شوند */
.notif-dropdown.am-pop{padding:0;min-width:0}
.am-bell.muted{opacity:.45;cursor:default;box-shadow:none}
.am-bell.muted:hover{transform:none}
.am-pop__row .am-tile-ic{color:var(--am-hue)}
/* کاشی‌های کارتابل: مارک‌آپ قدیمی (.dash-tile .ic) نگه داشته شده تا CSSِ
ریسپانسیو دست‌نخورده بماند، فقط کاشیِ رنگیِ آیکون رویش می‌نشیند */
.dash-tile .ic.am-tile-ic{display:grid;margin:0 auto 8px;font-size:0}
.dash-tile .cnt{z-index:1}
/* نمودارها: میله‌ها رنگ تخت می‌گیرند (گرادیانِ سبز→نارنجی بی‌معنا بود) و
وسطِ دونات پر می‌شود — .donut::after (حفرهٔ وسط) بعد از فرزندان نقاشی
می‌شود، پس عددِ وسط باید z-index بگیرد وگرنه زیرش پنهان می‌ماند. */
.bar-fill{background:var(--am-c1)}
/* برچسبِ ماه حالا «تا امروز» را هم در خود دارد، پس ستون اول باید جا داشته
باشد وگرنه با ellipsis بریده می‌شود */
.bar-row{grid-template-columns:150px 1fr auto}
.bar-label{overflow:visible;white-space:normal}
@media (max-width:560px){.bar-row{grid-template-columns:104px 1fr auto}}
.bar-track.is-empty{background:repeating-linear-gradient(135deg,#f2eee4 0 5px,#ece7db 5px 10px);opacity:.75}
.bar-value.is-zero{color:var(--am-faint);font-weight:400}
.donut .am-donut__center{z-index:1}
.donut .am-donut__center .am-big{font-size:17px}