.invoice-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.invoice-source-card {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: start;
  padding: 16px;
  background: #fff;
  border: 1px solid #dfe8f2;
  border-radius: 12px;
  box-shadow: 0 9px 24px rgb(30 54 89 / 6%);
}

.invoice-source-card.tax { border-top: 3px solid #2368f5; }
.invoice-source-card.mail { border-top: 3px solid #16aeb9; }

.invoice-source-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 760;
  background: linear-gradient(135deg, #2368f5, #4e8cf8);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgb(35 104 245 / 22%);
}

.invoice-source-card.mail .invoice-source-icon {
  background: linear-gradient(135deg, #0e9da9, #29c3cb);
  box-shadow: 0 8px 18px rgb(22 174 185 / 20%);
}

.invoice-source-copy > div:first-child {
  display: flex;
  align-items: center;
  gap: 9px;
}

.invoice-source-copy strong {
  color: #243d5a;
  font-size: 12px;
}

.invoice-source-copy > p {
  margin: 6px 0 11px;
  overflow: hidden;
  color: #74869b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-source-copy dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.invoice-source-copy dl > div {
  padding: 8px 9px;
  background: #f6f9fd;
  border-radius: 7px;
}

.invoice-source-copy dt,
.invoice-source-copy dd { margin: 0; }
.invoice-source-copy dt { color: #8a99aa; font-size: 7px; }
.invoice-source-copy dd { margin-top: 4px; color: #354d69; font-size: 8px; font-weight: 680; }

.invoice-source-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.invoice-source-actions .btn { min-width: 88px; }

.invoice-summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0e8f2;
  border-radius: 11px;
  box-shadow: 0 8px 22px rgb(30 54 89 / 5%);
}

.invoice-summary-strip > div {
  position: relative;
  padding: 13px 16px;
}

.invoice-summary-strip > div + div::before {
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 1px;
  content: "";
  background: #e8eef5;
}

.invoice-summary-strip small {
  display: block;
  margin-bottom: 7px;
  color: #7f8fa3;
  font-size: 8px;
}

.invoice-summary-strip b {
  color: #263d59;
  font-family: Bahnschrift, "DIN Alternate", sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.invoice-summary-strip span {
  margin-left: 4px;
  color: #8b99aa;
  font-size: 8px;
}

.invoice-ledger-panel { margin-bottom: 14px; }

.invoice-quick-views {
  display: flex;
  gap: 7px;
  margin-bottom: 12px;
  overflow-x: auto;
}

.invoice-quick-views a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  color: #6c7e94;
  font-size: 9px;
  background: #f5f8fc;
  border: 1px solid transparent;
  border-radius: 7px;
}

.invoice-quick-views a b {
  min-width: 20px;
  padding: 2px 5px;
  color: #8090a4;
  font-size: 7px;
  text-align: center;
  background: #e8eef6;
  border-radius: 9px;
}

.invoice-quick-views a.active {
  color: #1f62df;
  font-weight: 680;
  background: #eef4ff;
  border-color: #bfd4fb;
}

.invoice-quick-views a.active b { color: #fff; background: #2368f5; }

.invoice-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 150px 140px 130px auto auto;
  gap: 8px;
  align-items: center;
  padding: 11px;
  margin-bottom: 12px;
  background: #f8fafc;
  border: 1px solid #e2e9f1;
  border-radius: 9px;
}

.invoice-filter-bar select,
.invoice-search-field {
  height: 34px;
  background: #fff;
  border: 1px solid #d9e2ed;
  border-radius: 7px;
}

.invoice-filter-bar select {
  padding: 0 9px;
  color: #5d7088;
  font: inherit;
  font-size: 8px;
}

.invoice-search-field {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.invoice-search-field .ui-icon { color: #8393a7; }
.invoice-search-field input { width: 100%; min-width: 0; color: #334b68; font: inherit; font-size: 8px; border: 0; outline: 0; }
.invoice-search-field input::placeholder { color: #99a6b6; }

.invoice-table-wrap { overflow-x: auto; }
.invoice-table { min-width: 1180px; }
.invoice-table th { white-space: nowrap; }
.invoice-table td { vertical-align: middle; }
.invoice-table td:nth-child(1) { width: 250px; }
.invoice-table td:nth-child(2) { width: 230px; }

.invoice-main-cell,
.invoice-seller { display: flex; min-width: 0; }

.invoice-main-cell { align-items: center; gap: 9px; }
.invoice-main-cell > span { display: grid; width: 30px; height: 34px; flex: 0 0 auto; place-items: center; color: #2368f5; font-size: 9px; font-weight: 760; background: #edf4ff; border: 1px solid #d6e5ff; border-radius: 6px; }
.invoice-main-cell > div,
.invoice-seller { flex-direction: column; gap: 4px; }
.invoice-main-cell b,
.invoice-main-cell small,
.invoice-seller b,
.invoice-seller small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invoice-main-cell b,
.invoice-seller b { max-width: 215px; color: #31475f; font-size: 8px; }
.invoice-main-cell small,
.invoice-seller small { max-width: 210px; color: #8998aa; font-size: 7px; }
.invoice-amount { color: #2f4661; font-weight: 700; white-space: nowrap; }

.invoice-source-tag {
  display: inline-flex;
  padding: 4px 7px;
  color: #2162d6;
  font-size: 7px;
  white-space: nowrap;
  background: #edf4ff;
  border-radius: 5px;
}

.invoice-source-tag.mail { color: #087f89; background: #eaf9fa; }
.invoice-row-actions { display: flex; gap: 8px; align-items: center; }
.invoice-row-actions a { margin: 0 !important; }

.invoice-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  color: #8291a3;
  font-size: 8px;
}

.invoice-list-footer > div { display: flex; gap: 5px; }
.invoice-list-footer > div a { display: grid; width: 25px; height: 25px; place-items: center; color: #71839a; border: 1px solid #dce5ef; border-radius: 6px; }
.invoice-list-footer > div a.active { color: #fff; background: #2368f5; border-color: #2368f5; }

.invoice-empty { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.invoice-empty > div { display: grid; width: 46px; height: 46px; place-items: center; color: #7fa3e7; background: #eef4ff; border-radius: 50%; }
.invoice-empty > div .ui-icon { width: 22px; height: 22px; }
.invoice-empty b { margin-top: 12px; color: #344b65; font-size: 11px; }
.invoice-empty span { margin: 6px 0 12px; color: #8796a8; font-size: 8px; }

.invoice-modal-wide { width: min(1040px, calc(100vw - 40px)) !important; }
.invoice-detail-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 16px; }
.invoice-preview { overflow: hidden; background: #f2f5f9; border: 1px solid #dce5ef; border-radius: 9px; }
.invoice-preview > header { display: flex; height: 42px; align-items: center; justify-content: space-between; padding: 0 12px; background: #fff; border-bottom: 1px solid #e3eaf2; }
.invoice-preview > header span { color: #314861; font-size: 9px; font-weight: 700; }
.invoice-preview > header a { display: inline-flex; align-items: center; gap: 5px; color: #2368f5; font-size: 8px; }
.invoice-preview iframe { display: block; width: 100%; height: 480px; border: 0; }

.invoice-detail-fields { display: grid; grid-template-columns: 1fr 1fr; align-content: start; overflow: hidden; border: 1px solid #e2e9f1; border-radius: 9px; }
.invoice-detail-fields > div { grid-column: span 2; padding: 12px; border-bottom: 1px solid #e9eef4; }
.invoice-detail-fields > div.half { grid-column: span 1; }
.invoice-detail-fields > div.half:nth-of-type(even) { border-left: 1px solid #e9eef4; }
.invoice-detail-fields small,
.invoice-detail-fields b { display: block; }
.invoice-detail-fields small { margin-bottom: 6px; color: #8493a5; font-size: 7px; }
.invoice-detail-fields b { color: #304761; font-size: 8px; line-height: 1.55; }

.invoice-sync-result { display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.invoice-sync-result > span { display: grid; width: 54px; height: 54px; place-items: center; color: #fff; background: #10b981; border-radius: 50%; }
.invoice-sync-result > span .ui-icon { width: 24px; height: 24px; }
.invoice-sync-result b { margin-top: 13px; color: #2f465f; font-size: 13px; }
.invoice-sync-result p { margin: 7px 0 0; color: #7d8da0; font-size: 8px; }

.invoice-check-result { display: flex; gap: 12px; align-items: center; padding: 14px; margin-bottom: 12px; background: #f2fbf7; border: 1px solid #c7eedc; border-radius: 9px; }
.invoice-check-result > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #fff; font-size: 17px; font-weight: 750; background: #10b981; border-radius: 50%; }
.invoice-check-result.pending { background: #fff9ed; border-color: #f7dba6; }
.invoice-check-result.pending > span { background: #f59e0b; }
.invoice-check-result.failed { background: #fff4f5; border-color: #f5cdd2; }
.invoice-check-result.failed > span { background: #e65e69; }
.invoice-check-result b,
.invoice-check-result p { display: block; margin: 0; }
.invoice-check-result b { color: #304760; font-size: 11px; }
.invoice-check-result p { margin-top: 5px; color: #7e8ea1; font-size: 8px; }
.invoice-check-list { display: grid; gap: 1px; margin: 0; overflow: hidden; background: #e4eaf1; border-radius: 8px; }
.invoice-check-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 10px 11px; background: #f8fafc; }
.invoice-check-list dt { color: #8090a3; font-size: 8px; }
.invoice-check-list dd { margin: 0; color: #334b65; font-size: 8px; font-weight: 650; text-align: right; }

.duplicate-compare { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 10px; align-items: center; margin-bottom: 13px; }
.duplicate-compare article { padding: 14px; background: #f7f9fc; border: 1px solid #e0e7ef; border-radius: 9px; }
.duplicate-compare article span,
.duplicate-compare article b,
.duplicate-compare article small,
.duplicate-compare article em { display: block; }
.duplicate-compare article span { color: #8291a4; font-size: 7px; }
.duplicate-compare article b { margin-top: 7px; color: #2f4761; font-size: 9px; }
.duplicate-compare article small { margin-top: 5px; color: #667a91; font-size: 8px; }
.duplicate-compare article em { margin-top: 9px; color: #2368f5; font-size: 7px; font-style: normal; }
.duplicate-compare > div { color: #8b99aa; font-size: 8px; text-align: center; }

.archive-confirm { display: flex; gap: 12px; align-items: center; padding: 14px; background: #f7f9fc; border: 1px solid #e2e9f1; border-radius: 9px; }
.archive-confirm > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; color: #2368f5; background: #eaf2ff; border-radius: 9px; }
.archive-confirm b,
.archive-confirm p,
.archive-confirm small { display: block; margin: 0; }
.archive-confirm b { color: #304760; font-size: 9px; }
.archive-confirm p { margin-top: 4px; color: #5c718b; font-size: 8px; }
.archive-confirm small { margin-top: 4px; color: #8997a8; font-size: 7px; }

@media (max-width: 1280px) {
  .invoice-source-card { grid-template-columns: 42px minmax(0, 1fr); }
  .invoice-source-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
  .invoice-filter-bar { grid-template-columns: minmax(220px, 1fr) repeat(3, 128px) auto auto; }
}

@media (max-width: 1050px) {
  .invoice-source-grid { grid-template-columns: 1fr; }
  .invoice-filter-bar { grid-template-columns: 1fr 1fr 1fr; }
  .invoice-search-field { grid-column: 1 / -1; }
  .invoice-detail-layout { grid-template-columns: 1fr; }
  .invoice-preview iframe { height: 400px; }
}

@media (max-width: 760px) {
  .invoice-summary-strip { grid-template-columns: repeat(2, 1fr); }
  .invoice-summary-strip > div + div::before { display: none; }
  .invoice-summary-strip > div:last-child { grid-column: span 2; }
  .invoice-filter-bar { grid-template-columns: 1fr 1fr; }
  .invoice-filter-bar select,
  .invoice-filter-bar .btn { width: 100%; }
  .invoice-search-field { grid-column: 1 / -1; }
  .invoice-source-copy dl { grid-template-columns: 1fr; }
  .invoice-source-actions { justify-content: stretch; }
  .invoice-source-actions .btn { flex: 1; }
  .duplicate-compare { grid-template-columns: 1fr; }
  .invoice-preview iframe { height: 320px; }
}