/* /report «تقريري الأسبوعي» (Task weekly-report, part a): a week's report and his other reports; since part b
   «مشاركة تقريري» under them, and /report/shared, a link's page, drawn the same. Right to left first: logical properties
   only. Colours and sizes come from tokens.css only. A number's move from the week before is an arrow (its shape says
   it, and words for screen readers), never a colour alone: up the success colour, down and the same muted (a quieter
   week isn't a fault). Nothing moves. */

/* the heading, its lead, its notice (when there's one) and the body, a gap between them */
.report-page,
.report-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.report-page > h1,
.report-lead {
  margin: 0;
}

.report-lead,
.report-help {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.report-help {
  margin: 0;
}

.report-empty {
  margin: 0;
}

/* ── A report ── */

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

.report-card h2,
.report-weeks h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.report-card h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-body);
}

.report-top {
  margin: 0;
  font-size: var(--font-size-lead);
  font-weight: 700;
}

/* the field with most to gain, «تدرّب» beside it (under it when there's no room) */
.report-grow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border-inline-start: 4px solid var(--color-on);
  margin: 0;
  border-radius: var(--radius);
  background: var(--color-info-soft);
}

.report-grow p {
  margin: 0;
}

/* the numbers: it scrolls sideways in its box when it's wider than the screen, the page doesn't */
.report-scroll {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.report-table {
  inline-size: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: var(--space-2) var(--space-3);
  text-align: start;
  vertical-align: middle;
}

.report-table thead th {
  border-block-end: 1px solid var(--color-border);
  background: var(--color-raised);
  color: var(--color-quiet);
  font-size: var(--font-size-small);
  font-weight: 400;
}

.report-table tbody tr + tr {
  border-block-start: 1px solid var(--color-border);
}

.report-table tbody th {
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* a number and its arrow kept together */
.report-now,
.report-before {
  white-space: nowrap;
}

.report-now {
  font-weight: 700;
}

.report-before {
  color: var(--color-muted);
}

.report-value {
  gap: var(--space-1);
}

.report-trend {
  inline-size: 1em;
  block-size: 1em;
  color: var(--color-muted);
}

.report-trend.is-up {
  color: var(--color-success);
}

/* «جاهزيتك» that week and the week before, side by side (one under the other when there's no room) */
.report-readiness-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: 0;
}

.report-readiness-pair dt {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.report-readiness-pair dd {
  margin: 0;
  font-weight: 700;
}

.report-paper-list,
.report-week-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-paper-list li {
  overflow-wrap: anywhere;
}

/* ── His reports ── */

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

.report-week {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--color-border);
}

.report-week:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.report-week.is-shown .report-week-days {
  font-weight: 700;
}

/* ── «مشاركة تقريري» (part b): the email, and his link ── */

.report-share,
.report-share-part,
.report-share-on {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.report-share h2 {
  margin: 0;
  font-size: var(--font-size-card-title);
}

.report-share h3 {
  margin: 0;
  font-size: var(--font-size-body);
}

.report-share-part + .report-share-part {
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
}

.report-share .field-hint,
.report-share .form-links {
  margin: 0;
}

/* «شارك تقريري» alone isn't stretched across the card */
.report-share-part > .button {
  align-self: flex-start;
}

/* the link: the whole of it to see and select, left to right, never wider than the card */
.report-share-field {
  inline-size: 100%;
  min-inline-size: 0;
  font-size: var(--font-size-small);
}

.report-share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* «إيقاف الرابط» and «أوقف الرابط»: framed in red, their words in the text's colour, both readable in either theme */
.report-share-stop {
  border-color: var(--color-danger);
  background: var(--color-surface);
  color: var(--color-text);
}

.report-share-stop:hover {
  background: var(--color-danger-soft);
}

/* «… أتوقفه؟», under the link's buttons */
.report-share-ask {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
}

.report-share-ask p {
  margin: 0;
}

/* a phone: the cards' room for the table */
@media (max-width: 30rem) {
  .report-card,
  .report-weeks,
  .report-share {
    padding: var(--space-4);
  }

  .report-table th,
  .report-table td {
    padding: var(--space-2);
  }
}