/* crm-reports.css — the tabbed CRM reports frame.
 *
 * THE COLOURS ARE OUR OWN, ON PURPOSE.
 *
 * The first version reached for the dashboard's tokens with a fallback —
 * `var(--color-heading, #1f2937)`. That token does not exist on this fork, so
 * every fallback won: the ACTIVE tab was painted near-black, which on the dark
 * theme is a tab you cannot read, while the inactive ones stayed legible. The
 * selected thing was the invisible one.
 *
 * A fallback is not a light/dark strategy — it is one colour with an excuse. So
 * this file does what every other overlay here does: declares its own tokens and
 * overrides them for dark explicitly, and never guesses at the host's.
 */

.crm-rep {
  --cr-ink: #1d1b1c;
  --cr-muted: #55606c;
  --cr-faint: #6b7480;
  --cr-line: #e8ebe4;
  --cr-card: #ffffff;
  --cr-soft: #fafbf8;
  /* The active tab's TEXT and its UNDERLINE are two different colours, and the
     mistake is to make them one. Measured on white, the brand green is 3.78:1 —
     under the 4.5 floor and LESS readable than the inactive grey beside it,
     which is the same "the selected tab is the invisible one" bug in the other
     theme. So on light the text is ink and only the underline is green; on dark
     the green is bright enough to carry both. */
  --cr-tab-on: #1d1b1c;
  --cr-brand-line: #6a8f16;

  margin-top: 24px;
  border-top: 1px solid var(--cr-line);
  padding-top: 16px;
  color: var(--cr-ink);
}

:root.dark .crm-rep,
.dark .crm-rep,
[data-theme="dark"] .crm-rep {
  --cr-ink: #e8eaed;
  --cr-muted: #98a1ad;
  --cr-faint: #78828e;
  --cr-line: #2c3138;
  --cr-card: #1b1e23;
  --cr-soft: #22262c;
  /* Bright enough to read as "this is the one you are on" against #16191c —
     the dark theme is where the unreadable active tab came from. */
  --cr-tab-on: #d4fb08;
  --cr-brand-line: #d4fb08;
}

.crm-rep * { box-sizing: border-box; }

/* ---- tabs ---- */

.crm-rep__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--cr-line);
}

.crm-rep__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--cr-muted);
  cursor: pointer;
  white-space: nowrap;
  margin-bottom: -1px;
}

.crm-rep__tab:hover { color: var(--cr-ink); }

/* The selected tab must be the MOST readable thing in the strip, not the least.
   Weight carries it as well as colour, so it still reads as selected if a host
   stylesheet ever overrides the colour. */
.crm-rep__tab.is-on {
  color: var(--cr-tab-on);
  font-weight: 700;
  border-bottom-color: var(--cr-brand-line);
}

/* ---- filters ---- */

.crm-rep__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.crm-rep__select,
.crm-rep__date {
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
  background: var(--cr-card);
  color: var(--cr-ink);
}

/* A native date field paints its own icon in the browser's colour, which on a
   dark card is a black calendar on a near-black box. */
:root.dark .crm-rep__date::-webkit-calendar-picker-indicator,
.dark .crm-rep__date::-webkit-calendar-picker-indicator,
[data-theme="dark"] .crm-rep__date::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.crm-rep__range {
  font-size: 13px;
  color: var(--cr-muted);
}

.crm-rep__spacer { flex: 1 1 auto; }

.crm-rep__export {
  appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid var(--cr-line);
  background: var(--cr-card);
  color: var(--cr-ink);
  cursor: pointer;
}

.crm-rep__export:hover:not(:disabled) { border-color: var(--cr-brand-line); }
.crm-rep__export:disabled { opacity: 0.6; cursor: default; }

/* ---- sections ---- */

.crm-rep__sec { margin-bottom: 28px; }

.crm-rep__sec-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--cr-ink);
}

.crm-rep__sec-note,
.crm-rep__asof {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 12px;
  color: var(--cr-muted);
  max-width: 80ch;
}

.crm-rep__sub {
  font-size: 13px;
  font-weight: 600;
  margin: 18px 0 6px;
  color: var(--cr-ink);
}

.crm-rep__empty {
  font-size: 13px;
  color: var(--cr-muted);
  padding: 20px 0;
  margin: 0;
}

/* ---- tiles ---- */

.crm-rep__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.crm-rep__tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
  background: var(--cr-soft);
}

.crm-rep__tile-label {
  font-size: 11px;
  color: var(--cr-muted);
}

.crm-rep__tile-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--cr-ink);
}

.crm-rep__tile-note {
  font-size: 11px;
  color: var(--cr-faint);
  line-height: 1.5;
}

/* ---- tables ----
   A table is the one thing on this page allowed to scroll sideways: squeezing
   eight money columns into a phone makes every one of them unreadable. */

.crm-rep__scroll {
  overflow-x: auto;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
  background: var(--cr-card);
}

.crm-rep__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--cr-ink);
}

.crm-rep__table th,
.crm-rep__table td {
  padding: 8px 12px;
  text-align: start;
  white-space: nowrap;
  border-bottom: 1px solid var(--cr-line);
}

.crm-rep__table th {
  font-weight: 600;
  font-size: 11px;
  color: var(--cr-muted);
  background: var(--cr-soft);
}

.crm-rep__table tbody tr:last-child td { border-bottom: 0; }

/* Numbers line up on their own edge, always, in both writing directions —
   otherwise a column of amounts cannot be compared by eye. */
.crm-rep__table th.is-num,
.crm-rep__table td.is-num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* ---------- the monthly goal dialog ----------
   Small enough not to need a component: one number a month, two boxes, and a
   line that says what went wrong if it does. */

.crm-rep__scrim {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.crm-rep__dialog {
  background: #fff;
  border-radius: 8px;
  padding: 20px 22px 18px;
  width: min(420px, 100%);
  box-shadow: 0 20px 48px rgba(16, 24, 40, .22);
  color: #101828;
}

.crm-rep__dialog h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; }
.crm-rep__dialoghint { margin: 0 0 16px; font-size: 12.5px; color: #667085; }
.crm-rep__field { display: block; margin-bottom: 12px; }
.crm-rep__field > span { display: block; font-size: 12px; color: #667085; margin-bottom: 5px; font-weight: 600; }
.crm-rep__fieldline { display: flex; align-items: center; gap: 8px; }

.crm-rep__input {
  flex: 1;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  color: #101828;
}

.crm-rep__input:focus { outline: 2px solid var(--crm-ink); outline-offset: -1px; border-color: var(--crm-ink); }
.crm-rep__unit { font-size: 12px; color: #667085; min-width: 48px; }
.crm-rep__dialognote { margin: 4px 0 0; font-size: 12px; color: #b42318; min-height: 16px; }
.crm-rep__dialogacts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.crm-rep__btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #d0d5dd;
  background: #fff;
  color: #101828;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.crm-rep__btn:hover { background: #f9fafb; }
.crm-rep__btn.is-primary { background: #d4fb08; border-color: #d4fb08; color: #000; }
.crm-rep__btn.is-primary:hover { background: #1c34cc; }
.crm-rep__btn[disabled] { opacity: .6; cursor: default; }

/* ---------- a switch per report section ---------- */

.crm-rep__switchrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 2px;
  font-size: 13px;
  cursor: pointer;
  color: #101828;
}

.crm-rep__switch {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #d0d5dd;
  position: relative;
  cursor: pointer;
  flex: none;
  transition: background .15s ease;
}

.crm-rep__switch::after {
  content: '';
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  transition: transform .15s ease;
}

.crm-rep__switch:checked { background: var(--crm-ink); }
.crm-rep__switch:checked::after { transform: translateX(16px); }
[dir="rtl"] .crm-rep__switch:checked::after { transform: translateX(-16px); }