/* =================== Dashboard (Figma 448:66404) + «گزارش من» (457:69924) — prefix db- (page wrapper: .opp.db) =================== */
.db .db-head { margin-block-end: 20px; align-items: flex-start; }
.db .db-export-btn { height: 40px; padding: 0 16px; }

/* filter row: DateRange (280×40) then dashed chips */
.db-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 20px; }
.db .db-range > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 280px; height: 40px; padding: 0 12px;
  background: var(--color-surface-card); border: 1px solid var(--color-gray-300); border-radius: var(--radius-md); font: var(--text-body); color: var(--color-text-primary); }
.db .db-range > summary .icon { width: 20px; height: 20px; color: var(--color-gray-400); flex: none; }
.db .db-range[open] > summary { border-color: var(--color-brand-navy); }
.db .db-range__pop { min-width: 300px; max-width: 340px; }
.db .db-range__presets { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.db .db-range__custom { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 10px; }
.db .db-range__inputs { display: flex; align-items: center; gap: 8px; color: var(--color-text-secondary); font: var(--text-small); }
.db .db-range__inputs .input { width: 120px; height: 36px; text-align: center; }
.db .db-chip > summary { gap: 6px; }
.db .db-chip.is-add > summary { border: 1px dashed var(--color-gray-300); color: var(--color-text-secondary); }
.db .db-chip.is-add > summary .icon { color: var(--color-gray-500); }
.db .db-chip__pop .pop__list { max-height: 300px; }

/* KPI cards (KpiCard 361×174: padding 20, gap 12) */
.db-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-block-end: 20px; }
.db-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.db-kpi { display: flex; flex-direction: column; gap: 12px; min-height: 174px; padding: 20px; color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.db-kpi:hover { text-decoration: none; border-color: var(--color-gray-300); box-shadow: var(--shadow-md); }
.db-kpi__top { display: flex; align-items: flex-start; justify-content: space-between; }
.db-kpi__label { font: var(--text-small); color: var(--color-text-secondary); padding-top: 8px; }
.db-kpi__icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-brand-navy-50); color: var(--color-text-brand); display: grid; place-items: center; flex: none; }
.db-kpi__icon .icon { width: 20px; height: 20px; }
.db-kpi__value { display: flex; align-items: baseline; gap: 6px; }
.db-kpi__value b { font: 700 28px/40px var(--font-family); color: var(--color-text-primary); }
.db-kpi__value span { font: var(--text-small); color: var(--color-text-secondary); }
.db-kpi__bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; min-height: 32px; }
.db-kpi__delta { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding-bottom: 0; }
.db-kpi__sub { font: 500 11px/16px var(--font-family); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-kpi__spark { display: flex; flex: none; }
.db-pill { display: inline-flex; align-items: center; gap: 2px; height: 20px; padding: 2px 6px; border-radius: var(--radius-full); font: 500 11px/16px var(--font-family);
  background: var(--color-gray-100); color: var(--color-gray-500); flex: none; }
.db-pill .icon { width: 12px; height: 12px; }
.db-pill--good { background: var(--tone-green-bg); color: var(--color-success); }
.db-pill--bad { background: var(--tone-red-bg); color: var(--color-danger); }

/* two-column widget grid (548 + 20 + 548) */
.db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-block-end: 20px; align-items: start; }
.db-widget { padding: 16px 20px; display: flex; flex-direction: column; }
.db-widget--tall { min-height: 320px; align-self: stretch; }
.db-grid > .db-widget { align-self: stretch; }
.db-widget--wide { margin-block-end: 20px; }
.db-widget__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 52px; padding-bottom: 8px; }
.db-widget__head h2 { font: 600 16px/24px var(--font-family); color: var(--color-text-primary); margin: 0; }
.db-widget__head p { font: var(--text-small); color: var(--color-text-secondary); margin: 0; }
.db-widget__link { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 0; border-radius: var(--radius-md); font: 500 14px/24px var(--font-family);
  color: var(--color-text-brand); white-space: nowrap; margin-top: 6px; }
.db-widget__link .icon { width: 16px; height: 16px; }
.db-widget__link:hover { text-decoration: none; background: var(--color-gray-50); }

/* list rows (56px): info on the right, meta + badge on the left */
.db-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 5px 0; border-bottom: 1px solid var(--color-border); color: inherit; text-decoration: none; }
a.db-row:hover { text-decoration: none; background: var(--color-gray-50); }
.db-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.db-row__info b { font: 500 14px/24px var(--font-family); color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-row__info span { font: var(--text-small); color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-row__meta { font: var(--text-small); color: var(--color-text-muted); white-space: nowrap; flex: none; }
.db-row .badge { flex: none; font: 500 11px/16px var(--font-family); color: var(--color-gray-800); }
.db-empty { display: flex; align-items: center; gap: 8px; padding: 24px 4px; color: var(--color-text-secondary); font: var(--text-small); }
.db-empty .icon { width: 20px; height: 20px; color: var(--color-success); }

/* chart card (ChartCard: padding 20, plot 452×180, y labels on the right) */
.db-chartcard { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-height: 320px; align-self: stretch; }
.db-chartcard__head h2 { font: 600 16px/24px var(--font-family); margin: 0; }
.db-chartcard__head p { font: var(--text-small); color: var(--color-text-secondary); margin: 2px 0 0; }
.db-chart { padding-inline-start: 48px; padding-inline-end: 6px; }
.db-chart__plot { position: relative; height: 180px; margin-top: 8px; }
.db-chart__grid { position: absolute; inset-inline: 0; height: 0; border-top: 1px solid var(--color-border); }
.db-chart__grid.is-base { border-top-color: var(--color-gray-300); }
.db-chart__grid span { position: absolute; inset-inline-start: -40px; top: -8px; width: 32px; text-align: left; font: 500 11px/16px var(--font-family); color: var(--color-text-muted); }
.db-chart__bars { position: absolute; inset: 0; display: flex; }
.db-chart__col { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.db-chart__col:hover .db-chart__bar { background: var(--color-brand-amber); }
.db-chart__bar { width: 28px; background: var(--color-brand-navy); min-height: 0; }
.db-chart__bar.is-zero { height: 1px !important; background: var(--color-gray-400); }
.db-chart__x { display: flex; margin-top: 8px; }
.db-chart__x span { flex: 1; text-align: center; font: 500 11px/16px var(--font-family); color: var(--color-text-secondary); padding: 0 2px; }

/* bordered tables inside widgets */
.db-table { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.db-table .table th { height: 40px; background: var(--color-gray-50); color: var(--color-text-secondary); font: 500 12px/20px var(--font-family); }
.db-table .table td { height: 48px; font: 500 14px/24px var(--font-family); color: var(--color-text-primary); }
.db-table__empty { color: var(--color-text-secondary); font: var(--text-small) !important; text-align: center; }
.db-seller { display: inline-flex; align-items: center; gap: 8px; font: var(--text-small); color: var(--color-text-primary); }
.db-seller:hover { text-decoration: none; color: var(--color-text-brand); }
.db .db-avatar { width: 20px; height: 20px; font: 500 11px/16px var(--font-family); }
.db-cell2 { display: flex; flex-direction: column; color: inherit; }
a.db-cell2:hover { text-decoration: none; }
a.db-cell2:hover b { color: var(--color-text-brand); }
.db-cell2 b { font: 500 14px/24px var(--font-family); color: var(--color-text-primary); }
.db-cell2 span { font: var(--text-small); color: var(--color-text-secondary); }
.db-cell2--none b { color: var(--color-text-primary); }
.db-table .badge { font: 400 12px/20px var(--font-family); }
.db-mytable td { height: 48px; }
.db-note { font: var(--text-small); color: var(--color-text-muted); margin: 0 0 8px; }

/* export dialog (Figma 457:3391 pattern) */
.db-export { width: min(560px, 100%); }
.db-export__sub { font: var(--text-small); color: var(--color-text-secondary); margin-top: 4px; }
.db-export__body { display: flex; flex-direction: column; gap: 20px; }
.db-export__group { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.db-export__group legend, .db-export__label { font: var(--text-body-strong); padding: 0; margin-block-end: 4px; }
.db-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font: var(--text-body); }
.db-radio input { width: 18px; height: 18px; margin: 0; accent-color: var(--color-brand-navy); }
.db-export__scope { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-gray-50); }
.db-export__scope b { font: var(--text-body); }
.db-export__scope span { font: var(--text-small); color: var(--color-text-secondary); }
.db-export__info { display: flex; gap: 10px; padding: 16px; border: 1px solid var(--color-info, #2563EB); border-radius: var(--radius-md); background: var(--tone-blue-bg); }
.db-export__info > .icon { width: 20px; height: 20px; color: var(--color-info, #2563EB); flex: none; }
.db-export__info b { font: var(--text-body-strong); }
.db-export__info p { margin: 4px 0 0; font: var(--text-small); color: var(--color-text-secondary); }