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-company-inline-value {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    line-height: inherit;
}

.nbt-line-meta {
    text-align: left;
}

.nbt-line-subtext {
    display: block;
    font-size: 11px;
    color: #101010;
}

.nbt-line-dates {
    border-top: 0.1px solid #c9c0c0;
    margin-top: 2px;
    padding-top: 2px;
    font-style: italic;
}

.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;
}

.nbt-company-inline-value {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    line-height: inherit;
}

#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-line-meta {
    text-align: left;
    font-size: 9px;
    padding-left: 2px;
}

.nbt-line-subtext {
    display: block;
    font-size: 9px;
    color: #101010;
}

.nbt-line-dates {
    border-top: 0.5px solid black;
    margin-top: 2px;
    padding-top: 1px;
    font-style: italic;
}

.nbt-line-subtext .table-hsn-span {
    font-size: inherit;
}

/* 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;

}




.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;
}

.by-category-page{padding:28px;background:#f5f7fa;min-height:100vh}@media(max-width: 768px){.by-category-page{padding:16px}}@media(max-width: 480px){.by-category-page{padding:10px}}.by-category-card{border-radius:14px !important;box-shadow:0 2px 12px rgba(0,0,0,.07) !important;border:1px solid #f0f0f0 !important;margin-bottom:24px}.by-category-card .ant-card-body{padding:28px}@media(max-width: 768px){.by-category-card .ant-card-body{padding:16px}}@media(max-width: 480px){.by-category-card .ant-card-body{padding:12px}}.by-category-page .card-header{display:flex;flex-direction:column;gap:6px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #f0f0f0}.by-category-page .card-header__title{font-size:18px;font-weight:700;color:#262626;display:flex;align-items:center;gap:8px;letter-spacing:-0.2px}@media(max-width: 480px){.by-category-page .card-header__title{font-size:15px}}.by-category-page .card-header__subtitle{font-size:13px;color:#8c8c8c;font-weight:400;line-height:1.5;max-width:680px}@media(max-width: 480px){.by-category-page .card-header__subtitle{font-size:12px}}.stat-card{border-radius:10px;padding:18px 22px;border:1px solid rgba(0,0,0,0);transition:box-shadow .2s ease,transform .2s ease}@media(max-width: 576px){.stat-card{padding:14px 16px}}.stat-card__label{font-size:12px;color:#8c8c8c;margin-bottom:10px;font-weight:600;letter-spacing:.5px}.stat-card__value{font-size:26px;font-weight:700;display:flex;align-items:center;gap:8px;line-height:1}@media(max-width: 768px){.stat-card__value{font-size:22px}}@media(max-width: 480px){.stat-card__value{font-size:20px}}.stat-card__value .anticon{font-size:22px;opacity:.85}@media(max-width: 480px){.stat-card__value .anticon{font-size:18px}}.stat-card--blue{background:#f0f5ff;border-color:#d6e4ff}.stat-card--blue .stat-card__value{color:#1890ff}.stat-card--green{background:#f6ffed;border-color:#b7eb8f}.stat-card--green .stat-card__value{color:#52c41a}.stat-card--purple{background:#f9f0ff;border-color:#d3adf7}.stat-card--purple .stat-card__value{color:#722ed1;font-size:clamp(18px,3vw,26px)}.definitions-collapse{margin-bottom:28px;border-radius:10px !important}.definitions-collapse .ant-collapse-header{font-weight:600 !important;font-size:13px !important;color:#595959 !important;padding:12px 16px !important}.definitions-collapse .ant-collapse-content-box{padding:14px 18px !important}@media(max-width: 576px){.definitions-collapse .ant-collapse-content-box{padding:10px 12px !important}}@media(max-width: 576px){.definitions-collapse .ant-row{flex-direction:column}.definitions-collapse .ant-row .ant-col{max-width:100% !important;flex:0 0 100% !important}}.definition-list{margin:0;padding-left:18px;font-size:13px;color:#595959;line-height:2}@media(max-width: 480px){.definition-list{font-size:12px;line-height:1.9}}.definition-list b{color:#262626;font-weight:600}.billing-filter-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;width:100%;gap:12px;margin-bottom:24px;padding:12px 0;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;background:rgba(0,0,0,0)}@media(max-width: 576px){.billing-filter-row{flex-direction:column;align-items:flex-start;gap:10px}}.billing-filter-label{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;color:#595959;flex-wrap:wrap}@media(max-width: 480px){.billing-filter-label{font-size:13px;gap:6px;width:100%}}.billing-filter-label .ant-select{min-width:300px}@media(max-width: 768px){.billing-filter-label .ant-select{min-width:240px}}@media(max-width: 576px){.billing-filter-label .ant-select{min-width:unset;width:100% !important}}.billing-filter-label .ant-select-selector{border-radius:6px !important;height:34px !important;display:flex;align-items:center;font-size:13px}.billing-filter-label .ant-select-selector:hover{border-color:#1890ff !important}.billing-filter-warning{display:flex;align-items:center;gap:6px;color:#fa8c16;font-size:13px;font-weight:500;background:#fff7e6;border:1px solid #ffd591;padding:4px 12px;border-radius:20px;white-space:nowrap}@media(max-width: 576px){.billing-filter-warning{align-self:flex-start}}.billing-filter-clear{color:#1890ff;cursor:pointer;font-weight:500;margin-left:2px}.billing-filter-clear:hover{text-decoration:underline}.chart-responsive-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.chart-responsive-wrapper>div{min-width:420px}.chart-legend-note{font-size:12px;color:#8c8c8c;margin-bottom:16px;padding-left:4px;margin-top:40px;line-height:1.8;display:flex;flex-wrap:wrap;gap:4px 0}@media(max-width: 576px){.chart-legend-note{font-size:11px;margin-top:24px}}.chart-legend-note span{margin-right:16px;display:block}@media(max-width: 480px){.chart-legend-note span{margin-right:0}}
/* 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}