.invoicesPage{
  width:100%;
}

.invoicesHeader{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.invoicesHeader h1{
  margin:0;
  font-size:32px;
  line-height:1.1;
  color:var(--text-primary);
}

.invoicesHeader p{
  margin:6px 0 0;
  max-width:680px;
  color:var(--text-secondary);
  font-size:14px;
  line-height:1.5;
}

.invoiceToolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
  padding:12px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--card-bg);
}

.invoiceToolbarLeft,
.invoiceToolbarRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.invoiceSearch{
  min-width:min(340px, 100%);
}

.invoiceSearch input,
.invoiceToolbar select,
.invoiceInput,
.invoiceTextarea{
  width:100%;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  color:var(--text-primary);
  font:inherit;
}

.invoiceSearch input,
.invoiceToolbar select,
.invoiceInput{
  height:36px;
  padding:0 10px;
}

.invoiceTextarea{
  min-height:92px;
  padding:10px;
  resize:vertical;
}

.invoiceTableWrap{
  overflow:auto;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--card-bg);
}

.invoiceTable{
  width:100%;
  min-width:1360px;
  border-collapse:collapse;
  font-size:13px;
}

.invoiceTable th,
.invoiceTable td{
  padding:10px 12px;
  border-bottom:1px solid var(--border-color);
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
}

.invoiceTable th{
  background:var(--bg-secondary);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.invoiceTable tr:last-child td{
  border-bottom:0;
}

.invoiceTablePager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  color:var(--text-secondary);
  font-size:13px;
}

.invoiceTablePager[hidden]{
  display:none;
}

.invoiceTablePagerControls{
  display:flex;
  align-items:center;
  gap:8px;
}

.invoiceNumberLink{
  border:0;
  background:transparent;
  padding:0;
  color:var(--primary);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

.invoiceQuoteLink{
  color:var(--primary);
  font-weight:800;
  text-decoration:none;
}

.invoiceQuoteLink:hover{
  text-decoration:underline;
}

.invoiceMonoCell{
  max-width:250px;
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.invoiceStatus{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid var(--border-color);
  background:var(--bg-secondary);
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}

.invoiceStatus.status-draft{
  border-color:#a7b3c7;
  color:#334155;
  background:#f1f5f9;
}

.invoiceStatus.status-unpaid,
.invoiceStatus.status-failed{
  border-color:#f5b2b2;
  color:#991b1b;
  background:#fef2f2;
}

.invoiceStatus.status-partially_paid{
  border-color:#f3d27c;
  color:#854d0e;
  background:#fffbeb;
}

.invoiceStatus.status-paid{
  border-color:#86d7a5;
  color:#166534;
  background:#f0fdf4;
}

.invoiceStatus.status-void{
  border-color:#d4d4d8;
  color:#52525b;
  background:#fafafa;
}

.invoiceEmpty{
  padding:22px;
  color:var(--text-secondary);
  text-align:center;
}

.invoiceModal{
  position:fixed;
  inset:0;
  z-index:1700;
  display:none;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#f8fafc;
}

.invoiceModal.is-open{
  display:flex;
}

.invoiceModalShell{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.invoiceModalHeader{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--border-color);
  background:#fff;
}

.invoiceModalTitle{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.invoiceModalTitle h2{
  margin:0;
  font-size:18px;
  color:var(--text-primary);
}

.invoiceModalTitle span{
  color:var(--text-secondary);
  font-size:12px;
}

.invoiceModalActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.invoiceModalBody{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px;
}

.invoiceEditorLayout{
  width:min(1200px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:16px;
  align-items:start;
}

.invoiceDocument{
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.invoiceDocumentInner{
  padding:24px;
}

.invoiceDocTop{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 250px;
  gap:22px;
  align-items:start;
  padding-bottom:18px;
  border-bottom:2px solid #111827;
}

.invoiceBrand{
  display:grid;
  gap:8px;
}

.invoiceBrandName{
  font-size:22px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.invoiceTitleBlock{
  text-align:right;
}

.invoiceTitleBlock h3{
  margin:0 0 10px;
  font-size:30px;
  line-height:1;
}

.invoiceFieldGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}

.invoiceFieldGrid.three{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.invoiceField{
  display:grid;
  gap:5px;
}

.invoiceFieldWide{
  grid-column:1 / -1;
}

.invoiceField label,
.invoiceField > span,
.invoiceSectionTitle{
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.invoiceReadonly{
  min-height:36px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#f8fafc;
  color:var(--text-primary);
}

.invoiceSection{
  margin-top:22px;
}

.invoiceSectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.invoiceLineTable,
.invoiceCarrierTable,
.invoiceAttachmentTable{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border-color);
  border-radius:8px;
  overflow:hidden;
  font-size:13px;
}

.invoiceLineTable th,
.invoiceLineTable td,
.invoiceCarrierTable th,
.invoiceCarrierTable td,
.invoiceAttachmentTable th,
.invoiceAttachmentTable td{
  padding:8px;
  border-bottom:1px solid var(--border-color);
  text-align:left;
  vertical-align:middle;
}

.invoiceLineTable th,
.invoiceCarrierTable th,
.invoiceAttachmentTable th{
  background:#f8fafc;
  color:var(--text-secondary);
  font-size:11px;
  text-transform:uppercase;
}

.invoiceLineTable tr:last-child td,
.invoiceCarrierTable tr:last-child td,
.invoiceAttachmentTable tr:last-child td{
  border-bottom:0;
}

.invoiceAttachmentTable td:nth-child(1){
  width:190px;
}

.invoiceAttachmentTable td:nth-child(2){
  min-width:260px;
}

.invoiceAttachmentTable td:nth-child(3),
.invoiceAttachmentTable td:nth-child(4),
.invoiceAttachmentTable td:nth-child(5){
  width:115px;
}

.invoiceAttachmentOther,
.invoiceAttachmentUrl{
  margin-top:6px;
}

.invoiceCheckLabel{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-primary);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.invoiceCheckLabel input{
  width:16px;
  height:16px;
  margin:0;
}

.invoiceAttachmentVisibility{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid #d8e0ea;
  border-radius:999px;
  background:#f8fafc;
  color:#344054;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}

.invoiceAttachmentModal{
  position:fixed;
  inset:0;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.invoiceAttachmentModal.is-open{
  display:flex;
}

.invoiceAttachmentBackdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.46);
}

.invoiceAttachmentDialog{
  position:relative;
  width:min(1040px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--border-color);
  border-radius:10px;
  box-shadow:0 24px 60px rgba(15,23,42,.28);
}

.invoiceAttachmentDialogHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 22px 14px;
  border-bottom:1px solid var(--border-color);
}

.invoiceAttachmentDialogHeader h2{
  margin:0;
  color:var(--text-primary);
  font-size:20px;
}

.invoiceAttachmentDialogHeader p{
  margin:4px 0 0;
  color:var(--text-secondary);
  font-size:13px;
}

.invoiceAttachmentTabs{
  display:flex;
  gap:8px;
  padding:14px 22px 0;
}

.invoiceAttachmentTab{
  border:1px solid var(--border-color);
  border-radius:8px 8px 0 0;
  background:#f8fafc;
  color:#344054;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}

.invoiceAttachmentTab.is-active{
  background:#fff;
  color:#155eef;
  border-bottom-color:#fff;
}

.invoiceAttachmentPanel{
  padding:18px 22px 22px;
}

.invoiceAttachmentPickerGrid{
  display:grid;
  grid-template-columns:minmax(180px, 240px) minmax(180px, 1fr) minmax(260px, 1.2fr);
  gap:12px;
  align-items:end;
}

.invoiceAttachmentDelivery{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:14px;
}

.invoiceAttachmentPickerMsg{
  min-height:20px;
  margin-top:12px;
  color:var(--text-secondary);
  font-size:13px;
}

.invoiceAttachmentPickerMsg.is-error{
  color:#b42318;
}

.invoiceAttachmentDialogActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
}

.invoiceAttachmentSearchRow{
  display:grid;
  grid-template-columns:minmax(220px, 1fr) auto;
  gap:10px;
  margin-top:16px;
}

.invoiceAttachmentPickerColumns{
  display:grid;
  grid-template-columns:1fr 1fr 1.2fr;
  gap:12px;
  margin-top:14px;
}

.invoiceAttachmentPickerTitle{
  margin-bottom:6px;
  color:var(--text-secondary);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.invoiceAttachmentPickerList{
  min-height:172px;
  max-height:260px;
  overflow:auto;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
}

.invoiceAttachmentPickerEmpty{
  padding:14px;
  color:var(--text-secondary);
  font-size:13px;
}

.invoiceAttachmentPickerItem{
  display:block;
  width:100%;
  border:0;
  border-bottom:1px solid var(--border-color);
  background:#fff;
  color:var(--text-primary);
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
}

.invoiceAttachmentPickerItem:last-child{
  border-bottom:0;
}

.invoiceAttachmentPickerItem:hover,
.invoiceAttachmentPickerItem.is-selected{
  background:#eff6ff;
}

.invoiceAttachmentPickerItem strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}

.invoiceAttachmentPickerItem span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-top:3px;
  color:var(--text-secondary);
  font-size:12px;
}

@media (max-width: 860px){
  .invoiceAttachmentPickerGrid,
  .invoiceAttachmentPickerColumns{
    grid-template-columns:1fr;
  }

  .invoiceAttachmentSearchRow{
    grid-template-columns:1fr;
  }
}

.invoiceLineAmount{
  max-width:130px;
  text-align:right;
}

.invoiceTotals{
  margin-top:14px;
  margin-left:auto;
  width:min(360px, 100%);
  display:grid;
  gap:8px;
}

.invoiceTotalRow{
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:14px;
}

.invoiceTotalRow strong{
  font-size:18px;
}

.invoicePaymentBox{
  display:grid;
  gap:8px;
  padding:12px;
  border:1px solid #b7d0ff;
  border-radius:8px;
  background:#eff6ff;
}

.invoicePaymentBox a{
  color:var(--primary);
  font-weight:800;
  word-break:break-all;
}

.invoiceFooterSection{
  color:#475569;
  font-size:13px;
  line-height:1.5;
}

.invoiceFooterSection p{
  margin:0 0 8px;
}

.invoiceFooterContact{
  color:#334155;
  font-weight:700;
  overflow-wrap:anywhere;
}

.invoiceSidePanel{
  display:grid;
  gap:12px;
}

.invoiceSideSection{
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  padding:14px;
}

.invoiceSideSection h3{
  margin:0 0 10px;
  font-size:14px;
}

.invoiceEventList{
  display:grid;
  gap:8px;
  max-height:260px;
  overflow:auto;
  color:var(--text-secondary);
  font-size:12px;
}

.invoiceEventItem{
  padding-bottom:8px;
  border-bottom:1px solid var(--border-color);
}

.invoiceEventItem:last-child{
  border-bottom:0;
}

.invoiceEventMeta{
  margin-top:3px;
  color:var(--text-primary);
}

.invoiceInfoList{
  margin:0;
  display:grid;
  gap:8px;
  font-size:12px;
}

.invoiceInfoList div{
  display:grid;
  gap:2px;
}

.invoiceInfoList dt{
  color:var(--text-secondary);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.invoiceInfoList dd{
  margin:0;
  color:var(--text-primary);
  overflow-wrap:anywhere;
}

.invoiceMsg{
  min-height:18px;
  color:var(--text-secondary);
  font-size:12px;
}

.invoiceMsg.is-error{
  color:var(--danger);
}

.invoiceActionBtn{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 12px;
  border:1px solid transparent;
  border-radius:8px;
  font-size:12px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(15,23,42,.08);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.invoiceActionBtn[hidden]{
  display:none !important;
}

.invoiceActionBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 5px 12px rgba(15,23,42,.12);
}

.invoiceActionBtn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.invoiceActionGhost,
.invoiceActionNeutral,
.invoiceActionClose{
  border-color:#cbd5e1;
  background:#fff;
  color:#334155;
}

.invoiceActionGhost:hover,
.invoiceActionNeutral:hover,
.invoiceActionClose:hover{
  border-color:#94a3b8;
  background:#f8fafc;
  color:#0f172a;
}

.invoiceActionPrimary{
  border-color:#1d4ed8;
  background:#2563eb;
  color:#fff;
}

.invoiceActionPrimary:hover{
  border-color:#1e40af;
  background:#1d4ed8;
}

.invoiceActionMail{
  border-color:#0f766e;
  background:#0f766e;
  color:#fff;
}

.invoiceActionMail:hover{
  border-color:#115e59;
  background:#115e59;
}

.invoiceActionPdf{
  border-color:#4338ca;
  background:#4f46e5;
  color:#fff;
}

.invoiceActionPdf:hover{
  border-color:#3730a3;
  background:#4338ca;
}

.invoiceActionDanger{
  border-color:#fecaca;
  background:#fff5f5;
  color:#991b1b;
}

.invoiceActionDanger:hover{
  border-color:#fca5a5;
  background:#fee2e2;
  color:#7f1d1d;
}

.invoiceIconBtn{
  width:30px;
  height:30px;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:#fff;
  color:var(--text-secondary);
  cursor:pointer;
}

.invoiceIconBtn:hover{
  color:var(--danger);
  border-color:#fecaca;
  background:#fff5f5;
}

@media (max-width: 980px){
  .invoiceEditorLayout{
    grid-template-columns:1fr;
  }
  .invoiceDocTop,
  .invoiceFieldGrid,
  .invoiceFieldGrid.three{
    grid-template-columns:1fr;
  }
  .invoiceTitleBlock{
    text-align:left;
  }
}

@media (max-width: 640px){
  .invoicesHeader,
  .invoiceToolbar,
  .invoiceModalHeader{
    align-items:stretch;
    flex-direction:column;
  }
  .invoiceModalActions{
    justify-content:flex-start;
  }
  .invoiceModalBody{
    padding:12px;
  }
  .invoiceDocumentInner{
    padding:16px;
  }
}