/**
 * Copyright since 2025 Mifos Initiative
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

/* Layout and page chrome come from cashier-shared.scss; only what is specific to the day book
   lives here. */

.db-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;

  /* The search box takes the slack so the two selects keep their natural width. */
  &__search {
    flex: 1 1 260px;
  }
}

.db-note {
  margin: 8px 0 12px;
  font-size: 11px;
  color: #94a3b8;
}

/* One card per source register. The heading says which register, and why its rows read differently
   from the others, so the three are not added up as though they were one list. */
.db-section {
  margin-bottom: 14px;
  border-left: 3px solid #cbd5e1;

  /* Cash that actually crossed the counter — the section a drawer is checked against, so it
     carries the darker green. */
  &--CASHIER {
    border-left-color: #15803d;

    .db-section__head {
      background: #f0fdf4;
    }
  }

  /* Raised but not actioned: no cash has moved yet, so the lighter shade of the same green. */
  &--CLERK {
    border-left-color: #86efac;

    .db-section__head {
      background: #f7fef9;
    }
  }

  /* Postings with no counter behind them — interest, charges, journals. Not the branch's cash at
     all, so a different colour rather than a third green that would read as a third cash state. */
  &--SYSTEM {
    border-left-color: #6366f1;

    .db-section__head {
      background: #f5f5ff;
    }
  }

  &__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: 12px;

    strong {
      font-size: 13px;
      color: #0d1b2a;
    }
  }

  &__count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
  }
}

/* Dr/Cr marker — the one thing the eye should catch when scanning a day's vouchers. */
.db-side {
  display: inline-block;
  min-width: 28px;
  text-align: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  color: #475569;

  &--cr {
    background: #dcfce7;
    color: #15803d;
  }

  &--dr {
    background: #fee2e2;
    color: #b91c1c;
  }
}

/* A hairline on the leading edge, tinted by side: readable without colouring the whole row,
   which would fight the table's own hover state. */
.db-row--cr td:first-child {
  box-shadow: inset 3px 0 0 #22c55e;
}

.db-row--dr td:first-child {
  box-shadow: inset 3px 0 0 #ef4444;
}

.db-muted {
  color: #94a3b8;
  font-size: 11px;
}

.db-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f1f5f9;
  color: #475569;

  /* Passed, but nothing handed over yet — the lighter green. */
  &--ok {
    background: #dcfce7;
    color: #15803d;
  }

  /* Cash has actually left the counter. Filled and dark, so the final state is the one the eye
     lands on: on this page the difference between "approved" and "paid out" is the whole question. */
  &--done {
    background: #15803d;
    color: #fff;
  }

  &--pending {
    background: #fef3c7;
    color: #b45309;
  }

  &--rejected {
    background: #fee2e2;
    color: #b91c1c;
  }
}

/* Not defined in cashier-shared.scss, so the day book carries its own. */
.pg-alert {
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 6px;
  font-size: 13px;

  &--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
  }
}

/* Exception summary, above the table: the day's flagged vouchers listed in full so nobody has to
   hunt for a badge. */
.db-exceptions {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-left: 4px solid #dc2626;
  border-radius: 8px;

  &__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #b91c1c;
    font-size: 13px;

    mat-icon {
      font-size: 20px;
      width: 20px;
      height: 20px;
    }

    /* Pushed to the right so the count reads first. */
    .pg-btn {
      margin-left: auto;
      height: 30px;
      font-size: 12px;
    }
  }

  &__item {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 6px 0;
    font-size: 12px;
    border-top: 1px dotted #fecaca;
  }

  &__amt {
    font-variant-numeric: tabular-nums;
    color: #334155;
  }

  &__diff {
    color: #b91c1c;
  }

  &__why {
    color: #0d1b2a;
    font-weight: 600;
  }
}

/* Raising an exception is a deliberate, consequential act — styled to read that way without
   looking destructive, since nothing is deleted. */
.pg-btn--warn {
  background: #fffbeb;
  border-color: #fde68a;
  color: #92400e;

  &:hover {
    background: #fef3c7;
  }
}

.db-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  color: #475569;
  cursor: pointer;

  &:hover {
    background: #f1f5f9;
    color: #0d1b2a;
  }

  mat-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  /* Attachment count rides on the paperclip so a voucher with a scanned slip reads as different
     at a glance, without a separate column. */
  &__count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    line-height: 14px;
  }
}

/* Inline panel, opened under the row it belongs to. */
.db-panel-row td {
  background: #f8fafc !important;
  padding: 0 !important;
}

.db-panel {
  padding: 14px 16px;
  border-left: 3px solid #2563eb;

  &__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
    color: #0d1b2a;
  }

  &__body {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
  }

  &__remarks {
    display: block;
    margin-top: 12px;
    max-width: 640px;
  }

  &__warn {
    margin: 10px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    font-size: 12px;
  }

  &__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
  }
}

/* The two amounts being compared, side by side. */
.db-cmp {
  padding: 8px 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;

  &__label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
  }

  &__value {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #0d1b2a;
  }

  &--good {
    background: #f0fdf4;
    border-color: #bbf7d0;

    .db-cmp__value {
      color: #15803d;
    }
  }

  &--bad {
    background: #fef2f2;
    border-color: #fecaca;

    .db-cmp__value {
      color: #b91c1c;
    }
  }
}

.pg-table tfoot td {
  background: #f8fafc;
  font-weight: 800;
  font-size: 12px;
  color: #334155;
  border-top: 1px solid #e2e8f0;
}

/* Officer Verification Sheet — the day totalled per person, for whoever signs the book off.
   Numeric cells use the shared `.num` from cashier-shared.scss rather than a class of their own:
   that one already right-aligns and tabular-figures both the heading and the cell, which is what
   lines a money column up. A local class only styled the cells, leaving every heading left-aligned
   over right-aligned figures. */
.db-byuser {
  /* Not one of the three sections below, so no section colour: this is the whole day summed by
     person, and giving it one of their edges would read as a fourth section. */
  border-left-color: #94a3b8;

  &__name {
    font-weight: 600;
    color: #0f172a;
  }

  /* Received green, paid-out red — the convention a passbook already uses, so the two columns are
     told apart without reading the headings. */
  &__cr {
    color: #15803d;
  }

  &__dr {
    color: #b91c1c;
  }

  &__net {
    font-weight: 600;

    &--pos {
      color: #15803d;
    }

    &--neg {
      color: #b91c1c;
    }
  }

  /* The sheet's own total sits against a tinted band so the eye lands on the line that has to
     agree with the day's figures above. */
  &__total {
    background: #f8fafc;
    font-weight: 600;

    td {
      border-top: 2px solid #cbd5e1;
    }
  }
}