@layer screens {
/* Expense screens — Ink & Paper. Tokens only, RTL-safe logical properties,
   mobile-first (no horizontal overflow at 390px). */

/* ---- Toolbar: status chips + collapsible filters ---- */
.expense-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding-inline: var(--spacing-4);
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.status-chip:hover,
.status-chip:focus {
  background: var(--surface-sunken);
}

.status-chip:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Active filter = THE gold moment (ink text on gold, never white) */
.status-chip--active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--border-strong);
}

.status-chip--active:hover,
.status-chip--active:focus {
  background: var(--accent-hover);
}

/* ---- Filters (native disclosure) ---- */
.expense-filters {
  border: var(--border-width) solid var(--border);
  background: var(--surface);
}

.expense-filters__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  min-height: var(--tap-min);
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.expense-filters__summary::-webkit-details-marker {
  display: none;
}

.expense-filters__summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.expense-filters__chevron {
  color: var(--text-subtle);
  transition: transform var(--transition-fast);
}

.expense-filters[open] .expense-filters__chevron {
  transform: rotate(180deg);
}

.expense-filters__body {
  padding: var(--spacing-4);
  border-block-start: var(--border-width) solid var(--border);
  display: grid;
  gap: var(--spacing-3);
}

.expense-filters__body .filter-date-range {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-3);
}

.expense-filters__body .filter-date-range .filter-field {
  flex: 1 1 140px;
  min-width: 0;
}

.expense-filters__body .filter-field label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  margin-block-end: var(--spacing-1);
}

.expense-filters__body .filter-field input,
.expense-filters__body .filter-field select {
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--spacing-2) var(--spacing-3);
  color: var(--text);
  background: var(--surface);
  border: var(--border-width) solid var(--border-strong);
}

.expense-filters__body .filter-field input:focus,
.expense-filters__body .filter-field select:focus {
  outline: 3px solid var(--focus-ring);
  outline-offset: -1px;
}

.expense-filters__body .filter-field.receipts .radio-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.expense-filters__body .filter-field.receipts .group {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-height: var(--tap-min);
}

.expense-filters__body .filter-field.receipts .group label {
  margin-block-end: 0;
  cursor: pointer;
}

.expense-filters__body .filter-field.receipts input[type="radio"] {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

.expense-filters__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-2);
}

@media (min-width: 768px) {
  .expense-filters__body {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    align-items: end;
  }

  .expense-filters__body .filter-date-range,
  .expense-filters__footer {
    grid-column: 1 / -1;
  }

  .expense-filters__footer {
    justify-content: flex-end;
  }
}

/* ---- Expense list ---- */
.expense-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.expense-list__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

.expense-list__total {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.expense-list__total .amount {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-tight);
  color: var(--text);
}

.expense-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

/* ---- Expense card ---- */
.expense-card {
  border: var(--border-width) solid var(--border-strong);
  background: var(--surface);
  display: flex;
  flex-direction: column;
}

.expense-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4);
  text-decoration: none;
  color: var(--text);
}

.expense-card__body:hover {
  background: var(--surface-sunken);
}

.expense-card__body:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

.expense-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
}

/* Money renders in the base font — the display fonts lack the ₪ glyph */
.expense-card__amount {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
}

.expense-card__desc {
  margin: 0;
  font-weight: var(--font-weight-medium);
  color: var(--text);
}

.expense-card__meta {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-subtle);
  line-height: var(--line-height-base);
}

.expense-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
  padding: var(--spacing-3) var(--spacing-4);
  border-block-start: var(--border-width) solid var(--border);
}

.expense-card__actions .button {
  flex: 1 1 auto;
}

.expense-card__actions form {
  flex: 1 1 auto;
  display: flex;
}

.expense-card__actions form .button {
  width: 100%;
}

/* ---- Expense form ---- */
.expense-form {
  width: 100%;
  max-width: var(--container-md);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  /* Fields fill the (max-width-capped) column so they're all equal width and
     aligned — overrides the global `form { align-items: center }` that would
     otherwise shrink each field to its own content width. */
  align-items: stretch;
  gap: var(--spacing-4);
}

/* Prominent amount field: currency prefix + input inside one ink box */
.amount-field .amount-field__control {
  display: flex;
  align-items: stretch;
  border: var(--border-width-thick) solid var(--border-strong);
  background: var(--surface);
}

.amount-field__control:focus-within {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.amount-field__currency {
  /* Currency is a fixed 3-letter code — keep it narrow so the amount input
     (flex: 1 below) gets the rest of the row. Overrides the global
     `select { width: 100% }` that would otherwise let it eat the whole row. */
  flex: 0 0 auto;
  width: auto;
  border: 0;
  border-inline-end: var(--border-width) solid var(--border);
  background: var(--surface-sunken);
  color: var(--text);
  font-weight: var(--font-weight-bold);
  /* extra inline-end room for the dropdown chevron (see global select rule) */
  padding-inline: var(--spacing-3) var(--spacing-8);
  min-height: var(--tap-min);
}

.amount-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-3xl);
  padding: var(--spacing-2) var(--spacing-4);
  min-height: var(--tap-min);
}

.amount-field__input:focus,
.amount-field__currency:focus {
  outline: none;
}

.form-error-summary {
  border: var(--border-width-thick) solid var(--border-strong);
  padding: var(--spacing-3) var(--spacing-4);
  color: var(--text);
}

.form-error-summary h2 {
  margin: 0 0 var(--spacing-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
}

.form-error-summary ul {
  margin: 0;
  padding-inline-start: var(--spacing-5);
}

.expense-form__actions {
  display: flex;
  gap: var(--spacing-2);
}

.expense-form__actions .button {
  flex: 1 1 auto;
}

@media (min-width: 768px) {
  .expense-form__actions {
    justify-content: flex-end;
  }

  .expense-form__actions .button {
    flex: 0 0 auto;
  }
}

/* ---- Expense detail (show modal) ---- */
.expense-detail {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;

  & .expense-detail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-block-end: var(--spacing-4);
    flex-wrap: wrap;
    gap: var(--spacing-2);

    & .expense-detail__title {
      margin: 0;
      font-size: var(--font-size-xl);
      color: var(--text);
    }

    & .expense-detail__status {
      padding: var(--spacing-1) var(--spacing-3);
      border-radius: var(--radius-full);
      border: var(--border-width) solid transparent;
      font-weight: var(--font-weight-semibold);
      font-size: var(--font-size-sm);
      text-transform: uppercase;

      &.pending {
        background-color: var(--status-pending-bg);
        color: var(--status-pending-fg);
        border-color: var(--status-pending-border);
      }

      &.semi_approved {
        background-color: var(--status-review-bg);
        color: var(--status-review-fg);
        border-color: var(--status-review-border);
      }

      &.fully_approved {
        background-color: var(--status-approved-bg);
        color: var(--status-approved-fg);
        border-color: var(--status-approved-border);
      }

      &.rejected {
        background-color: var(--status-rejected-bg);
        color: var(--status-rejected-fg);
        border-color: var(--status-rejected-border);
      }
    }
  }

  & .expense-detail__amount {
    font-family: var(--font-family-base);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text);
    margin-block-end: var(--spacing-4);
  }

  & .expense-detail__info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-4);
    margin-block-end: var(--spacing-4);

    & .expense-detail__field {
      & .label {
        color: var(--text-muted);
        font-size: var(--font-size-sm);
        margin-block-end: var(--spacing-1);
      }

      & .value {
        font-weight: var(--font-weight-medium);
        color: var(--text);
      }
    }
  }

  & .expense-detail__description {
    margin-block-end: var(--spacing-4);

    & .label {
      color: var(--text-muted);
      font-size: var(--font-size-sm);
      margin-block-end: var(--spacing-1);
    }

    & .value {
      line-height: var(--line-height-base);
      color: var(--text);
    }
  }

  & .expense-detail__receipts {
    margin-block-end: var(--spacing-4);

    & .label {
      color: var(--text-muted);
      font-size: var(--font-size-sm);
      margin-block-end: var(--spacing-2);
    }

    & .receipt-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: var(--spacing-3);

      & .receipt-item {
        border: var(--border-width) solid var(--border);
        overflow: hidden;

        & a:focus-visible {
          outline: 3px solid var(--focus-ring);
          outline-offset: 2px;
        }

        & img {
          width: 100%;
          height: 180px;
          object-fit: cover;
          display: block;
        }

        & .document-fallback {
          width: 100%;
          height: 180px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: var(--surface-sunken);

          & .document-icon {
            font-size: 2.5rem;
            margin-block-end: var(--spacing-2);
          }

          & .document-text {
            font-size: var(--font-size-sm);
            color: var(--text-muted);
            text-align: center;
            padding-inline: var(--spacing-2);
          }
        }

        & .receipt-name {
          padding: var(--spacing-2);
          font-size: var(--font-size-sm);
          color: var(--text);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background-color: var(--surface-sunken);
        }
      }
    }
  }

  & .expense-detail__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-2);
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .expense-detail__actions {
    justify-content: center;
    width: 100%;

    & .button {
      flex: 1;
      text-align: center;
    }
  }
}
}