#expenses-view {
  --expense-line: rgba(36, 28, 66, 0.1);
  --expense-ink: var(--ink, #172033);
}

.expense-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px auto;
  gap: 12px;
  margin-bottom: 18px;
}

.expense-search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--expense-line);
  border-radius: 14px;
  background: #fff;
}

.expense-search span { color: #6c47a9; font-size: 23px; }
.expense-search input { width: 100%; border: 0; outline: 0; background: transparent; }

.expense-toolbar select {
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--expense-line);
  border-radius: 14px;
  background: #fff;
}

.expense-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.expense-summary article {
  padding: 17px 19px;
  border: 1px solid var(--expense-line);
  border-radius: 16px;
  background: linear-gradient(145deg, #fff, #faf8fd);
}

.expense-summary span { display: block; margin-bottom: 7px; color: #7d7785; font-size: 12px; }
.expense-summary strong { color: var(--expense-ink); font-size: 21px; }

.expense-table-wrap {
  border: 1px solid var(--expense-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(29, 19, 49, 0.06);
}

.expense-table td:first-child strong,
.expense-table td:first-child small,
.expense-table td:nth-child(2) strong,
.expense-table td:nth-child(2) small { display: block; }

.expense-table td small { margin-top: 4px; color: #85808d; }
.duplicate-warning { color: #a65b16 !important; font-weight: 700; }

.expense-state {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.expense-state.draft { background: #f1eff2; color: #68616c; }
.expense-state.review { background: #fff4dc; color: #8b610a; }
.expense-state.approved { background: #e8f4ef; color: #246a51; }
.expense-state.rejected { background: #faeaea; color: #9a3333; }
.expense-state.paid { background: #e9effb; color: #365c9a; }
.expense-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.expense-actions .approve { color: #246a51; }
.expense-actions .reject { color: #9a3333; }
.expense-empty { padding: 54px 20px; text-align: center; color: #7d7784; }
.expense-empty strong { display: block; margin-bottom: 8px; color: var(--expense-ink); font-size: 18px; }
.expense-dialog-card { width: min(760px, calc(100vw - 32px)); }

.expense-dropzone {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px dashed rgba(105, 65, 153, 0.4);
  border-radius: 15px;
  background: #faf8fd;
}

.expense-dropzone span { color: #77717e; font-size: 12px; font-weight: 400; }

.expense-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.expense-form-grid .wide { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .expense-toolbar, .expense-summary, .expense-form-grid { grid-template-columns: 1fr; }
  .expense-toolbar .primary-button { width: 100%; }
  .expense-form-grid .wide { grid-column: auto; }
  .expense-table th:nth-child(2), .expense-table td:nth-child(2),
  .expense-table th:nth-child(3), .expense-table td:nth-child(3) { display: none; }
}