/* ==========================================================================
   DASHBOARD — KPI cards, stats, charts, activity lists, quick actions
   ========================================================================== */

.kpi-row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:14px;
}
.kpi{
  border-radius:var(--r-md);border:1px solid transparent;padding:15px 16px 14px;position:relative;
  transition:transform .16s,box-shadow .16s;cursor:pointer;
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.kpi h4{margin:0 0 10px;font-size:14.5px;font-weight:600;}
.kpi .row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
/* Every KPI figure is 24px. min-width:0 and overflow-wrap are the backstop:
   an amount that cannot fit wraps inside its card rather than pushing the
   artwork out through the right edge, which is what used to happen. */
.kpi .val{
  font-family:var(--font-en);font-size:24px;font-weight:700;
  color:#12261a;letter-spacing:-.5px;min-width:0;overflow-wrap:anywhere;
}

/* Total asset value only.

   This card carries the longest figure on the dashboard ("Tk 12,50,00,000",
   155px at 24px) and gets the same room as every other card: card width less
   32px of padding, the 46px artwork and the 10px gap. In the five-column band
   that is 111-167px, so the amount ran out of space while the other four cards
   were still comfortable.

   Rather than shrink this figure out of step with its neighbours, the artwork
   moves toward the right edge and hands the space it gives up to the amount:
   -15px pulls its box into the card's own 16px right padding, and closing the
   flex gap adds 10px more, so the amount gains 25px and keeps its 24px size.

   Those numbers look tighter than they are. The icon's viewBox is 46 wide and
   its artwork spans x=10 to x=36, so the box carries 10px of built-in
   whitespace on each side: with the box 1px off the border and no flex gap, the
   visible cylinder still clears the card border by ~11px and the amount by
   ~10px. Scoped to .kpi--asset, so the other four cards are untouched. */
.kpi--asset .row{gap:0;}
.kpi--asset .art{margin-right:-15px;}
.kpi .art{width:46px;height:46px;flex:none;display:grid;place-items:center;}
.kpi .delta{margin-top:12px;font-size:12.5px;color:var(--muted);}
.kpi .delta b{font-family:var(--font-en);font-weight:700;}
.kpi--asset{background:#eaf6ee;border-color:#cfe8d8;}
.kpi--asset h4{color:var(--green-700);}
.kpi--income{background:#ecf3fd;border-color:#cfe0f7;}
.kpi--income h4{color:#1b5fb8;}
.kpi--expense{background:#fdefee;border-color:#f7d3d0;}
.kpi--expense h4{color:#c23e34;}
.kpi--profit{background:#fdf6e7;border-color:#f3e2bb;}
.kpi--profit h4{color:#a9750a;}
.kpi--solar{background:#f4efFD;border-color:#e0d6f7;}
.kpi--solar h4{color:#6b3fc4;}
.up{color:var(--success);} .down{color:var(--danger);}

.stat-row{
  display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;margin-bottom:16px;
}
.stat{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:13px 14px;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s;
  display:flex;flex-direction:column;justify-content:space-between;min-height:104px;
}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0d5;}
.stat .t{font-size:13.5px;font-weight:600;color:#3f4d45;}
.stat .mid{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 2px;}
.stat .n{font-family:var(--font-en);font-size:21px;font-weight:700;color:#12261a;white-space:nowrap;}
/* Unit suffix on the land cards ("85 acres"): same line, same baseline, but
   dropped to ~57% of the figure so the number stays the thing you read first. */
.stat .n small{
  font-family:var(--font-bn);font-size:12px;font-weight:600;
  line-height:1;letter-spacing:0;vertical-align:baseline;margin-left:3px;
}
.stat .n small:first-child{margin-left:0;margin-right:3px;}
/* Holds only an emoji, so it is pinned to the emoji stack rather than
   inheriting the Bengali/Latin text font. See --font-emoji in tokens.css. */
.stat .emoji{
  font-family:var(--font-emoji);font-size:24px;line-height:1;font-weight:400;
  font-variant-emoji:emoji;font-style:normal;flex:none;
}
.stat .s{font-size:12px;color:var(--muted);}
.stat--cow .t{color:#3f4d45;} .stat--pond .t{color:#0e7490;}
.stat--emp .t{color:#1d4ed8;} .stat--land .t{color:#7c4dcc;} .stat--lease .t{color:#15803d;}

.grid-3{display:grid;grid-template-columns:1.32fr 1fr 1.08fr;gap:14px;margin-bottom:14px;}
.grid-b{display:grid;grid-template-columns:1.18fr .84fr 1.32fr;gap:14px;}

/* Charts */
.chart-legend{display:flex;gap:18px;justify-content:center;margin-bottom:4px;}
.chart-legend span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#42504a;}
.chart-legend i{width:12px;height:12px;border-radius:3px;display:block;}
.chart-box{position:relative;width:100%;}
.chart-box svg{display:block;width:100%;height:auto;overflow:visible;}
.bar{transition:opacity .12s;cursor:pointer;}
.bar:hover{opacity:.72;}
.chart-tip{
  position:absolute;pointer-events:none;background:#12261a;color:#fff;border-radius:8px;
  padding:8px 11px;font-size:12.5px;line-height:1.5;box-shadow:var(--shadow-lg);
  opacity:0;transition:opacity .12s;transform:translate(-50%,-118%);white-space:nowrap;z-index:20;
}
.chart-tip.show{opacity:1;}
.chart-tip b{font-family:var(--font-en);}
/* Income Sources (this month).

   The donut sits beside its legend, and its size must not depend on how long
   the legend labels happen to be. It used to depend on exactly that.

   The row was flex-wrap:wrap, the chart was `flex:1;min-width:180px` and the
   legend was `flex:none`. A non-shrinkable legend plus a 180px chart minimum
   made the row's minimum width 180 + 14 + the legend's natural width. The
   English labels are wider than their Bengali equivalents (the legend is
   ~170px against ~139px), so that minimum overran the card sooner and the
   legend dropped onto a second line. The chart, alone on the first line and
   still flex:1, then stretched to the full card width - so the donut grew to
   the width of the card and the card grew with it. At 1600px the card went
   from 376px tall with a 192px donut in Bengali to 606px tall with a 345px
   donut in English; narrower viewports wrapped in both languages and were
   worse still (a 793px donut in a 865px-tall card at 1024px).

   Now the chart is `flex:0 0 150px` - a fixed basis with no grow and no
   shrink - so the donut is always exactly 150px wide (the SVG viewBox is
   square, so its height follows) in every language and at every width. The
   legend takes the remaining space and wraps a long label onto a second line
   instead of displacing the chart. 150px is the largest basis that still
   leaves room for the legend's own minimum in the narrowest side-by-side
   case (the 314px card at 1366px); a larger one overflows there.

   Keep these four together: flex-wrap:nowrap so the legend cannot escape to
   its own line, flex-shrink:0 on the chart, and min-width:0 on both the
   legend and its buttons so the text wraps rather than forcing the row wider.
   Restoring any one of the old values brings the old behaviour back. */
.donut-wrap{display:flex;align-items:center;gap:14px;flex-wrap:nowrap;}
.donut-wrap .chart-box{flex:0 0 150px;width:150px;}
.donut-legend{display:flex;flex-direction:column;gap:11px;flex:1 1 auto;min-width:0;}
.donut-legend button{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#3b4941;transition:.12s;text-align:left;min-width:0;}
.donut-legend button:hover{color:var(--green-700);}
.donut-legend i{width:13px;height:13px;border-radius:4px;flex:none;}
.arc{cursor:pointer;transition:transform .16s,opacity .16s;transform-origin:center;}
.arc:hover,.arc.hot{opacity:.85;}

/* Activities / alerts */
.act{
  display:flex;align-items:center;gap:11px;padding:9px 0;width:100%;text-align:left;
  border-radius:9px;transition:background .12s;
}
.act:hover{background:#f7faf8;}
/* The tile holds a single emoji. font-size, line-height and font-family are
   all stated explicitly so the glyph is identical in Bengali and English and
   does not move when the interface re-renders. Do not drop line-height:
   without it the box falls back to the text font's metrics and shifts when
   the webfont loads. */
.act .a-ico{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--font-emoji);font-size:15px;line-height:1;font-weight:400;
  font-variant-emoji:emoji;font-style:normal;
}
.act .a-txt{flex:1;min-width:0;font-size:13.5px;color:#2c3a32;}
.act .a-time{font-size:12px;color:var(--muted-2);flex:none;}
.alert-row{
  display:flex;gap:11px;padding:12px 13px;border-radius:10px;margin-bottom:10px;width:100%;
  text-align:left;transition:.14s;border:1px solid transparent;align-items:flex-start;
}
.alert-row:hover{transform:translateX(2px);}
.alert-row .al-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;}
.alert-row b{display:block;font-size:13.5px;font-weight:600;color:#22302a;}
.alert-row span{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.alert-row.danger{background:var(--danger-bg);border-color:#f8d7d4;}
.alert-row.danger .al-ico{background:var(--danger);}
.alert-row.warn{background:var(--warning-bg);border-color:#f6e6c2;}
.alert-row.warn .al-ico{background:var(--warning);}
.alert-row.info{background:var(--info-bg);border-color:#d3e2fb;}
.alert-row.info .al-ico{background:var(--info);}

.task-row{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border:1px solid var(--border);
  border-radius:10px;margin-bottom:10px;transition:.14s;width:100%;text-align:left;
}
.task-row:hover{border-color:#cfe0d5;background:#fafcfb;}
.task-row .k-ico{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;}
.task-row .k-lbl{flex:1;font-size:14px;color:#33413a;}
.task-row .k-num{font-family:var(--font-en);font-size:17px;font-weight:700;color:#16241c;}

.qa-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.qa{
  border:1px solid var(--border);border-radius:11px;padding:15px 8px 12px;text-align:center;
  transition:.16s;display:flex;flex-direction:column;align-items:center;gap:9px;background:#fff;
}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:#cfe0d5;}
.qa .q-ico{width:34px;height:34px;display:grid;place-items:center;}
.qa .q-lbl{font-size:12.5px;font-weight:500;color:#3b4941;line-height:1.4;}
.qa--g{background:#f1f9f3;} .qa--b{background:#eff5fd;} .qa--p{background:#f7f2fd;}
.qa--o{background:#fef6ec;} .qa--t{background:#eefafa;} .qa--y{background:#fdfaea;}