/* ==========================================================================
   REPORTS — the hub, one report, its charts, and the print view
   --------------------------------------------------------------------------
   Owned by the reports workstream.
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .rep- so it cannot collide with another area's.

   The narrow-screen rules are written `@media screen and (max-width: …)` on purpose: an A4
   page is about 680 CSS pixels wide, which a plain max-width query would take for a phone and
   print the table as a stack of cards.

   Contents
     1  Hub               a card for each report, by kind of question
     2  Report page       export buttons, period, filters, results, loading
     3  Headline figures  the tiles, on a phone
     4  Table             one markup, a table wide and a card per row narrow
     5  Charts            bars and columns, drawn with CSS
     6  Print view        the sheet, on screen and on paper
   ========================================================================== */


/* ==========================================================================
   1 · HUB
   ========================================================================== */

.rep-group { display: flex; flex-direction: column; gap: var(--space-3); }

.rep-group__title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.rep-hub {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-4);
}

.rep-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-block-size: var(--tap-target-min);
  padding: var(--space-5);
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.rep-card:hover {
  text-decoration: none;
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-md);
}

.rep-card__icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: var(--radius-lg);
}

.rep-card__icon svg { inline-size: 1.375rem; block-size: 1.375rem; }

.rep-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
}

.rep-card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.rep-card__text { font-size: var(--font-size-sm); color: var(--color-text-muted); }

.rep-card__views {
  margin-block-start: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.rep-card__go {
  flex: 0 0 auto;
  align-self: center;
  color: var(--color-text-subtle);
}


/* ==========================================================================
   2 · REPORT PAGE
   ========================================================================== */

.rep-export {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Five presets, longer in English than in Arabic, do not fit one row of a phone. The control
   wraps onto a second line rather than scrolling sideways and hiding the ones it ran out of
   room for — see the same decision in applications.css. */
.rep-period { min-inline-size: 0; max-inline-size: 100%; }

.rep-period .tabs {
  flex-wrap: wrap;
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow: visible;
  border-radius: var(--radius-xl);
}

.rep-range {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rep-dates {
  grid-template-columns: repeat(2, minmax(0, 11rem));
}

.rep-busy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

/* What is on screen is dimmed while the next answer is on its way, and cannot be clicked: a
   press on a row that is about to be replaced would land on the wrong thing. */
.rep-results {
  transition: opacity var(--duration-base) var(--ease-standard);
}

.rep-results.rep-is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.rep-views { min-inline-size: 0; max-inline-size: 100%; }

.rep-views .tabs {
  flex-wrap: wrap;
  inline-size: fit-content;
  max-inline-size: 100%;
  overflow: visible;
  border-radius: var(--radius-xl);
}

/* A view that is a position as of now, not a period, says so on its own tab. */
.rep-now {
  display: inline-flex;
  align-items: center;
  margin-inline-start: var(--space-1);
  color: var(--color-info);
}

.rep-now svg { inline-size: 0.875rem; block-size: 0.875rem; }

.rep-more {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rep-kpi-flag { margin-block-start: var(--space-2); }

.rep-body { display: flex; flex-direction: column; gap: var(--space-5); }

/* Most reports have five headline figures. The shared grid's floor (14rem) puts four on a row and
   a fifth alone beneath them. With five, the tiles are made compact — the icon above the figure
   instead of beside it, a smaller figure — so that all five fit on one row where there is room, and
   they fall back through four, three and two to one as the screen narrows. */
.rep-kpis--dense { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }

.rep-kpis--dense .stat-tile {
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}

.rep-kpis--dense .stat-tile__icon { inline-size: 2.25rem; block-size: 2.25rem; }
.rep-kpis--dense .stat-tile__value { font-size: var(--font-size-xl); }

@media screen and (max-width: 40rem) {
  .rep-export { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
  .rep-export .btn { inline-size: 100%; }
  .rep-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   3 · HEADLINE FIGURES, ON A PHONE
   The shared tile stacks to one full-width card per number. Five or six of those is a long
   scroll before the table, so on a phone the figures sit two to a row, each a compact card.
   ========================================================================== */

@media screen and (max-width: 40rem) {
  .rep-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }

  .rep-kpis .stat-tile {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
  }

  .rep-kpis .stat-tile__icon { inline-size: 2rem; block-size: 2rem; }
  .rep-kpis .stat-tile__value { font-size: var(--font-size-xl); }
  .rep-kpis .stat-tile__hint { font-size: var(--font-size-2xs); line-height: var(--line-height-snug); }
}


/* ==========================================================================
   4 · TABLE
   Numbers are set left to right in every language (their cell says dir="ltr"), and
   isolated, so a minus sign and a decimal point keep their place in an Arabic row.
   ========================================================================== */

/* A figure or a date is one piece: "30 Jul" over "2026" is not a date anyone can scan down. */
.rep-num {
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* Figures line up on the end edge of their column. The shared table sets `text-align: start` on
   every td (a more specific selector than its own .table__num), so the column has to say it
   again here. */
.rep-table th.table__num,
.rep-table td.table__num { text-align: end; }

.rep-tablewrap { margin-block-start: var(--space-4); }

.rep-chartwrap + .rep-tablewrap { margin-block-start: var(--space-5); }

/* A table cannot be read at 375px. Under 48rem every row becomes a card: its first cell is the
   card's title, the rest sit two to a line each under its own label, and the heading row —
   which the labels replace — is kept for assistive technology but not painted. */
@media screen and (max-width: 47.99rem) {
  .rep-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .rep-table,
  .rep-table tbody,
  .rep-table tfoot { display: block; }

  .rep-table tbody tr,
  .rep-table tfoot tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-hairline);
  }

  .rep-table tbody tr:last-child { border-block-end: 0; }

  .rep-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-inline-size: 0;
    padding: 0;
    text-align: start;
    border: 0;
  }

  .rep-table td::before {
    content: attr(data-label);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-subtle);
  }

  /* The first cell names the row; its own label would only repeat what the card is — unless
     it is a date, which could be a day, a week or a deadline, and the label says which. */
  .rep-table td.rep-cell-main {
    grid-column: 1 / -1;
    font-weight: var(--font-weight-semibold);
  }

  .rep-table td.rep-cell-main:not(.rep-cell-main--dated)::before { display: none; }

  .rep-table th.table__num,
  .rep-table td.table__num { text-align: start; }
}


/* ==========================================================================
   5 · CHARTS
   Drawn with CSS so they print, follow the theme and need no script. The writing direction does
   the mirroring: a row of columns runs right to left on an Arabic page by itself.
   ========================================================================== */

.rep-chartwrap { margin-block-start: var(--space-2); }

/* -- bars ---------------------------------------------------------------------------------- */

.rep-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rep-bar {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.rep-bar__label {
  min-inline-size: 0;
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
}

.rep-bar__track {
  display: block;
  block-size: 0.75rem;
  overflow: hidden;
  background: var(--color-fill);
  border-radius: var(--radius-pill);
}

.rep-bar__fill {
  display: block;
  inline-size: var(--rep-fill, 0%);
  block-size: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.rep-bar__value {
  min-inline-size: 4rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-align: end;
}

@media screen and (max-width: 40rem) {
  .rep-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'label value'
      'track track';
    row-gap: var(--space-1);
  }

  .rep-bar__label { grid-area: label; }
  .rep-bar__value { grid-area: value; }
  .rep-bar__track { grid-area: track; }
}

/* -- columns ------------------------------------------------------------------------------- */

.rep-cols {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
}

.rep-cols__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rep-cols__key { display: inline-flex; align-items: center; gap: var(--space-2); }

.rep-cols__swatch {
  display: inline-block;
  inline-size: 0.75rem;
  block-size: 0.75rem;
  border-radius: var(--radius-xs);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* A series is drawn in its tone: blue for the figure the chart is about, green for what was
   completed, amber for what went back. */
.rep-cols__swatch--info,
.rep-cols__bar--info { background: var(--color-primary); }

.rep-cols__swatch--success,
.rep-cols__bar--success { background: var(--color-success); }

.rep-cols__swatch--warning,
.rep-cols__bar--warning { background: var(--color-warning); }

.rep-cols__swatch--danger,
.rep-cols__bar--danger { background: var(--color-danger); }

.rep-cols__swatch--default,
.rep-cols__bar--default { background: var(--color-text-subtle); }

.rep-cols__peak { margin-inline-start: auto; }

/* Room beneath the plot for the labels, which hang below it. Three hairlines — the base, half
   and the peak — are the scale; the peak is written in the legend. */
.rep-cols__plot {
  display: flex;
  align-items: stretch;
  gap: 2px;
  block-size: 11rem;
  margin-block-end: var(--space-6);
  background-image: linear-gradient(to bottom, var(--color-border-subtle) 1px, transparent 1px);
  background-size: 100% 50%;
  border-block-end: 1px solid var(--color-border-strong);
}

.rep-cols__col {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-inline-size: 0;
}

.rep-cols__bars {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
}

.rep-cols__bar {
  flex: 1 1 0;
  max-inline-size: 1.25rem;
  block-size: var(--rep-h, 0%);
  border-start-start-radius: var(--radius-xs);
  border-start-end-radius: var(--radius-xs);
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* Centred under its column and free to run past it: only every few columns carry one. Both
   inline edges are pulled out by the same amount, so it is centred in either direction. */
.rep-cols__label {
  position: absolute;
  inset-block-start: calc(100% + var(--space-1));
  inset-inline: -1.5rem;
  font-size: var(--font-size-2xs);
  text-align: center;
  white-space: nowrap;
  color: var(--color-text-subtle);
  pointer-events: none;
}


/* On a phone the plot is only as wide as the screen, and a dozen names would run into each other:
   the view keeps about five of them and marks the rest "minor". The columns themselves — and the
   table under the chart, which has every figure — are unchanged. */
@media screen and (max-width: 40rem) {
  .rep-cols__label--minor { visibility: hidden; }
}


/* ==========================================================================
   6 · PRINT VIEW
   One page of A4, nothing around it. On screen it is a sheet of paper on the page background, so
   the person sees what will come out; on paper the sheet is the page. The page size is set in the
   view itself (an @page rule here would apply to every page that loads this file).
   ========================================================================== */

.rep-sheet-body {
  margin: 0;
  padding: var(--space-5);
  color: var(--color-text);
  background: var(--color-bg);
}

.rep-sheet-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  max-inline-size: 210mm;
  margin-inline: auto;
  margin-block-end: var(--space-4);
}

.rep-sheet {
  max-inline-size: 210mm;
  margin-inline: auto;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}

.rep-sheet__head {
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 2px solid var(--color-primary);
}

.rep-sheet__office {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.rep-sheet__title {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
}

.rep-sheet__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-2) var(--space-5);
  margin: 0;
}

.rep-sheet__facts dt {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
}

.rep-sheet__facts dd {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.rep-sheet__section { margin-block-end: var(--space-6); }

.rep-sheet__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-lg);
}

.rep-sheet__note {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.rep-sheet__empty { color: var(--color-text-muted); }

.rep-sheet__foot {
  padding-block-start: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  border-block-start: 1px solid var(--color-hairline);
}

.rep-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rep-figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  break-inside: avoid;
}

.rep-figure__label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.rep-figure__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.rep-figure__hint { font-size: var(--font-size-2xs); color: var(--color-text-subtle); }

/* The sheet on paper: no page background, no frame, no shadow — and the table in plain rows. A
   long table runs on to the next page with its heading row repeated and no row cut in two.
   The application's own print rules give every table wrapper a black frame and forbid a break
   inside it (both !important), which would push a whole table to the next page and leave this
   one half empty; the sheet takes both back, with the specificity to win. */
@media print {
  .rep-sheet-body { padding: 0; background: transparent; }

  .rep-sheet {
    max-inline-size: none;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .rep-sheet .rep-table { font-size: 9pt; }
  /* Close rows: a list of two hundred is nineteen pages at screen padding. */
  .rep-sheet .rep-table th,
  .rep-sheet .rep-table td {
    padding-block: var(--space-1);
    padding-inline: var(--space-2);
  }
  .rep-sheet .rep-tablewrap {
    overflow: visible;
    border: 0 !important;
    box-shadow: none !important;
    break-inside: auto !important;
  }

  .rep-sheet .rep-table thead { display: table-header-group; }
  /* The total is the end of the table, once — not a row printed at the foot of every page. */
  .rep-sheet .rep-table tfoot { display: table-row-group; }
  .rep-sheet .rep-table tr { break-inside: avoid; }
  .rep-sheet .rep-bars,
  .rep-sheet .rep-cols { break-inside: avoid; }
  .rep-sheet__section { break-inside: auto; }
  .rep-sheet__head { break-after: avoid; }
}