/* polish.css - visual clean-up layered on top of the dashboard bundle (no logic changes).
 * Loaded after the bundle's own styles (scripts/build.py). The bundle sets most styles inline,
 * so overrides use !important. Selectors rely on the bundle's stable class names
 * (fg-root, fg-kpi, fg-alert, Tailwind utilities) - re-check them if dashboard.html is rebuilt.
 */

/* 1. Summary header (KPI tiles, rates, alerts) scrolls away with the page instead of
 *    staying pinned: pinned, it took ~520 px of a 760 px laptop screen. */
.fg-root .flex-1.min-w-0 > .z-30 {
  position: static !important;
}

/* 2. KPI tiles: one row of five from 1024 px (was two columns until 1280 px) */
@media (min-width: 1024px) {
  .fg-root .grid.grid-cols-2.xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  /* the bundle switches the dividers to "one row" only at 1280 px - do it here too */
  .fg-root .grid.grid-cols-2.xl\:grid-cols-5 > .fg-sum-cell:nth-child(n+3) { border-top-width: 0 !important; }
  .fg-root .grid.grid-cols-2.xl\:grid-cols-5 > .fg-sum-cell:not(:first-child) { border-left-width: 1px !important; }
}
.fg-root .fg-kpi {
  padding: 10px 16px 12px !important;
  justify-content: flex-start !important;
}
.fg-root .fg-kpi > div:nth-child(1) {           /* tile label */
  font-size: 12px !important;
  letter-spacing: 0.01em;
}
.fg-root .fg-kpi > div:nth-child(2) {           /* big number */
  font-size: 24px !important;
  margin: 2px 0 4px;
}
.fg-root .fg-kpi > div:nth-child(3) {           /* explanation under the number */
  font-size: 12px !important;
  line-height: 1.4 !important;
}
/* "7 d +$75.4k +157%, 30 d +$47k +62%" trend line: hidden - the same trend is in Financials */
.fg-root .fg-kpi > div:nth-child(3) > span.fg-num[style*="display: block"] {
  display: none !important;
}
/* overdue lines stay visible and stand out a little more */
.fg-root .fg-kpi > div:nth-child(3) > span[style*="179, 56, 42"] {
  font-weight: 600;
  margin-top: 2px;
}

/* 3. Exchange-rate line: the USD note no longer takes a line of its own on laptops */
.fg-root .flex-1.min-w-0 > .z-30 > div:nth-child(2) {
  row-gap: 2px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
.fg-root .flex-1.min-w-0 > .z-30 > div:nth-child(2) > .ml-auto {
  font-size: 11.5px !important;
  text-align: right;
}

/* 4. Alerts: the description gets two lines instead of being cut with "..." */
.fg-root .fg-alert {
  width: 272px !important;
}
.fg-root .fg-alert > .truncate:last-child {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.35;
}

/* 5. Module heading: title and description first, controls on their own row below
 *    (on wide screens the title used to sink to the bottom next to the controls) */
.fg-root main > .flex.flex-col.justify-between:first-child {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 18px !important;
}
.fg-root main > .flex.flex-col.justify-between:first-child > div:first-child > p {
  margin-top: 4px;
}

/* 6. Phones: a calmer summary - smaller numbers, tighter tiles */
@media (max-width: 640px) {
  .fg-root .fg-kpi {
    padding: 8px 12px 10px !important;
  }
  .fg-root .fg-kpi > div:nth-child(2) {
    font-size: 21px !important;
  }
  .fg-root .flex-1.min-w-0 > .z-30 > div:nth-child(2) > .ml-auto {
    display: none !important;             /* "Figures below are in USD..." */
  }
}