@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap);
.calendar-notifications-container{padding:20px}.calendar-notifications-container .calendar-card .calendar-wrapper .fc .fc-daygrid-day-number-wrapper{display:flex;flex-direction:column;align-items:center}.calendar-notifications-container .calendar-card .calendar-wrapper .fc .fc-daygrid-day-number-wrapper .notification-badges{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;justify-content:center}.calendar-notifications-container .calendar-card .calendar-wrapper .fc .fc-daygrid-day-number-wrapper .notification-badges .ant-badge .ant-badge-count{font-size:10px;height:18px;line-height:18px;min-width:18px;padding:0 4px}.calendar-notifications-container .calendar-card .calendar-wrapper .fc .fc-daygrid-day{cursor:pointer;transition:background-color .2s}.calendar-notifications-container .calendar-card .calendar-wrapper .fc .fc-daygrid-day:hover{background-color:rgba(0,0,0,.02)}.calendar-notifications-container .calendar-card .calendar-wrapper .fc .fc-daygrid-day-number{font-size:14px;font-weight:500}.calendar-notifications-container .calendar-card .notifications-day-view .notification-item{transition:background-color .2s}.calendar-notifications-container .calendar-card .notifications-day-view .notification-item:hover{background-color:rgba(0,0,0,.02)}.calendar-notifications-container .calendar-card .notifications-day-view .notification-item-restricted{opacity:.7;background-color:rgba(0,0,0,.03)}.calendar-notifications-container .calendar-card .notifications-day-view .notification-item-restricted .ant-list-item-meta-title{color:#999}.calendar-notifications-container .legend-container{display:flex;gap:20px;flex-wrap:wrap}.calendar-notifications-container .legend-container .legend-item{display:flex;align-items:center;gap:8px}.calendar-notifications-container .legend-container .legend-item .ant-badge .ant-badge-count{width:20px;height:20px;line-height:20px}.calendar-notifications-container .legend-container .legend-item span{font-size:14px}.calendar-notifications-loading{display:flex;justify-content:center;align-items:center;min-height:400px}.fc .fc-toolbar-title{font-size:1.5rem;font-weight:600}.fc .fc-button{background-color:#1890ff;border-color:#1890ff;text-transform:capitalize}.fc .fc-button:hover{background-color:#40a9ff;border-color:#40a9ff}.fc .fc-button:focus{box-shadow:0 0 0 2px rgba(24,144,255,.2)}.fc .fc-button-primary:not(:disabled).fc-button-active{background-color:#096dd9;border-color:#096dd9}.fc .fc-day-today{background-color:rgba(24,144,255,.1) !important}
/* #qt-quotation-content {
  width: 100%;
  min-height: 297mm;
  padding: 20px;
  margin: 0;
  background: white;
  box-sizing: border-box;
  font-size: 10pt;
}

.qt-container {
  width: 100%;
  margin: 0;
  padding: 0;
  background: white;
  font-family: Arial, sans-serif;
  color: #000;
  line-height: 1.6;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  min-height: 280mm;
}

.qt-content-wrapper {
  width: 100%;
  padding: 60px 40px;
  color: #000;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
}


.qt-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 50px;
}


.qt-title {
  font-size: 24pt;
  font-weight: 700;
  margin: 0; 
  text-align: center;
}

.qt-details-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 20px;
  gap: 30px;
  padding-bottom: 15px;

}


.qt-customer-section {
  flex: 1;
  min-width: 0;
}

.qt-company-section {
  flex: 1;
  min-width: 0;
  border-right: 2px solid #000;
}

.qt-company-title,
.qt-customer-title {
  font-size: 12pt;
  font-weight: 900;
  margin-left: 25%;
  margin-bottom: 6px;
}

.qt-detail-item {
  margin-bottom: 0px;
  font-size: 10pt;
  display: flex;
  gap: 4px;
}

.qt-label {
  font-weight: 600;
  min-width: 60px;
}

.qt-value {
  flex: 1;
  font-size: 10pt;
}

.quotation-details {
  margin-top: 12px;
}

.quotation-title {
  font-size: 13px;
  font-weight: 900;
  margin-left: 0 !important;
  margin-bottom: 6px;
  margin-top: 12px;
}

.qt-separator {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: none;
  border-left: 1px solid #000;
}



.quotation-title {
  margin-left: 20px;
  text-decoration: underline;
}

.qt-container .tag {
  position: absolute;
  top: 30px;
  right: 50px;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0;
}

.qt-container .section .address {
  display: flex;
  justify-content: space-between;
}

.qt-container .section .address .billingAdd>p,
.qt-container .section .address .customerdetails>p {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 0;
  text-align: center;
}

.qt-container .section .address .billingAdd {
  border-right: 0.5px solid black;
  padding-left: 0;
  padding-right: 10px;
}

.qt-container .section .address .customerdetails {
  padding-left: 10px;
  padding-right: 0;
  border-left: 0.5px solid black;
}

.qt-container .section .address .billingAdd label,
.qt-container .section .address .customerdetails label {
  margin-bottom: 0px;
}

.qt-container .section .address .billingAdd p,
.qt-container .section .address .customerdetails p {
  line-height: 1.5;
}

.qt-container .section .sectionmid {
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

.qt-container .section .sectionmid .tablehead {
  background-color: #007ed8;
  border: 1px solid black;
  color: black;
  width: 100%;
  height: 50px;
}

.qt-container .section .sectionmid td {
  border: 1px solid black;
  padding: 8px;
}

.qt-container .section .sectionbottom {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.qt-container .section .sectionbottom .table2 {
  border: 1px solid black;
  margin-left: auto;
  width: 50%;
}

.qt-container .section .sectionbottom .table2 tr {
  border: 1px solid black;
}

.qt-container .section .sectionbottom .table2 td,
.qt-container .section .sectionbottom .table2 th {
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}

.qt-container .section .sectionbottom .table2 .tabel2end {
  font-weight: 700;
}

.qt-payment-section {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.qt-qr-code {
  display: flex;
  flex-direction: column;
  margin: 4px;
  padding: 2px;
  border-radius: 10px;
  border: 5px solid #ccc;
}



.qt-bank-details {
  flex: 1;
  margin-left: 250px;
}

.qt-bank-details h4 {
  color: #000;
  margin: 0 0 15px 0;
  font-size: 16px;
}

.qt-bank-details div {
  margin-bottom: 5px;
  font-size: 14px;
}

.qt-terms-section {
  margin-top: 30px;
}

.qt-terms-section h4 {
  color: #4a90e2;
  margin: 0 0 15px 0;
  font-size: 16px;
}

.qt-terms-section ol {
  padding-left: 20px;
  margin: 0;
}

.qt-terms-section li {
  margin-bottom: 10px;
  line-height: 1.4;
}


.qt-services-table {
  width: 100%;
  border-collapse: collapse;
  margin: 5px 0;
  font-size: 10pt;
}

.qt-services-table thead tr {
  background-color: #e6e6e6;
  color: #000;
}

.qt-services-table th {
  padding: 10px 10px;
  text-align: left;
  font-weight: bold;
  border: 0.7px solid #888;
}

.qt-services-table td {
  padding: 8px 10px;
  border: 0.7px solid #888;
}

.qt-services-table th:first-child,
.qt-services-table td:first-child {
  width: 50px;
  text-align: center;
  background-color: #e6e6e6;
  color: #000;
  font-weight: bold;
  border: 0.7px solid #888;
}

.qt-services-table th:nth-child(2),
.qt-services-table td:nth-child(2) {
  width: 45%;
}

.qt-services-table th:nth-child(3),
.qt-services-table td:nth-child(3),
.qt-services-table th:nth-child(4),
.qt-services-table td:nth-child(4) {
  width: 8%;
  text-align: center;
  border: 0.7px solid #888;
}

.qt-services-table th:last-child,
.qt-services-table td:last-child {
  width: 18%;
  text-align: right;
  border: 0.7px solid #888;
  white-space: nowrap;
}

.qt-services-table tbody tr:nth-child(odd) td:not(:first-child) {
  background-color: #fff;
  border: 0.7px solid #888;
}

.qt-services-table tbody tr:nth-child(even) td:not(:first-child) {
  background-color: #f7f7f7;
  border: 0.7px solid #888;
}

.qt-services-table .qt-total-row td {
  background-color: #e6e6e6 !important;
  color: #000;
  font-weight: bold;
  border: 0.7px solid #888;
  padding: 12px 10px;
}

.qt-services-table .qt-total-row td.qt-amount {
  text-align: right;
  font-weight: bold;
  border: 0.7px solid #888;
}


.qt-services-table td.qt-amount {
  font-family: 'Arial', sans-serif;
  white-space: nowrap;
  padding-right: 15px;
}


@media print {
  @page {
    size: A4;
    margin: 0;
  }

  body {
    margin: 0;
    padding: 0;
    background: white !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #qt-quotation-content {
    width: 100%;
    height: 297mm;
    margin: 0;
    padding: 20px;
    background: white;
  }

  .qt-container {
    width: 100%;
    min-height: 297mm;
    border: 1px solid #ffffff;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .qt-content-wrapper {
    padding: 60px 40px;
  }

  .qt-header {
    margin-bottom: 50px;
  }

  .qt-details-container {
    margin-bottom: 20px;
    border-bottom: 1px solid #ffffff;
  }

  .qt-separator {
    border-left: 1px solid #ffffff;
    background: none;
  }

  .qt-services-table {
    width: 100%;
    border-collapse: collapse;
    page-break-inside: avoid;
  }

  .qt-services-table th,
  .qt-services-table td:first-child,
  .qt-services-table .qt-total-row td {
    background-color: #4f81bd !important;
    color: white !important;
    border: 1px solid #ffffff !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .qt-services-table td {
    border: 1px solid #244a6d !important;
  }

  .qt-services-table tbody tr:nth-child(odd) td:not(:first-child) {
    background-color: #EBF3F9 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .qt-services-table tbody tr:nth-child(even) td:not(:first-child) {
    background-color: #D4E5F3 !important;
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }

  .qt-footer {
    margin-top: 5px;
    padding: 10px 0px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .qt-qr-section {
    border: 1px solid #ccc !important;
  }

  .qt-bank-details-box {
    border: 1px solid #ffffff !important;
  }

  .qt-terms {
    margin-top: 30px;
    padding: 0 20px;
  }

  .qt-terms-title {
    font-size: 11pt;
    font-weight: 600;
    margin-bottom: 10px;
    color: #000 !important;
  }

  .qt-terms ol {
    margin: 0;
    padding-left: 20px;
    list-style-type: decimal;
  }

  .qt-terms li {
    font-size: 9pt;
    line-height: 1.4;
    margin-bottom: 4px;
    color: #000 !important;
  }

  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  img,
  .qt-qr-code {
    print-color-adjust: exact !important;
    -webkit-print-color-adjust: exact !important;
  }
}

.qt-services-table {
  border: 1px solid #ffffff;
  margin: 5px 0;
}

.qt-services-table td {
  border: 1px solid #ffffff;
}

.qt-sl-table-head {
  width: 20px !important;
  padding: 0 !important;
}

.qt-separator {
  border-left: 1px solid #ffffff;
  background: none;
  width: 0;
  margin: 0;
  transform: none;
}

.qt-footer {
  margin-top: 5px;
  padding: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.qt-qr-container {
  width: 120px;
}

.qt-qr-section {
  padding: 0px;
  margin-bottom: 5px;
}

.qt-upi-id {
  margin-top: 15px;
  font-size: 8pt;
  margin-left: 4px;
  width: 100%;
}

.qt-qr-code {
  width: 100%;
  height: auto;
}

.qt-bank-details-box {
  border: 1px solid #000;
  padding: 10px;
  width: 100%;
  max-width: 450px;
  align-items: right;
}

.qt-bank-details-box h4 {
  font-size: 10pt;
  font-weight: 600;
  margin: 0 0 5px 0;
}

.qt-bank-details-box div {
  font-size: 9pt;
  line-height: 1.3;
  margin-bottom: 3px;
}


.qt-terms {
  font-style: italic;
  color: #595959;
  margin-top: 30px;
  padding: 0 20px;
  page-break-inside: avoid;
}

.qt-terms-title {
  font-style: italic;
  color: #070000;
  font-size: 8pt;
  font-weight: 600;
  margin-bottom: 10px;
}

.qt-terms ol {
  margin: 0;
  padding-left: 20px;
  color: #595959;
  list-style-type: decimal;
  counter-reset: item;
}

.qt-terms li {
  font-size: 7pt;
  line-height: 1.4;
  margin-bottom: 6px;
  color: #595959;
  font-style: italic;
  text-align: left;
  display: list-item;
  list-style-position: outside;
  padding-left: 5px;
}

.qt-terms li::marker {
  color: #595959;
  font-style: italic;
}

@media print {
  .qt-terms {
    font-style: italic !important;
    color: #595959 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .qt-terms-title {
    font-style: italic !important;
    color: #595959 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .qt-terms ol {
    color: #595959 !important;
    padding-left: 20px !important;
    list-style-type: decimal !important;
    counter-reset: item !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .qt-terms li {
    color: #595959 !important;
    font-style: italic !important;
    display: list-item !important;
    list-style-position: outside !important;
    padding-left: 8px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .qt-terms li::marker {
    color: #595959 !important;
    font-style: italic !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

.qt-logo {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qt-logo-img {
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.qt-other-details {
  font-style: normal;
  color: #595959;
  margin: 20px 0;
  padding: 0 20px;
  font-size: 9pt;
}

.qt-other-details .qt-remark-label {
  font-weight: bold;
  font-style: normal;
  color: #222;
}


 */












/* ==========================================
   PREMIUM QUOTATION TEMPLATE – COMPACT
   ========================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.qtn-wrapper {
  width: 100%;
  padding: 10px;
  background: #f5f7fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

.qtn-doc {
  max-width: 210mm;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  position: relative;
}


.qtn-top-accent {
  height: 5px;
  background: #3b82f6;
}

.qtn-header {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  padding: 20px 26px 16px;
  
  background: #dbeafe;
  
  color: #000000;
 
}

.qtn-company-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.qtn-logo {
  flex-shrink: 0;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.qtn-logo-img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.qtn-company-name {
  font-size: 12pt;
  font-weight: 800;
  margin: 0 0 6px 0;
  line-height: 1.2;
  color: #000000;

}

.qtn-company-addr {
  font-size: 9.5pt;
  line-height: 1.4;
  color: #111827;
  
  margin-bottom: 4px;
  font-weight: 500;
}

.qtn-company-addr p {
  margin-bottom: 2px;
  font-weight: 500;
}

.qtn-state-code {
  font-weight: 500;
  color: #111827;
  
  font-size: 9.5pt;
  margin-top: 2px;
}

.qtn-company-contact {
  font-size: 9.5pt;
  color: #111827;
  
  margin-top: 1px;
  font-weight: 500;
}

.qtn-company-contact p {
  margin-bottom: 1px;
  font-weight: 500;
}

.qtn-doc-info {
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  padding-top: 2px;
}

.qtn-title {
  font-size: 16pt;
  font-weight: 900;
  letter-spacing: 1.4px;
  margin: -2px 0 10px 0;
  color: #000000;
 
  text-shadow: none;
  
  line-height: 1;
}

.qtn-meta-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
}

.qtn-meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  background: rgba(59, 130, 246, 0.18);
  
  padding: 6px 10px;
  border-radius: 5px;
  border-left: 3px solid #3b82f6;
}

.qtn-meta-label {
  font-size: 7pt;
  font-weight: 700;
  color: #4b5563;
  
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.qtn-meta-value {
  font-size: 8.5pt;
  font-weight: 800;
  color: #000000;

}

.qtn-divider {
  height: 2px;
  background: #3b82f6;
}


.qtn-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
  padding: 16px 26px 14px;
}

.qtn-billto-section,
.qtn-details-section {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}

.qtn-section-header {
  background: #3b82f6;
  padding: 7px 12px;
}

.qtn-badge {
  font-size: 9.5pt;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}



.qtn-billto-content {
  padding: 10px 12px;
  background: #f8fafc;
  font-size: 8.5pt;
  color: #080809;
  
}


.qtn-customer-name {
  font-size: 10pt;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e5e7eb;
}


.qtn-address,
.qtn-location {
  font-size: 8.5pt;
  color: #080809;
  line-height: 1.4;
  margin-bottom: 4px;
}


.qtn-detail-line {
  display: flex;
  gap: 6px;
  font-size: 8.3pt;
  margin-bottom: 3px;
}


.qtn-label {
  min-width: 70px;
  
  font-weight: 600;
  color: #080809;

}


.qtn-value {
  font-weight: 500;
  color: #080809;
  
}
.qtn-id-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  margin-bottom: 1px;
  background: #ffffff;
  border-radius: 5px;
  border-left: 3px solid #3b82f6;
  font-size: 7.5pt;
}

.qtn-id-label {
  font-weight: 700;
  color: #080809;
  text-transform: uppercase;
  font-size: 7pt;
  letter-spacing: 0.3px;
}

.qtn-id-value {
  font-weight: 800;
  color: #080809;
  font-family: 'Courier New', Courier, monospace;
}



.qtn-table-section {
  padding: 0 26px 16px;
}

.qtn-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.04);
}

.qtn-table thead {
  background: #3b82f6;
}

.qtn-table th {
  padding: 10px 8px;
  font-size: 7pt;
  font-weight: 800;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: left;
  border: none;
}

.qtn-th-num {
  width: 45px;
  text-align: center !important;
}

.qtn-th-center {
  width: 65px;
  text-align: center !important;
}

.qtn-th-right {
  width: 95px;
  text-align: right !important;
}

.qtn-table tbody {
  background: #ffffff;
}

.qtn-row {
  border-bottom: 1px solid #e2e8f0;
  transition: background-color 0.15s ease;
}

.qtn-row:hover {
  background: #f0f9ff;
}

.qtn-row:last-child {
  border-bottom: none;
}

.qtn-table td {
  padding: 5px 4px;
  font-size: 7.8pt;
  color: #334155;
}

.qtn-td-num {
  text-align: center;
  font-weight: 700;
  color: #64748b;
}

.qtn-td-desc {
  font-weight: 600;
  color: #0f172a;
}

.qtn-td-center {
  text-align: center;
  font-weight: 600;
  color: #475569;
}

.qtn-td-right {
  text-align: right;
  font-weight: 500;
  color: #64748b;
}

.qtn-td-amount {
  text-align: right;
  font-weight: 800;
  color: #1e40af;
  font-size: 8.3pt;
}


.qtn-total-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  padding: 10px 14px;
  border-radius: 0 0 8px 8px;
  margin-top: -1px;
}

.qtn-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  gap: 12px;
}

.qtn-total-row.qtn-discount {
  color: #c62828;
}

.qtn-total-row.qtn-final {
  font-size: 16px;
  font-weight: 700;
  padding-top: 4px;
  margin-top: 4px;
}


.qtn-total-label {
  font-size: 9pt;
  font-weight: 800;
  color: #090909;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.qtn-total-value {
  font-size: 14pt;
  font-weight: 900;
  color: #080808;
  font-family: 'Courier New', Courier, monospace;
}


.qtn-payment-section {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  
  gap: 8px;
  
  padding: 0 24px 10px;
}


.qtn-bank-box {
  border: 1px solid #e5e7f0;
  border-radius: 6px;
  padding: 8px 10px;
  
  background: #f8fafc;
}

.qtn-box-title {
  font-size: 12pt;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  
  padding-bottom: 3px;
  border-bottom: 1px solid #d1d5db;
  
}


.qtn-bank-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 3px;
  
}

.qtn-bank-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1px 0;
  
  background: transparent;
  border-radius: 0;
  border-left: none;
  font-size: 7pt;
  line-height: 1.2;
  
}


.qtn-bank-label {
  font-weight: 600;
  color: #6b7280;
}

.qtn-bank-value {
  font-weight: 700;
  color: #0f172a;
  font-family: 'Courier New', Courier, monospace;
  word-break: break-all;
}


.qtn-bank-row span {
  font-weight: 600;
  color: #6b7280;
}

.qtn-bank-row strong {
  font-weight: 700;
  color: #0f172a;
  font-family: 'Courier New', Courier, monospace;
  word-break: break-all;
}


.qtn-qr-box {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border: 1px solid #3b82f6;
  border-radius: 6px;
  padding: 4px 4px;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.qtn-qr-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  
}

.qtn-qr-img {
  width: 78px;
  
  height: 78px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background: #ffffff;
  padding: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.qtn-upi-text {
  font-size: 6.8pt;
  font-weight: 700;
  color: #1e40af;
  font-family: 'Courier New', Courier, monospace;
  background: #ffffff;
  padding: 3px 5px;
  
  border-radius: 3px;
  word-break: break-all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


.qtn-tax-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 26px;
  background: #f1f5f9;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  font-size: 7.5pt;
}

.qtn-tax-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.qtn-tax-item span {
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.qtn-tax-item strong {
  font-weight: 800;
  color: #0f172a;
  font-family: 'Courier New', Courier, monospace;
}


.qtn-remark {
  margin: 10px 26px 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-left: 4px solid #f59e0b;
  border-radius: 6px;
  font-size: 8pt;
  color: #78350f;
  line-height: 1.4;
}

.qtn-remark strong {
  color: #92400e;
  font-weight: 800;
}


.qtn-terms {
  padding: 12px 26px 18px;
  background: #f8fafc;
  border-top: 2px solid #cbd5e1;
}

.qtn-terms-title {
  font-size: 10pt;
  font-weight: 800;
  color: #0d0d0f;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
  padding-left: 10px;
  border-left: 3px solid #3b82f6;
}

.qtn-terms-list {
  margin: 0;
  padding-left: 18px;
  list-style: decimal;
  font-size: 7pt;
  color: #0f1012;
  line-height: 1.5;
}

.qtn-terms-list li {
  margin-bottom: 6px;
  padding-left: 6px;
  color: #0f1012;
}

.qtn-terms-list strong {
  color: #0f172a;
  font-weight: 700;
}


@media print {
  @page {
    size: A4;
    margin: 8mm;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .qtn-wrapper {
    padding: 0;
    background: #ffffff;
  }

  .qtn-doc {
    box-shadow: none;
  }

  .qtn-top-accent,
  .qtn-divider {
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%) !important;
  }

  .qtn-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
  }

  .qtn-table thead {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%) !important;
  }

  .qtn-total-wrapper {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
  }

  .qtn-qr-box {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  }

  .qtn-remark {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  }
}


@media screen and (max-width: 768px) {
  .qtn-wrapper {
    padding: 8px;
  }

  .qtn-header {
    grid-template-columns: 1fr;
    padding: 18px 16px;
    gap: 14px;
  }

  .qtn-company-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .qtn-doc-info {
    align-items: center;
  }

  .qtn-title {
    font-size: 24pt;
  }

  .qtn-main-grid,
  .qtn-payment-section {
    grid-template-columns: 1fr;
    padding-left: 16px;
    padding-right: 16px;
  }

  .qtn-table-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .qtn-tax-bar {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .qtn-remark,
  .qtn-terms {
    margin-left: 16px;
    margin-right: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}
/* Financial Summary View Container */
.financial-summary-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: #ffffff;
}

.financial-summary-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

.financial-summary-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

/* Header Section */
.fs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    background: linear-gradient(135deg, #e3f2fd 0%, #f5f5f5 100%);
    border: 3px solid #2196f3;
    border-radius: 0;
    margin-bottom: 20px;
}

.fs-header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.fs-company-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.fs-company-info {
    display: flex;
    flex-direction: column;
}

.fs-company-name {
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 5px 0;
    line-height: 1.2;
}

.fs-company-address {
    font-size: 12px;
    color: #424242;
    margin: 0;
    line-height: 1.4;
}

.fs-header-right {
    text-align: right;
}

.fs-title {
    font-size: 28px;
    font-weight: 700;
    color: #000000;
    margin: 0 0 10px 0;
    letter-spacing: 0.5px;
}

.fs-meta {
    font-size: 11px;
    color: #424242;
    line-height: 1.6;
}

.fs-meta p {
    margin: 2px 0;
}

.fs-meta strong {
    font-weight: 600;
}

/* Section Styles */
.fs-section {
    margin-bottom: 25px;
    border: 1px solid #e0e0e0;
    border-radius: 0;
}

.fs-section-header {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fs-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.fs-section-header-blue {
    background-color: #5b7fe6;
}

.fs-section-header-green {
    background-color: #bbf7d0;
    color: #000000;
}

.fs-section-header-yellow {
    background-color: #fde68a;
    color: #000000;
}

.fs-section-header-red {
    background-color: #fca5a5;
    color: #000000;
}

.fs-section-header-cyan {
    background-color: #a5f3fc;
    color: #000000;
}

/* Patient Details Grid */
.fs-details-grid {
    padding: 15px 20px;
    background-color: #ffffff;
}

.fs-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.fs-detail-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.fs-detail-row.fs-detail-full {
    grid-template-columns: 1fr;
}

.fs-detail-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.fs-detail-item-full {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.fs-detail-label {
    font-size: 12px;
    font-weight: 600;
    color: #616161;
    min-width: 140px;
    flex-shrink: 0;
}

.fs-detail-value {
    font-size: 12px;
    color: #212121;
    line-height: 1.5;
    word-break: break-word;
}

/* Balance Cards */
.fs-balance-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background-color: #ffffff;
}

.fs-balance-card {
    padding: 20px;
    text-align: center;
    border: 1px solid #e0e0e0;
    border-right: none;
}

.fs-balance-card:last-child {
    border-right: 1px solid #e0e0e0;
}

.fs-balance-card.fs-balance-blue {
    background-color: #dbeafe;
}

.fs-balance-card.fs-balance-green {
    background-color: #d1fae5;
}

.fs-balance-card.fs-balance-orange {
    background-color: #fed7aa;
}

.fs-balance-label {
    font-size: 13px;
    font-weight: 600;
    color: #000000;
    margin-bottom: 8px;
}

.fs-balance-amount {
    font-size: 18px;
    font-weight: 700;
    color: #1e40af;
}

/* Table Styles */
.fs-table-container {
    overflow-x: auto;
    background-color: #ffffff;
}

.fs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.fs-table thead {
    background-color: #f5f5f5;
}

.fs-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: #424242;
    border-bottom: 2px solid #e0e0e0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.fs-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    color: #333333;
    font-size: 12px;
}

.fs-table tbody tr:hover {
    background-color: #fafafa;
}

.fs-table tbody tr:last-child td {
    border-bottom: none;
}

.fs-table-right {
    text-align: right !important;
}

.fs-amount {
    font-weight: 600;
    color: #000000;
    text-align: right !important;
}

.fs-table-total td {
    background-color: #f9f9f9;
    font-weight: 600;
    padding: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.fs-table-total:last-child td {
    border-bottom: none;
}

/* Financial Summary Section */
.fs-summary-header {
    padding: 15px 20px;
    background-color: #5b7fe6;
    color: #ffffff;
    text-align: center;
}

.fs-summary-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.fs-summary-content {
    padding: 20px;
    background-color: #fafafa;
}

.fs-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

.fs-summary-row:last-of-type {
    border-bottom: 2px solid #bdbdbd;
    margin-bottom: 15px;
}

.fs-summary-label {
    font-size: 14px;
    color: #424242;
    font-weight: 500;
}

.fs-summary-value {
    font-size: 14px;
    font-weight: 600;
}

.fs-summary-green {
    color: #10b981;
}

.fs-summary-red {
    color: #dc2626;
}

.fs-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    margin-top: 10px;
}

.fs-summary-total-label {
    font-size: 16px;
    font-weight: 700;
    color: #212121;
}

.fs-summary-total-value {
    font-size: 24px;
    font-weight: 700;
}

/* Footer Section */
.fs-footer {
    padding: 20px;
    background-color: #f8fafc;
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #e0e0e0;
}

.fs-footer-main {
    font-size: 14px;
    color: #475569;
    margin: 0 0 8px 0;
    font-weight: 500;
}

.fs-footer-powered {
    font-size: 12px;
    color: #64748b;
    margin: 0;
    font-style: italic;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .fs-header {
        flex-direction: column;
        gap: 20px;
    }

    .fs-header-right {
        text-align: left;
    }

    .fs-balance-cards {
        grid-template-columns: 1fr;
    }

    .fs-balance-card {
        border-right: 1px solid #e0e0e0;
        border-bottom: none;
    }

    .fs-balance-card:last-child {
        border-bottom: 1px solid #e0e0e0;
    }
}

@media (max-width: 768px) {
    .financial-summary-content {
        padding: 10px;
    }

    .fs-header {
        padding: 15px;
    }

    .fs-company-logo {
        width: 60px;
        height: 60px;
    }

    .fs-company-name {
        font-size: 16px;
    }

    .fs-title {
        font-size: 20px;
    }

    .fs-detail-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .fs-detail-label {
        min-width: 120px;
    }

    .fs-table-container {
        overflow-x: scroll;
    }

    .fs-table {
        min-width: 600px;
    }

    .fs-summary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .fs-summary-total {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .fs-company-name {
        font-size: 14px;
    }

    .fs-company-address {
        font-size: 10px;
    }

    .fs-title {
        font-size: 16px;
    }

    .fs-meta {
        font-size: 9px;
    }

    .fs-detail-label {
        font-size: 11px;
        min-width: 100px;
    }

    .fs-detail-value {
        font-size: 11px;
    }

    .fs-balance-label {
        font-size: 11px;
    }

    .fs-balance-amount {
        font-size: 16px;
    }

    .fs-summary-label,
    .fs-summary-value {
        font-size: 12px;
    }

    .fs-summary-total-label {
        font-size: 14px;
    }

    .fs-summary-total-value {
        font-size: 18px;
    }
}

/* Print Styles */
@media print {
    .financial-summary-container {
        overflow: visible;
    }

    .financial-summary-content {
        max-width: 100%;
        padding: 0;
    }

    .fs-section {
        page-break-inside: avoid;
    }

    .fs-table {
        page-break-inside: auto;
    }

    .fs-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }
}
/* Patient Deposit Narration Ledger Styles */
/* Prefixed with 'on-' (overall-narration) to avoid global class conflicts */

/* ===== Header Summary Card ===== */
.on-ledger-summary-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #f0f0f0;
}

.on-ledger-summary-card .ant-card-body {
  padding: 24px 28px;
}

/* Balance Card Layout */
.on-balance-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1px solid #bbf7d0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.on-balance-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.15);
}

.on-balance-card.on-balance-security {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
}

.on-balance-card.on-balance-security:hover {
  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
}

/* Balance Icon */
.on-balance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
  color: #fff;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 8px rgba(82, 196, 26, 0.25);
}

.on-balance-icon.on-security {
  background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.25);
}

/* Balance Content */
.on-balance-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.on-balance-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.on-balance-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* As Of Card */
.on-asof-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
  border: 1px solid #e5e7eb;
}

.on-asof-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
}

.on-asof-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.on-asof-label {
  font-size: 12px;
  color: #9ca3af;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.on-asof-value {
  font-size: 17px;
  font-weight: 600;
  color: #374151;
}

/* Legacy Balance indicators (kept for compatibility) */
.on-balance-positive {
  color: #52c41a;
}

.on-balance-negative {
  color: #ff4d4f;
}

.on-balance-neutral {
  color: #1890ff;
}

/* Entry type badges */
.on-entry-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.on-entry-type-cr {
  background-color: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.on-entry-type-dr {
  background-color: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.on-entry-type-adj {
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

/* Account column styling */
.on-account-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.on-account-advance {
  background-color: #e6f7ff;
  color: #1890ff;
}

.on-account-security {
  background-color: #fff7e6;
  color: #fa8c16;
}

.on-account-system {
  background-color: #f0f0f0;
  color: #8c8c8c;
}

/* References styling */
.on-references-container {
  font-size: 12px;
  line-height: 1.6;
}

.on-reference-link {
  color: #1890ff;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}

.on-reference-link:hover {
  color: #40a9ff;
  text-decoration: underline;
}

.on-reference-separator {
  color: #d9d9d9;
  margin: 0 2px;
}

/* Narration text */
.on-narration-text {
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}

/* Timestamp styling */
.on-timestamp-display {
  font-size: 13px;
  color: #555;
}

.on-timestamp-asof {
  font-size: 14px;
  color: #888;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .on-ledger-summary-card .ant-card-body {
    padding: 16px 18px;
  }
  
  .on-balance-card,
  .on-asof-card {
    padding: 12px 16px;
  }
  
  .on-balance-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .on-balance-value {
    font-size: 22px;
  }
  
  .on-asof-icon {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  
  .on-asof-value {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .on-balance-card,
  .on-asof-card {
    padding: 10px 14px;
    gap: 12px;
  }
  
  .on-balance-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 8px;
  }
  
  .on-balance-value {
    font-size: 20px;
  }
  
  .on-balance-label {
    font-size: 12px;
  }
}

.nurse-body {
    font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    color: #1a202c;
    margin: 0;
    width: 100%;
    padding: 6mm;
    box-sizing: border-box;
    background: #ffffff;
    line-height: 1.5;
    letter-spacing: -0.01em;
    font-weight: 500;
    user-select: text; /* Make all text selectable by default */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.nurse-header-placeholder {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1a202c;
    letter-spacing: 0.5px;
    background: #ffffff;
    border: 2px solid #1a202c;
    padding: 10px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    user-select: text; /* Make promotional text selectable */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.nurse-brand-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 4px;
    padding: 12px;
    margin: 0 0 16px 0;
    box-sizing: border-box;
}

.nurse-legacy-logo,
.nurse-legacy-banner {
    padding: 8px;
    text-align: center;
    font-weight: 500;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    border-radius: 2px;
}

.nurse-legacy-logo {
    width: 220px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.nurse-legacy-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.nurse-legacy-banner {
    flex-grow: 1;
    margin-left: 12px;
    background: #f8fafc;
    color: #4a5568;
    border: 1px solid #e2e8f0;
}

.nurse-section {
    margin-top: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.nurse-section-title {
    background: #caf0f8;
    color: #023e8a;
    border-bottom: 3px solid #0096c7;
    border-left: 4px solid #0096c7;
    padding: 12px 16px;
    font-weight: bold;
    font-size: 14px;
    margin: 0;
    /* letter-spacing: 0.5px; */
    text-transform: uppercase;
}

.nurse-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #ffffff;
}

.nurse-table th,
.nurse-table td {
    border: 1px solid #e2e8f0;
    padding: 10px 12px;
    font-size: 12px;
    vertical-align: top;
    font-weight: 500;
    color: #1a202c;
}

.nurse-table th {
    background: #f8fafc;
    font-weight: 700;
    color: #1a202c;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nurse-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

.nurse-table tbody tr td:first-child {
    font-weight: 600;
    color: #374151;
    background: #f8fafc;
}

/* Ensure clean borders and spacing */
.nurse-table th {
    text-align: left;
}

.nurse-table td {
    text-align: left;
}

.nurse-specialization-label,
.nurse-language-label {
    font-weight: 700;
    color: #1a202c;
    font-size: 12px;
}

.nurse-specialization-item {
    font-size: 11px;
    font-weight: 600;
    color: #1e40af;
    background: #dbeafe;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
    margin: 2px 4px 2px 0;
    border: 1px solid #93c5fd;
}

.nurse-language-item {
    font-size: 11px;
    font-weight: 600;
    color: #065f46;
    background: #d1fae5;
    padding: 4px 10px;
    border-radius: 12px;
    display: inline-block;
    margin: 2px 4px 2px 0;
    border: 1px solid #18ca92;
}

/* .nurse-specialization-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
} */

.nurse-profile-container {
    display: flex;
    gap: 16px;
    padding: 12px;
    background: #ffffff;
}

.nurse-profile-pic-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.nurse-profile-pic {
    width: 240px;
    height: 300px;
    object-fit: cover;
    border-radius: 4px;
    border: 2px solid #e5e7eb;
}

.nurse-cg-id {
    font-size: 11px;
    margin-top: 8px;
    color: #1a202c;
    font-weight: 700;
    background: #e2e8f0;
    padding: 6px 72px;
    border-radius: 4px;
    border: 2px solid #4a5568;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.nurse-kyc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    padding: 12px;
    background: #ffffff;
}

.nurse-kyc-box {
    height: 320px;
    border: 2px dashed #cbd5e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #6b7280;
    background: #f9fafb;
    position: relative;
    overflow: hidden;
}

.nurse-kyc-box img {
    max-height: 100%;
    max-width: 100%;
    border-radius: 2px;
    object-fit: cover;
}

.nurse-footer {
    margin-top: 16px;
    padding: 12px;
    text-align: center;
    font-size: 11px;
    color: #6b7280;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

.nurse-tick {
    color: #065f46;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    vertical-align: middle;
    background: #d1fae5;
    padding: 4px 10px;
    border-radius: 15px;
    border: 2px solid #18ca92;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 2px 4px 2px 0;
    width: fit-content;
}


/* .nurse-tick::before {
    content: '✓' !important;
    font-weight: bold !important;
    font-size: 12px !important;
}

.nurse-tick::before {
    content: '✓' !important;
    font-weight: bold !important;
    font-size: 14px !important;
} */

.nurse-details-table {
    flex: 1 1;
}

.nurse-details-table strong {
    color: #1f2937;
    font-weight: 700;
}

.nurse-company-details {
    text-align: right;
}

.nurse-company-details h4 {
    margin: 0 0 6px 0;
    font-size: 25px;
    font-weight: 900;
    color: #1a202c;
}

.nurse-company-details p {
    margin: 3px 0;
    font-size: 13px;
    color: #2d3748;
    line-height: 1.4;
}

/* Page break handling for PDF generation and printing */
.nurse-section,
.nurse-profile-container,
.nurse-table,
.nurse-kyc-grid {
    page-break-inside: avoid;
}

.nurse-section-title {
    page-break-after: avoid;
}

/* Enhanced typography for minimalistic design */
.nurse-details-table strong {
    color: #2d3748;
    font-weight: 600;
}

.nurse-section:first-of-type {
    margin-top: 16px;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .nurse-profile-container {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .nurse-kyc-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .nurse-brand-info {
        flex-direction: column;
        gap: 12px;
    }

    .nurse-legacy-logo {
        width: 100%;
    }

    .nurse-legacy-banner {
        margin-left: 0;
    }
}

/* Specific styles for printing to ensure clean output */
@media print {
    .nurse-body {
        background: #ffffff !important;
        font-size: 12px;
        padding: 8mm;
    }

    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .nurse-header-placeholder {
        background: #667eea !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    .nurse-section-title {
        background: #667eea !important;
        color: #ffffff !important;
    }

    .nurse-brand-info,
    .nurse-section {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
        border: 1px solid #e5e7eb !important;
    }

    .nurse-profile-pic {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
    }

    /* Ensure gradients print correctly */
    .nurse-legacy-logo {
        background: #dbeafe !important;
        border: 1px solid #bfdbfe !important;
    }

    .nurse-legacy-banner {
        background: #e0f2fe !important;
        color: #0369a1 !important;
        border: 1px solid #7dd3fc !important;
    }

    .nurse-specialization-item {
        background: #dbeafe !important;
        color: #1e40af !important;
        border: 1px solid #93c5fd !important;
    }

    .nurse-tick {
        background: #d1fae5 !important;
        color: #059669 !important;
        border: 1px solid #6ee7b7 !important;
    }

    /* Remove hover effects for print */
    .nurse-section:hover,
    .nurse-brand-info:hover,
    .nurse-specialization-item:hover,
    .nurse-tick:hover,
    .nurse-kyc-box:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }

    /* Re-apply page break rules */
    .nurse-section,
    .nurse-profile-container,
    .nurse-table,
    .nurse-kyc-grid {
        page-break-inside: avoid;
    }

    .nurse-section-title {
        page-break-after: avoid;
    }

    /* Ensure proper PDF colors */
    .nurse-body {
        background: #ffffff !important;
        color: #1a202c !important;
    }

    .nurse-header-placeholder {
        background: #ffffff !important;
        color: #1a202c !important;
        border: 2px solid #1a202c !important;
    }

    .nurse-section-title {
        background: #f8fafc !important;
        color: #1a202c !important;
        border-bottom: 2px solid #1a202c !important;
    }

    .nurse-section {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
    }

    .nurse-brand-info {
        background: #ffffff !important;
        border: 2px solid #e2e8f0 !important;
    }

    .nurse-table th,
    .nurse-table td {
        background: #ffffff !important;
        color: #1a202c !important;
    }

    .nurse-table th {
        background: #f8fafc !important;
    }

    .nurse-table tbody tr:nth-child(even) {
        background-color: #f9fafb !important;
    }
}

/* Field header styles for better prominence */
.nurse-field-header {
    font-weight: 800;
    color: #1a202c;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nurse-field-value {
    font-weight: 600;
    color: #2d3748;
    font-size: 12px;
}

/* Center align document status */
/* .nurse-table td .nurse-tick {
    display: block;
    margin: 0 auto;
    width: fit-content;
} */

/* Terms and Conditions Styles */
.nurse-terms-content {
    padding: 16px;
    background: #ffffff;
    user-select: text; /* Make T&C text selectable */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.nurse-term-item {
    margin-bottom: 8px;
    line-height: 1.6;
    font-size: 13px;
    color: #1a202c;
    padding-left: 4px;
    user-select: text; /* Make individual terms selectable */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

.nurse-term-item:last-child {
    margin-bottom: 0;
}
body {
    border: none;
    padding: none;
    box-sizing: border-box;
}

label {
    font-weight: 700;
}

.nbt-container {
    /* line-height: 2; */
    padding-inline: 20px !important;
    padding-top: 30px !important;
    border: 2px solid black;
    width: 900px !important;
    height: auto !important;
    position: relative !important;
    padding-bottom: 30px !important;
    margin: auto;
}

.nbt-container .borderdesigntop {
    border: 15px solid black;
    width: 40%;
}

.nbt-container .nbt-tag {
    position: absolute !important;
    top: 30px !important;
    right: 24px !important;
    /* right: 100px !important; */
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.nbt-container .nbt-header {
    display: flex;
    justify-content: space-between;
    /* margin-top: 15px; */
    margin-top: 0 !important;
    align-items: center;
    margin-bottom: 20px !important;
}

.nbt-container .nbt-header .nbt-left {
    display: flex;
    align-items: center;
}

.nbt-container .nbt-header .logo {
    width: 250px;
    min-height: 150px;
    padding: 0;
    /* object-fit: contain; */
    /* display: flex; */
    /* justify-content: center;         */
    /* align-items: center;  */
}

.nbt-container .nbt-header .logo img {
    /* text-align: center; */
    /* width: 250px; */
    /* min-height: 150px; */
    /* padding: 0; */
    object-fit: contain;
}

.nbt-container .nbt-header .company {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    /* Take available space */
    /* padding-left: 20px; */
}



.nbt-container .nbt-header .companydetails {
    position: absolute;
    top: 30px;
    right: 50px;
    margin-top: 35px;
    margin-bottom: 10px;
    padding: 6px;
    border: 1px solid gray !important;
    border-radius: 10px;
}

.nbt-container .nbt-header .companydetails>p {
    margin-bottom: 0;
    font-weight: bold;
}

.nbt-container .nbt-header .companydetails label {
    margin-bottom: -5px;
    font-size: 0.8rem;
    font-weight: bold;
}

.nbt-container .nbt-header .companydetails span {
    font-size: 0.8rem;
}

.nbt-container .section .companyName {
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    /* font-size:1.5rem ; */
    text-align: left;
    /* font-style: italic; */
    font-style: normal;
    word-spacing: -2px !important;
}

.companyNameTitle p {
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    /* font-size:1.5rem ; */
    text-align: left;
    /* font-style: italic; */
    font-style: normal;
    word-spacing: -2px !important;
    line-height: 1.2;
    /* margin:0 10px */
}

.nbt-container .section .address {
    display: flex;
    justify-content: space-between;
    /* margin-bottom: 40px; */
}

.nbt-container .section .address .billingAdd>p {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0;
    text-align: center;
}

.nbt-container .section .address .billingAdd {
    border-right: 0.2px solid black !important;
    padding-left: 0;
    padding-right: 40px !important;
}

.nbt-container .section .address .billingAdd label {
    margin-bottom: 0px;
}

.nbt-container .section .address .billingAdd p {
    line-height: 1.5;
}

.nbt-container .section .address .customerdetails label {
    margin-bottom: 0px;
}

.nbt-container .section .address .customerdetails>p {
    font-weight: bold;
    margin-bottom: 0;
    font-size: 18px;
    text-align: center;
}

.nbt-container .section .address .customerdetails p {
    line-height: 1.5;
}

.nbt-container .section .address .customerdetails {
    padding-left: 10px !important;
    /* padding-left: 50px !important; */
    padding-right: 0;
    border-left: 0.2px solid black !important;
}


.nbt-container .section .nbt-sectionmids {
    /* border: 1px solid black; */
    width: 100%;
    text-align: center;
}

.nbt-container .section .nbt-sectionmids .nbt-tablehead {
    /* background-color: black; */
    background-color: #EDEDED;
    /* border: 1px solid black; */
    color: black;
    width: 100%;
    height: 50px;
}

.height {
    height: auto;
}

.nbt-width {
    width: 46.3px !important;
}

/* .nbt-container .section .nbt-sectionmids .nbt-left {
    border-left: 1px solid black;
  } */

.nbt-container .section .nbt-sectionmids td {
    /* background-color: #EDEDED; */
    /* border: 1px solid black; */
}

.nbt-container .section .sectionbottom {
    display: flex;
    justify-content: space-between;
    /* border: 1px solid black; */
    text-align: center;
}

.nbt-container .section .sectionbottom .table2 {
    /* width: 50%; */
    /* border: 1px solid black; */
}

.nbt-container .section .sectionbottom .table2 tr {
    /* border: 1px solid black; */
}

tr:nth-child(even) {
    /* background-color: #EDEDED; */
    width: 100%;
}

.nbt-container .section .sectionbottom .table2 td {
    /* border: 1px solid black; */
    padding: 0 5px;
}

.nbt-container .section .sectionbottom .table2 th {
    /* border: 1px solid black; */
    text-align: center !important;
    padding: 0 5px;
}

.nbt-container .section .sectionbottom .table2 .tabel2end {
    font-weight: 700;
}

.nbt-container .borderdesignbottom {
    /* border: 10px solid black; */
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    width: 40%;
}

.billingOtherDetails {
    margin-top: 10px;
}

.horizontal-table-head {
    margin: auto !important;
    text-align: right !important;
    padding-right: 2px !important;
    /* border-bottom: 1px solid black !important; */
}

.nbt-sign {
    /* margin-top: 40px; */
    text-align: center;
    width: 25%;
    /* padding-block: 60px; */
}

.nbt-sign .signimg {
    margin-inline: auto;
    margin-block: 5px;
}

.nbt-qrcode-bankdetails-sign {
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    margin-top: 20px !important;
    padding: 10px 0 !important;
}

.nbt-qrCodes {
    /* display: flex; */
    /* margin-top: 40px !important; */
    width: 20%;
}

.nbt-qrCodes img {
    border: 5px solid #ccc;
    border-radius: 10px;
    margin-bottom: 0px;
    width: 150px;
    height: 150px;
}

.nbt-qrCodes span {
    font-size: 12px !important;
    /* font-weight: bold; */
    color: #333;
    /* background-color: #f9f9f9; */
    /* padding: 5px; */
    /* border-radius: 5px; */
}

.nbt-qrCodes p {
    font-size: 10px;
    color: #333;
    margin-top: 5px;
}

.eQrCode {
    /* display: flex; */
    margin-top: 40px !important;
    text-align: right !important;
}

.eQrCode img {
    border: 5px solid #ccc;
    border-radius: 10px;
    margin-bottom: 0px;
    width: 150px;
    height: 150px;
}

.eQrCode p {
    font-size: 14px !important;
    font-weight: bold;
    color: #333;
    margin-top: 5px;
}

.nbt-bankDetailss {
    width: 52%;
    height: fit-content;
}

.nbt-bankDetailss p {
    font-size: 13px;
    font-weight: normal;
    color: #333;
    /* padding: 0 5px; */
    margin-bottom: 0;
    border-radius: 5px;
}

.nbt-bankDetailss p:first-child {
    padding-bottom: 0px;
    font-weight: bold;
    font-size: 14px;
}

.nbt-bankDetailss span {
    font-size: 13px;
    color: #333;
    font-weight: normal;
}


.terms {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    /* background-color: #f9f9f9; */
    /* padding: 5px; */
    margin: 5px;
    /* margin-bottom: 0; */
    border-radius: 5px;
}

.terms p {
    margin-bottom: 0px;
    font-style: italic;
}

.terms .termsFont {
    font-size: 13px;
    color: #333;
    font-weight: normal;
    display: block;
    font-style: italic;
}

/* .cta>p {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #333;
  } */

/* .cta>div {
    display: flex;
    justify-content: space-between;
    background-color: #edfaf4;
    padding: 10px 10px;
    border-radius: 10px;
  } */

/* .cta .ctaBox {
    display: flex;
    align-items: center;
    gap:16px
  } */

/* .cta .ctaBox .ctaHeroFont {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #333;
  } */

/* .cta .ctaBox .ctaFont {
    font-size: 13px;
    color: #333;
    font-weight: normal;
    display: block;
  } */

.divider {
    margin: 50px 0
}

/* ************************** */
.table-row {
    page-break-inside: avoid;
    /* Prevents the row from being split */
}

.nbt-container {
    page-break-inside: avoid;
}

/* Prevent breaking inside tables */
table {
    page-break-inside: auto;
    page-break-before: auto;
    page-break-after: auto;
}

/* Ensure the row moves to the next page instead of breaking */
tr {
    page-break-inside: avoid;
    page-break-after: auto;
}

/* Header and footer should not break */
thead {
    display: table-header-group;
}

tfoot {
    display: table-footer-group;
}

/* .cta .ctaBox .ctaIcon {
    clip-path: polygon(24.8% 0%, 76% 0%, 100% 50%, 76% 100%, 24.8% 100%, 0% 50%);
    background-color: #5dbda0;
    font-size: 20px;
    color: white;
    padding: 10px 10px;
  } */

.table-hsn {
    font-size: 11px !important;
    font-style: italic;
    margin-right: 5px !important;
}

.table-hsn-span {
    margin-left: 5px !important;
}

.nbt-sub-table-head {
    border-right: 1px solid black;
    padding-left: 1px;
    padding-right: 4px;
}

.sub-table-head-amt {
    padding-left: 4px;
    padding-right: 0;
}

.horizontal-table-right {
    text-align: right !important;
    padding-right: 2px !important;
}

/* .nbt-container .section .nbt-sectionmids thead th {
    border: 1px solid black !important;
} */

/* .nbt-container .section .nbt-sectionmids thead tr {
    border: 1px solid black !important;
} */

.nbt-container .section .nbt-sectionmids tbody td {
    border: 1px solid gray;
}

.nbt-container .section .nbt-sectionmids tbody tr {
    border: 1px solid gray;
}

.table-left-body-border-black {
    border-left: 1px solid black !important;
}

.table-right-body-border-black {
    border-right: 1px solid black !important;
}

.table-total-border {
    /* border: 1px solid black !important; */
}

.table-bottom-head-border-black {
    border-bottom: 1px solid black !important;
}

/* total invoiced row black border  */
.nbt-container .section .nbt-sectionmids tbody tr:last-child td {
    /* border: 1.5px solid black !important; */
    /* border-top: 1.5px solid black !important; */
    /* border-bottom: 10px solid black !important; */
}

.nbt-table-last-child td {
    border: 1.5px solid black !important;
    border-top: 1.6px solid black !important;
    border-bottom: 1.6px solid black !important;
}

/* total invoiced row black border  */
.nbt-container .section .nbt-sectionmids tbody tr:last-child td:last-child {
    /* border-top: 10px solid black !important; */
    /* border-bottom: 10px solid black !important; */
}

.sectionbottom tbody tr:last-child td {
    border: 1.5px solid black !important;
    border-top: 1.5px solid black !important;
    /* border-bottom: 10px solid black !important; */
}

.nbt-formatted-text {
    font-family: Arial, Helvetica, sans-serif;
    /* white-space: nowrap; */
    letter-spacing: 0.01em !important;
    /* word-spacing: 0 !important; */
    /* font-size: 1.0rem; */
}
/* design changed by vishal */

.email-field {
    font-family: Arial, Helvetica, sans-serif;
    /* white-space: nowrap; */
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-size: 0.70rem;
    line-height: 1.2;
    margin-top: 2px;
}

#invoice {
    border: none !important;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    /* max-width: 900px; */
    max-width: 100%;

}

.nbt2container {
    padding-inline: 20px !important;
    padding-top: 30px !important;
    border: 2px solid black;
    width: 900px !important;
    height: auto !important;
    position: relative !important;
    padding-bottom: 30px !important;
    margin: auto;
}

.nbt2container .nbt2tag {
    /* text-align: right; */

    /* font-weight: 700;
    font-size: 1.8rem;
    color: #1a237e;
    margin-bottom: 2px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    border-bottom: 3px solid #ff5722;
    padding-bottom: 3px; */

    position: absolute !important;
    top: 30px !important;
    right: 24px !important;
    /* right: 100px !important; */
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
    color: #1a237e;
    border-bottom: 3px solid #ff5722;
}

.nbt2container .nbt2header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 2mm;
}

.nbt2container .nbt2header .left {
    display: flex;
    align-items: center;

}

.nbt2container .nbt2header .logo {
    /* width: 100px;
    height: 100px; */

    width: 250px;
    min-height: 150px;

    /* min-height: auto; */
    padding: 0;
    display: flex;
    /* align-items: center; */
    align-items: flex-start;

    /* justify-content: center; */
}


.nbt2container .nbt2header .logo img {
    object-fit: contain;
    margin-top: -50px;
    /* height: 100%;
    width: 100%; */
}

.nbt2container .nbt2header .nbt2companydetails {
    padding: 1px;
    border: 1px solid #c5cae9 !important;
    border-radius: 8px;
    background-color: #e8eaf6;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}

.nbt2container .nbt2header .nbt2companydetails>p {
    margin: 0px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #3f51b5;


}

.nbt2container .nbt2header .nbt2companydetails label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #455a64;
    line-height: 1.1;


}

.nbt2container .nbt2header .nbt2companydetails span {
    font-size: 0.75rem;
    line-height: 1.1;

}

.nbt2container .nbt2section .nbt2address {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;

    overflow: hidden;

}

.nbt2container .nbt2section .nbt2address .nbt2billingAdd,
.nbt2container .nbt2section .nbt2address .nbt2customerdetails {
    padding: 1px 1px 1px 5px;

    width: 50%;

    box-sizing: border-box;
    background-color: #EAEFF8;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #c5cae9;
    border-radius: 8px;
    line-height: 1.3rem;
    /* color: #0e0e0e; */
    color: #202020;
    /* font-weight: 500; */

}

.nbt2container .nbt2section .nbt2address .nbt2billingAdd {
    border-right: 1px solid #c5cae9 !important;

}

.nbt2container .nbt2section .nbt2address .nbt2billingAdd>p,
.nbt2container .nbt2section .nbt2address .nbt2customerdetails>p {
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 3px !important;
    text-align: center !important;
    color: #1a237e;
    text-transform: uppercase;
    border-bottom: 1px solid #c5cae9;
    /* padding-bottom: 3px; */
    /* padding-left: 3px; */
    padding: 3px 0 3px 3px;

}

.nbt2container .nbt2section .nbt2address .nbt2billingAdd label,
.nbt2container .nbt2section .nbt2address .nbt2customerdetails label {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;

}

/* .nbt2container .nbt2section .nbt-sectionmid {
    width: 100%;
    text-align: center;
    border-collapse: collapse;

    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.nbt2container .nbt2section .nbt-sectionmid th,
.nbt2container .nbt2section .nbt-sectionmid td {
    border: 1px solid black;
    padding: 4px;
    text-align: center;
}


.nbt-sectionmid thead {
    display: table-header-group;

    page-break-after: avoid !important;
    background-color: #e8eaf6;

}

.nbt2container .nbt2section .nbt-sectionmid .tablehead {
    background-color: #ededed;

    color: black;
    width: 100%;
    height: 50px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.height {
    height: auto;
}

.width {
    width: 46.3px !important;
}

.nbt2container .nbt2section .nbt-sectionmid td {
    border: 1px solid gray;
}

.nbt2container .nbt2section .sectionbottom {
    display: flex;
    justify-content: space-between;

    border: 1px solid black;
    text-align: center;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;

}

.nbt2container .nbt2section .sectionbottom .table2 {
    border: 1px solid black;
}

.nbt2container .nbt2section .sectionbottom .table2 tr {
    border: 1px solid black;
}

tr:nth-child(even) {
    width: 100%;
}



.nbt2container .nbt2section .sectionbottom .table2 td {
    border: 1px solid black;
    padding: 0 5px;
}

.nbt2container .nbt2section .sectionbottom .table2 th {
    border: 1px solid black;
    text-align: center !important;
    padding: 0 5px;
}


.nbt2container .nbt2section .sectionbottom .table2 .tabel2end {
    font-weight: 700;
} */

/* Table design Change  */

/* Main Table */

.nbt-sectionmid {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    border: 1px solid #444;

}

/* Header Row */
.nbt-sectionmid th {
    padding: 2px 2px;
    text-align: center;
    font-weight: bold;
    /* border-bottom: 1px solid #444;
    border-top:1px solid #444 ; */
    border: 1px solid black;

    background-color: #f4f4f4;
    background-color: #EAEFF8;
    white-space: nowrap;
    border-collapse: collapse !important
}

/* Body Rows */
.nbt-sectionmid td {
    padding: 2px 2px;
    /* border-bottom: 1px solid #6d6c6c;
    */

    text-align: right;
    padding-bottom: 0px;

}

/* First Column (Product / Service name) */
.nbt-sectionmid td:first-child,
.nbt-sectionmid th:first-child {
    text-align: center;
}

.nbt-sectionmid td:nth-child(2) {
    text-align: left;
}

/* Remove border from last row */
.nbt-sectionmid tr:last-child td {
    border-bottom: none;
}

/* Add thick border at the very bottom of the table */
.nbt-sectionmid::after {
    content: "";
    display: table-row;
    height: 0;
    border-bottom: 1px solid #444;
}

/* Subtext under product (HSN / SAC code etc.) */
.nbt-sectionmid .table-hsn,
.nbt-sectionmid i {
    display: inline;
    font-size: 9px;
    color: #101010;
}

/* Zebra striping (optional) */
.nbt-sectionmid tr:nth-child(even) td {
    background-color: #f3f1f1;

}

.nbt-qrcode-bankdetails-sign {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* margin-top: 15px; */
    gap: 15px;
}

.nbt-qrCode {
    flex: 0 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nbt-qrCode img {
    width: 120px;
    height: 120px;
    border: 4px solid #3f51b5;
    border-radius: 8px;
    object-fit: contain;
}

.nbt-bankDetails {
    flex: 1 1 auto;
    background-color: #e8eaf6;
    border-radius: 8px;
    padding: 10px;
    border: 1px solid #c5cae9;
    font-size: 0.90rem;
    margin-right: 8px;
}

.nbt-bankDetails p {
    margin: 0;
    line-height: 1.3;
    /* color: #455a64; */
    color: rgb(10, 9, 9)
}

.nbt-bankDetails p:first-child {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 5px;
    color: #1a237e;
}

.nbt-sign {
    flex: 0 0 auto;
    text-align: center;
    min-width: 150px;
    max-width: 160px;
    padding: 0 5px;
}

.nbt-sign .signimg {
    width: 130px;
    height: 80px;
    object-fit: contain;
    margin: 5px 0;
}

.nbt-sign label {
    font-weight: 500;
    /* color: #1a237e; */
    color: black;
    font-size: 0.75rem;
    line-height: 1.3;
}

.terms {
    margin-top: 15px;
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a237e;
    /* border-top: 1px dashed #c5cae9; */
    padding-top: 15px;
}

.terms .termsFont {
    font-weight: 400;
    font-style: italic;
    font-size: 0.8rem;
    color: #455a64;

}

.no-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-top: 13mm;
}

.nbt2-formatted-text {
    font-family: Arial, Helvetica, sans-serif;
    /* white-space: nowrap; */
    letter-spacing: 0.01em !important;
    /* word-spacing: 0 !important; */
    /* font-size: 1.0rem; */
}
body {
  border: none;
  padding: none;
  box-sizing: border-box;
}

label {
  font-weight: 700;
}

.container {
  /* line-height: 2; */
  padding-inline: 60px !important;
  border: 2px solid black;
  width: 900px !important;
  height: auto !important;
  position: relative !important;
  padding-bottom: 30px !important;
}

.container .borderdesigntop {
  border: 15px solid black;
  width: 40%;
}

.container .tag {
  position: absolute;
  top: 30px;
  right: 50px;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0;
}

.container .header {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  align-items: center;
  /* margin-bottom: 20px; */
}

.container .header .left {
  display: flex;
  align-items: center;
}

.container .header .logo {
  width: 250px;
  min-height: 150px;
  padding: 0;
  /* object-fit: contain; */
  /* display: flex; */
  /* justify-content: center;         */
  /* align-items: center;  */
}

.container .header .logo img {
 /* text-align: center; */
 /* width: 250px; */
 /* min-height: 150px; */
 /* padding: 0; */
 object-fit: contain;
}

.container .header .company {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  /* Take available space */
  /* padding-left: 20px; */
}



.container .header .companydetails-einvoice {
  margin-left: 20px;
}

.container .section .companyName {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  /* font-size:1.5rem ; */
  text-align: left;
  /* font-style: italic; */
  font-style: normal;
  word-spacing: -2px !important;
}

.companyNameTitle p {
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  /* font-size:1.5rem ; */
  text-align: left;
  /* font-style: italic; */
  font-style: normal;
  word-spacing: -2px !important;
  line-height: 1.2;
  /* margin:0 10px */
}

.container .section .address {
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 40px; */
}

.container .section .address .billingAdd>p {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 0;
  text-align: center;
}

.container .section .address .billingAdd {
  border-right: 0.5px solid black;
  padding-left: 0;
  padding-right: 10px;
}

.container .section .address .billingAdd label {
  margin-bottom: 0px;
}

.container .section .address .billingAdd p {
  line-height: 1.5;
}

.container .section .address .customerdetails label {
  margin-bottom: 0px;
}

.container .section .address .customerdetails>p {
  font-weight: bold;
  margin-bottom: 0;
  font-size: 18px;
  text-align: center;
}

.container .section .address .customerdetails p {
  line-height: 1.5;
}

.container .section .address .customerdetails {
  padding-left: 10px;
  padding-right: 0;
  border-left: 0.5px solid black;
}


.container .section .sectionmid {
  /* border: 1px solid black; */
  width: 100%;
  text-align: center;
}

.container .section .sectionmid .tablehead {
  /* background-color: black; */
  background-color: #EDEDED;
  border: 1px solid black;
  color: black;
  width: 100%;
  height: 50px;
}

.height {
  height: auto;
}

.table-width {
  width: 63.3px;
}

/* .container .section .sectionmid .left {
  border-left: 1px solid black;
} */

.container .section .sectionmid td {
  /* background-color: #EDEDED; */
  border: 1px solid black;
}

.container .section .sectionbottom {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  text-align: center;
}

.container .section .sectionbottom .sign {
  margin: auto;
  text-align: center;
  padding-block: 60px;
}

.container .section .sectionbottom .sign .signimg {
  margin-inline: auto;
  margin-block: 5px;
}

.container .section .sectionbottom .table2 {
  /* width: 50%; */
  border: 1px solid black;
}

.container .section .sectionbottom .table2 tr {
  border: 1px solid black;
}

tr:nth-child(even) {
  /* background-color: #EDEDED; */
  width: 100%;
}

.container .section .sectionbottom .table2 td {
  border: 1px solid black;
  padding: 0 5px;
}

.container .section .sectionbottom .table2 th {
  border: 1px solid black;
  text-align: center !important;
  padding: 0 5px;
}

.container .section .sectionbottom .table2 .tabel2end {
  font-weight: 700;
}

.container .borderdesignbottom {
  border: 10px solid black;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  width: 40%;
}

.billingOtherDetails {
  margin-top: 10px;
}

.horizontal-table-heads {
  margin: auto !important;
  text-align: center !important;
}

.qrCode {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.qrCode img {
  border: 5px solid #ccc;
  border-radius: 10px;
  margin-bottom: 0px;
  width: 150px;
  height: 150px;
}

.qrCode span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  /* background-color: #f9f9f9; */
  padding: 5px;
  border-radius: 5px;
}

.qrCode p {
  font-size: 16px;
  color: #333;
  margin-top: 5px;
}

/* .bankDetails {
  background-color: #f9f9f9;
} */

.bankDetails p {
  font-size: 13px;
  font-weight: normal;
  color: #333;
  /* padding: 0 5px; */
  margin-bottom: 0;
  border-radius: 5px;
}

.bankDetails p:first-child {
  padding-bottom: 0px;
  font-weight: bold;
  font-size: 14px;
}

.bankDetails span {
  font-size: 13px;
  color: #333;
  font-weight: normal;
}


.terms {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  /* background-color: #f9f9f9; */
  /* padding: 5px; */
  margin: 5px;
  /* margin-bottom: 0; */
  border-radius: 5px;
}

.terms p {
  margin-bottom: 0px;
  font-style: italic;
}

.terms .termsFont {
  font-size: 13px;
  color: #333;
  font-weight: normal;
  display: block;
  font-style: italic;
}

/* .cta>p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
} */

/* .cta>div {
  display: flex;
  justify-content: space-between;
  background-color: #edfaf4;
  padding: 10px 10px;
  border-radius: 10px;
} */

/* .cta .ctaBox {
  display: flex;
  align-items: center;
  gap:16px
} */

/* .cta .ctaBox .ctaHeroFont {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
} */

/* .cta .ctaBox .ctaFont {
  font-size: 13px;
  color: #333;
  font-weight: normal;
  display: block;
} */

.divider {
  margin: 50px 0
}

/* ************************** */
.table-row {
  page-break-inside: avoid;
  /* Prevents the row from being split */
}

.container {
  page-break-inside: avoid;
}

/* Prevent breaking inside tables */
table {
  page-break-inside: auto;
  page-break-before: auto;
  page-break-after: auto;
}

/* Ensure the row moves to the next page instead of breaking */
tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

/* Header and footer should not break */
thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

/* .cta .ctaBox .ctaIcon {
  clip-path: polygon(24.8% 0%, 76% 0%, 100% 50%, 76% 100%, 24.8% 100%, 0% 50%);
  background-color: #5dbda0;
  font-size: 20px;
  color: white;
  padding: 10px 10px;
} */

.table-hsn {
  font-size: 12px !important;
  font-style: italic;
  margin-right: 5px !important;
}

.table-hsn-span {
  margin-left: 5px !important;
}

.sub-table-head {
  border-right: 1.8px solid black;
  padding-left: 3px;
  padding-right: 4px;
}

.sub-table-head-amt {
  padding-left: 4px;
  padding-right: 0;
}
/* --- Scoped Modal Styles --- */

.reconciliationModal .modal-footer button.danger {
  background-color: #fff !important;
  border: 1px solid #d9d9d9 !important;
  color: rgba(0,0,0,0.88) !important;
  border-radius: 8px !important;
  height: 40px;
}

/* --- Form Inputs & Groups --- */
.reconciliationModal .formGroupBlock {
  margin-bottom: 0px !important; /* Increases spacing between rows */
  position: relative;
}

.reconciliationModal .formGroupBlock label {
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 8px;
  display: flex;
  font-size: 14px;
}

/* Unify Input Styles (Text, Number, Date, Select) */
.reconciliationModal .textFieldBlock,
.reconciliationModal .selectFieldBlock .ant-select-selector,
.reconciliationModal .ant-input-number,
.reconciliationModal .ant-picker {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 2px !important; 
  /* height: 42px !important;   */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease-in-out;
  background-color: #fff;
  width: 100%; 
  align-items: center;
}

/* Focus States */
.reconciliationModal .textFieldBlock:focus,
.reconciliationModal .textFieldBlock:focus-within,
.reconciliationModal .selectFieldBlock .ant-select-selector:focus-within,
.reconciliationModal .ant-input-number-focused,
.reconciliationModal .ant-picker-focused {
  border-color: #4096ff !important;
  box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.15) !important;
  outline: none;
}

/* Error State */
.reconciliationModal .errorClass,
.reconciliationModal .hasError .textFieldBlock,
.reconciliationModal .hasError .ant-select-selector {
  border-color: #ff4d4f !important;
  background-color: #fff1f0 !important;
}

.reconciliationModal .text-danger {
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* --- Tables (.sectionmid) --- */
/* Overriding the heavy inline "border: 1px solid black" */
.reconciliationModal .sectionmid {
  /* width: 100%; */
  border-collapse: separate !important; /* Allows border radius */
  border-spacing: 0;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px;
  overflow: hidden;
  margin-top: 24px !important;
}

.reconciliationModal .sectionmid th,
.reconciliationModal .horizontal-table-heads,
.reconciliationModal .tablehead th {
  background-color: #f8fafc !important; /* Overrides EDEDED */
  color: #64748b !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 12px 12px !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  white-space: nowrap;
}

.reconciliationModal .sectionmid td {
  padding: 12px 12px !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  color: #1e293b;
  vertical-align: middle;
}

.reconciliationModal .sectionmid tr:last-child td {
  border-bottom: none !important;
}

.reconciliationModal .sectionmid tr:hover td {
  background-color: #f1f5f9; /* Zebra hover effect */
}

/* HSN / Meta info in tables */
.reconciliationModal .table-hsn,
.reconciliationModal .table-hsn-span {
  display: inline-block;
  background: #eff6ff;
  color: #4096ff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px !important;
  font-weight: 600;
  margin-top: 4px;
}

.reconciliationModal .ReconSubmitBtn {
  width: 120px;
  height: 50px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
}

/* --- Modal & Footer --- */
.reconciliationModal .modal-footer {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end; /* Standard UX aligns actions right */
  gap: 12px;
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* Secondary Button (Exit) */
.reconciliationModal .modal-footer button.danger {
  background-color: #fff !important;
  border: 1px solid #d9d9d9 !important;
  color: rgba(0,0,0,0.88) !important;
  border-radius: 8px !important;
  height: 40px;
}

/* --- Loading Overlay --- */
.reconciliationModal .spinner-overlay {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(2px); /* Frosted glass effect */
  z-index: 1000;
  border-radius: 8px;
} 
/* --- Styling for Payment Inputs --- */

/* 1. Wrapper styling (The Group) */
.reconciliationModal .payment-input-group.ant-input-number-group-wrapper {
  width: 100%;
  border: 1px solid #e2e8f0; /* Soft border */
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s;
}

/* Focus state for wrapper */
.reconciliationModal .payment-input-group.ant-input-number-group-wrapper:focus-within {
  border-color: #4096ff;
  box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.15);
}

/* Error state */
.reconciliationModal .payment-input-group.has-error {
  border-color: #ff4d4f !important;
  background-color: #fff1f0;
}

/* 2. Reset internal InputNumber styles to avoid double border */
.reconciliationModal .payment-input-group .ant-input-number {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 8px 8px 0 !important;
}

.reconciliationModal .payment-input-group .ant-input-number-focused {
  box-shadow: none !important;
}

/* 3. Style the Addon (Colored Box) */
.reconciliationModal .payment-input-group .ant-input-number-group-addon {
  padding: 0;
  border: none;
  height: 100%;
  /* background: transparent !important; */
  width: 50px; /* Fixed width for uniformity */
}

.reconciliationModal .payment-addon {
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center; 
  font-weight: 600;
  font-size: 13px; 
}

/* Custom Payment Input Wrapper */
.reconciliationModal .custom-payment-input-wrapper:focus-within {
  border-color: #4096ff !important;
  box-shadow: 0 0 0 3px rgba(64, 150, 255, 0.15);
}

.reconciliationModal .custom-payment-input-wrapper.over-limit:focus-within {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

/* Override Ant internal styles to fit the custom wrapper */
.reconciliationModal .custom-payment-input-wrapper .ant-input-number-input {
  height: 40px; /* Matches wrapper height */
  padding-left: 12px;
}

/* Ensure no default Ant focus outlines interfere */
.reconciliationModal .custom-payment-input-wrapper .ant-input-number-focused {
  box-shadow: none !important;
}

.reconciliationModal
.selectFieldBlock.ant-select-multiple
.ant-select-selector {
  padding: 4px 8px !important;
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Control tag container layout */
.reconciliationModal
.selectFieldBlock.ant-select-multiple
.ant-select-selection-overflow {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Individual selected tags */
.reconciliationModal
.selectFieldBlock.ant-select-multiple
.ant-select-selection-item {
  height: 28px;
  line-height: 26px;
  margin: 0;
  padding: 0 8px;
  border-radius: 6px;
  background: #f1f5f9;
  border: none;
  font-size: 13px;
  display: flex;
  align-items: center;
}

/* Close (x) icon inside tag */
.reconciliationModal
.selectFieldBlock.ant-select-multiple
.ant-select-selection-item-remove {
  display: flex;
  align-items: center;
}

/* Placeholder alignment when empty */
.reconciliationModal
.selectFieldBlock.ant-select-multiple
.ant-select-selection-placeholder {
  margin-left: 2px;
  line-height: 28px;
}

/* --- Metrics Header Table (Only this table) --- */

.reconciliationModal .metrics-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  background-color: #ffffff;
  margin-top: 16px;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03);
}

.reconciliationModal .metrics-table thead tr {
  display: flex;
  width: 100%;
}

/* Base cell style */
.reconciliationModal .metrics-table th {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  border: none;
  border-right: 1px solid #e2e8f0;
  font-size: 12px;
  white-space: nowrap;
}

.reconciliationModal .metrics-table th:last-child {
  border-right: none;
}

/* Pair-based color coding using nth-child */

/* 1-2: Total Payable */
.reconciliationModal .metrics-table th:nth-child(1) {
  background-color: #fff7ed;
  color: #c05621;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;  
  border-bottom: 2px solid #fed7aa;

}
.reconciliationModal .metrics-table th:nth-child(2) {
  background-color: #fffbeb;
  color: #9a3412; 
  font-weight: 700;
  font-size: 14px;
  border-bottom: 2px solid #fed7aa;
}

/* 3-4: Bill Amount */
.reconciliationModal .metrics-table th:nth-child(3) {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #bfdbfe;
}
.reconciliationModal .metrics-table th:nth-child(4) {
  background-color: #e0f2fe;
  color: #1d4ed8;
  font-weight: 700;
  border-bottom: 2px solid #bfdbfe;
}

/* 5-6: Advance */
.reconciliationModal .metrics-table th:nth-child(5) {
  background-color: #f6ffed;
  color: #166534;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #bbf7d0;
}
.reconciliationModal .metrics-table th:nth-child(6) {
  background-color: #f0fdf4;
  color: #166534;
  border-bottom: 2px solid #bbf7d0;
}

/* 7-8: Security Deposit */
.reconciliationModal .metrics-table th:nth-child(7) {
  background-color: #ecfeff;
  color: #0e7490;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #a5f3fc;
}
.reconciliationModal .metrics-table th:nth-child(8) {
  background-color: #e0f2fe;
  color: #0e7490;
  border-bottom: 2px solid #a5f3fc;
}

/* 9-10: Insurance (if present) */
.reconciliationModal .metrics-table th:nth-child(9) {
  background-color: #f5f3ff;
  color: #5b21b6;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #ddd6fe;
}
.reconciliationModal .metrics-table th:nth-child(10) {
  background-color: #ede9fe;
  color: #4c1d95;
  border-bottom: 2px solid #ddd6fe;
}

/* 11-12: Total TDS (if present) */
.reconciliationModal .metrics-table th:nth-child(11) {
  background-color: #fef2f2;
  color: #b91c1c;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid #fecaca;
}
.reconciliationModal .metrics-table th:nth-child(12) {
  background-color: #fee2e2;
  color: #b91c1c;
  border-bottom: 2px solid #fecaca;
}

 
.reconciliationModal .services-table {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: auto; /* Allows columns to adjust based on content */
}

/* Header */
.reconciliationModal .services-table thead th {
  padding: 6px 8px !important;
  font-size: 11px;
  line-height: 1.2;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

/* Body cells */
.reconciliationModal .services-table tbody td {
  padding: 4px 6px !important;
  font-size: 11px;
  line-height: 1.2;
  width: fit-content !important;
  vertical-align: middle;
  border-top: 1px solid #f1f5f9;
}

/* Zebra */
.reconciliationModal .services-table tbody tr:nth-child(odd) {
  background-color: #ffffff;
}
.reconciliationModal .services-table tbody tr:nth-child(even) {
  background-color: #f9fafb;
}

/* Product extra info */
  .reconciliationModal .services-table tbody td .table-hsn {
    margin-top: 4px !important;
    font-size: 10px !important;
    color: #94a3b8; /* Muted gray text */
    background: transparent; /* Remove background to reduce noise */
    padding: 0;
    font-weight: 400;
  }
  .reconciliationModal .services-table tbody td .table-hsn-span {
     color: #64748b;
  }
/* Compact inputs */
  .reconciliationModal .services-table .ant-input,
  .reconciliationModal .services-table .ant-input-number,
  .reconciliationModal .services-table .ant-input-number-input {
    height: 32px !important; /* Slightly taller for better readability */
    width: 100% !important; /* Fill the cell width */
    min-width: 80px; /* Prevent becoming too small */
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
  }

    /* New Class: Prioritize Amount Visibility (Primary info) */
  .product-amount-highlight {
    font-size: 12px !important;
    font-weight: 600;
    color: #334155; /* Darker slate color */
    margin-top: 2px;
    line-height: 1.4;
  }

/* Checkbox label */
.reconciliationModal .services-table tbody td label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0;
}

/* Sr no cell */
.reconciliationModal .services-table tbody td:first-child {
  white-space: nowrap;
}

/* Product cell overflow */
.reconciliationModal .services-table tbody td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.reconciliationModal .services-table th:nth-child(3),
.reconciliationModal .services-table th:nth-child(4),
.reconciliationModal .services-table th:nth-child(5),
.reconciliationModal .services-table th:nth-child(6),
.reconciliationModal .services-table td:nth-child(3),
.reconciliationModal .services-table td:nth-child(4),
.reconciliationModal .services-table td:nth-child(5),
.reconciliationModal .services-table td:nth-child(6) {
  text-align: center;
}


.reconciliationModal .services-table-wrapper,
.reconciliationModal .sectionmid,
.reconciliationModal .services-table {
  width: 100% !important;
  box-sizing: border-box;
}

/* Updated: Product cell specific styling for compact layout */
.reconciliationModal .services-table tbody td {
  padding: 6px 8px !important; /* Reduced padding for height control */
  vertical-align: middle;
}

/* New Class: Compact Amount Row */
.product-amount-highlight {
  font-size: 11px !important;
  font-weight: 600;
  color: #334155;
  margin-top: 2px;
  display: flex;
  gap: 12px; /* Space between Total and Pending */
  align-items: center;
}

/* Muted SAC code style */
.sac-code-style {
  font-size: 10px;
  color: #94a3b8;
  margin-left: 6px;
  font-weight: 400;
}

.template-body {
    border: 2px black solid;
    width: 900px !important;
    height: auto !important;
    margin: auto;
    padding: 20px;
}

.template-heading {
    display: flex;
    align-items: center;
    border-bottom: 1px black solid;
    padding-bottom: 40px;
}

.template-heading-logo {
    width: 30%;
}

.template-heading-company-details {
    width: 70%;
}

.template-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    padding: 0;
}

.template-company-h {
    text-align: center;
}

.template-company-p {
    margin-bottom: 0;
    text-align: center;
}

.template-patient {
    padding: 20px 0;
    border-bottom: 1px black solid;
}

.template-patient-p {
    text-align: center;
    font-weight: bold;
}

.template-patient-l-r {
    display: flex;
    justify-content: space-between;
}

.template-patient-l-r-p {
    margin-bottom: 5px;
}

.template-payor-details {
    padding: 20px 0;
    border-bottom: 1px black solid;
}

.template-payor-details-l-r {
    display: flex;
    justify-content: space-between;
}

.template-payor-details-p {
    font-weight: bold;
}

.template-payor-details-l-r-p {
    margin-bottom: 5px;
}

.template-table-details {
    padding: 20px 0;
    border-bottom: 1px black solid;
}

.template-table {
    width: 100%;
}

.template-table-thead th {
    border-bottom: 1px black solid;
    padding: 5px 0;
    text-align: left;
}

.template-table-tbody-p {
    padding: 15px 0 10px 0;
    margin: 0;
    font-weight: bold;
}

.template-table-tbody-body-tr td {
    text-align: left;
}

.template-table-tbody-total-tr td {
    text-align: left;
    padding: 10px 0;
}

.template-table-tbody-sub-total {
    text-align: right !important;
    padding-right: 20px !important;
    border-top: 2px black solid;
     white-space: nowrap;
}

.template-table-tbody-total {
    border-top: 2px black solid;
}

.template-table-tbody-total-footer-tr td {
    border-top: 2px black solid;
    padding: 10px 0;
    text-align: left;
}

.template-table-footer {
    margin-top: 20px;
}

.template-table-footer-first {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.2rem;
}

.template-table-thead-space{
    padding-right: 5px !important;
}

.template-table-tbody-externalData {
    font-size: 12px;
    font-style: italic;

}
.template-summary-body {
    border: 2px black solid;
    width: 900px !important;
    height: auto !important;
    margin: auto;
    padding: 20px;
}

.template-summary-heading {
    display: flex;
    align-items: center;
    border-bottom: 1px black solid;
    padding-bottom: 40px;
}

.template-summary-heading-logo {
    width: 30%;
}

.template-summary-heading-company-details {
    width: 70%;
}

.template-summary-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    padding: 0;
}

.template-summary-company-h {
    text-align: center;
}

.template-summary-company-p {
    margin-bottom: 0;
    text-align: center;
}

.template-summary-patient {
    padding: 20px 0;
    border-bottom: 1px black solid;
}

.template-summary-patient-p {
    text-align: center;
    font-weight: bold;
}

.template-summary-patient-l-r {
    display: flex;
    justify-content: space-between;
}

.template-summary-patient-l-r-p {
    margin-bottom: 5px;
}

.template-summary-payor-details {
    padding: 20px 0;
    border-bottom: 1px black solid;
}

.template-summary-payor-details-l-r {
    display: flex;
    justify-content: space-between;
}

.template-summary-payor-details-p {
    font-weight: bold;
}

.template-summary-payor-details-l-r-p {
    margin-bottom: 5px;
}

.template-summary-table-details {
    padding: 20px 0;
    border-bottom: 1px black solid;
}

.template-summary-table {
    width: 100%;
}

.template-summary-table-thead th {
    border-bottom: 1px black solid;
    padding: 5px 0;
    text-align: left;
}

.template-summary-table-tbody-p {
    padding: 15px 0 10px 0;
    margin: 0;
    font-weight: bold;
}

.template-summary-table-tbody-body-tr td {
    text-align: left;
}

.template-summary-table-tbody-total-tr td {
    text-align: left;
    padding: 10px 0;
}

.template-summary-table-tbody-total {
    border-top: 2px black solid;
}

.template-summary-table-tbody-total-footer-tr td {
    border-top: 2px black solid;
    padding: 10px 0;
    text-align: left;
}

.template-summary-table-footer {
    margin-top: 20px;
}

.template-summary-table-footer-first {
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.2rem;
}
/* ===== Smart Edit Modal — Premium SaaS Modernization ===== */
/* Design: 14px controls, 16px containers, softer focus, greenish tints */

.smart-edit-modal .ant-modal-body {
    padding: 24px;
}

.smart-edit-modal .ant-modal-content {
    border-radius: 28px;
    overflow: hidden;
}

/* Base tile — overridden by V2 section below */
.category-tile .ant-card-body {
    padding: 0;
    height: 100%;
}

/* Legacy class stubs (kept for safety, no longer actively used in Step 1) */

/* Reduce Total Panel Styles */
.reduce-panel {
    border-radius: 16px;
}

.selected-radio {
    border: 1.5px solid #0D9488;
    background-color: #E6FFFA;
}

/* (Exclusive tile styles moved to Step 1 section below) */

/* ===== Polished Form Inputs — Premium SaaS ===== */
/* Consistent 14px border-radius and 40px height for all form inputs */
.smart-edit-modal .ant-input,
.smart-edit-modal .ant-input-number,
.smart-edit-modal .ant-select-selector,
.smart-edit-modal .ant-picker,
.smart-edit-modal .ant-input-affix-wrapper {
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border-color: #E2EBE7 !important;
    height: 40px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 100%;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* Specific alignment for Select content within the selector */
.smart-edit-modal .ant-select-single .ant-select-selector .ant-select-selection-item,
.smart-edit-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
    line-height: 36px !important;
}

.smart-edit-modal .ant-input-number-input {
    height: 38px !important;
    /* Removed border-radius and background-color to fix "highlighted vs depressed" look with prefix (Issue: P1-AE-001) */
    background-color: transparent !important;
}

/* Focus States — Soft Green Glow */
.smart-edit-modal .ant-input:focus,
.smart-edit-modal .ant-input:hover,
.smart-edit-modal .ant-input-focused,
.smart-edit-modal .ant-input-number-focused,
.smart-edit-modal .ant-input-number:hover,
.smart-edit-modal .ant-select-focused .ant-select-selector,
.smart-edit-modal .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.smart-edit-modal .ant-picker:hover,
.smart-edit-modal .ant-picker-focused {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

/* Fix for disabled/readonly inputs to stay grey */
.smart-edit-modal .ant-input[readonly],
.smart-edit-modal .ant-input-number-readonly,
.smart-edit-modal .ant-input-number-disabled {
    background-color: #f5f5f5 !important;
}

/* Live Preview Styles */
.smart-edit-preview-container {
    background: #fff;
    border: 1px solid #E2EBE7;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 20, 10, 0.05), 0 1px 3px rgba(0, 20, 10, 0.02);
}

.preview-table-wrapper {
    flex: 1 1;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #F0F5F3;
    border-radius: 10px;
}

.preview-table-wrapper table {
    table-layout: auto;
    min-width: 100%;
}

.preview-table-wrapper th,
.preview-table-wrapper td {
    white-space: nowrap;
    padding: 6px 8px;
    font-size: 11px;
    vertical-align: middle;
}

.preview-table-wrapper td:nth-child(2) {
    white-space: normal;
    min-width: 120px;
    max-width: 200px;
}

/* ===== V2 Teal Theming (Issue 17) ===== */
.smart-edit-modal .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
}

.smart-edit-modal .ant-btn-primary {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
}

.smart-edit-modal .ant-btn-primary:hover {
    background-color: #0F766E !important;
    border-color: #0F766E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.2) !important;
}

/* Button sizing */
.smart-edit-modal .ant-btn {
    border-radius: 14px !important;
    height: 40px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.smart-edit-modal .ant-btn-default {
    border-color: #E2EBE7 !important;
}

.smart-edit-modal .ant-btn-default:hover {
    border-color: #0D9488 !important;
    color: #0D9488 !important;
}

.smart-edit-modal .ant-steps-item-process .ant-steps-item-icon {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
}

.smart-edit-modal .ant-steps-item-finish .ant-steps-item-icon {
    border-color: #0D9488 !important;
}

.smart-edit-modal .ant-steps-item-finish .ant-steps-item-icon>.ant-steps-icon {
    color: #0D9488 !important;
}

.smart-edit-modal .ant-steps-item-finish>.ant-steps-item-container>.ant-steps-item-content>.ant-steps-item-title::after {
    background-color: #0D9488 !important;
}

.smart-edit-modal .ant-radio-checked .ant-radio-inner {
    border-color: #0D9488 !important;
}

.smart-edit-modal .ant-radio-checked .ant-radio-inner::after {
    background-color: #0D9488 !important;
}

.smart-edit-modal .ant-switch-checked {
    background-color: #0D9488 !important;
}

/* ===== Responsive Styles (Issue 19) ===== */
@media (max-width: 992px) {
    .smart-edit-modal .ant-col-lg-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .smart-edit-modal .ant-row {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .smart-edit-modal {
        width: 100% !important;
        margin: 0 !important;
        max-width: 100vw !important;
        padding-bottom: 0 !important;
    }

    .smart-edit-modal .ant-modal,
    .smart-edit-modal .ant-modal-content {
        height: 100vh;
        display: flex;
        flex-direction: column;
        border-radius: 0;
    }

    .smart-edit-modal .ant-modal-body {
        flex: 1 1;
        overflow-y: auto;
        padding: 12px !important;
    }

    .smart-edit-modal .ant-steps {
        flex-direction: column;
    }

    .smart-edit-modal .ant-steps-item {
        margin-bottom: 8px;
    }

    .category-tile {
        margin-bottom: 8px;
    }

    .edit-category-selection {
        min-height: auto;
    }
}

@media (max-width: 576px) {
    .smart-edit-modal .ant-modal-body {
        padding: 8px !important;
    }

    .smart-edit-modal .ant-col-sm-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ===== Custom Payment Input Wrapper (Like Reconciliation Modal) ===== */
.smart-edit-modal .custom-payment-input-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #E2EBE7;
    border-radius: 14px;
    overflow: hidden;
    height: 40px;
    background: #fff;
    transition: all 0.3s;
    width: 100%;
}

.smart-edit-modal .custom-payment-input-wrapper:focus-within {
    border-color: #0D9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.smart-edit-modal .custom-payment-input-wrapper.has-error {
    border-color: #fecaca;
    background-color: #fef7f7;
}

.smart-edit-modal .custom-payment-input-wrapper .currency-addon {
    background: #0D9488;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 0 12px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
}

/* Ensure InputNumber inside wrapper is seamless */
.smart-edit-modal .custom-payment-input-wrapper .ant-input-number,
.smart-edit-modal .custom-payment-input-wrapper .ant-input,
.smart-edit-modal .custom-payment-input-wrapper .ant-select {
    flex: 1 1;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    height: 100% !important;
}

.smart-edit-modal .custom-payment-input-wrapper .ant-select-selector {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 100% !important;
    display: flex;
    align-items: center;
}

.smart-edit-modal .custom-payment-input-wrapper .ant-select-selection-item {
    line-height: normal !important;
    display: flex;
    align-items: center;
}

.smart-edit-modal .custom-payment-input-wrapper .ant-input-number-input,
.smart-edit-modal .custom-payment-input-wrapper .ant-input {
    height: 100% !important;
    padding-left: 8px !important;
}

/* Remove default focus shadow from inner input */
.smart-edit-modal .custom-payment-input-wrapper .ant-input-number-focused,
.smart-edit-modal .custom-payment-input-wrapper .ant-input:focus,
.smart-edit-modal .custom-payment-input-wrapper .ant-select-focused .ant-select-selector {
    box-shadow: none !important;
}

/* ===== Non-Editable Field Styling ===== */
/* Visual distinction for read-only/disabled fields */
.smart-edit-modal .readonly-field .ant-select-selector,
.smart-edit-modal .readonly-field .ant-input,
.smart-edit-modal .readonly-field .ant-input-number,
.smart-edit-modal .readonly-field .ant-input-number-input {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    color: rgba(0, 0, 0, 0.65) !important;
}

.smart-edit-modal .readonly-field .ant-select-arrow {
    display: none;
}

.smart-edit-modal .readonly-field .ant-select-disabled .ant-select-selector {
    background-color: #f5f5f5 !important;
}

/* Readonly wrapper styling */
.smart-edit-modal .custom-payment-input-wrapper.readonly-wrapper {
    background-color: #f5f5f5 !important;
    cursor: not-allowed;
    border-color: #E2EBE7 !important;
}

.smart-edit-modal .custom-payment-input-wrapper.readonly-wrapper .ant-input-number-input,
.smart-edit-modal .custom-payment-input-wrapper.readonly-wrapper .ant-input,
.smart-edit-modal .custom-payment-input-wrapper.readonly-wrapper .ant-select-selector {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}

/* Delete item button styling */
.smart-edit-modal .delete-item-btn {
    color: #dc2626 !important;
    border-color: #fecaca !important;
    border-radius: 14px !important;
}

.smart-edit-modal .delete-item-btn:hover {
    color: #fff !important;
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
}

/* ===== Invoice Totals Summary (Step 3) ===== */
.review-summary-box {
    background: #EFF3F1;
    border: 1px solid #F0F5F3;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 24px;
}

.review-summary-title {
    font-size: 13px;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.review-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.review-summary-item {
    background: #ffffff;
    border: 1px solid #E2EBE7;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.review-summary-item .label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.review-summary-item .old-value {
    font-size: 14px;
    color: #94A3B8;
    text-decoration: line-through;
    font-weight: 500;
}

.review-summary-item .arrow {
    color: #E2EBE7;
    font-size: 12px;
    margin: 2px 0;
}

.review-summary-item .new-value {
    font-size: 16px;
    font-weight: 700;
    color: #1E293B;
}

/* Highlight changed new values */
.review-summary-item .new-value.changed {
    color: #0D9488;
}

@media (max-width: 768px) {
    .review-summary-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== Reduce Total Panel Specifics ===== */
.reduce-panel-input.ant-input-number-focused,
.reduce-panel-input:focus,
.reduce-panel-input:focus-within {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.reduce-panel-input {
    border-radius: 14px !important;
}

/* ===== Review Step UI Upgrades ===== */
.review-summary-card {
    background: #ffffff;
    border: 1px solid #E2EBE7;
    border-radius: 16px;
    padding: 16px;
    height: 100%;
    transition: all 0.2s;
}

.review-summary-card:hover {
    box-shadow: 0 4px 16px rgba(0, 20, 10, 0.05);
    border-color: #0D9488;
}

.review-summary-card .label {
    font-size: 11px;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.review-summary-card .value-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-summary-card .old-value {
    font-size: 13px;
    color: #94A3B8;
    text-decoration: line-through;
}

.review-summary-card .new-value {
    font-size: 18px;
    font-weight: 700;
    color: #1E293B;
}

/* Table Upgrades */
.smart-edit-review-table .ant-table-thead>tr>th {
    background: #F7FAF9 !important;
    color: #64748B !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    padding: 12px 8px !important;
    border-bottom: 2px solid #F0F5F3 !important;
}

.smart-edit-review-table .ant-table-tbody>tr>td {
    padding: 10px 8px !important;
    border-bottom: 1px solid #F0F5F3 !important;
    font-size: 13px !important;
    font-feature-settings: "tnum" !important;
    font-variant-numeric: tabular-nums !important;
}

.smart-edit-review-table .ant-table-tbody>tr:hover>td {
    background: #F7FAF9 !important;
}

.smart-edit-review-table .ant-table-container {
    border: 1px solid #E2EBE7 !important;
    border-radius: 14px !important;
}

/* Impact Notice Banner */
.impact-notice-banner {
    background: #fffcf0;
    border: 1px solid #fde68a;
    border-radius: 14px;
    padding: 12px 16px;
    margin-bottom: 24px;
}

/* Final Confirmation Modal */
.final-confirm-summary {
    background: #EFF3F1;
    border: 1px solid #F0F5F3;
    border-radius: 16px;
    padding: 16px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.final-confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #F0F5F3;
    font-size: 13px;
}

.final-confirm-row:last-child {
    border-bottom: none;
}

.final-confirm-row .label {
    color: #64748B;
}

.final-confirm-row .value {
    font-weight: 600;
    color: #1E293B;
}

/* ===== NEW STYLES FOR REFINED UI (Issue 20) ===== */

/* Distinct Item Card with Shadow */
.smart-edit-item-card {
    margin-bottom: 24px;
    border: 1px solid #F0F5F3;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(0, 20, 10, 0.05), 0 1px 3px rgba(0, 20, 10, 0.02);
    transition: all 0.3s;
    overflow: hidden;
}

.smart-edit-item-card:hover {
    box-shadow: 0 8px 24px rgba(0, 20, 10, 0.07), 0 2px 6px rgba(0, 20, 10, 0.03);
}

/* Distinct Item Header */
.smart-edit-item-header {
    background-color: #F7FAF9;
    padding: 12px 16px;
    border-bottom: 1px solid #F0F5F3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.smart-edit-item-header .ant-typography {
    color: #1E293B;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.smart-edit-item-body {
    padding: 20px;
}

/* Prominent Section Divider */
.smart-edit-section-divider.ant-divider-horizontal {
    margin: 24px 0 16px 0;
    border-top-color: #E2EBE7 !important;
    border-top-width: 1px !important;
}

.smart-edit-section-divider .ant-divider-inner-text {
    font-weight: 700;
    color: #1E293B;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 12px;
}

/* ===== STEP 1 CATEGORY SELECTION — Matching Target Design ===== */

/* ---- Grid Layouts ---- */
.standard-tiles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.exclusive-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

/* ---- Base Tile ---- */
.category-tile {
    transition: all 0.2s ease;
    border: 2px solid #D1D5DB;
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    background: #ffffff;
    padding: 16px;
    min-height: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
}

.category-tile:hover:not(.is-disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
    border-color: #9CA3AF;
}

.category-tile.selected {
    border-color: #0D9488;
    background-color: #f0fdf8;
    box-shadow: 0 0 0 3px rgba(15, 123, 91, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.category-tile.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
    background: #f9fafb;
    border-color: #E5E7EB;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.category-tile.is-disabled:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    border-color: #E5E7EB;
}

/* ---- Standard Tile (icon above title, centered, with desc + fields) ---- */
.category-tile.category-tile-standard {
    text-align: center;
    padding: 22px 14px 18px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
}

.category-tile.category-tile-standard:hover:not(.is-disabled) {
    border-color: var(--tile-accent, #9CA3AF);
}

.category-tile.category-tile-standard.selected {
    border-color: var(--tile-accent, #0D9488);
    background-color: var(--tile-tint, #f0fdf8);
    box-shadow: 0 0 0 3px rgba(15, 123, 91, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Centered content: icon above title */
.tile-content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tile-title-compact {
    font-size: 14px;
    font-weight: 700;
    color: #1F2937;
    text-align: center;
    line-height: 1.3;
}

/* ---- Tile description & fields (shared by both tile types) ---- */
.tile-desc-text {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.4;
    margin-bottom: 6px;
}

.tile-fields-text {
    font-size: 10px;
    color: #9CA3AF;
    line-height: 1.3;
}

.tile-fields-label {
    font-weight: 700;
    color: #6B7280;
}

/* ---- Icon ---- */
.category-icon {
    height: 36px;
    width: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

/* ---- Absolute-positioned checkmark (shared) ---- */
.tile-check-absolute {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    z-index: 1;
}

/* ---- Exclusive Tile ---- */
.category-tile.category-tile-exclusive {
    border: 2px dashed #0D9488;
    padding: 22px 16px 18px;
    min-height: 160px;
    text-align: center;
}

.category-tile.category-tile-exclusive:hover:not(.is-disabled) {
    border-color: var(--tile-accent, #0D9488);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.06);
}

.category-tile.category-tile-exclusive.selected {
    border-style: solid;
    border-color: var(--tile-accent, #0D9488);
    background-color: var(--tile-tint, #ECFDF5);
    box-shadow: 0 0 0 3px rgba(15, 123, 91, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Exclusive tile color variants */
.category-tile.exclusive-teal {
    border-color: #0D9488;
    background: linear-gradient(180deg, #E6FFFA 0%, #ffffff 100%);
}

.category-tile.exclusive-teal.selected {
    background: #d1fae5;
}

.category-tile.exclusive-blue {
    border-color: #3B82F6;
    background: linear-gradient(180deg, #EFF6FF 0%, #ffffff 100%);
}

.category-tile.exclusive-blue.selected {
    border-color: #3B82F6;
    background: #DBEAFE;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ===== Edit Reduce Total Panel V2 (Scoped) ===== */
.reduce-panel-v2-container {
    padding: 0 20px;
    max-width: 800px;
    margin: 0 auto;
}

.reduce-panel-v2-card {
    background: #fffbeb;
    /* --exclusive-amber-bg */
    border: 2px solid #fef3c7;
    /* --exclusive-amber-light */
    border-radius: 14px;
    padding: 20px;
}

.reduce-panel-v2-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.reduce-panel-v2-header-title {
    font-size: 14px;
    font-weight: 700;
    color: #d97706;
    /* --exclusive-amber */
    margin: 0;
}

.reduce-panel-v2-header-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 999px;
    background: #d97706;
    color: white;
    text-transform: uppercase;
}

.reduce-panel-v2-current-box {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.reduce-panel-v2-current-label {
    font-size: 12px;
    color: #4b5563;
}

.reduce-panel-v2-current-value {
    font-size: 20px;
    font-weight: 800;
    color: #1f2937;
}

.reduce-panel-v2-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.reduce-panel-v2-asterisk {
    color: #dc2626;
}

.reduce-panel-v2-helper-text {
    font-size: 11px;
    color: #9ca3af;
}

.reduce-panel-v2-error {
    margin-top: 10px;
    padding: 10px 14px;
    background: #fef2f2;
    /* --danger-bg */
    border: 1px solid #fee2e2;
    /* --danger-light */
    border-radius: 6px;
    color: #dc2626;
    font-size: 12px;
    margin-bottom: 16px;
}

.reduce-panel-v2-section-title {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
}

.reduce-panel-v2-reset-hint {
    font-size: 11px;
    color: #4b5563;
    margin-bottom: 8px;
}

.reduce-panel-v2-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: white;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.reduce-panel-v2-radio-option.selected {
    border-color: #0f7b5b;
    background: #f3fbf8;
}

.reduce-panel-v2-radio-option.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Specific opacity override for mixed state if needed via inline or explicit class combination */
.reduce-panel-v2-radio-option.disabled.selected {
    opacity: 0.6;
}

.reduce-panel-v2-radio-input-wrapper {
    margin-top: 2px;
}

.reduce-panel-v2-radio-input {
    accent-color: #0f7b5b;
    pointer-events: none;
}

.reduce-panel-v2-option-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
    margin-top: 0;
}

.reduce-panel-v2-option-desc {
    font-size: 11px;
    color: #4b5563;
    margin: 0;
}

.reduce-panel-v2-success {
    margin-top: 10px;
    padding: 10px 14px;
    background: #ecfdf5;
    /* --success-bg */
    border: 1px solid #d1fae5;
    /* --success-light */
    border-radius: 6px;
    color: #059669;
    /* --success */
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.reduce-panel-v2-actions {
    margin-top: 16px;
    display: flex;
    gap: 8px;
}

.reduce-panel-v2-btn-reset {
    height: 42px !important;
    border-radius: 10px !important;
}

.reduce-panel-v2-btn-apply {
    background: #0f7b5b !important;
    /* --cp-primary */
    border-color: #0f7b5b !important;
    height: 42px !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
}

.reduce-panel-v2-confirm-modal-content {
    font-size: 14px;
    line-height: 1.5;
    color: #374151;
}

.reduce-panel-v2-confirm-amount {
    font-weight: 700;
    color: #d97706;
}

.category-tile.exclusive-amber {
    border-color: #D97706;
    background: linear-gradient(180deg, #FFFBEB 0%, #ffffff 100%);
}

.category-tile.exclusive-amber.selected {
    border-color: #D97706;
    background: #fef3c7;
    box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ---- EXCLUSIVE badge pill ---- */
.exclusive-badge-pill {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #E6FFFA !important;
    color: #0D9488 !important;
    border: 1px solid #99F6E4 !important;
    line-height: 1.2 !important;
    z-index: 1;
}

/* Blue variant badge */
.category-tile.exclusive-blue .exclusive-badge-pill {
    background: #DBEAFE !important;
    color: #3B82F6 !important;
    border-color: #93C5FD !important;
}

/* Amber variant badge */
.category-tile.exclusive-amber .exclusive-badge-pill {
    background: #FEF3C7 !important;
    color: #D97706 !important;
    border-color: #FCD34D !important;
}

.category-tile.exclusive-purple {
    border-color: #7C3AED;
    background: linear-gradient(180deg, #d9d4f2 0%, #ffffff 100%);
}

.category-tile.exclusive-purple.selected {
    border-color: #7C3AED;
    background: #EDE9FE;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.category-tile.exclusive-purple .exclusive-badge-pill {
    background: #EDE9FE !important;
    color: #7C3AED !important;
    border-color: #C4B5FD !important;
}

/* ---- Tile warnings ---- */
.tile-warning {
    margin-top: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
}

.tile-warning-error {
    background-color: #FEF2F2;
    border: 1px solid #FECACA;
    color: #DC2626;
}

.tile-warning-amber {
    color: #D97706;
    background-color: #FFFBEB;
    border: 1px solid #FDE68A;
    padding: 6px 8px;
    border-radius: 6px;
}

/* ---- Main container — darker bg so white cards pop ---- */
.edit-category-selection {
    min-height: 400px;
    background: #EFF3F2;
    border: 1px solid #D1D5DB;
    border-radius: 14px;
    padding: 24px;
}

/* ---- Selection Header ---- */
.selection-header-v2 {
    margin-bottom: 20px;
}

.selection-header-v2 .ant-typography {
    margin-bottom: 4px !important;
    color: #111827 !important;
}

.selection-subtitle {
    font-size: 13px !important;
    color: #6B7280 !important;
}

/* ---- Selection Bar ---- */
.selection-bar-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.selection-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.selection-counter-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    background: #F0FDFA;
    color: #0D9488;
    border: 1px solid #99F6E4;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.selection-bar-helper {
    font-size: 12px;
    color: #9CA3AF;
}

.exclusive-info-link {
    font-size: 12px;
    color: #3B82F6;
    cursor: help;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.exclusive-info-link:hover {
    color: #2563EB;
    text-decoration: underline;
}

.selection-bar-right {
    display: flex;
    align-items: center;
}

.clear-selection-btn.ant-btn {
    font-size: 12px !important;
    color: #6B7280 !important;
    padding: 0 !important;
    height: auto !important;
}

.clear-selection-btn.ant-btn:hover {
    color: #DC2626 !important;
}

/* ---- Hint text (no selection) ---- */
.selection-hint-text {
    font-size: 12px;
    color: #D97706;
    font-weight: 500;
    font-style: italic;
}

/* ---- Selected Chips Row ---- */
.selected-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .standard-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .exclusive-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .selection-bar-v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .selection-bar-left {
        gap: 8px;
    }

    .selection-bar-helper {
        display: none;
    }

    .edit-category-selection {
        padding: 16px;
        border-radius: 12px;
    }
}

@media (max-width: 576px) {
    .standard-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .exclusive-tiles-grid {
        grid-template-columns: 1fr;
    }

    .edit-category-selection {
        padding: 12px;
        border-radius: 10px;
        min-height: auto;
    }

    .category-tile {
        border-radius: 10px;
    }
}
/* ===== Billing View V2 — Premium SaaS Modernization ===== */
/*
 * DESIGN SYSTEM V2 — Premium SaaS Tokens
 * Canvas: soft greenish-gray (#EFF3F1)
 * Radius: card 24px, control 14px, pill 999px
 * Shadows: softer with green-tinted opacity
 * Accents: warm coral (#e8734a), cool blue (#5b8def)
 * All class names preserved — visual-only changes
 */
.billing-v2-container {
    --cp-primary: #0D9488;
    --cp-primary-dark: #0F766E;
    --cp-primary-light: #E6FFFA;
    --cp-primary-lighter: #F0FDFA;
    --cp-accent: #10b981;
    --cp-accent-light: #d1fae5;
    --sidebar-dark: #1a2332;
    --sidebar-darker: #111827;
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --bg-page: #EFF3F1;
    --bg-card: #ffffff;
    --border-color: #E2EBE7;
    --border-light: #F0F5F3;
    --success: #16a34a;
    --success-light: #dcfce7;
    --success-bg: #f0fdf4;
    --danger: #dc2626;
    --danger-light: #fecaca;
    --danger-bg: #fef7f7;
    --warning: #d97706;
    --warning-light: #fde68a;
    --warning-bg: #fffcf0;
    --info: #0284c7;
    --info-light: #bae6fd;
    --info-bg: #f0f9ff;
    --paid: #16a34a;
    --paid-light: #dcfce7;
    --partpaid: #d97706;
    --partpaid-light: #fef3c7;
    --unpaid: #dc2626;
    --unpaid-light: #fecaca;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-card: 24px;
    --radius-control: 14px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px rgba(0, 20, 10, 0.03), 0 1px 2px rgba(0, 20, 10, 0.02);
    --shadow-md: 0 4px 16px rgba(0, 20, 10, 0.05), 0 1px 3px rgba(0, 20, 10, 0.02);
    --shadow-lg: 0 12px 40px rgba(0, 20, 10, 0.06), 0 4px 12px rgba(0, 20, 10, 0.02);
    --shadow-xl: 0 20px 50px rgba(0, 20, 10, 0.08), 0 8px 16px rgba(0, 20, 10, 0.03);
    --accent-warm: #e8734a;
    --accent-warm-light: #fef0eb;
    --accent-cool: #5b8def;
    --accent-cool-light: #eef3fd;
    --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== Page Container ===== */
.billing-v2-container {
    font-family: var(--font) !important;
    background: var(--bg-page) !important;
    color: var(--text-primary) !important;
    line-height: 1.5 !important;
    font-size: 14px !important;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.billing-v2-container * {
    box-sizing: border-box;
}

/* ===== Breadcrumb ===== */
.billing-v2-container .breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 12px;
}

.billing-v2-container .breadcrumb button {
    color: var(--cp-primary);
    text-decoration: none;
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}

.billing-v2-container .breadcrumb button:hover {
    text-decoration: underline;
}

.billing-v2-container .breadcrumb span {
    color: var(--text-muted);
}

/* ===== Page Content ===== */
.billing-v2-container .page-content {
    padding: 20px 24px;
}

/* ===== Content Grid ===== */
.billing-v2-container .content-grid {
    display: grid;
    gap: 20px;
}

/* Proforma View - Two Column with Sidebar */
.billing-v2-container .content-grid.proforma-view {
    grid-template-columns: minmax(0, 1fr) 380px;
}

/* Invoice View - Two Columns */
.billing-v2-container .content-grid.invoice-view {
    grid-template-columns: minmax(0, 1fr) 380px;
}

@media (max-width: 1200px) {
    .billing-v2-container .content-grid.invoice-view,
    .billing-v2-container .content-grid.proforma-view {
        grid-template-columns: 1fr;
    }
}

.billing-v2-container .left-column,
.billing-v2-container .right-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* ===== View Toggle Bar ===== */
.billing-v2-container .view-toggle-bar {
    background: white !important;
    padding: 12px 24px !important;
    border-bottom: 1px solid var(--border-color) !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.billing-v2-container .view-toggle-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
}

.billing-v2-container .view-toggle {
    display: flex !important;
    background: var(--bg-page) !important;
    border-radius: 50px !important;
    padding: 6px !important;
    gap: 4px !important;
}

.billing-v2-container .view-toggle-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    transition: all 0.2s !important;
    font-family: var(--font) !important;
}

.billing-v2-container .view-toggle-btn.active {
    background: var(--cp-primary) !important;
    color: white !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25) !important;
}

.billing-v2-container .view-toggle-btn:hover:not(.active):not(:disabled) {
    background: var(--bg-page) !important;
    color: var(--cp-primary) !important;
}

.billing-v2-container .view-toggle-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.billing-v2-container .view-toggle-hint {
    margin-left: auto !important;
    font-size: 11px !important;
    color: var(--text-muted) !important;
}

/* ===== Sticky Action Bar ===== */
.billing-v2-container .top-action-bar {
    background: white !important;
    padding: 16px 28px !important;
    border-bottom: none !important;
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
    box-shadow: 0 1px 4px rgba(0, 20, 10, 0.04) !important;
}

.billing-v2-container .proforma-lock-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: #ffccc7;
    color: #1f2022;
    border-bottom: 3px solid #991b1b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.billing-v2-container .proforma-lock-banner-icon {
    display: flex;
    align-items: center;
    font-size: 16px;
}

/* ===== Action Buttons — Teal primary, gray secondary, red danger ===== */
.billing-v2-container .action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 40px !important;
    padding: 0 22px !important;
    line-height: 1 !important;
    border-radius: var(--radius-pill) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-color) !important;
    background: white !important;
    color: var(--text-primary) !important;
    font-family: var(--font) !important;
    position: relative !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

.billing-v2-container .action-btn:hover:not(:disabled) {
    border-color: var(--cp-primary) !important;
    color: var(--cp-primary) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--shadow-md) !important;
}

.billing-v2-container .action-btn.primary {
    background: var(--cp-primary) !important;
    color: white !important;
    border-color: var(--cp-primary) !important;
}

.billing-v2-container .action-btn.primary:hover:not(:disabled) {
    background: var(--cp-primary-dark) !important;
    border-color: var(--cp-primary-dark) !important;
}

.billing-v2-container .action-btn.secondary {
    background: white !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.billing-v2-container .action-btn.secondary:hover:not(:disabled) {
    background: var(--cp-primary-light) !important;
    border-color: var(--cp-primary) !important;
    color: var(--cp-primary) !important;
}

.billing-v2-container .action-btn.danger-outline {
    background: white !important;
    color: var(--danger) !important;
    border-color: var(--danger-light) !important;
}

.billing-v2-container .action-btn.danger-outline:hover:not(:disabled) {
    background: var(--danger-bg) !important;
    border-color: var(--danger) !important;
}

.billing-v2-container .action-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.billing-v2-container .action-btn svg,
.billing-v2-container .action-btn .anticon {
    width: 16px !important;
    height: 16px !important;
    font-size: 14px !important;
}

/* ===== Cards — Lead View Parity ===== */
.billing-v2-container .card-v2 {
    background: white !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
    border: none !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.billing-v2-container .card-v2:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-1px) !important;
}

.billing-v2-container .card-v2-header {
    padding: 20px 28px !important;
    border-bottom: 1px solid var(--border-light) !important;
    background: transparent !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.billing-v2-container .card-v2-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.billing-v2-container .card-v2-title svg,
.billing-v2-container .card-v2-title .anticon {
    color: var(--cp-primary) !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--cp-primary-light) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
}

.billing-v2-container .card-v2-body {
    padding: 28px !important;
}

/* ===== Status Badges - POLISHED ===== */
.billing-v2-container .status-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.billing-v2-container .status-badge.proforma {
    background: var(--info-light) !important;
    color: var(--info) !important;
}

.billing-v2-container .status-badge.invoice {
    background: var(--cp-primary-light) !important;
    color: var(--cp-primary) !important;
}

.billing-v2-container .status-badge.paid {
    background: var(--paid-light) !important;
    color: var(--paid) !important;
}

.billing-v2-container .status-badge.partpaid,
.billing-v2-container .status-badge.part_paid {
    background: var(--partpaid-light) !important;
    color: var(--partpaid) !important;
}

.billing-v2-container .status-badge.unpaid {
    background: var(--unpaid-light) !important;
    color: var(--unpaid) !important;
}

.billing-v2-container .status-badge.cancelled {
    background: var(--danger-light) !important;
    color: var(--danger) !important;
}

.billing-v2-container .status-badge.pending {
    background: var(--warning-light) !important;
    color: var(--warning) !important;
}

.billing-v2-container .status-badge.warning {
    background: var(--warning-light) !important;
    color: var(--warning) !important;
}

.billing-v2-container .status-badge.info {
    background: var(--info-light) !important;
    color: var(--info) !important;
}

/* ===== Info Grid - POLISHED with backgrounds ===== */
.billing-v2-container .info-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.billing-v2-container .info-item {
    padding: 14px 16px !important;
    background: var(--bg-page) !important;
    border-radius: var(--radius-control) !important;
    border: 1px solid var(--border-light) !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.billing-v2-container .info-item:hover {
    border-color: var(--border-color) !important;
    background: #F7FAF9 !important;
}

.billing-v2-container .info-item.full {
    grid-column: 1 / -1 !important;
}

.billing-v2-container .info-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    margin-bottom: 4px !important;
    display: block !important;
}

.billing-v2-container .info-value {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    display: block !important;
}

.billing-v2-container .info-value a,
.billing-v2-container .info-value button {
    color: var(--cp-primary) !important;
    text-decoration: none !important;
}

.billing-v2-container .info-value a:hover,
.billing-v2-container .info-value button:hover {
    text-decoration: underline !important;
}

/* Link Button Style */
.billing-v2-container .link-button {
    color: var(--cp-primary) !important;
    font-weight: 600 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: inherit !important;
    text-decoration: underline !important;
}

.billing-v2-container .link-button:hover {
    color: var(--cp-primary-dark) !important;
}

.billing-v2-container .info-value.large {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
}

/* ===== Data Tables ===== */
.billing-v2-container .data-table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-size: 12px !important;
}

.billing-v2-container .data-table th {
    background: #F7FAF9 !important;
    padding: 14px !important;
    text-align: left !important;
    font-weight: 700 !important;
    color: var(--text-secondary) !important;
    border: none !important;
    border-bottom: 2px solid var(--border-light) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.billing-v2-container .data-table td {
    padding: 12px 14px !important;
    border: none !important;
    border-bottom: 1px solid var(--border-light) !important;
    font-feature-settings: "tnum" !important;
    font-variant-numeric: tabular-nums !important;
}

.billing-v2-container .data-table tbody tr:hover td {
    background: #F7FAF9 !important;
}

.billing-v2-container .data-table .text-right {
    text-align: right !important;
}

.billing-v2-container .data-table .text-center {
    text-align: center !important;
}

.billing-v2-container .data-table tfoot tr {
    background: var(--cp-primary-light) !important;
    font-weight: 700 !important;
}

.billing-v2-container .data-table tfoot td {
    font-weight: 700 !important;
}

/* ===== Invoice Mini Preview ===== */
.billing-v2-container .invoice-mini-preview {
    background: var(--bg-page) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    padding: 20px !important;
}

.billing-v2-container .invoice-mini-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid var(--cp-primary) !important;
}

.billing-v2-container .mini-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.billing-v2-container .mini-brand-icon {
    width: 32px !important;
    height: 32px !important;
    background: linear-gradient(135deg, #ec4899 0%, #f59e0b 40%, #22c55e 100%) !important;
    border-radius: 6px !important;
}

.billing-v2-container .mini-brand-text {
    font-weight: 800 !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
}

.billing-v2-container .mini-invoice-type {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--cp-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* ===== Reconciliation Card ===== */
.billing-v2-container .recon-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 16px !important;
}

.billing-v2-container .recon-entry {
    background: var(--bg-page) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.billing-v2-container .recon-entry:hover {
    border-color: var(--border-color) !important;
    background: #F7FAF9 !important;
}

.billing-v2-container .recon-entry-header {
    font-size: 11px !important;
    color: var(--text-secondary) !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    font-weight: 600 !important;
}

.billing-v2-container .recon-entry-amount {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--cp-primary) !important;
}

/* ===== System Data — Lead View Parity ===== */
.billing-v2-container .system-data-item {
    display: flex !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: var(--bg-page) !important;
    border-radius: var(--radius-control) !important;
    border: 1px solid var(--border-light) !important;
    font-size: 13px !important;
    margin-bottom: 8px !important;
    transition: border-color 0.2s ease, background 0.2s ease !important;
}

.billing-v2-container .system-data-item:hover {
    border-color: var(--border-color) !important;
    background: #F7FAF9 !important;
}

.billing-v2-container .system-data-item:last-child {
    margin-bottom: 0 !important;
}

.billing-v2-container .system-data-label {
    color: var(--text-secondary) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.billing-v2-container .system-data-value {
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    text-align: right !important;
    font-size: 14px !important;
}

/* ===== Buttons ===== */
.billing-v2-container .btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    border: none !important;
    font-family: var(--font) !important;
}

.billing-v2-container .btn svg,
.billing-v2-container .btn .anticon {
    width: 16px !important;
    height: 16px !important;
}

.billing-v2-container .btn-primary {
    background: var(--cp-primary) !important;
    color: white !important;
}

.billing-v2-container .btn-primary:hover:not(:disabled) {
    background: var(--cp-primary-dark) !important;
}

.billing-v2-container .btn-secondary {
    background: white !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

.billing-v2-container .btn-secondary:hover:not(:disabled) {
    background: var(--bg-page) !important;
}

.billing-v2-container .btn-danger {
    background: var(--danger) !important;
    color: white !important;
}

.billing-v2-container .btn-danger:hover:not(:disabled) {
    background: #b91c1c !important;
}

.billing-v2-container .btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.billing-v2-container .btn-sm {
    padding: 8px 14px !important;
    font-size: 12px !important;
}

/* ===== Modal Enhancements ===== */
.billing-v2-container .modal-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.billing-v2-container .modal-title-icon.danger {
    background: var(--danger-light);
    color: var(--danger);
}

/* ===== Reference Box ===== */
.billing-v2-container .reference-box {
    background: var(--bg-page);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.billing-v2-container .reference-box-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.billing-v2-container .reference-item {
    font-size: 12px;
}

.billing-v2-container .reference-item .label {
    color: var(--text-muted);
}

.billing-v2-container .reference-item .value {
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== Warning Box ===== */
.billing-v2-container .warning-box {
    background: var(--warning-bg);
    border: 1px solid var(--warning-light);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 16px;
}

.billing-v2-container .warning-box p {
    font-size: 13px;
    color: #92400e;
    margin: 0;
}

.billing-v2-container .warning-box p + p {
    margin-top: 8px;
}

/* ===== Financial Warning ===== */
.billing-v2-container .financial-warning {
    background: var(--danger-bg);
    border: 1px solid var(--danger-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.billing-v2-container .financial-warning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.billing-v2-container .financial-warning-icon {
    width: 40px;
    height: 40px;
    background: var(--danger);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.billing-v2-container .financial-warning-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--danger);
}

.billing-v2-container .financial-warning-body {
    font-size: 13px;
    color: #991b1b;
    line-height: 1.6;
}

.billing-v2-container .financial-warning-body strong {
    color: var(--danger);
}

/* ===== Radio Cards ===== */
.billing-v2-container .radio-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
}

.billing-v2-container .radio-card:hover {
    border-color: var(--cp-primary);
}

.billing-v2-container .radio-card.selected {
    border-color: var(--cp-primary);
    background: var(--cp-primary-lighter);
}

.billing-v2-container .radio-card.danger {
    border-color: var(--danger-light);
}

.billing-v2-container .radio-card.danger:hover {
    border-color: var(--danger);
}

.billing-v2-container .radio-card.danger.selected {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.billing-v2-container .radio-card h5 {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.billing-v2-container .radio-card p {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

/* ===== Checkbox Card ===== */
.billing-v2-container .checkbox-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--danger-bg);
    border: 1.5px solid var(--danger-light);
    border-radius: var(--radius-lg);
    margin-top: 16px;
}

.billing-v2-container .checkbox-card-text {
    font-size: 13px;
    color: #991b1b;
    font-weight: 500;
}

/* ===== Place of Supply Section ===== */
.billing-v2-container .pos-section {
    background: var(--info-bg);
    border: 1px solid var(--info-light);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 16px;
}

.billing-v2-container .pos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.billing-v2-container .pos-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--info);
    display: flex;
    align-items: center;
    gap: 6px;
}

.billing-v2-container .tax-mode-badge {
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 700;
}

.billing-v2-container .tax-mode-badge.cgst {
    background: var(--cp-primary-light);
    color: var(--cp-primary);
}

.billing-v2-container .tax-mode-badge.igst {
    background: var(--warning-light);
    color: var(--warning);
}

.billing-v2-container .pos-warning {
    font-size: 11px;
    color: #0369a1;
    margin-top: 8px;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* ===== Address Tabs ===== */
.billing-v2-container .address-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.billing-v2-container .address-tab {
    flex: 1 1;
    padding: 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-control);
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.billing-v2-container .address-tab:hover {
    border-color: var(--cp-primary);
}

.billing-v2-container .address-tab.active {
    border-color: var(--cp-primary);
    background: var(--cp-primary-lighter);
}

.billing-v2-container .address-tab-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.billing-v2-container .address-tab-sub {
    font-size: 11px;
    color: var(--text-muted);
}

/* ===== Stepper ===== */
.billing-v2-container .stepper {
    display: flex;
    gap: 10px;
    padding: 14px 24px;
    background: var(--bg-page);
    border-bottom: none;
    align-items: center;
    flex-shrink: 0;
}

.billing-v2-container .step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: white;
    border: 1.5px solid var(--border-color);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.billing-v2-container .step-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-page);
    color: var(--text-muted);
    font-weight: 800;
    font-size: 11px;
    transition: all 0.2s ease;
}

.billing-v2-container .step.active {
    border-color: var(--cp-primary);
    color: var(--text-primary);
    background: var(--cp-primary-lighter);
}

.billing-v2-container .step.active .step-num {
    background: var(--cp-primary);
    color: white;
}

.billing-v2-container .step.done {
    border-color: var(--success-light);
    color: var(--success);
}

.billing-v2-container .step.done .step-num {
    background: var(--success);
    color: white;
}

.billing-v2-container .step-arrow {
    color: var(--text-muted);
    font-size: 16px;
}

/* ===== Utility Classes ===== */
.billing-v2-container .hidden {
    display: none !important;
}

.billing-v2-container .w-full {
    width: 100%;
}

/* ===== Responsive Breakpoints ===== */
@media (max-width: 1200px) {
    .billing-v2-container .content-grid {
        grid-template-columns: 1fr;
    }

    .billing-v2-container .right-column {
        order: -1;
    }
}

@media (max-width: 768px) {
    .billing-v2-container .top-action-bar {
        padding: 12px 16px;
    }

    .billing-v2-container .action-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .billing-v2-container .page-content {
        padding: 16px;
    }

    .billing-v2-container .info-grid {
        grid-template-columns: 1fr;
    }

    .billing-v2-container .recon-grid {
        grid-template-columns: 1fr;
    }

    .billing-v2-container .reference-box-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .billing-v2-container .action-btn span:not(.anticon) {
        display: none;
    }
}

/* ===== Ant Design Overrides for Modals ===== */
.billing-v2-container .ant-modal-content {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.billing-v2-container .ant-modal-header {
    padding: 20px 24px;
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
}

.billing-v2-container .ant-modal-body {
    padding: 24px;
}

.billing-v2-container .ant-modal-footer {
    padding: 16px 24px;
    background: var(--bg-page);
    border-top: 1px solid var(--border-light);
}

.billing-v2-container .ant-form-item-label > label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ===== Polished Form Fields (matching SmartEditModal) ===== */
/* Consistent 14px border-radius and 40px height for all form inputs */
.billing-v2-container .ant-input,
.billing-v2-container .ant-input-number,
.billing-v2-container .ant-select-selector,
.billing-v2-container .ant-picker,
.billing-v2-container .ant-input-affix-wrapper {
    border-radius: var(--radius-control) !important;
    background-color: #ffffff !important;
    border-color: var(--border-color) !important;
    height: 40px !important;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* TextArea - different height handling */
.billing-v2-container .ant-input[type="textarea"],
.billing-v2-container textarea.ant-input {
    height: auto !important;
    min-height: 80px !important;
    border-radius: var(--radius-control) !important;
}

/* Input Number inner input */
.billing-v2-container .ant-input-number-input {
    height: 38px !important;
    border-radius: var(--radius-control) !important;
    background-color: #ffffff !important;
}

/* Select text alignment */
.billing-v2-container .ant-select-single .ant-select-selector .ant-select-selection-item,
.billing-v2-container .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
    line-height: 36px !important;
}

/* Select dropdown styling */
.billing-v2-container .ant-select-dropdown {
    border-radius: var(--radius-control) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.billing-v2-container .ant-select-item {
    border-radius: 6px !important;
    margin: 2px 4px !important;
}

.billing-v2-container .ant-select-item-option-selected {
    background-color: var(--cp-primary-light) !important;
}

/* DatePicker styling */
.billing-v2-container .ant-picker {
    border-radius: var(--radius-control) !important;
}

.billing-v2-container .ant-picker-input > input {
    font-size: 13px !important;
}

/* Focus states - smooth green glow */
.billing-v2-container .ant-input:focus,
.billing-v2-container .ant-input:hover,
.billing-v2-container .ant-input-focused {
    border-color: var(--cp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.billing-v2-container .ant-input-number:focus,
.billing-v2-container .ant-input-number:hover,
.billing-v2-container .ant-input-number-focused {
    border-color: var(--cp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.billing-v2-container .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.billing-v2-container .ant-select-focused .ant-select-selector {
    border-color: var(--cp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.billing-v2-container .ant-picker:hover,
.billing-v2-container .ant-picker-focused {
    border-color: var(--cp-primary) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

/* Disabled/Readonly states */
.billing-v2-container .ant-input[disabled],
.billing-v2-container .ant-input[readonly],
.billing-v2-container .ant-input-number-disabled,
.billing-v2-container .ant-input-number-readonly,
.billing-v2-container .ant-select-disabled .ant-select-selector,
.billing-v2-container .ant-picker-disabled {
    background-color: #f5f5f5 !important;
    color: var(--text-muted) !important;
    cursor: not-allowed !important;
}

/* Checkbox styling */
.billing-v2-container .ant-checkbox-wrapper {
    font-size: 13px !important;
}

.billing-v2-container .ant-checkbox-inner {
    border-radius: 6px !important;
    width: 20px !important;
    height: 20px !important;
}

.billing-v2-container .ant-checkbox-checked .ant-checkbox-inner {
    background-color: var(--cp-primary) !important;
    border-color: var(--cp-primary) !important;
}

/* Switch styling */
.billing-v2-container .ant-switch-checked {
    background-color: var(--cp-primary) !important;
}

/* Radio styling */
.billing-v2-container .ant-radio-checked .ant-radio-inner {
    border-color: var(--cp-primary) !important;
}

.billing-v2-container .ant-radio-checked .ant-radio-inner::after {
    background-color: var(--cp-primary) !important;
}

/* Button styling */
.billing-v2-container .ant-btn-primary {
    background: var(--cp-primary) !important;
    border-color: var(--cp-primary) !important;
    border-radius: var(--radius-control) !important;
    height: 40px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.billing-v2-container .ant-btn-primary:hover {
    background: var(--cp-primary-dark) !important;
    border-color: var(--cp-primary-dark) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.2) !important;
}

.billing-v2-container .ant-btn-default {
    border-radius: var(--radius-control) !important;
    height: 40px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.billing-v2-container .ant-btn-default:hover {
    border-color: var(--cp-primary) !important;
    color: var(--cp-primary) !important;
}

/* Danger button styling */
.billing-v2-container .ant-btn-dangerous {
    border-radius: var(--radius-control) !important;
    height: 40px !important;
    font-weight: 600 !important;
}

.billing-v2-container .ant-btn-dangerous.ant-btn-primary {
    background: var(--danger) !important;
    border-color: var(--danger) !important;
}

.billing-v2-container .ant-btn-dangerous.ant-btn-primary:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* ===== Form Controls (for modals) ===== */
.billing-v2-container .form-group {
    margin-bottom: 16px;
}

.billing-v2-container .form-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.billing-v2-container .form-label .req {
    color: var(--danger);
}

/* Native form-control styling (matching Ant Design inputs) */
.billing-v2-container .form-control {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-control);
    font-size: 13px;
    font-family: var(--font);
    color: var(--text-primary);
    background: white;
    height: 40px;
    transition: all 0.2s ease;
}

.billing-v2-container .form-control:focus {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.billing-v2-container .form-control:hover {
    border-color: var(--cp-primary);
}

.billing-v2-container .form-control:disabled,
.billing-v2-container .form-control[readonly] {
    background: #f5f5f5;
    color: var(--text-muted);
    cursor: not-allowed;
}

.billing-v2-container .form-control.error {
    border-color: var(--danger);
}

.billing-v2-container .form-control.error:focus {
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.15);
}

/* Textarea variant */
.billing-v2-container textarea.form-control {
    height: auto;
    min-height: 80px;
    resize: vertical;
}

.billing-v2-container .form-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

.billing-v2-container .form-error {
    font-size: 11px;
    color: var(--danger);
    margin-top: 4px;
}

.billing-v2-container .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .billing-v2-container .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Form Section Styling (fieldset alternative) ===== */
.billing-v2-container .form-section {
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 20px;
    position: relative;
}

.billing-v2-container .form-section-title {
    position: absolute;
    top: -10px;
    left: 12px;
    background: white;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ===== Polished Modal Sections ===== */
.billing-v2-container .modal-section {
    background: var(--bg-page);
    border: 1px solid var(--border-light);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
}

.billing-v2-container .modal-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.billing-v2-container .modal-section-header svg,
.billing-v2-container .modal-section-header .anticon {
    color: var(--cp-primary);
}

/* ===== Alert/Info Boxes in Modals ===== */
.billing-v2-container .modal-info-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 16px;
    margin-bottom: 16px;
}

.billing-v2-container .modal-info-box.info {
    background: var(--info-bg);
    border: 1px solid var(--info-light);
}

.billing-v2-container .modal-info-box.warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning-light);
}

.billing-v2-container .modal-info-box.success {
    background: var(--success-bg);
    border: 1px solid var(--success-light);
}

.billing-v2-container .modal-info-box.danger {
    background: var(--danger-bg);
    border: 1px solid var(--danger-light);
}

.billing-v2-container .modal-info-box-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.billing-v2-container .modal-info-box-content {
    flex: 1 1;
    font-size: 13px;
    line-height: 1.5;
}

/* ===== Reconciliation Modal V1 Styles ===== */
/* Scoped Modal Styles */

.reconciliationModal .modal-footer button.danger {
    background-color: #fff !important;
    border: 1px solid #E2EBE7 !important;
    color: rgba(0,0,0,0.88) !important;
    border-radius: 14px !important;
    height: 40px;
}

/* Form Inputs & Groups */
.reconciliationModal .formGroupBlock {
    margin-bottom: 0px !important;
    position: relative;
}

.reconciliationModal .formGroupBlock label {
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 8px;
    display: flex;
    font-size: 14px;
}

/* Unify Input Styles */
.reconciliationModal .textFieldBlock,
.reconciliationModal .selectFieldBlock .ant-select-selector,
.reconciliationModal .ant-input-number,
.reconciliationModal .ant-picker {
    border: 1px solid #E2EBE7 !important;
    border-radius: 14px !important;
    padding: 8px 2px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 20, 10, 0.03);
    transition: all 0.2s ease-in-out;
    background-color: #fff;
    width: 100%;
    align-items: center;
}

/* Focus States */
.reconciliationModal .textFieldBlock:focus,
.reconciliationModal .textFieldBlock:focus-within,
.reconciliationModal .selectFieldBlock .ant-select-selector:focus-within,
.reconciliationModal .ant-input-number-focused,
.reconciliationModal .ant-picker-focused {
    border-color: var(--cp-primary, #0D9488) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
    outline: none;
}

/* Error State */
.reconciliationModal .errorClass,
.reconciliationModal .hasError .textFieldBlock,
.reconciliationModal .hasError .ant-select-selector {
    border-color: #ff4d4f !important;
    background-color: #fff1f0 !important;
}

.reconciliationModal .text-danger {
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* Tables (.sectionmid) */
.reconciliationModal .sectionmid {
    border-collapse: separate !important;
    border-spacing: 0;
    border: 1px solid #E2EBE7 !important;
    border-radius: 14px;
    overflow: hidden;
    margin-top: 24px !important;
}

.reconciliationModal .sectionmid th,
.reconciliationModal .horizontal-table-heads,
.reconciliationModal .tablehead th {
    background-color: #f8fafc !important;
    color: #64748b !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 12px 12px !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    white-space: nowrap;
}

.reconciliationModal .sectionmid td {
    padding: 12px 12px !important;
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    color: #1e293b;
    vertical-align: middle;
}

.reconciliationModal .sectionmid tr:last-child td {
    border-bottom: none !important;
}

.reconciliationModal .sectionmid tr:hover td {
    background-color: #f1f5f9;
}

/* HSN / Meta info in tables */
.reconciliationModal .table-hsn,
.reconciliationModal .table-hsn-span {
    display: inline-block;
    background: #eff6ff;
    color: #4096ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px !important;
    font-weight: 600;
    margin-top: 4px;
}

.reconciliationModal .ReconSubmitBtn {
    width: 120px;
    height: 50px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 18px;
}

/* Modal & Footer */
.reconciliationModal .modal-footer {
    background: #EFF3F1;
    border-top: 1px solid #F0F5F3;
    padding: 16px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

/* Loading Overlay */
.reconciliationModal .spinner-overlay {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(2px);
    z-index: 1000;
    border-radius: 14px;
}

/* Styling for Payment Inputs */
.reconciliationModal .payment-input-group.ant-input-number-group-wrapper {
    width: 100%;
    border: 1px solid #E2EBE7;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s;
}

.reconciliationModal .payment-input-group.ant-input-number-group-wrapper:focus-within {
    border-color: var(--cp-primary, #0D9488);
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.reconciliationModal .payment-input-group.has-error {
    border-color: #ff4d4f !important;
    background-color: #fff1f0;
}

.reconciliationModal .payment-input-group .ant-input-number {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 14px 14px 0 !important;
}

.reconciliationModal .payment-input-group .ant-input-number-focused {
    box-shadow: none !important;
}

.reconciliationModal .payment-input-group .ant-input-number-group-addon {
    padding: 0;
    border: none;
    height: 100%;
    width: 50px;
}

.reconciliationModal .payment-addon {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
}

/* Custom Payment Input Wrapper */
.reconciliationModal .custom-payment-input-wrapper:focus-within {
    border-color: var(--cp-primary, #0D9488) !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
}

.reconciliationModal .custom-payment-input-wrapper.over-limit:focus-within {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.reconciliationModal .custom-payment-input-wrapper .ant-input-number-input {
    height: 40px;
    padding-left: 12px;
}

.reconciliationModal .custom-payment-input-wrapper .ant-input-number-focused {
    box-shadow: none !important;
}

.reconciliationModal .selectFieldBlock.ant-select-multiple .ant-select-selector {
    padding: 4px 8px !important;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.reconciliationModal .selectFieldBlock.ant-select-multiple .ant-select-selection-overflow {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reconciliationModal .selectFieldBlock.ant-select-multiple .ant-select-selection-item {
    height: 28px;
    line-height: 26px;
    margin: 0;
    padding: 0 8px;
    border-radius: 6px;
    background: #f1f5f9;
    border: none;
    font-size: 13px;
    display: flex;
    align-items: center;
}

.reconciliationModal .selectFieldBlock.ant-select-multiple .ant-select-selection-item-remove {
    display: flex;
    align-items: center;
}

.reconciliationModal .selectFieldBlock.ant-select-multiple .ant-select-selection-placeholder {
    margin-left: 2px;
    line-height: 28px;
}

/* Metrics Header Table */
.reconciliationModal .metrics-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #E2EBE7;
    border-radius: 14px;
    overflow: hidden;
    background-color: #ffffff;
    margin-top: 16px;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 2px 6px rgba(0, 20, 10, 0.03);
}

.reconciliationModal .metrics-table thead tr {
    display: flex;
    width: 100%;
}

.reconciliationModal .metrics-table th {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border: none;
    border-right: 1px solid #e2e8f0;
    font-size: 12px;
    white-space: nowrap;
}

.reconciliationModal .metrics-table th:last-child {
    border-right: none;
}

/* Pair-based color coding using nth-child */
/* 1-2: Total Payable */
.reconciliationModal .metrics-table th:nth-child(1) {
    background-color: #fff7ed;
    color: #c05621;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #fed7aa;
}

.reconciliationModal .metrics-table th:nth-child(2) {
    background-color: #fffbeb;
    color: #9a3412;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 2px solid #fed7aa;
}

/* 3-4: Bill Amount */
.reconciliationModal .metrics-table th:nth-child(3) {
    background-color: #eff6ff;
    color: #1d4ed8;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #bfdbfe;
}

.reconciliationModal .metrics-table th:nth-child(4) {
    background-color: #e0f2fe;
    color: #1d4ed8;
    font-weight: 700;
    border-bottom: 2px solid #bfdbfe;
}

/* 5-6: Advance */
.reconciliationModal .metrics-table th:nth-child(5) {
    background-color: #f6ffed;
    color: #166534;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #bbf7d0;
}

.reconciliationModal .metrics-table th:nth-child(6) {
    background-color: #f0fdf4;
    color: #166534;
    border-bottom: 2px solid #bbf7d0;
}

/* 7-8: Security Deposit */
.reconciliationModal .metrics-table th:nth-child(7) {
    background-color: #ecfeff;
    color: #0e7490;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #a5f3fc;
}

.reconciliationModal .metrics-table th:nth-child(8) {
    background-color: #e0f2fe;
    color: #0e7490;
    border-bottom: 2px solid #a5f3fc;
}

/* 9-10: Insurance (if present) */
.reconciliationModal .metrics-table th:nth-child(9) {
    background-color: #f5f3ff;
    color: #5b21b6;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #ddd6fe;
}

.reconciliationModal .metrics-table th:nth-child(10) {
    background-color: #ede9fe;
    color: #4c1d95;
    border-bottom: 2px solid #ddd6fe;
}

/* 11-12: Total TDS (if present) */
.reconciliationModal .metrics-table th:nth-child(11) {
    background-color: #fef2f2;
    color: #b91c1c;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid #fecaca;
}

.reconciliationModal .metrics-table th:nth-child(12) {
    background-color: #fee2e2;
    color: #b91c1c;
    border-bottom: 2px solid #fecaca;
}

/* Services Table */
.reconciliationModal .services-table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: auto;
}

.reconciliationModal .services-table thead th {
    padding: 6px 8px !important;
    font-size: 11px;
    line-height: 1.2;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.reconciliationModal .services-table tbody td {
    padding: 6px 8px !important;
    font-size: 11px;
    line-height: 1.2;
    width: fit-content !important;
    vertical-align: middle;
    border-top: 1px solid #f1f5f9;
}

.reconciliationModal .services-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.reconciliationModal .services-table tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

.reconciliationModal .services-table tbody td .table-hsn {
    margin-top: 4px !important;
    font-size: 10px !important;
    color: #94a3b8;
    background: transparent;
    padding: 0;
    font-weight: 400;
}

.reconciliationModal .services-table tbody td .table-hsn-span {
    color: #64748b;
}

.reconciliationModal .services-table .ant-input,
.reconciliationModal .services-table .ant-input-number,
.reconciliationModal .services-table .ant-input-number-input {
    height: 32px !important;
    width: 100% !important;
    min-width: 80px;
    align-items: center;
    justify-content: center;
    font-size: 12px !important;
}

.reconciliationModal .product-amount-highlight {
    font-size: 11px !important;
    font-weight: 600;
    color: #334155;
    margin-top: 2px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.reconciliationModal .services-table tbody td label {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
}

.reconciliationModal .services-table tbody td:first-child {
    white-space: nowrap;
}

.reconciliationModal .services-table tbody td:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.reconciliationModal .services-table th:nth-child(3),
.reconciliationModal .services-table th:nth-child(4),
.reconciliationModal .services-table th:nth-child(5),
.reconciliationModal .services-table th:nth-child(6),
.reconciliationModal .services-table td:nth-child(3),
.reconciliationModal .services-table td:nth-child(4),
.reconciliationModal .services-table td:nth-child(5),
.reconciliationModal .services-table td:nth-child(6) {
    text-align: center;
}

.reconciliationModal .services-table-wrapper,
.reconciliationModal .sectionmid,
.reconciliationModal .services-table {
    width: 100% !important;
    box-sizing: border-box;
}

/* SAC code style */
.reconciliationModal .sac-code-style {
    font-size: 10px;
    color: #94a3b8;
    margin-left: 6px;
    font-weight: 400;
}

/* Readonly input state */
.reconciliationModal .readonly {
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

/* ===== Status Banner - Prominent state indicator ===== */
.billing-v2-container .billing-status-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.billing-v2-container .billing-status-banner-icon {
    font-size: 16px;
    display: flex;
    align-items: center;
}

.billing-v2-container .billing-status-banner.cancelled {
    background: var(--danger-bg);
    color: var(--danger);
    border-bottom: 3px solid var(--danger);
}

.billing-v2-container .billing-status-banner.merged {
    background: var(--warning-bg);
    color: var(--warning);
    border-bottom: 3px solid var(--warning);
}

.billing-v2-container .billing-status-banner.paid {
    background: var(--success-bg);
    color: var(--success);
    border-bottom: 3px solid var(--success);
}

/* ===== Financial Summary Strip ===== */
.billing-v2-container .financial-summary-strip {
    display: flex;
    align-items: center;
    background: white;
    padding: 14px 24px;
    border-bottom: 1px solid var(--border-light);
    gap: 0;
}

.billing-v2-container .financial-summary-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1;
    text-align: center;
}

.billing-v2-container .financial-summary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.billing-v2-container .financial-summary-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-primary);
}

.billing-v2-container .financial-summary-value.received {
    color: var(--success);
}

.billing-v2-container .financial-summary-value.due {
    color: var(--danger);
}

.billing-v2-container .financial-summary-value.settled {
    color: var(--success);
}

.billing-v2-container .financial-summary-divider {
    width: 1px;
    height: 36px;
    background: var(--border-color);
    flex-shrink: 0;
    margin: 0 8px;
}

@media (max-width: 480px) {
    .billing-v2-container .financial-summary-strip {
        padding: 10px 16px;
    }

    .billing-v2-container .financial-summary-value {
        font-size: 14px;
    }
}

/* ===== Action Bar Group Separators ===== */
.billing-v2-container .top-action-bar .action-group-separator {
    width: 1px;
    height: 24px;
    background: var(--border-color);
    flex-shrink: 0;
    margin: 0 4px;
}

/* ===== Billing V2 Modal Styles — Premium SaaS Modernization ===== */
/* Global styles for V2 billing modals (rendered in document.body) */
/* Design: 28px modal radius, 14px controls, softer focus, greenish tints */

/* ===== Modal Container ===== */
.billing-v2-modal .ant-modal-content {
    border-radius: 28px;
    overflow: hidden;
}

.billing-v2-modal .ant-modal-header {
    padding: 20px 24px;
    background: #ffffff;
    border-bottom: 1px solid #F0F5F3;
}

.billing-v2-modal .ant-modal-body {
    padding: 24px;
}

.billing-v2-modal .ant-modal-footer {
    padding: 16px 24px;
    background: #EFF3F1;
    border-top: 1px solid #F0F5F3;
}

/* ===== Form Labels ===== */
.billing-v2-modal .ant-form-item-label > label {
    font-size: 12px;
    font-weight: 600;
    color: #64748B;
}

/* ===== Polished Form Inputs — Premium SaaS ===== */
/* Consistent 14px border-radius and 40px height for all form inputs */
.billing-v2-modal .ant-input,
.billing-v2-modal .ant-input-number,
.billing-v2-modal .ant-select-selector,
.billing-v2-modal .ant-picker,
.billing-v2-modal .ant-input-affix-wrapper {
    border-radius: 14px !important;
    background-color: #ffffff !important;
    border-color: #E2EBE7 !important;
    height: 40px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    width: 100%;
    font-size: 13px !important;
    transition: all 0.2s ease !important;
}

/* TextArea - different height handling */
.billing-v2-modal .ant-input[type="textarea"],
.billing-v2-modal textarea.ant-input {
    height: auto !important;
    min-height: 80px !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
}

/* Input Number inner input */
.billing-v2-modal .ant-input-number-input {
    height: 38px !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
}

/* Select text alignment */
.billing-v2-modal .ant-select-single .ant-select-selector .ant-select-selection-item,
.billing-v2-modal .ant-select-single .ant-select-selector .ant-select-selection-placeholder {
    line-height: 36px !important;
}

/* DatePicker input */
.billing-v2-modal .ant-picker-input > input {
    font-size: 13px !important;
}

/* Select dropdown styling */
.billing-v2-modal .ant-select-dropdown {
    border-radius: 14px !important;
    box-shadow: 0 6px 16px rgba(0, 20, 10, 0.08) !important;
}

.billing-v2-modal .ant-select-item {
    border-radius: 6px !important;
    margin: 2px 4px !important;
}

.billing-v2-modal .ant-select-item-option-selected {
    background-color: #E6FFFA !important;
}

/* ===== Focus States — Soft Green Glow ===== */
.billing-v2-modal .ant-input:focus,
.billing-v2-modal .ant-input:hover,
.billing-v2-modal .ant-input-focused {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.billing-v2-modal .ant-input-number:focus,
.billing-v2-modal .ant-input-number:hover,
.billing-v2-modal .ant-input-number-focused {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.billing-v2-modal .ant-select:not(.ant-select-disabled):hover .ant-select-selector,
.billing-v2-modal .ant-select-focused .ant-select-selector {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

.billing-v2-modal .ant-picker:hover,
.billing-v2-modal .ant-picker-focused {
    border-color: #0D9488 !important;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12) !important;
}

/* ===== Disabled/Readonly States ===== */
.billing-v2-modal .ant-input[disabled],
.billing-v2-modal .ant-input[readonly],
.billing-v2-modal .ant-input-number-disabled,
.billing-v2-modal .ant-input-number-readonly,
.billing-v2-modal .ant-select-disabled .ant-select-selector,
.billing-v2-modal .ant-picker-disabled {
    background-color: #f5f5f5 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
}

/* ===== Checkbox Styling ===== */
.billing-v2-modal .ant-checkbox-wrapper {
    font-size: 13px !important;
}

.billing-v2-modal .ant-checkbox-inner {
    border-radius: 6px !important;
    width: 20px !important;
    height: 20px !important;
}

.billing-v2-modal .ant-checkbox-checked .ant-checkbox-inner {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
}

/* ===== Switch Styling ===== */
.billing-v2-modal .ant-switch-checked {
    background-color: #0D9488 !important;
}

.billing-v2-modal .invoice-discount-switch {
    background-color: #d1d5db !important;
}

.billing-v2-modal .invoice-discount-switch.ant-switch-checked {
    background-color: #0D9488 !important;
}

/* ===== Radio Styling ===== */
.billing-v2-modal .ant-radio-checked .ant-radio-inner {
    border-color: #0D9488 !important;
}

.billing-v2-modal .ant-radio-checked .ant-radio-inner::after {
    background-color: #0D9488 !important;
}

/* ===== Button Styling — Premium SaaS ===== */
.billing-v2-modal .ant-btn {
    border-radius: 14px !important;
    height: 40px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.billing-v2-modal .ant-btn-primary {
    background: #0D9488 !important;
    border-color: #0D9488 !important;
}

.billing-v2-modal .ant-btn-primary:hover {
    background: #0F766E !important;
    border-color: #0F766E !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(13, 148, 136, 0.2) !important;
}

.billing-v2-modal .ant-btn-default {
    border-color: #E2EBE7 !important;
}

.billing-v2-modal .ant-btn-default:hover {
    border-color: #0D9488 !important;
    color: #0D9488 !important;
}

/* Danger Button */
.billing-v2-modal .ant-btn-dangerous.ant-btn-primary {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.billing-v2-modal .ant-btn-dangerous.ant-btn-primary:hover {
    background: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* ===== Select Dropdown (rendered in document.body) ===== */
.ant-select-dropdown {
    border-radius: 14px !important;
}

/* ===== Tabs Styling ===== */
.billing-v2-modal .ant-tabs-tab {
    font-weight: 600 !important;
    padding: 8px 16px !important;
}

.billing-v2-modal .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #0D9488 !important;
}

.billing-v2-modal .ant-tabs-ink-bar {
    background: #0D9488 !important;
}

/* ===== Form Row ===== */
.billing-v2-modal .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .billing-v2-modal .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== Modal Title Icon ===== */
.billing-v2-modal .modal-title-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #E6FFFA;
    color: #0D9488;
}

.billing-v2-modal .modal-title-icon.danger {
    background: #fecaca;
    color: #dc2626;
}

/* ===== Cancel Billing V2 - Date Chips ===== */

.billing-v2-modal .cancel-date-item-card {
    border: 1px solid #E2EBE7;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    background: #ffffff;
}

.billing-v2-modal .cancel-date-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #F0F5F3;
}

.billing-v2-modal .cancel-date-item-title {
    font-weight: 600;
    font-size: 14px;
    color: #1E293B;
}

.billing-v2-modal .cancel-date-item-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.billing-v2-modal .cancel-date-count {
    font-size: 12px;
    color: #64748B;
    font-weight: 500;
}

.billing-v2-modal .cancel-date-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.billing-v2-modal .cancel-date-chip {
    cursor: pointer;
    border-radius: 999px !important;
    padding: 4px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    user-select: none;
    height: 34px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.billing-v2-modal .cancel-date-chip.active {
    border: 1.5px solid #0D9488 !important;
    color: #0D9488 !important;
    background: #E6FFFA !important;
}

.billing-v2-modal .cancel-date-chip.active:hover {
    background: #CCFBF1 !important;
    border-color: #0F766E !important;
}

.billing-v2-modal .cancel-date-chip.cancelled {
    border: 1.5px solid #ef4444 !important;
    color: #ffffff !important;
    background: #ef4444 !important;
    text-decoration: line-through !important;
}

.billing-v2-modal .cancel-date-chip.cancelled:hover {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
}

.billing-v2-modal .cancel-date-chip.pre-cancelled {
    border: 1px solid #E2EBE7 !important;
    color: #94A3B8 !important;
    background: #F0F5F3 !important;
    text-decoration: line-through !important;
    cursor: not-allowed !important;
    opacity: 0.6;
}

/* Scope selection cards */
.billing-v2-modal .cancel-scope-card {
    border: 1.5px solid #E2EBE7;
    padding: 16px 20px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 12px;
}

.billing-v2-modal .cancel-scope-card:hover {
    border-color: #0D9488;
    background: #E6FFFA;
}

.billing-v2-modal .cancel-scope-card.selected {
    border: 2px solid #dc2626;
    background: #fef7f7;
}

/* Confirmation summary */
.billing-v2-modal .cancel-confirm-summary {
    background: #EFF3F1;
    border: 1px solid #F0F5F3;
    border-radius: 16px;
    padding: 20px;
}

.billing-v2-modal .cancel-confirm-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #F0F5F3;
    font-size: 13px;
}

.billing-v2-modal .cancel-confirm-row:last-child {
    border-bottom: none;
}

.billing-v2-modal .cancel-confirm-label {
    color: #64748B;
    font-weight: 500;
}

.billing-v2-modal .cancel-confirm-value {
    color: #1E293B;
    font-weight: 600;
}

/* Step indicator */
.billing-v2-modal .cancel-step-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.billing-v2-modal .cancel-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E2EBE7;
    transition: all 0.2s ease;
}

.billing-v2-modal .cancel-step-dot.active {
    background: #dc2626;
    width: 24px;
    border-radius: 999px;
}

.billing-v2-modal .cancel-step-dot.completed {
    background: #0D9488;
}

.billing-v2-modal .cancel-impact-summary {
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 10px;
    padding: 14px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.billing-v2-modal .cancel-impact-summary-title {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.billing-v2-modal .cancel-impact-summary-text {
    font-size: 12px;
    color: #991b1b;
}

.billing-v2-modal .cancel-no-dates {
    text-align: center;
    padding: 32px 16px;
    color: #94A3B8;
    font-size: 14px;
}

body {
  border: none;
  padding: none;
  box-sizing: border-box;
}

label {
  font-weight: 700;
}

.container {
  /* line-height: 2; */
  padding-inline: 20px !important;
  border: 2px solid black;
  width: 900px !important;
  height: auto !important;
  position: relative !important;
  padding-bottom: 30px !important;
}

.container .borderdesigntop {
  border: 15px solid black;
  width: 40%;
}

.container .tag {
  position: absolute;
  top: 30px;
  right: 50px;
  font-weight: bold;
  font-size: 1.5rem;
  margin-bottom: 0;
}

.container .header {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  align-items: center;
  /* margin-bottom: 20px; */
}

.container .header .left {
  display: flex;
  align-items: center;
}

.container .header .logo {
  width: 250px;
  min-height: 150px;
  padding: 0;
  /* object-fit: contain; */
  /* display: flex; */
  /* justify-content: center;         */
  /* align-items: center;  */
}

.container .header .logo img {
 /* text-align: center; */
 /* width: 250px; */
 /* min-height: 150px; */
 /* padding: 0; */
 object-fit: contain;
}

.container .header .company {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1;
  /* Take available space */
  /* padding-left: 20px; */
}



.container .header .companydetails {
  margin-left: 20px;
}

.container .section .companyName {
  font-weight: 700;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  /* font-size:1.5rem ; */
  text-align: left;
  /* font-style: italic; */
  font-style: normal;
  word-spacing: -2px !important;
}

.companyNameTitle p {
  font-weight: 700;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  /* font-size:1.5rem ; */
  text-align: left;
  /* font-style: italic; */
  font-style: normal;
  word-spacing: -2px !important;
  line-height: 1.2;
  /* margin:0 10px */
}

.container .section .address {
  display: flex;
  justify-content: space-between;
  /* margin-bottom: 40px; */
}

.container .section .address .billingAdd>p {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 0;
  text-align: center;
}

.container .section .address .billingAdd {
  border-right: 0.2px solid black;
  padding-left: 0;
  padding-right: 10px;
}

.container .section .address .billingAdd label {
  margin-bottom: 0px;
}

.container .section .address .billingAdd p {
  line-height: 1.5;
}

.container .section .address .customerdetails label {
  margin-bottom: 0px;
}

.container .section .address .customerdetails>p {
  font-weight: bold;
  margin-bottom: 0;
  font-size: 18px;
  text-align: center;
}

.container .section .address .customerdetails p {
  line-height: 1.5;
}

.container .section .address .customerdetails {
  padding-left: 10px;
  padding-right: 0;
  border-left: 0.2px solid black;
}


.container .section .cn-sectionmid {
  /* border: 1px solid black; */
  width: 100%;
  text-align: center;
}

.container .section .cn-sectionmid .tablehead {
  /* background-color: black; */
  background-color: #EDEDED;
  border: 1px solid black;
  color: black;
  width: 100%;
  height: 50px;
}

.height {
  height: auto;
}

.tables-width { 
  width: 63.3px;
}

/* .container .section .cn-sectionmid .left {
  border-left: 1px solid black;
} */

.container .section .cn-sectionmid td {
  /* background-color: #EDEDED; */
  border: 1px solid black;
}

.container .section .sectionbottom {
  display: flex;
  justify-content: space-between;
  border: 1px solid black;
  text-align: center;
}

.container .section .sectionbottom .sign {
  margin: auto;
  text-align: center;
  padding-block: 60px;
}

.container .section .sectionbottom .sign .signimg {
  margin-inline: auto;
  margin-block: 5px;
}

.container .section .sectionbottom .table2 {
  /* width: 50%; */
  border: 1px solid black;
}

.container .section .sectionbottom .table2 tr {
  border: 1px solid black;
}

tr:nth-child(even) {
  /* background-color: #EDEDED; */
  width: 100%;
}

.container .section .sectionbottom .table2 td {
  border: 1px solid black;
  padding: 0 5px;
}

.container .section .sectionbottom .table2 th {
  border: 1px solid black;
  text-align: center !important;
  padding: 0 5px;
}

.container .section .sectionbottom .table2 .tabel2end {
  font-weight: 700;
}

.container .borderdesignbottom {
  border: 10px solid black;
  position: absolute;
  bottom: 0;
  margin-bottom: 0;
  width: 40%;
}

.billingOtherDetails {
  margin-top: 10px;
}

.cnt-horizontal-tables-heads {
  margin: auto !important;
  text-align: center !important;
}

.qrCode {
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}

.qrCode img {
  border: 5px solid #ccc;
  border-radius: 10px;
  margin-bottom: 0px;
  width: 150px;
  height: 150px;
}

.qrCode span {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  /* background-color: #f9f9f9; */
  padding: 5px;
  border-radius: 5px;
}

.qrCode p {
  font-size: 16px;
  color: #333;
  margin-top: 5px;
}

/* .bankDetails {
  background-color: #f9f9f9;
} */

.bankDetails p {
  font-size: 13px;
  font-weight: normal;
  color: #333;
  /* padding: 0 5px; */
  margin-bottom: 0;
  border-radius: 5px;
}

.bankDetails p:first-child {
  padding-bottom: 0px;
  font-weight: bold;
  font-size: 14px;
}

.bankDetails span {
  font-size: 13px;
  color: #333;
  font-weight: normal;
}


.terms {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  /* background-color: #f9f9f9; */
  /* padding: 5px; */
  margin: 5px;
  /* margin-bottom: 0; */
  border-radius: 5px;
}

.terms p {
  margin-bottom: 0px;
  font-style: italic;
}

.terms .termsFont {
  font-size: 13px;
  color: #333;
  font-weight: normal;
  display: block;
  font-style: italic;
}

/* .cta>p {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
} */

/* .cta>div {
  display: flex;
  justify-content: space-between;
  background-color: #edfaf4;
  padding: 10px 10px;
  border-radius: 10px;
} */

/* .cta .ctaBox {
  display: flex;
  align-items: center;
  gap:16px
} */

/* .cta .ctaBox .ctaHeroFont {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #333;
} */

/* .cta .ctaBox .ctaFont {
  font-size: 13px;
  color: #333;
  font-weight: normal;
  display: block;
} */

.divider {
  margin: 50px 0
}

/* ************************** */
.table-row {
  page-break-inside: avoid;
  /* Prevents the row from being split */
}

.container {
  page-break-inside: avoid;
}

/* Prevent breaking inside tables */
table {
  page-break-inside: auto;
  page-break-before: auto;
  page-break-after: auto;
}

/* Ensure the row moves to the next page instead of breaking */
tr {
  page-break-inside: avoid;
  page-break-after: auto;
}

/* Header and footer should not break */
thead {
  display: table-header-group;
}

tfoot {
  display: table-footer-group;
}

/* .cta .ctaBox .ctaIcon {
  clip-path: polygon(24.8% 0%, 76% 0%, 100% 50%, 76% 100%, 24.8% 100%, 0% 50%);
  background-color: #5dbda0;
  font-size: 20px;
  color: white;
  padding: 10px 10px;
} */

.table-hsn {
  font-size: 11px !important;
  font-style: italic;
  margin-right: 5px !important;
}

.table-hsn-span {
  margin-left: 5px !important;
}

.sub-table-head {
  border-right: 1.8px solid black;
  padding-left: 3px;
  padding-right: 4px;
}

.sub-table-head-amt {
  padding-left: 4px;
  padding-right: 0;
}

.make-sign-right {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px !important;
  padding: 10px 0 !important;
}
/* body {
    border: none;
    padding: none;
    box-sizing: border-box;
}

label {
    font-weight: 700;
}

.container {
   
    padding-inline: 20px !important;
    border: 2px solid black;
    width: 900px !important;
    height: auto !important;
    position: relative !important;
    padding-bottom: 30px !important;
}

.container .borderdesigntop {
    border: 15px solid black;
    width: 40%;
}

.container .tag {
    position: absolute;
    top: 30px;
    right: 50px;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
}

.container .header {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    align-items: center;
   
}

.container .header .left {
    display: flex;
    align-items: center;
}

.container .header .logo {
    width: 250px;
    min-height: 150px;
    padding: 0;
    
}

.container .header .logo img {
 
    object-fit: contain;
}

.container .header .company {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
   
}



.container .header .companydetails {
    margin-left: 20px;
}

.container .section .companyName {
    font-weight: 700;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    
    text-align: left;
   
    font-style: normal;
    word-spacing: -2px !important;
}

.companyNameTitle p {
    font-weight: 700;
    font-size: clamp(1rem, 1.5vw, 1.2rem);
   
    text-align: left;
   
    font-style: normal;
    word-spacing: -2px !important;
    line-height: 1.2;
   
}

.container .section .address {
    display: flex;
    justify-content: space-between;
    
}

.container .section .address .billingAdd>p {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 0;
    text-align: center;
}

.container .section .address .billingAdd {
    border-right: 0.2px solid black;
    padding-left: 0;
    padding-right: 10px;
}

.container .section .address .billingAdd label {
    margin-bottom: 0px;
}

.container .section .address .billingAdd p {
    line-height: 1.5;
}

.container .section .address .customerdetails label {
    margin-bottom: 0px;
}

.container .section .address .customerdetails>p {
    font-weight: bold;
    margin-bottom: 0;
    font-size: 18px;
    text-align: center;
}

.container .section .address .customerdetails p {
    line-height: 1.5;
}

.container .section .address .customerdetails {
    padding-left: 10px;
    padding-right: 0;
    border-left: 0.2px solid black;
}


.container .section .cn-sectionmid {
   
    width: 100%;
    text-align: center;
}

.container .section .cn-sectionmid .tablehead {
    
    background-color: #EDEDED;
    border: 1px solid black;
    color: black;
    width: 100%;
    height: 50px;
}

.height {
    height: auto;
}

.tables-width {
    width: 63.3px;
}



.container .section .cn-sectionmid td {
  
    border: 1px solid black;
}

.container .section .sectionbottom {
    display: flex;
    justify-content: space-between;
    border: 1px solid black;
    text-align: center;
}

.container .section .sectionbottom .sign {
    margin: auto;
    text-align: center;
    padding-block: 60px;
}

.container .section .sectionbottom .sign .signimg {
    margin-inline: auto;
    margin-block: 5px;
}

.container .section .sectionbottom .table2 {
   
    border: 1px solid black;
}

.container .section .sectionbottom .table2 tr {
    border: 1px solid black;
}

tr:nth-child(even) {
    
    width: 100%;
}

.container .section .sectionbottom .table2 td {
    border: 1px solid black;
    padding: 0 5px;
}

.container .section .sectionbottom .table2 th {
    border: 1px solid black;
    text-align: center !important;
    padding: 0 5px;
}

.container .section .sectionbottom .table2 .tabel2end {
    font-weight: 700;
}

.container .borderdesignbottom {
    border: 10px solid black;
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    width: 40%;
}

.billingOtherDetails {
    margin-top: 10px;
}

.cnt-horizontal-tables-heads {
    margin: auto !important;
    text-align: center !important;
}

.qrCode {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.qrCode img {
    border: 5px solid #ccc;
    border-radius: 10px;
    margin-bottom: 0px;
    width: 150px;
    height: 150px;
}

.qrCode span {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    
    padding: 5px;
    border-radius: 5px;
}

.qrCode p {
    font-size: 16px;
    color: #333;
    margin-top: 5px;
}


.bankDetails p {
    font-size: 13px;
    font-weight: normal;
    color: #333;
   
    margin-bottom: 0;
    border-radius: 5px;
}

.bankDetails p:first-child {
    padding-bottom: 0px;
    font-weight: bold;
    font-size: 14px;
}

.bankDetails span {
    font-size: 13px;
    color: #333;
    font-weight: normal;
}


.terms {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    
    margin: 5px;
   
    border-radius: 5px;
}

.terms p {
    margin-bottom: 0px;
    font-style: italic;
}

.terms .termsFont {
    font-size: 13px;
    color: #333;
    font-weight: normal;
    display: block;
    font-style: italic;
}



.divider {
    margin: 50px 0
}


.table-row {
    page-break-inside: avoid;
   
}

.container {
    page-break-inside: avoid;
}


table {
    page-break-inside: auto;
    page-break-before: auto;
    page-break-after: auto;
}


tr {
    page-break-inside: avoid;
    page-break-after: auto;
}


thead {
    display: table-header-group;
}

tfoot {
    display: table-footer-group;
}



.table-hsn {
    font-size: 11px !important;
    font-style: italic;
    margin-right: 5px !important;
}

.table-hsn-span {
    margin-left: 5px !important;
}

.sub-table-head {
    border-right: 1.8px solid black;
    padding-left: 3px;
    padding-right: 4px;
}

.sub-table-head-amt {
    padding-left: 4px;
    padding-right: 0;
}

.make-sign-right {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px !important;
    padding: 10px 0 !important;
} */



/* design changed by vishal */

/* .email-field {
    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-size: 1.0rem;
}

#creditNoteInvoice {
    border: none !important;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;

    max-width: 100%;

}


.creditnote2container {
    padding-inline: 20px !important;
    padding-top: 30px !important;
    
    width: 900px !important;
    height: auto !important;
    position: relative !important;
    padding-bottom: 30px !important;
    margin: auto;
}

.creditnote2container .nbt2tag {
    position: absolute !important;
    top: 30px !important;
    right: 24px !important;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
    color: #1a237e;
    border-bottom: 3px solid #ff5722;
}

.creditnote2container .nbt2header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 2mm;
}

.creditnote2container .nbt2header .left {
    display: flex;
    align-items: center;
}

.creditnote2container .nbt2header .logo {
    width: 250px;
    min-height: 150px;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

.creditnote2container .nbt2header .logo img {
    object-fit: contain;
    margin-top: -50px;
}

.creditnote2container .nbt2header .nbt2companydetails {
    padding: 1px;
    border: 1px solid #c5cae9 !important;
    border-radius: 8px;
    background-color: #e8eaf6;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.creditnote2container .nbt2header .nbt2companydetails>p {
    margin: 0px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #3f51b5;
}

.creditnote2container .nbt2header .nbt2companydetails label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #455a64;
    line-height: 1.1;
}

.creditnote2container .nbt2header .nbt2companydetails span {
    font-size: 0.75rem;
    line-height: 1.1;
}

.creditnote2container .nbt2section .nbt2address {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    overflow: hidden;
}

.creditnote2container .nbt2section .nbt2address .nbt2billingAdd,
.creditnote2container .nbt2section .nbt2address .nbt2customerdetails {
    padding: 1px 1px 1px 5px;
    width: 50%;
    box-sizing: border-box;
    background-color: #EAEFF8;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #c5cae9;
    border-radius: 8px;
    line-height: 1.3rem;
    color: #202020;
}

.creditnote2container .nbt2section .nbt2address .nbt2billingAdd {
    border-right: 1px solid #c5cae9 !important;
}

.creditnote2container .nbt2section .nbt2address .nbt2billingAdd>p,
.creditnote2container .nbt2section .nbt2address .nbt2customerdetails>p {
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 3px !important;
    text-align: center !important;
    color: #1a237e;
    text-transform: uppercase;
    border-bottom: 1px solid #c5cae9;
    padding: 3px 0 3px 3px;
}

.creditnote2container .nbt2section .nbt2address .nbt2billingAdd label,
.creditnote2container .nbt2section .nbt2address .nbt2customerdetails label {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.nbt-sectionmid1 {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    border: 1px solid #444;

}


.nbt-sectionmid1 th {
    padding: 2px 2px;
    text-align: center;
    font-weight: bold;

    border: 1px solid black;

    background-color: #f4f4f4;
    background-color: #EAEFF8;
    white-space: nowrap;
    border-collapse: collapse !important
}


.nbt-sectionmid1 td {
    padding: 2px 2px;

    text-align: right;
    padding-bottom: 0px;

}


.nbt-sectionmid1 td:first-child,
.nbt-sectionmid1 th:first-child {
    text-align: center;
}

.nbt-sectionmid1 td:nth-child(2) {
    text-align: left;
}

.nbt-sectionmid1 tr:last-child td {
    border-bottom: none;
}


.nbt-sectionmid1::after {
    content: "";
    display: table-row;
    height: 0;
    border-bottom: 1px solid #444;
}


.nbt-sectionmid1 .table-hsn,
.nbt-sectionmid1 i {
    display: inline;
    font-size: 9px;
    color: #101010;
}


.nbt-sectionmid1 tr:nth-child(even) td {
    background-color: #f3f1f1;

}

.nbt-qrcode-bankdetails-sign1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 35px;
}


.nbt-sign {
    flex: 0 0 150px;
    text-align: center;
}

.nbt-sign .signimg {
    width: 130px;
    height: 80px;
    object-fit: contain;
    margin: 5px 0;
}

.nbt-sign label {
    font-weight: 500;

    color: black;
}

.terms {
    margin-top: 15px;
    font-weight: 700;
    font-size: 1.2rem;
    color: #1a237e;

    padding-top: 15px;
}

.terms .termsFont {
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
    color: #455a64;

}

.no-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-top: 13mm;
}

.nbt2-formatted-text {
    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0.01em !important;

} */




/* changed code with nct */


.nct2-email-field {
    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-size: 1.0rem;
}

#creditNoteInvoice {
    border: none !important;
    background-color: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;

    max-width: 100%;

}


.nct2-creditnote2container {
    padding-inline: 20px !important;
    padding-top: 30px !important;

    width: 900px !important;
    height: auto !important;
    position: relative !important;
    padding-bottom: 30px !important;
    margin: auto;
}

.nct2-creditnote2container .nct2-nct2tag {
    position: absolute !important;
    top: 30px !important;
    right: 24px !important;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 0;
    color: #1a237e;
    border-bottom: 3px solid #ff5722;
}

.nct2-creditnote2container .nct2-nct2header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 2mm;
}

.nct2-creditnote2container .nct2-nct2header .nct2-left {
    display: flex;
    align-items: center;
}

.nct2-creditnote2container .nct2-nct2header .nct2-logo {
    /* width: 120px; */
    min-height: 150px;
    width: 125px;
    padding: 0;
    display: flex;
    align-items: flex-start;
}

.nct2-creditnote2container .nct2-nct2header .nct2-logo img {
    object-fit: contain;
    margin-top: -50px;
}

.nct2-creditnote2container .nct2-nct2header .nct2-nct2companydetails {
    padding: 1px;
    border: 1px solid #c5cae9 !important;
    border-radius: 8px;
    background-color: #e8eaf6;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.nct2-creditnote2container .nct2-nct2header .nct2-nct2companydetails>p {
    margin: 0px;
    font-weight: 700;
    font-size: 0.85rem;
    color: #3f51b5;
}

.nct2-creditnote2container .nct2-nct2header .nct2-nct2companydetails label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #455a64;
    line-height: 1.1;
}

.nct2-creditnote2container .nct2-nct2header .nct2-nct2companydetails span {
    font-size: 0.75rem;
    line-height: 1.1;
}

.nct2-creditnote2container .nct2-nct2section .nct2-nct2address {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    overflow: hidden;
}

.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2billingAdd,
.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2customerdetails {
    padding: 1px 1px 1px 5px;
    width: 50%;
    box-sizing: border-box;
    background-color: #EAEFF8;
    font-family: Arial, Helvetica, sans-serif;
    border: 1px solid #c5cae9;
    border-radius: 8px;
    line-height: 1.3rem;
    color: #202020;
}

.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2billingAdd {
    border-right: 1px solid #c5cae9 !important;
}

.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2billingAdd>p,
.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2customerdetails>p {
    font-weight: 700 !important;
    font-size: 18px !important;
    margin-bottom: 3px !important;
    text-align: center !important;
    color: #1a237e;
    text-transform: uppercase;
    border-bottom: 1px solid #c5cae9;
    padding: 3px 0 3px 3px;
}

.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2billingAdd label,
.nct2-creditnote2container .nct2-nct2section .nct2-nct2address .nct2-nct2customerdetails label {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.nct2-nbt-sectionmid {
    width: 100%;
    border-collapse: collapse;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    border: 1px solid #444;

}


.nct2-nbt-sectionmid th {
    padding: 2px 2px;
    text-align: center;
    font-weight: bold;

    border: 1px solid black;

    background-color: #f4f4f4;
    background-color: #EAEFF8;
    white-space: nowrap;
    border-collapse: collapse !important
}


.nct2-nbt-sectionmid td {
    padding: 2px 2px;

    text-align: right;
    padding-bottom: 0px;

}


.nct2-nbt-sectionmid td:first-child,
.nct2-nbt-sectionmid th:first-child {
    text-align: center;
}

.nct2-nbt-sectionmid td:nth-child(2) {
    text-align: left;
}

.nct2-nbt-sectionmid tr:last-child td {
    border-bottom: none;
}


.nct2-nbt-sectionmid::after {
    content: "";
    display: table-row;
    height: 0;
    border-bottom: 1px solid #444;
}


.nct2-nbt-sectionmid .nct2-table-hsn,
.nct2-nbt-sectionmid i {
    display: inline;
    font-size: 9px;
    color: #101010;
}


.nct2-nbt-sectionmid tr:nth-child(even) td {
    background-color: #f3f1f1;

}

.nct2-nbt-qrcode-bankdetails-sign {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 35px;
}


.nct2-nbt-sign {
    flex: 0 0 150px;
    text-align: center;
}

.nct2-nbt-sign .nct2-signimg {
    width: 130px;
    height: 80px;
    object-fit: contain;
    margin: 5px 0;
}

.nct2-nbt-sign label {
    font-weight: 500;

    color: black;
}

.nct2-terms {
    margin-top: 15px;
    font-weight: 700;
    font-size: 1.2rem;
    color: #1a237e;

    /* padding-top: 15px; */
}

.nct2-terms .nct2-termsFont {
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
    color: #455a64;

}

.nct2-no-break {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    /* margin-top: 13mm; */
    margin-top: 5mm;
}

.nct2-nct2-formatted-text {
    font-family: Arial, Helvetica, sans-serif;

    letter-spacing: 0.01em !important;

}




/* Payment Receipt CSS - "Arogya" Corporate Style */
/* Refactored with 'pmtrcpt1' prefix */

.pmtrcpt1-payment-receipt-container {
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 10mm 15mm;
    background: #ffffff;
    /* User Requested Text Formatting */
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 0.01em !important;
    color: #333;
    box-sizing: border-box;
    position: relative;
    font-size: 13px;

    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* --- Header Section --- */
.pmtrcpt1-arogya-header {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 2px solid #3366cc;
    padding-bottom: 15px;
}

.pmtrcpt1-arogya-logo-container {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmtrcpt1-arogya-logo {
    max-width: 90px;
    max-height: 90px;
}

.pmtrcpt1-arogya-company-info {
    flex: 1 1;
}

.pmtrcpt1-arogya-company-name {
    color: #3366cc;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: capitalize;
    line-height: 0.9 ;
}

.pmtrcpt1-arogya-company-address {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

.pmtrcpt1-arogya-company-details {
    margin-top: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #444;
}

/* --- Title & Meta Box --- */
.pmtrcpt1-arogya-title {
    text-align: center;
    color: #3366cc;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.pmtrcpt1-arogya-meta-box {
    display: flex;
    border: 1px solid #a0c0f0;
    background: #f0f6ff;
    margin-bottom: 20px;
    border-radius: 4px;
}

.pmtrcpt1-arogya-meta-item {
    flex: 1 1;
    padding: 8px 12px;
    border-right: 1px solid #d0e0ff;
}

.pmtrcpt1-arogya-meta-item:last-child {
    border-right: none;
}

.pmtrcpt1-arogya-meta-label {
    font-weight: 700;
    font-size: 11px;
    color: #333;
    margin-bottom: 3px;
    text-transform: capitalize;
}

.pmtrcpt1-arogya-meta-value {
    font-size: 13px;
    color: #000;
    font-weight: 500;
}

.pmtrcpt1-status-paid {
    color: #28a745;
    font-weight: 700;
}

/* --- Address Split Section --- */
.pmtrcpt1-arogya-address-section {
    display: flex;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}

.pmtrcpt1-arogya-billed-box {
    flex: 1 1;
    border-right: 1px solid #ccc;
}

.pmtrcpt1-arogya-billed-box:last-child {
    border-right: none;
}

.pmtrcpt1-arogya-billed-header {
    background: #e6efff;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    border-bottom: 1px solid #ccc;
}

.pmtrcpt1-arogya-billed-content {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}

.pmtrcpt1-field-label {
    color: #777;
    font-weight: 500;
    margin-right: 5px;
    font-size: 12px;
}

.pmtrcpt1-arogya-billed-name {
    font-weight: 700;
    margin-bottom: 4px;
    color: #000;
}

/* --- Amount Box --- */
.pmtrcpt1-arogya-amount-box {
    border: 2px solid #3366cc;
    margin-bottom: 20px;
    text-align: center;
}

.pmtrcpt1-arogya-amount-header {
    background: #ffffff;
    color: #555;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.pmtrcpt1-arogya-amount-value-container {
    padding: 15px;
    background: #ffffff;
}

.pmtrcpt1-arogya-amount-value {
    font-size: 32px;
    font-weight: 700;
    color: #3366cc;
    margin-bottom: 5px;
}

.pmtrcpt1-arogya-amount-words {
    font-style: italic;
    font-size: 13px;
    color: #666;
}

/* --- Details Table --- */
.pmtrcpt1-arogya-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    font-size: 13px;
}

.pmtrcpt1-arogya-details-table td {
    border: 1px solid #ddd;
    padding: 0.5rem 0.5rem;
}

.pmtrcpt1-arogya-details-label {
    background: #f0f6ff;
    font-weight: 600;
    /* width: 20%; */
    color: #444;
}

.pmtrcpt1-arogya-details-value {
    color: #000;
        width: 30%;
}

/* --- Remarks --- */
.pmtrcpt1-arogya-remarks-box {
    border: 1px solid #99c2ff;
    background: #fdfdfd;
    margin-bottom: 30px;
}

.pmtrcpt1-arogya-remarks-header {
    background: #e6efff;
    padding: 6px 12px;
    font-weight: 700;
    font-size: 11px;
    color: #3366cc;
    text-transform: uppercase;
    border-bottom: 1px solid #99c2ff;
}

.pmtrcpt1-arogya-remarks-content {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    min-height: 40px;
}

/* This specific class is used by jsPDF logic to find remarks, so we must keep the original name or ensure we use the old class as well if needed. 
   However, user asked to prepend ALL classes. 
   If I change this, I must also update the ViewPage.tsx logic or add the old class as a secondary class. 
   Logic: allParagraphs = clonedElement.querySelectorAll('.payment-receipt-payment-details p');
   So I will add 'payment-receipt-payment-details' as a secondary class in TSX and prefix it here if I want to style it.
   But user said "prepend all css classNames".
   I will style '.pmtrcpt1-payment-receipt-payment-details' and in TSX I will add both if necessary, or better yet, I should check if I can just use the new one.
   Actually, the user said "prepend all... so that these classes do not interfere".
   The view page logic is likely relying on the OLD class name.
   I should probably keep the old class name in the TSX for the JS selector, but NOT style it (or style the new one).
   Let's create the new style.
*/
.pmtrcpt1-payment-receipt-payment-details {
    /* No specific style needed if just a wrapper, but if it had styles, move them here */
}

/* --- Footer --- */
.pmtrcpt1-arogya-footer {
    text-align: center;
    margin-top: 30px;
}

.pmtrcpt1-arogya-thank-you {
    color: #3366cc;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 15px;
}

.pmtrcpt1-arogya-brand {
    font-size: 11px;
    color: #777;
    border-top: 2px dotted #ddd;
    padding-top: 10px;
    width: 60%;
    margin: 0 auto;
}

@media print {
    .pmtrcpt1-payment-receipt-container {
        padding: 0;
        margin: 0;
        width: 100%;
        box-shadow: none;
    }
}
:root{--leads-primary-50: #ecfdf5;--leads-primary-100: #d1fae5;--leads-primary-200: #a7f3d0;--leads-primary-400: #34d399;--leads-primary-500: #15a171;--leads-primary-600: #059669;--leads-primary-700: #047857;--leads-gray-50: #f9fafb;--leads-gray-100: #f3f4f6;--leads-gray-200: #e5e7eb;--leads-gray-300: #d1d5db;--leads-gray-400: #9ca3af;--leads-gray-500: #6b7280;--leads-gray-600: #4b5563;--leads-gray-700: #374151;--leads-gray-800: #1f2937;--leads-gray-900: #111827;--leads-success: #10b981;--leads-success-light: #dcfce7;--leads-info: #3b82f6;--leads-info-light: #dbeafe;--leads-warning: #f59e0b;--leads-warning-light: #fef3c7;--leads-danger: #ef4444;--leads-danger-light: #fee2e2;--leads-purple: #8b5cf6;--leads-purple-light: #ede9fe;--leads-radius-sm: 4px;--leads-radius-md: 6px;--leads-radius-lg: 8px;--leads-radius-xl: 12px;--leads-radius-full: 9999px;--leads-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);--leads-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--leads-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--leads-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)}.LeadsTable_tableCard__g-APx{background:#fff;border:1px solid var(--leads-gray-200);border-radius:var(--leads-radius-xl);box-shadow:var(--leads-shadow-md);overflow:hidden}.LeadsTable_toolbar__n1ZJR{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--leads-gray-200);flex-wrap:wrap;background:#fff}.LeadsTable_searchBox__sKS93{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--leads-gray-200);border-radius:var(--leads-radius-md);padding:8px 12px;min-height:48px;box-sizing:border-box;width:320px;transition:all .15s ease}.LeadsTable_searchBox__sKS93:hover{border-color:var(--leads-primary-400);background:var(--leads-primary-50)}.LeadsTable_searchBox__sKS93:focus-within{background:#fff;border-color:var(--leads-primary-500);box-shadow:0 0 0 3px rgba(21,161,113,.1)}.LeadsTable_searchBox__sKS93 .LeadsTable_searchIcon__WQlQV{color:var(--leads-gray-400);font-size:16px}.LeadsTable_searchBox__sKS93 input{border:none;outline:none;width:100%;font-size:13px;color:var(--leads-gray-800);background:rgba(0,0,0,0)}.LeadsTable_searchBox__sKS93 input::placeholder{color:var(--leads-gray-400)}.LeadsTable_searchBox__sKS93 .LeadsTable_searchSubmit__PHAuY{margin-left:8px;height:32px;padding:0 12px;border-radius:15px;background:var(--leads-primary-500);color:#fff;border:none;font-size:13px;font-weight:600;cursor:pointer;transition:all .12s ease}.LeadsTable_searchBox__sKS93 .LeadsTable_searchSubmit__PHAuY:hover{background:var(--leads-primary-700)}.LeadsTable_toolbarDivider__9H2Wo{width:1px;height:32px;background:var(--leads-gray-200);margin:0 4px}.LeadsTable_quickFilter__sPcev{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--leads-radius-md);background:#fff;border:1px solid var(--leads-gray-200);font-size:13px;color:var(--leads-gray-600);cursor:pointer;transition:all .15s ease}.LeadsTable_quickFilter__sPcev:hover{border-color:var(--leads-primary-400);background:var(--leads-primary-50)}.LeadsTable_quickFilter__sPcev select{border:none;outline:none;background:rgba(0,0,0,0);font-weight:600;color:var(--leads-gray-800);cursor:pointer;padding-right:4px}.LeadsTable_quickFilterLabel__\+tNMi{white-space:nowrap}.LeadsTable_filterBtn__ZAxbF{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:15px;background:#fff;border:1px solid var(--leads-gray-200);font-size:13px;font-weight:600;color:var(--leads-gray-700);cursor:pointer;transition:all .15s ease}.LeadsTable_filterBtn__ZAxbF:hover{border-color:var(--leads-primary-400);background:var(--leads-primary-50)}.LeadsTable_filterBadge__jH7p-{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--leads-primary-500);color:#fff;border-radius:var(--leads-radius-full);font-size:11px;font-weight:700}.LeadsTable_toolbarSpacer__XgsF3{flex:1 1}.LeadsTable_toolbarActions__xL5Gu{display:flex;gap:8px;align-items:center}.LeadsTable_chipsRow__hxzma{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--leads-gray-50);border-bottom:1px solid var(--leads-gray-200);flex-wrap:wrap;min-height:44px}.LeadsTable_chipsRow__hxzma:empty,.LeadsTable_chipsRow__hxzma.LeadsTable_hidden__s0WZy{display:none}.LeadsTable_chip__UOxWf{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--leads-radius-full);font-size:12px;font-weight:600;background:var(--leads-primary-50);border:1px solid rgba(21,161,113,.25);color:var(--leads-primary-700)}.LeadsTable_chip__UOxWf .LeadsTable_chipRemove__yfy4d{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(21,161,113,.15);cursor:pointer;font-size:14px;line-height:1;margin-left:2px}.LeadsTable_chip__UOxWf .LeadsTable_chipRemove__yfy4d:hover{background:rgba(21,161,113,.3)}.LeadsTable_chipClear__Lj2jl{background:var(--leads-gray-100);border-color:var(--leads-gray-200);color:var(--leads-gray-600);margin-left:auto}.LeadsTable_chipClear__Lj2jl .LeadsTable_chipRemove__yfy4d{background:rgba(0,0,0,.08)}.LeadsTable_chipClear__Lj2jl .LeadsTable_chipRemove__yfy4d:hover{background:rgba(0,0,0,.15)}.LeadsTable_tableWrapper__zjfLc{overflow-x:auto;overflow-y:visible;max-width:100%}.LeadsTable_tableWrapper__zjfLc::-webkit-scrollbar{height:10px}.LeadsTable_tableWrapper__zjfLc::-webkit-scrollbar-track{background:var(--leads-gray-100)}.LeadsTable_tableWrapper__zjfLc::-webkit-scrollbar-thumb{background:var(--leads-gray-300);border-radius:5px}.LeadsTable_tableWrapper__zjfLc::-webkit-scrollbar-thumb:hover{background:var(--leads-gray-400)}.LeadsTable_leadCell__Eo6P0{display:flex;flex-direction:column;gap:5px}.LeadsTable_leadId__REL4E{font-weight:700;color:var(--leads-primary-600);text-decoration:none;font-size:13px;cursor:pointer}.LeadsTable_leadId__REL4E:hover{color:var(--leads-primary-700);text-decoration:underline}.LeadsTable_leadTags__AWm6D{display:flex;gap:5px}.LeadsTable_miniTag__JZSVa{display:inline-flex;align-items:center;padding:2px 6px;border-radius:var(--leads-radius-sm);font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}.LeadsTable_tagPidYes__WbQjg{background:#dcfce7;color:#166534}.LeadsTable_tagPidNo__4HnUj{background:var(--leads-gray-100);color:var(--leads-gray-500)}.LeadsTable_tagDupYes__Qc6Ky{background:#fef3c7;color:#b45309}.LeadsTable_tagDupNo__OucPt{background:var(--leads-gray-100);color:var(--leads-gray-500)}.LeadsTable_cellName__znTFD{font-weight:600;color:var(--leads-gray-800);font-size:13px}.LeadsTable_cellMono__HpX\+7{font-family:"SF Mono",ui-monospace,monospace;font-size:12px;color:var(--leads-gray-600);letter-spacing:-0.3px}.LeadsTable_cellMuted__GfZe8{color:var(--leads-gray-400);font-size:13px}.LeadsTable_cellTruncate__XhYJn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.LeadsTable_stageBadge__wKhZM{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:var(--leads-radius-full);font-size:11px;font-weight:600;white-space:nowrap}.LeadsTable_stageDot__auKxD{width:6px;height:6px;border-radius:50%}.LeadsTable_stageNew__\+pPxI{background:var(--leads-info-light);color:#1d4ed8}.LeadsTable_stageNew__\+pPxI .LeadsTable_stageDot__auKxD{background:#3b82f6}.LeadsTable_stageOpen__JNbHH{background:var(--leads-success-light);color:#047857}.LeadsTable_stageOpen__JNbHH .LeadsTable_stageDot__auKxD{background:#10b981}.LeadsTable_stageWip__GJpCY{background:var(--leads-warning-light);color:#b45309}.LeadsTable_stageWip__GJpCY .LeadsTable_stageDot__auKxD{background:#f59e0b}.LeadsTable_stageSwitched__ck8AR{background:var(--leads-warning-light);color:#b45309}.LeadsTable_stageSwitched__ck8AR .LeadsTable_stageDot__auKxD{background:#f59e0b}.LeadsTable_stageClosed__GZvVf{background:var(--leads-gray-100);color:var(--leads-gray-600)}.LeadsTable_stageClosed__GZvVf .LeadsTable_stageDot__auKxD{background:var(--leads-gray-400)}.LeadsTable_stageConverted__R7gC2{background:#dcfce7;color:#166534}.LeadsTable_stageConverted__R7gC2 .LeadsTable_stageDot__auKxD{background:#22c55e}.LeadsTable_stageDefault__3GLDh{background:var(--leads-gray-100);color:var(--leads-gray-700)}.LeadsTable_stageDefault__3GLDh .LeadsTable_stageDot__auKxD{background:var(--leads-gray-500)}.LeadsTable_priorityBadge__Koa7S{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--leads-radius-full);font-size:11px;font-weight:600}.LeadsTable_priorityHot__\+Z8zJ{background:var(--leads-danger-light);color:#b91c1c}.LeadsTable_priorityNormal__9LGz5{background:var(--leads-gray-100);color:var(--leads-gray-600)}.LeadsTable_priorityLow__ZCFsn{background:var(--leads-info-light);color:#1d4ed8}.LeadsTable_reminderCell__imoij{display:flex;flex-direction:column;gap:2px}.LeadsTable_reminderType__MMK3k{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600}.LeadsTable_reminderTime__y0qLT{font-size:11px;color:var(--leads-gray-500)}.LeadsTable_reminderCall__KwAL3 .LeadsTable_reminderType__MMK3k{color:var(--leads-info)}.LeadsTable_reminderMeeting__L92n7 .LeadsTable_reminderType__MMK3k{color:var(--leads-purple)}.LeadsTable_reminderEmail__8g0XX .LeadsTable_reminderType__MMK3k{color:var(--leads-success)}.LeadsTable_reminderOverdue__CtJ30 .LeadsTable_reminderType__MMK3k{color:var(--leads-danger)}.LeadsTable_reminderOverdue__CtJ30 .LeadsTable_reminderTime__y0qLT{color:var(--leads-danger);font-weight:500}.LeadsTable_reminderBadge__OCawo{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--leads-radius-md);font-size:12px;font-weight:600;white-space:nowrap}.LeadsTable_reminderBadge__OCawo.LeadsTable_reminderUpcoming__RMbiQ{background:var(--leads-info-light);color:var(--leads-info)}.LeadsTable_reminderBadge__OCawo.LeadsTable_reminderDueSoon__i8G1S{background:var(--leads-warning-light);color:var(--leads-warning)}.LeadsTable_reminderBadge__OCawo.LeadsTable_reminderOverdue__CtJ30{background:var(--leads-danger-light);color:var(--leads-danger)}.LeadsTable_reminderBadge__OCawo.LeadsTable_reminderNone__H7org{color:var(--leads-gray-400);background:rgba(0,0,0,0)}.LeadsTable_btn__RiVzZ{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;border-radius:var(--leads-radius-md);font-size:13px;font-weight:600;cursor:pointer;border:1px solid rgba(0,0,0,0);transition:all .15s ease;font-family:inherit}.LeadsTable_btnPrimary__48MuP{background:var(--leads-primary-500);color:#fff}.LeadsTable_btnPrimary__48MuP:hover{background:var(--leads-primary-600)}.LeadsTable_btnSecondary__qT2R0{background:#fff;color:var(--leads-gray-700);border-color:var(--leads-gray-300)}.LeadsTable_btnSecondary__qT2R0:hover{background:var(--leads-gray-50);border-color:var(--leads-gray-400)}.LeadsTable_btnGhost__ZXcHn{background:rgba(0,0,0,0);color:var(--leads-gray-600);border:none}.LeadsTable_btnGhost__ZXcHn:hover{background:var(--leads-gray-100)}.LeadsTable_btnIcon__1qQPJ{padding:9px;width:38px;height:38px}.LeadsTable_pageHeader__zpKKB{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}.LeadsTable_pageTitle__GOdDk{font-size:22px;font-weight:700;color:var(--leads-gray-900);display:flex;align-items:center;gap:10px}.LeadsTable_countBadge__uVR0d{font-size:13px;font-weight:500;color:var(--leads-gray-500)}.LeadsTable_pageActions__1Gv3j{display:flex;gap:10px}.LeadsTable_columnToggleDropdown__DbjBv .LeadsTable_ant-dropdown-menu__rxr3e{max-height:400px;overflow-y:auto;padding:8px}.LeadsTable_columnToggleDropdown__DbjBv .LeadsTable_ant-dropdown-menu-item__rb6UB{padding:6px 12px;border-radius:var(--leads-radius-sm)}.LeadsTable_columnToggleDropdown__DbjBv .LeadsTable_ant-dropdown-menu-item__rb6UB:hover{background:var(--leads-primary-50)}.LeadsTable_columnToggleBtn__P5HP5{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--leads-radius-md);border:1px solid var(--leads-gray-200);background:#fff;color:var(--leads-gray-600);cursor:pointer;transition:all .15s ease}.LeadsTable_columnToggleBtn__P5HP5:hover{border-color:var(--leads-primary-400);color:var(--leads-primary-600);background:var(--leads-primary-50)}.LeadsTable_columnToggleBtn__P5HP5 svg,.LeadsTable_columnToggleBtn__P5HP5 .LeadsTable_anticon__wFno6{font-size:18px}.LeadsTable_filterDrawer__hS6DI .ant-drawer-header{background:var(--leads-gray-50);border-bottom:1px solid var(--leads-gray-200);padding:16px 24px}.LeadsTable_filterDrawer__hS6DI .ant-drawer-title{font-size:18px;font-weight:700;color:var(--leads-gray-900)}.LeadsTable_filterDrawer__hS6DI .ant-drawer-body{padding:16px 24px}.LeadsTable_filterSection__-0aQt{background:var(--leads-gray-50);border:1px solid var(--leads-gray-200);border-radius:var(--leads-radius-lg);padding:16px;margin-bottom:16px}.LeadsTable_filterSection__-0aQt h4{font-size:12px;font-weight:700;color:var(--leads-gray-500);text-transform:uppercase;margin-bottom:12px}.LeadsTable_filterRow__XuhEL{display:grid;grid-template-columns:1fr 1fr;gap:12px}.LeadsTable_filterField__Dnpaj{display:flex;flex-direction:column;gap:6px}.LeadsTable_filterField__Dnpaj label{font-size:12px;font-weight:600;color:var(--leads-gray-600)}.LeadsTable_filterField__Dnpaj select,.LeadsTable_filterField__Dnpaj input{padding:10px 12px;border:1px solid var(--leads-gray-300);border-radius:var(--leads-radius-md);font:inherit;background:#fff}.LeadsTable_filterField__Dnpaj select:focus,.LeadsTable_filterField__Dnpaj input:focus{outline:none;border-color:var(--leads-primary-500);box-shadow:0 0 0 3px rgba(21,161,113,.12)}.LeadsTable_filterField__Dnpaj .ant-input,.LeadsTable_filterField__Dnpaj .ant-input-affix-wrapper,.LeadsTable_filterField__Dnpaj .ant-picker,.LeadsTable_filterField__Dnpaj .ant-select-selector{border-radius:15px !important;border-color:#eee !important;min-height:40px;transition:all .15s ease;box-shadow:none;background-color:#fff !important}.LeadsTable_filterField__Dnpaj .ant-select-selector{padding-inline:12px !important;border-bottom:1px solid #eee !important}.LeadsTable_filterField__Dnpaj .ant-select-selection-placeholder,.LeadsTable_filterField__Dnpaj .ant-select-selection-item,.LeadsTable_filterField__Dnpaj .ant-input::placeholder{font-size:13px}.LeadsTable_filterField__Dnpaj .ant-input:hover,.LeadsTable_filterField__Dnpaj .ant-input-affix-wrapper:hover,.LeadsTable_filterField__Dnpaj .ant-picker:hover,.LeadsTable_filterField__Dnpaj .ant-select:not(.ant-select-disabled):hover .ant-select-selector{border-color:#eee !important}.LeadsTable_filterField__Dnpaj .ant-input:focus,.LeadsTable_filterField__Dnpaj .ant-input-affix-wrapper-focused,.LeadsTable_filterField__Dnpaj .ant-picker-focused,.LeadsTable_filterField__Dnpaj .ant-select-focused .ant-select-selector{border-color:#15a171 !important;box-shadow:none !important}.LeadsTable_filterField__Dnpaj .ant-select-multiple .ant-select-selection-overflow-item .ant-tag{border-radius:999px;font-size:12px;padding:0 8px;line-height:22px}.LeadsTable_toggleGroup__6BqGR{display:flex;flex-wrap:wrap;gap:8px}.LeadsTable_toggleBtn__CH-3x{padding:8px 14px;border-radius:var(--leads-radius-md);border:1px solid var(--leads-gray-300);background:#fff;font-size:13px;font-weight:500;color:var(--leads-gray-700);cursor:pointer;transition:all .15s ease}.LeadsTable_toggleBtn__CH-3x:hover{border-color:var(--leads-primary-400)}.LeadsTable_toggleBtn__CH-3x.LeadsTable_active__--e16{background:var(--leads-primary-500);border-color:var(--leads-primary-500);color:#fff}.LeadsTable_drawerFooter__jpBHN{display:flex;gap:12px;padding:16px 24px;border-top:1px solid var(--leads-gray-200);background:var(--leads-gray-50)}.LeadsTable_drawerFooter__jpBHN .ant-btn{border-radius:20px;min-height:40px;font-weight:600;box-shadow:0 3px 4px rgba(0,0,0,.12) !important}.LeadsTable_leadsTable__v3QSR .ant-table{font-size:13px}.LeadsTable_leadsTable__v3QSR .ant-table-thead>tr>th{background:linear-gradient(180deg, var(--leads-gray-50), var(--leads-gray-100));border-bottom:2px solid var(--leads-gray-300);padding:12px 14px;font-size:11px;font-weight:700;color:var(--leads-gray-800) !important;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.LeadsTable_leadsTable__v3QSR .ant-table-thead>tr>th:hover{background:linear-gradient(180deg, var(--leads-primary-50), var(--leads-gray-100)) !important;color:var(--leads-gray-900) !important}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr>td{padding:10px 14px;border-bottom:1px solid var(--leads-gray-100);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:nth-child(even){background:var(--leads-gray-50)}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:hover>td{background:var(--leads-primary-50) !important}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr{cursor:pointer;transition:background .1s ease}.LeadsTable_leadsTable__v3QSR .ant-table-cell-fix-left,.LeadsTable_leadsTable__v3QSR .ant-table-cell-fix-right{background:#fff !important;z-index:5}.LeadsTable_leadsTable__v3QSR .ant-table-thead>tr>th.ant-table-cell-fix-left,.LeadsTable_leadsTable__v3QSR .ant-table-thead>tr>th.ant-table-cell-fix-right{background:linear-gradient(180deg, var(--leads-gray-50), var(--leads-gray-100)) !important;z-index:6}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:nth-child(even) .ant-table-cell-fix-left,.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:nth-child(even) .ant-table-cell-fix-right{background:var(--leads-gray-50) !important}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:nth-child(even) .ant-table-cell-fix-left,.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:nth-child(even) .ant-table-cell-fix-right{background:var(--leads-gray-50)}.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:hover .ant-table-cell-fix-left,.LeadsTable_leadsTable__v3QSR .ant-table-tbody>tr:hover .ant-table-cell-fix-right{background:var(--leads-primary-50) !important}.LeadsTable_leadsTable__v3QSR .ant-table-thead>tr>th.ant-table-cell-fix-left{background:linear-gradient(180deg, var(--leads-gray-50), var(--leads-gray-100))}.LeadsTable_leadsTable__v3QSR .ant-pagination{margin:16px}.LeadsTable_leadsTable__v3QSR .ant-pagination-item{border-radius:var(--leads-radius-md)}.LeadsTable_leadsTable__v3QSR .ant-pagination-item:hover{border-color:var(--leads-primary-500)}.LeadsTable_leadsTable__v3QSR .ant-pagination-item-active{background:var(--leads-primary-500);border-color:var(--leads-primary-500)}.LeadsTable_leadsTable__v3QSR .ant-pagination-item-active a{color:#fff}.LeadsTable_leadsTable__v3QSR .ant-pagination-prev .ant-pagination-item-link,.LeadsTable_leadsTable__v3QSR .ant-pagination-next .ant-pagination-item-link{border-radius:var(--leads-radius-md)}@media(max-width: 768px){.LeadsTable_toolbar__n1ZJR{flex-direction:column;align-items:stretch;gap:10px}.LeadsTable_searchBox__sKS93{width:100%}.LeadsTable_toolbarDivider__9H2Wo{display:none}.LeadsTable_pageHeader__zpKKB{flex-direction:column;align-items:flex-start}.LeadsTable_pageActions__1Gv3j{width:100%;justify-content:flex-end}}@keyframes LeadsTable_fadeIn__P7d11{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.LeadsTable_chip__UOxWf{animation:LeadsTable_fadeIn__P7d11 .15s ease}
/* LeadProfileNew.css */

.care-pilot-crm {
    --primary-teal: #0D9488;
    --primary-teal-dark: #0F766E;
    --primary-teal-light: #F0FDFA;
    --primary-teal-fade: rgba(13, 148, 136, 0.1);
    --bg-page: #F8FAFC;
    --card-bg: #FFFFFF;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --border-light: #E2E8F0;
    --accent-blue: #3B82F6;
    --success: #10B981;
    --danger: #EF4444;
    --chip-hot-bg: #FFFBEB;
    --chip-hot-text: #B45309;
    --chip-neutral-bg: #F1F5F9;
    --chip-neutral-text: #475569;
    
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
    padding: 20px;
    box-sizing: border-box; /* Added for responsive padding */
}

/* Summary Strip */
.care-pilot-crm .summary-strip { background: white; border-radius: 12px; padding: 12px 16px; margin-bottom: 24px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; box-shadow: var(--card-shadow); border: 1px solid var(--border-light); }
.care-pilot-crm .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; transition: transform 0.2s; white-space: nowrap; }
.care-pilot-crm .chip-neutral { background: var(--chip-neutral-bg); color: var(--chip-neutral-text); }
.care-pilot-crm .chip-hot { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); color: #B45309; border: 1px solid #FDE68A; }
.care-pilot-crm .chip-yes { background: #DCFCE7; color: #166534; border: 1px solid #BBF7D0; }
.care-pilot-crm .chip-divider { width: 1px; height: 24px; background: var(--border-light); margin: 0 4px; }

/* Dashboard Grid */
.care-pilot-crm .dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
.care-pilot-crm .card { background: var(--card-bg); border-radius: 16px; border: none; box-shadow: var(--card-shadow); transition: all 0.3s ease; overflow: visible; display: flex; flex-direction: column; }
.care-pilot-crm .card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.care-pilot-crm .card.full-width { grid-column: 1 / -1; }
.care-pilot-crm .card-header { background: transparent; padding: 24px 28px; border-bottom: 2px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.care-pilot-crm .card-title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 12px; color: var(--text-primary); margin-bottom: 0; }
.care-pilot-crm .card-title-icon { width: 38px; height: 38px; background: var(--primary-teal-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--primary-teal); overflow: hidden; }

/* Phone icon sizing and header inversion */
/* Center the svg and scale it to fit inside the rounded square */
.card-title-icon img.phone-icon { width: 60%; height: 60%; object-fit: contain; display: block; margin: auto; }
.phone-icon { display: inline-block; vertical-align: middle; }
.green-header-modal .ant-modal-title .phone-icon { filter: brightness(0) invert(1); }
.care-pilot-crm .card-body { padding: 24px; flex-grow: 1; }
.care-pilot-crm .edit-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-light); background: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; color: var(--text-secondary); }
.care-pilot-crm .edit-btn:hover { background: var(--primary-teal-light); border-color: var(--primary-teal-fade); color: var(--primary-teal); }

/* Data Grid */
.care-pilot-crm .data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.care-pilot-crm .data-grid.single-col { grid-template-columns: 1fr; }
.care-pilot-crm .data-item { 
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    background: rgba(255,255,255,0.6); /* match .status-item */
    padding: 12px 16px; /* match .status-item */
    border-radius: 10px; /* rounded box */
    border: 1px solid rgba(0,0,0,0.05); /* subtle border */
}
.care-pilot-crm .data-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; }
.care-pilot-crm .data-value { font-size: 14px; font-weight: 500; color: var(--text-primary); word-break: break-word; overflow-wrap: break-word; }
.care-pilot-crm .status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.care-pilot-crm .status-item { background: rgba(255,255,255,0.6); padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.05); }
.care-pilot-crm .status-item.full-width { grid-column: 1 / -1; }
.care-pilot-crm .update-btn { margin-top: 20px; width: 100%; padding: 14px; background: var(--primary-teal); color: white; border: none; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* Sections inside cards */
.care-pilot-crm .section { margin-bottom: 20px; background: #FAFAFA; border-radius: 12px; padding: 16px; border: 1px solid transparent; }
.care-pilot-crm .section-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--primary-teal); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; border-bottom: 2px solid rgba(13, 148, 136, 0.15); padding-bottom: 12px; }


/* Modal Customization */
.care-pilot-modal .ant-modal-content {
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 0;
    overflow: hidden;
}

.care-pilot-modal .ant-modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-light);
    background: #15803d;
}

.care-pilot-modal .ant-modal-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    font-weight: 700;
    padding-bottom: 15px;
    color: #ffffff;
}

.care-pilot-modal .ant-modal-body {
    padding: 24px;
    background: #F8FAFC; 
}

/* Ensure form controls inside the Update Lead Status (and other) modals have white backgrounds */
.care-pilot-modal .ant-modal-body input,
.care-pilot-modal .ant-modal-body textarea,
.care-pilot-modal .ant-modal-body .custom-input,
.care-pilot-modal .ant-modal-body .ant-input,
.care-pilot-modal .ant-modal-body .ant-select-selector,
.care-pilot-modal .ant-modal-body .ant-select-selection-item {
    background: #FFFFFF !important;
    color: inherit !important;
    border-radius: 16px !important;
}

.care-pilot-modal .ant-modal-body .ant-select-selector:focus,
.care-pilot-modal .ant-modal-body .ant-input:focus,
.care-pilot-modal .ant-modal-body .custom-input:focus {
    box-shadow: 0 0 0 4px rgba(13,148,136,0.05) !important;
    border-color: var(--primary-teal) !important;
}

.care-pilot-modal .ant-modal-footer {
    padding: 20px 24px;
    background: white;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Form Styles inside Modal */
.modal-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-teal);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 8px;
}

.custom-input {
    border-radius: 16px;
    padding: 8px 12px;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.custom-input:focus, .custom-input:hover {
    border-color: var(--primary-teal);
    box-shadow: 0 0 0 3px var(--primary-teal-light);
}

/* Modern Button Toolbar Styles */
.action-bar-container {
    display: inline-flex; /* shrink to content so parent can position it */
    justify-content: flex-start; /* keep items together */
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
   flex-wrap: wrap; /* allows wrap on smaller screens */
}

/* Base Button Shape */
.crm-btn {
    height: 42px;
    padding: 0 20px;
    border-radius: 12px !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    white-space: nowrap; /* Prevents text breaking */
}

/* 1. Primary Action (Create Patient) - Gradient Teal */
.crm-btn-primary {
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
}
.crm-btn-primary:hover {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(13, 148, 136, 0.4) !important;
}
.crm-btn-primary:disabled {
    background: #CBD5E1 !important;
    box-shadow: none !important;
    color: #94A3B8 !important;
}

/* 2. Secondary Actions (Edit/Share) - Clean White */
.crm-btn-secondary {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
}
.crm-btn-secondary:hover {
    border-color: #0D9488 !important;
    color: #0D9488 !important;
    background: #F0FDFA !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
}
.crm-btn-secondary:disabled {
    background: #CBD5E1 !important;
    box-shadow: none !important;
    color: #94A3B8 !important;
}

/* 3. Ghost Action (Duplicate) - Subtle */
.crm-btn-ghost {
    background: transparent !important;
    border: 1px dashed #CBD5E1 !important;
    color: #64748B !important;
    box-shadow: none !important;
}
.crm-btn-ghost:hover {
    border-color: #EF4444 !important;
    color: #EF4444 !important;
    background: #FEF2F2 !important;
}
.crm-btn-ghost:disabled {
    background: #CBD5E1 !important;
    box-shadow: none !important;
    color: #94A3B8 !important;
}


/* 1. Laptops / Small Desktops (max-width: 1200px) */
@media (max-width: 1200px) {
    .care-pilot-crm .dashboard-grid {
        gap: 16px; /* Slightly tighter gap */
    }
}

/* 2. Tablets (max-width: 992px) */
@media (max-width: 992px) {
    /* Stack cards vertically instead of 2 columns */
    .care-pilot-crm .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* Adjust buttons alignment */
    .action-bar-container {
        display: flex; /* on smaller screens use full-width flex column as before */
        justify-content: flex-start;
    }
}

/* 3. Mobile Devices (max-width: 768px) */
@media (max-width: 768px) {
    .care-pilot-crm {
        padding: 12px; /* Reduce padding on small screens */
    }

    /* Make Summary Strip Scrollable */
    .care-pilot-crm .summary-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 8px;
        padding-bottom: 12px; /* Space for scrollbar */
    }
    /* Hide divider lines on mobile to save space */
    .care-pilot-crm .chip-divider {
        display: none;
    }

    /* Stack Data Fields (Key: Value) */
    .care-pilot-crm .data-grid,
    .care-pilot-crm .status-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 12px;
    }

    /* Stack Action Buttons */
    .action-bar-container {
        flex-direction: column;
        width: 100%;
    }
    .crm-btn {
        width: 100%; /* Full width buttons */
    }

    /* Fix Modal Buttons on Mobile */
    .care-pilot-modal .ant-modal-footer {
        flex-direction: column-reverse;
    }
    .care-pilot-modal .ant-modal-footer button {
        width: 100%;
        margin-left: 0;
        margin-bottom: 10px;
    }
}

/* --- CUSTOM GREEN MODAL (Matches uploaded design) --- */

/* 1. The Modal Container */
.green-header-modal .ant-modal-content {
    border-radius: 12px;
    overflow: hidden; /* Ensures header corners stay rounded */
    padding: 0;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 2. The Header (Green Background) */
.green-header-modal .ant-modal-header {
    background-color: #15803d; /* Professional Deep Green matching the image */
    padding: 20px 24px;
    border-bottom: 1px solid #14532d;
    margin-bottom: 0;
}

.green-header-modal .ant-modal-title {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 3. The Close Button (White X) */
.green-header-modal .ant-modal-close {
    color: rgba(255, 255, 255, 0.8);
    top: 8px; /* nudged a little more up to better align with design */
    right: 20px;
}
.green-header-modal .ant-modal-close:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

/* 4. The Body */
.green-header-modal .ant-modal-body {
    padding: 32px 32px 10px 32px; /* Generous padding like the image */
    background-color: #ffffff;
}

/* 5. Labels (Uppercase & Gray) */
.green-header-modal .design-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748B; /* Slate gray */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

/* 6. Inputs & Selects */
.green-header-modal .ant-select-selector,
.green-header-modal .ant-input,
.green-header-modal .custom-input {
    border-radius: 16px !important;
    border-color: #E2E8F0 !important;
    padding: 6px 11px !important;
    min-height: 40px; /* Taller inputs */
    display: flex;
    align-items: center;
}

.green-header-modal .ant-select-selection-item {
    line-height: 38px !important; /* Center text vertically */
}

/* 7. Footer */
.green-header-modal .ant-modal-footer {
    padding: 16px 24px;
    background: #ffffff;
    border-top: 1px solid #F1F5F9;
}

/* Custom Footer Buttons */
.btn-cancel {
    height: 40px;
    border-radius: 16px;
    font-weight: 500;
    border: 1px solid #15803d; /* Green border */
    color: #15803d; /* Green text */
}
.btn-save {
    height: 40px;
    border-radius: 16px;
    font-weight: 600;
    background-color: #15803d; /* Matches Header */
    border: none;
    padding: 0 24px;
}
.btn-save:hover {
    background-color: #166534 !important;
}


/* --- FIX FOR DROPDOWN OVERLAP --- */

/* Allow the selection box to grow automatically */
.care-pilot-modal .ant-select-selector {
    height: auto !important;
    min-height: 40px;
    padding-bottom: 4px !important;
}

/* Ensure tags wrap correctly */
.care-pilot-modal .ant-select-selection-overflow {
    flex-wrap: wrap;
    width: 100%;
}

/* Add breathing room below all input columns */
.care-pilot-modal .ant-col {
    margin-bottom: 8px; /* Safety margin */
}

/* Ensure dropdown menu floats above everything else */
.care-pilot-modal .ant-select-dropdown {
    z-index: 9999 !important;
}

/* --- FIX FOR MULTI-SELECT OVERLAP --- */

/* 1. Force the Select box to grow with content */
.care-pilot-modal .ant-select-multiple .ant-select-selector {
    height: auto !important;
    min-height: 40px; 
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    white-space: normal !important; /* Allow wrapping */
}

/* 2. Ensure the selection area handles overflow properly */
.care-pilot-modal .ant-select-selection-overflow {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* 3. Add item spacing */
.care-pilot-modal .ant-select-selection-overflow-item {
    max-width: 100%;
}

/* 4. Ensure Dropdown Menu sits on top (Z-Index fix) */
.care-pilot-modal .ant-select-dropdown {
    z-index: 10000 !important;
}

/* --- FIX FOR CUT-OFF TEXT IN TAGS --- */

/* 1. Increase the height of the individual tags (pills) */
.care-pilot-modal .ant-select-selection-item {
    height: 32px !important;       /* Taller tag to fit text */
    line-height: 30px !important;  /* Centers text vertically */
    display: flex !important;
    align-items: center !important;
    margin-top: 4px !important;    /* Space between rows of tags */
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 2px !important; /* Extra padding at bottom to prevent clip */
    border-radius: 6px !important;
}

/* 2. Fix the text span inside the tag */
.care-pilot-modal .ant-select-selection-item-content {
    line-height: 30px !important;
    display: inline-block;
    transform: translateY(1px); /* Pushes text down slightly */
}

/* 3. Ensure the main input box handles the larger tags */
.care-pilot-modal .ant-select-multiple .ant-select-selector {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    min-height: 46px !important; /* Taller base input */
    height: auto !important;
}

/* 4. Fix the "X" remove icon alignment */
.care-pilot-modal .ant-select-selection-item-remove {
    line-height: 30px !important;
    display: flex !important;
    align-items: center !important;
}

/* Prevent tags from overflowing the select container */
.care-pilot-modal .ant-select-multiple .ant-select-selector {
    overflow: hidden !important; /* clip anything outside */
    box-sizing: border-box !important;
}

/* Limit individual tag width and truncate long text with ellipsis */
.care-pilot-modal .ant-select-selection-item {
    max-width: 320px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.care-pilot-modal .ant-select-selection-item .ant-select-selection-item-content {
    display: inline-block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Keep caller country code + phone number on one line as a single visual unit */
.green-header-modal .caller-phone-unit {
    display: flex;
    align-items: stretch;
    width: 100%;
    flex-wrap: nowrap;
}

.green-header-modal .caller-phone-unit .caller-country-code {
    width: 28%;
    min-width: 140px;
    max-width: 190px;
    flex: 0 0 auto;
}

.green-header-modal .caller-phone-unit .caller-phone-number {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: -1px; /* merge borders for single-unit look */
}

.green-header-modal .caller-phone-unit .caller-country-code .ant-select-selector {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    height: 100% !important;
}

.green-header-modal .caller-phone-unit .caller-phone-number.ant-input-number {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    min-height: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    padding: 0 11px !important;
}

.green-header-modal .caller-phone-unit .caller-country-code .ant-select-selector {
    min-height: 40px !important;
    height: 40px !important;
}

.green-header-modal .caller-phone-unit .caller-phone-number .ant-input-number-input-wrap {
    width: 100%;
}

.green-header-modal .caller-phone-unit .caller-phone-number .ant-input-number-input {
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 !important;
}

.assistedliving-rooms-table.ant-table-wrapper .ant-table-thead > tr > th {
  background: #439c81 !important; 
  color: #fff !important;
  font-weight: 700 !important;
}

.assistedliving-rooms-table.ant-table-wrapper .ant-table-tbody > tr.even-row > td {
  background: #f9f9f9 !important; 
}

.assistedliving-rooms-table.ant-table-wrapper .ant-table-tbody > tr.odd-row > td {
  background: #e1f0eb !important; 
}

.even-row {
  background: #f9f9f9 !important; /* slightly darker green tint */
}
.odd-row {
  background: #e1f0eb !important; /* lighter green/white tint */
}

.assistedliving-tasks-table .ant-table-thead > tr > th {
  background: #439c81 !important; /* Use your codebase's green */
  color: #fff !important;
  font-weight: 700;
}

/* Container padding and general cleanup */
.dashboard-tabs {
  padding: 8px 0;
}

/* Base tab style - subtle and clean */
.dashboard-tabs .ant-tabs-tab {
  font-weight: 500;
  color: #64748b; /* Slate-500 */
  padding: 10px 20px !important;
  margin: 0 4px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent !important;
}

/* Hover effect for inactive tabs */
.dashboard-tabs .ant-tabs-tab:hover {
  color: #2563eb !important;
  background: #f1f5f9 !important; /* Very light slate */
}

/* Active Tab - High Visibility */
.dashboard-tabs .ant-tabs-tab.ant-tabs-tab-active {
  background: #ffffff !important;
  /* Add a distinct shadow to make it "pop" */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
  border-color: #e2e8f0 !important;
  /* Scale it up slightly to show prominence */
  transform: translateY(-1px);
}

/* Text style for the active button */
.dashboard-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
  color: #2563eb !important; /* Bright Brand Blue */
  font-weight: 700 !important;
  /* Add a subtle text shadow for sharpness */
  text-shadow: 0 0 0.5px rgba(37, 99, 235, 0.3);
}

/* The Bottom Indicator Bar */
.dashboard-tabs .ant-tabs-ink-bar {
  background: #2563eb !important;
  height: 3px !important;
  border-radius: 4px 4px 0 0;
  /* Make it slightly shorter than the tab width for a modern look */
  width: 40px !important; 
}

/* Icon alignment and spacing */
.dashboard-tabs .ant-tabs-tab span[role="img"] {
  margin-right: 10px;
  font-size: 1.1rem;
  vertical-align: middle;
}

/* Ensure the background of the tab bar itself looks cohesive */
.dashboard-tabs .ant-tabs-nav {
  border-bottom: 1px solid #e2e8f0 !important;
  background: #f8fafc; /* Slightly off-white background for the bar */
  padding: 4px;
  border-radius: 10px;
}
.macro-view-container {
  padding: 24px 40px;
  background-color: #fff;
}

.top-info-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.small-label {
  font-size: 11px;
  color: #666;
}

.info-blue-text {
  color: #1890ff;
  font-style: italic;
  font-size: 12px;
  margin-top: 15px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 24px;
}

.dark-btn {
  background: #000 !important;
  border-color: #000 !important;
  border-radius: 4px;
}

.filter-section {
  background-color: #e9f5ee; /* Tint matching the screenshot */
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 24px;
}

.filter-text {
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}

.full-width {
  width: 100%;
}

.macro-table .ant-table-thead > tr > th {
  background: #f9f9f9 !important;
  font-size: 12px;
}

.macro-table .ant-table-tbody > tr > td {
  font-size: 12px;
}


.branch-modal :global(.ant-modal-content){border-radius:16px !important;overflow:hidden !important;max-height:95vh;display:flex !important;flex-direction:column !important;background:#fff !important}.branch-modal :global(.ant-modal-body){padding:0 !important;display:flex !important;flex-direction:column !important;max-height:calc(95vh - 40px) !important;overflow:hidden !important;background:#fff !important;flex:1 1 auto !important}.branch-modal :global(.ant-modal-footer){display:flex !important;justify-content:space-between !important;align-items:center !important;padding:18px 24px !important;background:#fff !important;border-top:1px solid #f3f4f6 !important;border-radius:0 0 16px 16px !important}:global(.branch-modal .ant-modal-content){background:#fff !important;border-radius:16px !important;overflow:hidden !important;box-sizing:border-box !important}.modal-header{padding:20px 24px 12px;flex-shrink:0}.modal-header .modal-title{font-size:28px;font-weight:700;color:#1a1a2e;margin-bottom:6px}.modal-header .modal-subtitle{font-size:16px;font-weight:600;color:#6b7280}.modal-search{padding:12px 24px 16px}.modal-search .search-wrapper{position:relative}.modal-search .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px;pointer-events:none;z-index:2}.modal-search :global(.ant-input-affix-wrapper),.modal-search :global(.ant-input){padding-left:44px !important;padding-right:40px !important;height:44px !important;border-radius:50px !important;border:1px solid #e5e7eb !important;background-color:#fff !important;font-size:15px !important}.modal-search :global(.ant-input-affix-wrapper:focus),.modal-search :global(.ant-input-affix-wrapper-focused),.modal-search :global(.ant-input-affix-wrapper:focus-within),.modal-search :global(.ant-input:focus){border-color:#2f6fed !important;box-shadow:0 0 0 2px rgba(47,111,237,.2) !important;outline:none !important}.modal-search :global(.ant-input){padding-left:0 !important;background-color:rgba(0,0,0,0) !important;border-radius:50px !important;border:none !important;font-size:15px !important}.modal-search :global(.search-input.ant-input){background-color:#fff !important;border-radius:50px !important;border:1px solid #e5e7eb !important;font-size:15px !important}.modal-search :global(.search-input.ant-input:focus){border-color:#2f6fed !important;box-shadow:0 0 0 2px rgba(47,111,237,.2) !important;background-color:#fff !important}.modal-search :global(.ant-input::placeholder){font-size:15px !important;color:#9ca3af !important}.modal-search .search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:16px;cursor:pointer}.modal-search .search-clear:hover{color:#6b7280}.modal-body{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:0 24px 16px 24px;min-height:400px;max-height:500px}.modal-body::-webkit-scrollbar{width:6px}.modal-body::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:3px}.modal-body::-webkit-scrollbar-thumb:hover{background:#9ca3af}.branch-section{margin-bottom:16px}.branch-section:last-child{margin-bottom:0;padding-bottom:0}.branch-section .section-header{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#9ca3af;padding:8px 0;display:flex;align-items:center;gap:8px}.branch-section .section-header::after{content:"";flex:1 1;height:1px;background:#f3f4f6}.branch-section .branch-list{display:flex;flex-direction:column;gap:4px}.branch-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;cursor:pointer;transition:all .12s ease;border:2px solid rgba(0,0,0,0);position:relative}.branch-row:hover{background:#f9fafb}.branch-row.selected{background:rgba(47,111,237,.08);border-color:#2f6fed}.branch-row.selected::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:#2f6fed;border-radius:0 2px 2px 0}.branch-row.current{border-color:#2f6fed}.branch-row .branch-avatar{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;color:#374151;flex-shrink:0}.branch-row .branch-info{flex:1 1;min-width:0}.branch-row .branch-info .branch-primary{font-size:16px;color:#1a1a2e;margin-bottom:2px;display:flex;align-items:center;gap:6px}.branch-row .branch-info .branch-primary .branch-code{font-weight:600}.branch-row .branch-info .branch-primary .branch-name{color:#6b7280;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.branch-row .branch-info .branch-secondary{font-size:14px;color:#9ca3af}.branch-row .branch-action{flex-shrink:0;display:flex;align-items:center}.branch-row .branch-action .pill{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:100px;font-size:13px;font-weight:500}.branch-row .branch-action .pill.pill-current{background:rgba(0,0,0,0);border:1px solid #2f6fed;color:#2f6fed}.branch-row .branch-action .pill.pill-selected{background:rgba(47,111,237,.15);color:#2f6fed}.branch-row .branch-action .pill.pill-selected .anticon{font-size:14px}.branch-row .branch-action .chevron{color:#9ca3af;transition:transform .15s ease;font-size:16px}.branch-row:hover .chevron{transform:translateX(2px)}:global(.branch-modal .ant-btn-primary){background:#2f6fed;border-color:#2f6fed;border-radius:8px}:global(.branch-modal .ant-btn-primary:hover:not(:disabled)){background:#1d5bd6;border-color:#1d5bd6}:global(.branch-modal .ant-btn-primary:disabled){background:#93c5fd;border-color:#93c5fd;cursor:not-allowed}.no-results{padding:48px 32px;text-align:center;color:#9ca3af}.no-results .no-results-icon{font-size:48px;margin-bottom:12px;color:#e5e7eb}.no-results p{margin:0;font-size:16px}@media(max-width: 768px){.modal-footer{justify-content:flex-end}.modal-footer .footer-buttons{width:100%;flex-direction:row}.modal-footer .footer-buttons :global(.ant-btn){flex:1 1}}:global .branch-modal .ant-modal-content,:global .branch-modal .ant-modal-body,:global .branch-modal .ant-modal-header,:global .branch-modal .modal-footer{background-color:#fff !important}