/*
 * سبک‌های مشترک سامانه‌ی گام و پنل رصد بازار.
 *
 * قاعده‌ی پروژه: هیچ فایلی از CDN یا سایت بیرونی بار نمی‌شود. فونت، آیکن و هر کتابخانه‌ای
 * که لازم است داخل پوشه‌ی static پروژه گذاشته می‌شود تا اگر دسترسی به بیرون بسته بود هم
 * صفحه‌ها درست دیده شوند.
 *
 * این فایل دو چیز دارد:
 *   ۱. فونت وزیرمتن (پوشه‌ی static/fonts/vazirmatn، مجوز OFL کنار همان فایل).
 *   ۲. دکمه‌ی راهنمای «؟» و جعبه‌ی توضیحش (کارکردش در help.js است).
 */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900; /* یک فایل با همه‌ی وزن‌ها (variable font) */
  font-style: normal;
  font-display: swap; /* تا فونت برسد، متن با فونت سیستم دیده می‌شود */
}

/* دکمه‌ی گرد «؟» کنار برچسب یا سرستون. اندازه‌اش برای لمس با انگشت کافی است. */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 4px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font: bold 11px/1 Vazirmatn, Tahoma, sans-serif;
  vertical-align: middle;
  cursor: help;
  position: relative;
}
/* ناحیه‌ی لمس بزرگ‌تر از خود دایره، بی‌آن‌که ظاهر بزرگ شود */
.help::before { content: ""; position: absolute; inset: -8px; }
.help:hover, .help:focus-visible, .help[aria-expanded="true"] { opacity: 1; }

/* جعبه‌ی توضیح؛ یک نمونه برای کل صفحه که help.js جابه‌جایش می‌کند. */
#help-pop {
  position: fixed;
  z-index: 1000;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 12px;
  border-radius: 8px;
  background: #263238;
  color: #fff;
  font: 13px/1.8 Vazirmatn, Tahoma, sans-serif;
  text-align: right;
  direction: rtl;
  white-space: pre-line;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
#help-pop[hidden] { display: none; }

/*
 * نمودارهای پنل رصد بازار (apps/divar/charts.py). رنگ سری‌ها از پالت آزموده‌شده‌ی راهنمای
 * داده‌نمایی است: آبی و نارنجی، هر دو با کنتراست کافی و قابل تشخیص برای کوررنگ‌ها.
 */
.viz-grid-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 10px 0 16px; }
.viz { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-track: #eef0ef; --viz-rule: #dfe2e0;
       margin: 0; background: #fff; border: 1px solid #d9dfe2; border-radius: 8px; padding: 10px 14px 12px; min-width: 0; }
.viz figcaption { font-weight: bold; margin: 0 0 8px; }
.viz-note { color: #5d6b73; font-size: 12px; margin: 8px 0 0; }
.viz-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #52514e; margin: 0 0 8px; }
.viz-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 5px; vertical-align: middle; }
/* میله‌ای افقی: برچسب | مسیر میله | مقدار */
.viz-bars { display: flex; flex-direction: column; gap: 4px; }
.viz-row { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 8px;
           font-size: 13px; border-radius: 4px; cursor: default; }
.viz-row:hover, .viz-row:focus-visible, .viz-pair:hover, .viz-pair:focus-visible { background: #f4f6f7; outline: none; }
.viz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1d2428; }
.viz-track { display: block; height: 14px; }
.viz-bar { display: block; height: 14px; background: var(--viz-1); border-radius: 4px 0 0 4px; }
.viz-value { color: #52514e; font-size: 12px; white-space: nowrap; min-width: 3em; }
.viz-row-pair { align-items: start; }
.viz-pairs { display: flex; flex-direction: column; gap: 2px; grid-column: span 2; }
.viz-pair { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
/* ستونی */
.viz-columns { position: relative; display: flex; align-items: stretch; gap: 2px; height: 150px;
               padding-top: 16px; border-bottom: 1px solid var(--viz-rule); }
.viz-peak { position: absolute; top: 0; left: 0; font-size: 11px; color: #5d6b73; }
.viz-colgroup { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.viz-cols { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.viz-col { flex: 1; max-width: 24px; margin: 0 auto; border-radius: 4px 4px 0 0; cursor: default; }
.viz-col:hover, .viz-col:focus-visible { filter: brightness(0.85); outline: none; }
.viz-axis { font-size: 10px; color: #5d6b73; text-align: center; height: 0; overflow: visible; white-space: nowrap;
            transform: translateY(4px); }
.viz-columns + .viz-note, .viz-columns { margin-bottom: 18px; }
/* خطی */
.viz-line { width: 100%; height: auto; display: block; }
.viz-line .viz-path { fill: none; stroke: var(--viz-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line .viz-dot { fill: var(--viz-1); stroke: #fff; stroke-width: 2; cursor: default; }
.viz-line .viz-grid { stroke: var(--viz-rule); stroke-width: 1; }
.viz-line .viz-tick { font-size: 12px; fill: #5d6b73; }
.viz-line .viz-endlabel { font-size: 13px; fill: #1d2428; font-weight: bold; }

/* عکس و ویدئوی ملک (صفحه‌ی پرونده) */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0 12px; }
.media-grid figure { margin: 0; }
.media-grid img, .media-grid video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: #0001; display: block; }
.media-grid form { margin: 2px 0 0; }
button.link { background: none; border: 0; padding: 0; color: var(--muted, #5d6b73); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.media-pick { display: inline-block; padding: 10px 16px; border-radius: 10px; background: var(--brand, #1f4e78); color: #fff; cursor: pointer; }
.media-pick input { display: none; }
.media-progress { list-style: none; padding: 0; margin: 8px 0 0; font-size: 14px; }
.media-progress li.bad { color: var(--bad, #9b1c13); }
.media-progress li.good { color: var(--good, #1b7a4b); }