/* تسک‌تو کارگاه — نمای مدیر پروژه (دسکتاپ)
   الگو: داشبورد با نوار کناری روشن و شناور، نوار بالای شناور، کارت‌های سفید گرد.
   روی styles.css سوار است: توکن‌ها، دکمه، برچسب، آواتار و نوار هاشورخورده از آنجا می‌آیند. */

body.mgr {
  padding: 0;
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(223, 242, 90, 0.28), transparent 70%),
    #eeede7;
  min-height: 100dvh;
}
.mgr { --panel: #fcfcfa; --r-xl: 28px; --soft: 0 1px 0 #fff inset, 0 14px 34px -22px rgba(14, 15, 12, 0.32); --green: #7da23a; --grad: linear-gradient(180deg, #e3f36c, #a5c24e); }

.desk { display: grid; grid-template-columns: 284px minmax(0, 1fr); gap: 20px; padding: 20px; min-height: 100dvh; }

/* ---------- نوار کناری ---------- */
.side {
  position: sticky; top: 20px; height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
  padding: 22px 16px 16px; border-radius: var(--r-xl);
  background: var(--panel); box-shadow: var(--soft);
  overflow-y: auto; scrollbar-width: none;
}
.side::-webkit-scrollbar { display: none; }
.side .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.side .brand img { height: 30px; }
.side .find { display: flex; align-items: center; gap: 8px; height: 46px; margin-bottom: 8px; padding: 0 14px; border-radius: 14px; background: #f0efea; color: var(--ink-3); font-size: 14px; }
.side .find kbd { margin-inline-start: auto; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); font: inherit; font-size: 12px; }
.side .group { margin: 16px 12px 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.side a {
  display: flex; align-items: center; gap: 12px; flex: none;
  min-height: 44px; padding: 0 14px; border-radius: 14px;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px;
}
.side a svg.i { width: 21px; height: 21px; color: var(--ink-2); }
.side a:hover { background: #f0efea; }
.side a.is-on { background: var(--ink); color: #fff; font-weight: 600; }
.side a.is-on svg.i { color: var(--lime); }
.side a i { font-style: normal; margin-inline-start: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; background: #ecebe5; color: var(--ink-2); font-size: 12px; }
.side a.is-on i { background: #2a2b27; color: var(--lime); }
.side .spacer { flex: 1; min-height: 16px; }
.side .me { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px; border-radius: 18px; border: 1px solid var(--line); background: #f6f5f1; }
.side .me .avatar { width: 40px; height: 40px; border-radius: 13px; background: var(--lime-soft); color: #4a5406; border: 0; font-size: 13px; }
.side .me b { display: block; font-size: 14.5px; }
.side .me span span { font-size: 12.5px; color: var(--ink-2); }
.side .me .kebab { margin-inline-start: auto; color: var(--ink-3); font-weight: 800; }

/* ---------- نوار بالا ---------- */
.main { min-width: 0; padding-bottom: 40px; }
.topnav {
  position: sticky; top: 20px; z-index: 10;
  display: flex; align-items: center; gap: 12px;
  min-height: 70px; padding: 0 12px 0 22px; padding-inline: 22px 12px;
  border-radius: var(--r-xl); background: rgba(252, 252, 250, 0.9); backdrop-filter: blur(14px); box-shadow: var(--soft);
}
.topnav .path { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-3); }
.topnav .path b { color: var(--ink); font-weight: 600; }
.topnav .grow { flex: 1; }
.period { display: flex; gap: 2px; }
.period button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; color: var(--ink-2); }
.period button.is-on { background: var(--ink); color: #fff; }
.topnav .sep { width: 1px; height: 28px; background: var(--line); }
.alerts { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; font-size: 14.5px; }
.alerts i { font-style: normal; color: var(--ink-3); font-weight: 500; }
.topnav .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--lime); color: var(--ink); border: 0; }

/* ---------- سرصفحه ---------- */
.page { display: none; }
.page.is-active { display: block; animation: rise 0.24s ease both; }
@media (prefers-reduced-motion: reduce) { .page.is-active { animation: none; } }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 30px 6px 20px; }
.ph .date { font-size: 13.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.ph h1 { font-size: 42px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
.ph p { color: var(--ink-2); font-size: 16px; margin-top: 4px; }
.ph p b { color: var(--ink); }
.ph .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.white { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.crumb-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); text-decoration: none; margin-bottom: 6px; }
.crumb-back svg.i { width: 16px; height: 16px; }

/* ---------- شبکه و کارت ---------- */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.c2 { grid-column: span 2; } .c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c5 { grid-column: span 5; }
.c6 { grid-column: span 6; } .c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }

.panel { padding: 24px; border-radius: var(--r-xl); background: var(--panel); box-shadow: var(--soft); min-width: 0; }
.panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel > header h2 { font-size: 19px; font-weight: 700; }
.panel > header p { font-size: 14px; color: var(--ink-2); }
.panel > header a { font-size: 14px; color: var(--green); text-decoration: none; font-weight: 600; white-space: nowrap; }
.panel > header .tag { flex: none; }
.big-num { text-align: end; }
.big-num b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.big-num small { font-size: 13.5px; font-weight: 700; color: #3f8a3a; }
.big-num small.down { color: #b9432f; }

/* عدد کلیدی با نمودار کوچک */
.kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 168px; }
.kpi .lbl { font-size: 13.5px; font-weight: 700; color: #3b5c8c; }
.kpi .val { display: flex; align-items: baseline; gap: 8px; }
.kpi .val b { font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.1; }
.kpi .val small { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.kpi .val em { font-style: normal; font-size: 13px; font-weight: 700; color: #3f8a3a; }
.kpi .val em.bad { color: #b9432f; }
.kpi .foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.spark { width: 104px; height: 36px; flex: none; }
.spark path { fill: none; stroke: #23417a; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark path.area { fill: rgba(35, 65, 122, 0.08); stroke: none; }
.spark.red path { stroke: #b9432f; } .spark.red path.area { fill: rgba(185, 67, 47, 0.08); }
.spark.green path { stroke: #4f7f27; } .spark.green path.area { fill: rgba(79, 127, 39, 0.1); }

/* بخش‌بندی پایین نمودار */
.segs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.segc { display: block; text-align: start; padding: 14px 16px; border-radius: 20px; background: #f3f2ee; box-shadow: 0 0 0 1px var(--line) inset; }
.segc .k { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.segc .k i { width: 9px; height: 9px; border-radius: 3px; background: var(--ink); }
.segc b { display: block; margin-top: 4px; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; }
.segc b small { font-size: 12.5px; font-weight: 700; color: #3f8a3a; }
.segc b small.down { color: #b9432f; }
.segc .meter { height: 5px; margin-top: 10px; border-radius: 5px; background: #e2e1db; overflow: hidden; }
.segc .meter span { display: block; height: 100%; width: var(--v); border-radius: 5px; background: var(--ink); }
.segc.dark { background: var(--ink); color: #fff; box-shadow: none; }
.segc.dark .k { color: #c9cbbf; }
.segc.dark .k i, .segc.dark .meter span { background: var(--lime); }
.segc.dark .meter { background: #2e2f2a; }
.segc.dark b small { color: var(--lime); }

/* نمودار خطی */
.line-chart { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
.line-chart .sum .cap { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.line-chart .sum b { display: block; font-size: 40px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; }
.line-chart .sum .tag { margin-top: 6px; }
.line-chart .rowsum { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.line-chart .rowsum b { font-size: 15px; color: var(--ink); }
.line-chart .rowsum b.g { color: #3f8a3a; }
.legend-top { display: flex; gap: 16px; font-size: 13px; color: var(--ink-2); }
.legend-top span { display: inline-flex; align-items: center; gap: 6px; }
.legend-top i { width: 16px; height: 2px; background: var(--ink); }
.legend-top i.dash { background: repeating-linear-gradient(90deg, #8fb04a 0 4px, transparent 4px 7px); height: 2px; }
svg.chart { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
svg.chart .grid-l { stroke: #e6e5df; stroke-width: 1; }
svg.chart .grid-v { stroke: #ecebe5; stroke-width: 1; stroke-dasharray: 3 4; }
svg.chart text { font-size: 12px; fill: var(--ink-3); }
svg.chart .actual { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .plan { fill: none; stroke: #8fb04a; stroke-width: 2; stroke-dasharray: 6 5; }
svg.chart .area { fill: url(#limeFade); }
svg.chart .pt { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
svg.chart .val { font-size: 12.5px; font-weight: 800; fill: var(--ink); }

/* ستونی */
.cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: end; height: 250px; padding-top: 30px; }
.cols .col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; height: 100%; min-width: 0; }
.cols .stick { position: relative; width: 100%; max-width: 74px; height: var(--h); border-radius: 18px; background: #d7d6cf; }
.cols .stick::before { content: attr(data-v); position: absolute; top: -24px; inset-inline: 0; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.cols .stick.dark { background: var(--ink); }
.cols .stick.lime { background: var(--grad); }
.cols .who { display: grid; justify-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); text-align: center; }
.cols .who i { font-style: normal; display: grid; place-items: center; min-width: 34px; height: 26px; padding: 0 6px; border-radius: 8px; background: var(--lime-soft); color: #4a5406; font-size: 12px; font-weight: 700; }

/* دونات */
.donut-wrap { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; }
.donut { position: relative; width: 190px; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--d)); }
.donut::after { content: ""; position: absolute; inset: 30px; border-radius: 50%; background: var(--panel); }
.donut .mid { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; text-align: center; }
.donut .mid b { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
.donut .mid span { font-size: 12px; color: var(--ink-3); }
.dl { display: grid; gap: 14px; }
.dl div { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.dl i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.dl b { margin-inline-start: auto; font-weight: 800; }

/* میله‌های افقی */
.hbars { display: grid; gap: 16px; }
.hb .top { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 7px; }
.hb .top span { color: var(--ink-2); font-size: 13px; }
.hb .track { height: 26px; border-radius: 9px; background: #efeee9; overflow: hidden; }
.hb .track i { display: block; height: 100%; width: var(--v); border-radius: 9px; background: var(--ink); }
.hb .track i.lime { background: linear-gradient(90deg, #a5c24e, #e3f36c); }
.hb .track i.amber { background: linear-gradient(90deg, #e8913a, #f6c06d); }
.hb.thin .track { height: 12px; border-radius: 6px; }
.hb.thin .track i { border-radius: 6px; background: linear-gradient(90deg, #8fb04a, #d8ec63); }

/* برنامه امروز */
.agenda { display: grid; gap: 12px; }
.ag { padding: 14px 16px; border-radius: 20px; background: #f3f2ee; box-shadow: 0 0 0 1px var(--line) inset; }
.ag .t { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--ink-3); }
.ag b { display: block; margin: 4px 0 2px; font-size: 16px; font-weight: 700; }
.ag small { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.ag small i { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #e2e1db; font-size: 11px; font-weight: 700; color: var(--ink); }
.ag.hot { background: var(--lime); box-shadow: none; }
.ag.hot .t { color: rgba(14, 15, 12, 0.6); }
.ag.hot small { color: rgba(14, 15, 12, 0.75); }
.ag.hot small i { background: rgba(255, 255, 255, 0.6); }
.agenda-foot { display: flex; justify-content: space-between; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.agenda-foot b { color: var(--green); }

/* جریان رویدادها */
.stream { display: grid; }
.ev { display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; padding-top: 0; }
.ev .ico { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: #f0edfb; color: #6b54c9; flex: none; }
.ev .ico.g { background: var(--lime-soft); color: #4a5406; }
.ev .ico.r { background: var(--red-soft); color: var(--red); }
.ev .ico.b { background: #e3eefa; color: #2a6db0; }
.ev .grow { flex: 1; min-width: 0; }
.ev b { display: block; font-size: 15px; font-weight: 600; }
.ev .meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.ev .chev { color: var(--ink-3); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line) inset; }
.ev .chev svg.i { width: 18px; height: 18px; }

/* کارت کارگاه */
.site-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: start; }
.site-card .body { padding: 22px 22px 18px; }
.site-card .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.site-card h3 { font-size: 21px; font-weight: 800; }
.site-card .addr { color: var(--ink-2); font-size: 14px; }
.site-card .facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.site-card .facts div { padding: 10px 12px; border-radius: 14px; background: #f0efea; }
.site-card .facts b { display: block; font-size: 21px; font-weight: 800; line-height: 1.2; }
.site-card .facts span { font-size: 12.5px; color: var(--ink-2); }
.site-card .who { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--ink-2); }
.site-card .band { margin-top: auto; display: flex; justify-content: space-between; padding: 14px 22px; font-weight: 700; background: linear-gradient(to left, transparent var(--v), rgba(14, 15, 12, 0.07) var(--v)), var(--hatch), #f0efea; }
.site-card.lime { background: var(--lime); }
.site-card.lime .facts div { background: rgba(255, 255, 255, 0.5); }
.site-card.lime .addr, .site-card.lime .who, .site-card.lime .facts span { color: rgba(14, 15, 12, 0.72); }
.site-card.lime .band { background: linear-gradient(to left, transparent var(--v), var(--lime-deep) var(--v)), var(--hatch), var(--lime); }
.add-card { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 290px; border-radius: var(--r-xl); border: 2px dashed #d3d2c9; color: var(--ink-2); font-weight: 700; }
.add-card .ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--ink); color: var(--lime); }

/* جدول */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: start; font-weight: 600; font-size: 13px; color: var(--ink-3); padding: 0 12px 12px; white-space: nowrap; }
.table td { padding: 14px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.table td b { font-weight: 700; }
.table td small { display: block; color: var(--ink-2); font-size: 13px; }
.table .n { text-align: end; font-weight: 700; white-space: nowrap; }
.table .neg { color: #a22f1c; }
.table tbody tr { cursor: default; }
.table tbody tr[data-go] { cursor: pointer; }
.table tbody tr:hover td { background: #f6f5f1; }
.table tfoot td { border-top: 2px solid var(--ink); font-weight: 800; }
.scroll-x { overflow-x: auto; }
.who-cell { display: flex; align-items: center; gap: 10px; }
.who-cell .avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 13px; border: 0; }

/* فهرست ساده */
.rows { display: grid; }
.rows > div { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.rows > div:first-child { border-top: 0; padding-top: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows b { display: block; font-size: 15px; }
.rows small { color: var(--ink-2); font-size: 13px; }
.rows .amt { font-weight: 800; white-space: nowrap; }
.rows .avatar { width: 40px; height: 40px; border-radius: 13px; border: 0; }

/* ستون‌های جریان (کانبان) */
.kanban { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.lane { padding: 16px 12px 12px; border-radius: 24px; border: 1.5px dashed rgba(14, 15, 12, 0.1); background: rgba(255, 255, 255, 0.55); min-width: 0; }
.lane > header { display: flex; align-items: flex-start; justify-content: space-between; margin: 0 6px 14px; }
.lane > header b { display: block; font-size: 16.5px; font-weight: 700; }
.lane > header small { font-size: 13px; color: var(--ink-2); }
.lane > header .sum { font-weight: 800; font-size: 15px; }
.lane.l1 { background: rgba(255, 255, 255, 0.6); }
.lane.l2 { background: rgba(240, 236, 255, 0.7); }
.lane.l3 { background: rgba(253, 244, 210, 0.75); }
.lane.l4 { background: rgba(253, 232, 230, 0.7); }
.lane.l5 { background: rgba(228, 236, 253, 0.75); }
.kcard { display: block; width: 100%; text-align: start; padding: 14px; border-radius: 18px; background: #fff; box-shadow: 0 6px 16px -12px rgba(14, 15, 12, 0.35); }
.kcard + .kcard { margin-top: 10px; }
.kcard .h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kcard .h b { font-size: 15px; font-weight: 700; line-height: 1.45; }
.kcard small { display: block; color: var(--ink-3); font-size: 13px; }
.kcard .amt { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; }
.kcard .amt b { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }
.kcard .amt span { font-size: 12.5px; color: var(--ink-2); }
.kcard .pg { height: 4px; margin-top: 6px; border-radius: 4px; background: #ecebe5; overflow: hidden; }
.kcard .pg i { display: block; height: 100%; width: var(--v); background: #74b14a; border-radius: 4px; }
.kcard .pg i.dk { background: #2c6b2a; }
.kcard .ft { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.kcard .ft i { font-style: normal; display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 6px; border-radius: 8px; background: #fde4dc; color: #a23d22; font-size: 11px; font-weight: 700; }
.lane .add { display: grid; place-items: center; width: 100%; min-height: 42px; margin-top: 12px; border-radius: 14px; border: 1.5px dashed currentColor; font-size: 14px; font-weight: 600; opacity: 0.7; }
.lane.l1 .add { color: #2a6db0; } .lane.l2 .add { color: #7a3fc4; } .lane.l3 .add { color: #a07a0a; } .lane.l4 .add { color: #c2412b; } .lane.l5 .add { color: #2a55b0; }
.t-new { background: #e7eefc; color: #2a55b0; }
.t-warm { background: #fdf0d6; color: #a46a08; }
.t-ok { background: #e3f3df; color: #2f7a2c; }
.t-bad { background: #fde3de; color: #b23a24; }
.t-vio { background: #efe9fc; color: #6b3fc4; }

/* نقشه حرارتی */
.heat { display: grid; grid-template-columns: 120px repeat(var(--cols), minmax(0, 1fr)); gap: 6px; align-items: center; font-size: 13.5px; }
.heat .hd { text-align: center; font-size: 12.5px; color: var(--ink-2); padding-bottom: 4px; }
.heat .nm { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat i { height: 30px; border-radius: 6px; background: #eef3d8; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: rgba(14, 15, 12, 0.7); }
.heat i.h1 { background: #e4edbe; } .heat i.h2 { background: #cfe08e; } .heat i.h3 { background: #b4cd5e; } .heat i.h4 { background: #93b43c; color: #fff; }
.heat i.off { background: repeating-linear-gradient(-45deg, rgba(14,15,12,.08) 0 1.5px, transparent 1.5px 7px), #f3f2ee; color: transparent; }
.heat i.no { background: var(--red-soft); color: #a22f1c; }

/* خط زمان */
.timeline { display: grid; }
.tl { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 0; padding-bottom: 20px; }
.tl::before { content: ""; position: absolute; top: 12px; bottom: 0; inset-inline-start: 98px; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl time { font-size: 13px; color: var(--ink-2); }
.tl time b { display: block; color: var(--ink); font-size: 14.5px; }
.tl .dot { position: absolute; inset-inline-start: 93px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--panel); }
.tl .dot.lime { background: #9cbc45; }
.tl .dot.red { background: var(--red); }
.tl .body { padding-inline-start: 26px; }
.tl .body b { display: block; font-size: 15.5px; }
.tl .body p { color: var(--ink-2); font-size: 14px; margin: 2px 0 8px; }
.tl .body .tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* نمایش فاکتور */
.doc-view {
  position: relative; min-height: 600px; border-radius: 22px;
  background:
    linear-gradient(#fff, #fff) right 32px top 40px / 42% 14px no-repeat,
    linear-gradient(#fff, #fff) right 32px top 70px / 24% 10px no-repeat,
    repeating-linear-gradient(transparent 0 46px, #d9d8d0 46px 48px) center 130px / calc(100% - 64px) 290px no-repeat,
    linear-gradient(#fff, #fff) left 32px top 460px / 30% 14px no-repeat,
    var(--hatch), #e9e8e1;
}
.doc-view .tools { position: absolute; bottom: 16px; inset-inline: 16px; display: flex; justify-content: space-between; gap: 8px; }
.doc-view .tools .tag { background: #fff; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fields div { padding: 12px 14px; border-radius: 16px; background: #f3f2ee; }
.fields span { display: block; font-size: 12.5px; color: var(--ink-2); }
.fields b { font-size: 16px; }
.fields .unsure { background: var(--amber-soft); }
.decide { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 16px; border-radius: 20px; background: var(--amber-soft); }
.decide .grow { flex: 1; min-width: 200px; }
.decide b { display: block; }
.decide small { color: #7a4706; }

/* پیش‌بینی جنس */
.fc { display: grid; gap: 16px; }
.fc-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) 96px; gap: 14px; align-items: center; font-size: 14px; }
.fc-row b { font-weight: 700; }
.fc-row small { display: block; font-size: 12px; color: var(--ink-3); }
.fc-track { position: relative; height: 26px; border-radius: 9px; background: #efeee9; overflow: hidden; }
.fc-track .need { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--need); border-radius: 9px; background: repeating-linear-gradient(-45deg, rgba(232, 145, 58, 0.28) 0 2px, transparent 2px 8px); box-shadow: inset 0 0 0 1.5px #e8913a; }
.fc-track .have { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--have); border-radius: 9px; background: var(--ink); }
.fc-row .gap { text-align: end; font-weight: 800; }
.fc-row .gap.ok { color: #3f8a3a; }
.fc-row .gap.bad { color: #b9432f; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 14px; height: 14px; border-radius: 5px; display: inline-block; }

/* دسته‌های مانع */
.cat-list { display: grid; gap: 8px; }
.cat-list button { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: #f3f2ee; text-align: start; font-weight: 600; font-size: 14.5px; }
.cat-list button svg.i { width: 20px; height: 20px; color: var(--ink-2); }
.cat-list button b { margin-inline-start: auto; font-size: 16px; }
.cat-list button.is-on { background: var(--ink); color: #fff; }
.cat-list button.is-on svg.i { color: var(--lime); }

/* زبانه و کلید */
.tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.tabs button.is-on { background: var(--ink); color: #fff; }
.switch { position: relative; width: 46px; height: 26px; flex: none; border-radius: 999px; background: #d9d8d0; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start 0.15s; }
.switch.is-on { background: var(--ink); }
.switch.is-on::after { inset-inline-start: 23px; background: var(--lime); }
.perm th, .perm td { text-align: center; }
.perm th:first-child, .perm td:first-child { text-align: start; }
.perm td .switch { display: inline-block; vertical-align: middle; }

.tpl { padding: 16px; border-radius: 20px; background: #f3f2ee; }
.tpl + .tpl { margin-top: 10px; }
.tpl .h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.tpl b { font-size: 16px; }
.tpl .chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.tpl .chip { min-height: 34px; padding: 0 12px; font-size: 13px; background: #fff; box-shadow: none; }
.field-row { display: grid; grid-template-columns: 190px 1fr; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.field-row:first-child { border-top: 0; padding-top: 0; }
.field-row > span { color: var(--ink-2); font-size: 14px; }
.field-row .val { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.mini-input { width: 84px; height: 38px; padding: 0 10px; border: 0; border-radius: 12px; background: #f0efea; font-weight: 700; text-align: center; }

/* صف ورودی */
.inbox-item { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid var(--line); }
.inbox-item:first-child { border-top: 0; padding-top: 0; }
.inbox-item .src { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: #f0efea; }
.inbox-item .src.tg { background: #e3eefa; color: #2a6db0; }
.inbox-item b { display: block; font-size: 15.5px; }
.inbox-item small { color: var(--ink-2); font-size: 13px; }
.inbox-item .acts { display: flex; gap: 8px; align-items: center; }
.quote { margin-top: 8px; padding: 10px 14px; border-radius: 14px; background: #f3f2ee; font-size: 14px; color: var(--ink-2); border-inline-start: 3px solid #d0cfc7; }
.parsed { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.conf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); margin-top: 8px; }
.conf i { width: 64px; height: 6px; border-radius: 6px; background: var(--line); position: relative; overflow: hidden; }
.conf i::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--c); background: #74b14a; }
.conf.low i::after { background: #e8913a; }

/* پیمانکار */
.profile-card { display: flex; align-items: center; gap: 16px; }
.profile-card .avatar { width: 64px; height: 64px; border-radius: 20px; font-size: 22px; border: 0; background: var(--lime); color: var(--ink); }
.profile-card b { display: block; font-size: 22px; font-weight: 800; }
.profile-card span { color: var(--ink-2); }

/* ---------- واکنش‌گرا ---------- */
@media (max-width: 1280px) {
  .kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .c3 { grid-column: span 6; } .c4, .c5, .c7, .c8, .c9 { grid-column: span 12; } .c6 { grid-column: span 12; } .c2 { grid-column: span 4; }
  .line-chart { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .desk { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 12px; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px; gap: 4px; border-radius: 22px; }
  .side .brand, .side .find, .side .group, .side .spacer, .side .me { display: none; }
  .topnav { position: static; flex-wrap: wrap; padding: 12px; }
  .topnav .path, .topnav .sep, .period { display: none; }
  .ph h1 { font-size: 32px; }
  .kanban { grid-template-columns: minmax(0, 1fr); }
  .c3, .c2 { grid-column: span 12; }
  .segs { grid-template-columns: 1fr; }
  .donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .fields { grid-template-columns: 1fr; }
  .fc-row { grid-template-columns: 96px minmax(0, 1fr) 72px; }
  .field-row { grid-template-columns: 1fr; gap: 6px; }
  .heat { grid-template-columns: 84px repeat(var(--cols), minmax(0, 1fr)); }
}

/* محور زمان در نمودارها همیشه از چپ به راست است تا روند صعودی، صعودی دیده شود */
.cols.time { direction: ltr; }
.cols.time .who { direction: rtl; }
.line-chart { grid-template-columns: 190px minmax(0, 1fr); }
svg.chart text { font-size: 11.5px; }
.hb .track { display: block; margin-top: 0; }
.kcard .h { flex-direction: column-reverse; align-items: flex-start; gap: 6px; }
.cols.time .stick::before { direction: rtl; }
@media (max-width: 1280px) { .line-chart { grid-template-columns: minmax(0, 1fr); } }