@charset "UTF-8";
/* dashboard.css — The CEO dashboard.
   Loaded in order by templates/partials/styles.html. */

/* ============================ CEO dashboard =============================== */
/* dashboard app (templates/dashboard/). Two series on the trend chart: sales
   in the brand colour, purchases in orange — validated as a pair for colour
   blindness in both themes (dataviz palette check). */
:root {
  --dash-sales: var(--primary-500);
  --dash-purchases: #eb6834;
}
[data-theme="dark"] {
  --dash-purchases: #d95926;
}
.dash-filters {
  margin-bottom: 0;
}
.dash-company {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-600);
  background: var(--primary-50);
}
[data-theme="dark"] .dash-company {
  background: var(--surface-3);
}
.dash-period {
  font-size: var(--fs-sm);
}

/* the headline tiles: 4 a row, 2 on a tablet / phone */
.dash-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
@media (max-width: 1100px) {
  .dash-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.dash-kpi {
  gap: var(--s-3);
  color: inherit;
  text-decoration: none;
}
.dash-kpi .stat__value {
  font-size: var(--fs-2xl);
}
.dash-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-2);
}
.dash-change--good {
  color: var(--success);
}
.dash-change--bad {
  color: var(--danger);
}

/* the rows of cards */
.dash-grid {
  display: grid;
  gap: var(--gap);
  margin-top: var(--gap);
}
.dash-grid--wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.dash-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dash-grid--four {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
}
@media (max-width: 1100px) {
  .dash-grid--wide,
  .dash-grid--three,
  .dash-grid--four {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dash-card {
  padding: var(--s-5);
  overflow: visible;
}
.dash-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.dash-card__title {
  font-size: var(--fs-md);
  font-weight: 700;
}
.dash-card__sub {
  margin-top: 2px;
  font-size: var(--fs-sm);
  color: var(--text-3);
}
.dash-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.dash-card__subhead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: var(--s-4) 0 var(--s-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.dash-card__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* recent vouchers: dates, types and numbers on one line */
.dash-card--recent td:not([data-label="Party"]) {
  white-space: nowrap;
}
/* cards in a row keep their own height (the chart stays its own size) */
.dash-grid--wide,
.dash-grid--four {
  align-items: start;
}
.dash-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--s-4) 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
}

/* a big figure at the top of a card */
.dash-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-4);
}
.dash-hero__value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.dash-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* the trend chart: one scale, gridlines on round numbers, two thin bars a
   column with a 2px gap and rounded tops anchored to the baseline */
.dash-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-bottom: var(--s-4);
  font-size: var(--fs-sm);
}
.dash-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-2);
  text-decoration: none;
}
.dash-legend__item strong {
  color: var(--text);
}
.dash-legend__note {
  margin-left: auto;
  font-size: var(--fs-xs);
}
.dash-key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.dash-key--sales,
.dash-chart__bar--sales {
  background: var(--dash-sales);
}
.dash-key--purchases,
.dash-chart__bar--purchases {
  background: var(--dash-purchases);
}
.dash-chart {
  position: relative;
  height: 260px;
  margin-left: 44px;            /* room for the scale */
}
.dash-chart__grid {
  position: absolute;
  inset: 0 0 22px 0;            /* the month names sit under it */
}
.dash-chart__line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--border);
}
.dash-chart__line:first-child {
  border-top-color: var(--border-strong);   /* the baseline */
}
.dash-chart__line span {
  position: absolute;
  right: calc(100% + 8px);
  top: -0.6em;
  font-size: var(--fs-xs);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-chart__plot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
}
.dash-chart__col {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-radius: 4px 4px 0 0;
}
.dash-chart__col:hover {
  background: color-mix(in srgb, var(--primary-500) 7%, transparent);
}
.dash-chart__pair {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  margin-bottom: 22px;
}
.dash-chart__bar {
  width: min(16px, 34%);
  border-radius: 4px 4px 0 0;
}
.dash-chart__x {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}

/* a ranked list as bars: name and value in text colours, one colour bar */
.dash-bars {
  display: grid;
  gap: var(--s-3);
  list-style: none;
}
.dash-bars__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--fs-sm);
}
.dash-bars__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--text);
}
a.dash-bars__label:hover {
  color: var(--primary-600);
}
.dash-bars__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-bars__track {
  position: relative;
  height: 8px;
  margin-top: 4px;
  border-radius: 4px;
  background: var(--surface-3);
}
.dash-bars__fill {
  height: 100%;
  border-radius: 4px;
  background: var(--dash-sales);
}
.dash-bars__fill--late {
  background: var(--danger);
}
.dash-bars__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
/* the target mark on a sales man bar */
.dash-bars__target {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--text);
}
.dash-bars__target--key {
  position: static;
  display: inline-block;
  margin: 0;
}

/* stock: three counts, the items below nil */
.dash-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
}
.dash-count {
  display: grid;
  gap: 2px;
  padding: var(--s-2) 4px;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-xs);
}
.dash-count strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text);
}
.dash-count--bad strong {
  color: var(--danger);
}
.dash-count:hover {
  border-color: var(--border-strong);
}
.dash-stock {
  display: grid;
  gap: var(--s-2);
  list-style: none;
}
.dash-stock li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-sm);
}
.dash-stock__name {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.dash-stock__qty {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* the hover box over the chart and the bars */
.dash-tip {
  position: fixed;
  z-index: 60;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  line-height: 1.5;
  white-space: pre-line;
  color: var(--surface);
  background: var(--text);
  box-shadow: var(--shadow-md);
  pointer-events: none;
}
.dash-tip[hidden] {
  display: none;
}

/* ---- dashboard: receivables / payables, cash flow, bank and cash --------- */
.dash-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 900px) {
  .dash-grid--two {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dash-card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
button.dash-card__link {
  padding: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary-600);
  background: none;
  border: 0;
  cursor: pointer;
}
button.dash-card__link ion-icon {
  font-size: 1.05rem;
}

/* receivables / payables: Current | Overdue as one split bar */
.dash-dues__words {
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.dash-dues .dash-hero {
  margin-bottom: var(--s-3);
}
.dash-split {
  display: flex;
  gap: 2px;
  height: 12px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-3);
}
.dash-split__part--current,
.dash-key--current {
  background: var(--dash-sales);
}
.dash-split__part--overdue,
.dash-key--overdue {
  background: var(--dash-purchases);
}
.dash-key--muted {
  background: var(--text-3);
}
.dash-split__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.dash-split__legend > span,
.dash-late summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dash-split__legend strong {
  color: var(--text);
}
.dash-late summary {
  cursor: pointer;
  list-style: none;
}
.dash-late summary::-webkit-details-marker {
  display: none;
}
.dash-late[open] summary ion-icon {
  transform: rotate(180deg);
}
.dash-late__list {
  display: grid;
  gap: 4px;
  min-width: 200px;
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  list-style: none;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.dash-late__list li,
.dash-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
}

/* a short list: name … amount */
.dash-list {
  display: grid;
  gap: var(--s-2);
  list-style: none;
  font-size: var(--fs-sm);
}
.dash-list a,
.dash-list span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--text);
}
.dash-list a:hover {
  color: var(--primary-600);
}
.dash-list strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dash-list--money li {
  align-items: center;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border);
}
.dash-list--money a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
}
.dash-list--money a ion-icon {
  flex: none;
  color: var(--text-3);
}
.dash-list--money small {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-3);
}
.dash-list__total {
  border-bottom: 0 !important;
  font-weight: 700;
}

/* cash flow: the line chart and its four figures at the side */
.dash-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 760px) {
  .dash-flow {
    grid-template-columns: minmax(0, 1fr);
  }
}
.dash-chart--line .dash-chart__grid {
  inset: 0 6px 22px 6px;
}
.dash-chart__line--zero {
  border-top: 1px dashed var(--border-strong);
}
.dash-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dash-line__area {
  fill: color-mix(in srgb, var(--dash-sales) 12%, transparent);
}
.dash-line__path {
  fill: none;
  stroke: var(--dash-sales);
  stroke-width: 2;
  stroke-linejoin: round;
}
.dash-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: 0 0 -4px -4px;
  border-radius: 50%;
  background: var(--dash-sales);
  box-shadow: 0 0 0 2px var(--surface);     /* the 2px surface ring */
}
.dash-dot::before {                          /* a bigger target than the dot */
  content: "";
  position: absolute;
  inset: -8px;
}
.dash-chart__xs {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 18px;
}
.dash-chart__xs span {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  color: var(--text-3);
  white-space: nowrap;
}
.dash-flow__sums {
  display: grid;
  gap: var(--s-4);
  text-align: right;
}
.dash-flow__sums dt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.dash-flow__sums dd {
  margin-top: 2px;
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dash-flow__end {
  padding-top: var(--s-3);
  border-top: 1px solid var(--border);
}
.dash-in {
  color: var(--success);
}
.dash-out {
  color: var(--danger);
}

/* the Accrual / Cash switch */
.dash-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.dash-switch__btn {
  padding: 4px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.dash-switch__btn.is-active {
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

/* quotations: two counts and the conversion bar */
.dash-counts--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dash-convert {
  margin-top: var(--s-4);
}

/* the History button in a record's Edit panel head — next to the close button */
.modal__head .history-btn {
  flex: none;
  margin-left: auto;
  margin-right: var(--s-2);
}

/* a label with a "+ New …" link beside it (partials/field.html, add_url) */
.field__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.field__add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary-600);
  background: none;
  border: 0;
  cursor: pointer;
}
.field__add:hover {
  text-decoration: underline;
}

/* a purchase's Ship to: the consignee is our own company (voucher_party.html) */
.vparty__consignee {
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--text);
}
.vparty__reset {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--s-2);
  padding: 0;
  font: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary-600);
  background: none;
  border: 0;
  cursor: pointer;
}
.vparty__reset:hover {
  text-decoration: underline;
}

/* a report's title dropdown: the section's other reports are links */
a.title-menu__item {
  text-decoration: none;
}

/* ---- the name as a logo: GenerousEbook with the E in brand red
   (templates/partials/brand_name.html) — a little brighter on dark */
:root {
  --brand-e: #e11d48;
}
[data-theme="dark"] {
  --brand-e: #fb5a77;
}
.brand-e {
  color: var(--brand-e);
}

/* ---- every report's filters (reports/report_page.html): all on one row,
   a little wider than a list page's — each box grows to share the row up
   to Export, and gives a little back when a report has many filters, so
   they never wrap on a desktop screen (a narrow screen still wraps) */
@media (min-width: 1000px) {
  .toolbar:has(#reportFilters) {
    flex-wrap: nowrap;
  }
}
#reportFilters .search {
  flex: 1 1 240px;
  min-width: 160px;
  max-width: 340px;
}
#reportFilters .toolbar__select {
  flex: 1 1 175px;
  min-width: 120px;
  max-width: 240px;
}
#reportFilters .toolbar__date {
  flex: 0 1 150px;
  min-width: 132px;
}
#reportFilters .toolbar__date .input--sm {
  width: 100%;
  max-width: 160px;
}
/* the Ledger Statement's party box: "Name · Customer / Supplier" in full */
#reportFilters select[name="party"][data-report-reload] { flex: 1 1 300px; max-width: 380px; }
#reportFilters ~ .export-menu {
  flex: none;
  margin-left: auto;
}