body{
    margin:0;
    padding:0;
}
/* ================================================= */
/* PRINT STYLE */
/* ================================================= */

@media print {

    body {

        background: white !important;

    }

    aside,

    button {

        display: none !important;

    }

    #invoice-preview {

        width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

        background: white !important;

    }

}
/* ================================================= */
/* RESPONSIVE WEBSITE SHELL */
/* ================================================= */

/* Prevent accidental page-level horizontal overflow */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Main application should never exceed viewport */
#app {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* ================================================= */
/* TABLET + MOBILE */
/* ================================================= */

@media (max-width: 1023px) {

    /* Main builder */
    #invoice-builder-page {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Main 12-column builder */
    #invoice-builder-page > div {
        min-width: 0;
    }

    /* Prevent grid children from forcing overflow */
    #invoice-builder-page aside,
    #invoice-builder-page main,
    #invoice-builder-page section {
        min-width: 0;
    }

}

/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 767px) {

    /* Header */
    header .max-w-7xl {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    header h1 {
        font-size: 1.5rem !important;
        line-height: 1.2;
    }

    header p {
        font-size: 0.75rem !important;
    }

    header .w-14 {
        width: 3rem !important;
        height: 3rem !important;
        font-size: 1.25rem !important;
        flex-shrink: 0;
    }

    /* Header buttons */
    header .flex.items-center.gap-2 {
        width: 100%;
    }

    header button,
    header label {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* General form controls */
    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }

    /* Tables must stay inside their parent */
    table {
        max-width: 100%;
    }

    /* Preview page */
    #invoice-preview-page {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Preview toolbar */
    #invoice-preview-page > div > div:first-child {
        align-items: stretch;
    }

    #invoice-preview-page select,
    #invoice-preview-page button {
        max-width: 100%;
    }

}
/* ================================================= */
/* FORM UI — PROFESSIONAL COMPACT SYSTEM */
/* Customer + Tax + Products */
/* ================================================= */


/* ================================================= */
/* CUSTOMER INFORMATION */
/* ================================================= */

#module-customer {

    width:100%;

}


/* Section heading */

#module-customer > h3 {

    margin-bottom:18px !important;

    line-height:1.2;

}


/* Bill To / Ship To grid */

#module-customer > .grid {

    gap:22px !important;

}


/* Field wrapper */

#module-customer > .grid > div > div {

    margin-bottom:14px;

}


/* Labels */

#module-customer label {

    display:block;

    margin-bottom:6px !important;

    font-size:13px;

    font-weight:600;

    line-height:1.25;

    color:#334155;

}


/* Inputs + Selects */

#module-customer input,
#module-customer select {

    width:100%;

    height:46px;

    min-height:46px;

    padding:0 13px !important;

    margin-top:0 !important;

    box-sizing:border-box;

    border-radius:9px;

    font-size:14px;

    line-height:1.2;

}


/* Textarea */

#module-customer textarea {

    width:100%;

    min-height:90px;

    padding:10px 13px !important;

    box-sizing:border-box;

    border-radius:9px;

    font-size:14px;

}


/* Same-address box */

#module-customer .border {

    border-radius:12px;

}


/* ================================================= */
/* SMART TAX SYSTEM */
/* ================================================= */

#module-tax {

    width:100%;

}


/* Heading */

#module-tax > h3 {

    margin-bottom:18px !important;

    line-height:1.2;

}


/* Tax grid */

#module-tax > .grid {

    gap:18px !important;

}


/* Tax field wrappers */

#module-tax > .grid > div {

    min-width:0;

}


/* Tax labels */

#module-tax label {

    display:block;

    margin-bottom:6px !important;

    font-size:13px;

    font-weight:600;

    line-height:1.25;

    color:#334155;

}


/* Tax inputs */

#module-tax input,
#module-tax select {

    width:100%;

    height:46px;

    min-height:46px;

    padding:0 13px !important;

    margin-top:0 !important;

    box-sizing:border-box;

    border-radius:9px;

    font-size:14px;

}


/* ================================================= */
/* PRODUCTS */
/* ================================================= */

#module-products {

    width:100%;

}


/* Product header */

#module-products > div:first-child {

    margin-bottom:14px !important;

}


/* Product title */

#module-products h3 {

    margin:0 !important;

    line-height:1.2;

}


/* Add Product button */

#module-products > div:first-child button {

    padding:9px 16px !important;

    font-size:14px;

    border-radius:9px;

}


/* Product table wrapper */

#module-products {

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;

}


/* Product table */

#module-products table {

    width:100%;

    min-width:760px;

    border-collapse:collapse;

}


/* Table header */

#module-products thead th {

    padding:11px 12px !important;

    height:46px;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

}


/* Table body */

#module-products tbody td {

    padding:8px 10px;

    font-size:14px;

}


/* ================================================= */
/* SECTION DIVIDERS */
/* ================================================= */

/*
   The HTML uses <hr class="my-8"> between
   major sections. Reduce the excessive vertical
   whitespace without changing the HTML.
*/

#invoice-builder-page hr.my-8 {

    margin-top:28px !important;

    margin-bottom:28px !important;

}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width:767px) {


    /* --------------------------------------------- */
    /* Customer */
    /* --------------------------------------------- */

    #module-customer > .grid {

        grid-template-columns:1fr !important;

        gap:18px !important;

    }


    #module-customer input,
    #module-customer select {

        height:44px;

        min-height:44px;

        font-size:14px;

    }


    /* --------------------------------------------- */
    /* Tax */
    /* --------------------------------------------- */

    #module-tax > .grid {

        grid-template-columns:1fr !important;

        gap:14px !important;

    }


    #module-tax input,
    #module-tax select {

        height:44px;

        min-height:44px;

    }


    /* --------------------------------------------- */
    /* Products */
    /* --------------------------------------------- */

    #module-products {

        overflow-x:auto;

    }


    #module-products table {

        min-width:700px;

    }


    #module-products > div:first-child {

        flex-wrap:wrap;

        gap:10px;

    }


    #module-products > div:first-child button {

        width:auto;

    }


    /* --------------------------------------------- */
    /* Section spacing */
    /* --------------------------------------------- */

    #invoice-builder-page hr.my-8 {

        margin-top:20px !important;

        margin-bottom:20px !important;

    }

}
/* ================================================= */
/* FINAL FORM COMPACT OVERRIDE */
/* ================================================= */

#module-customer,
#module-tax,
#module-products,
#module-totals {

    width: 100%;
    box-sizing: border-box;

}


/* ================================================= */
/* CUSTOMER */
/* ================================================= */

#module-customer > h3 {

    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;

}


/* Bill To + Ship To */

#module-customer > .grid {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;

}


/* Customer fields */

#module-customer input,
#module-customer select {

    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    padding: 0 12px !important;

    margin-bottom: 10px !important;

    box-sizing: border-box !important;

    font-size: 14px !important;

}


/* Customer labels */

#module-customer label {

    font-size: 13px !important;
    line-height: 1.2 !important;

}


/* Bill To / Ship To titles */

#module-customer h4 {

    font-size: 16px !important;
    line-height: 1.25 !important;

    margin-bottom: 10px !important;

}


/* Same address box */

#module-customer .border {

    padding: 14px !important;
}


/* Customer Profiles */

#module-customer > .mb-6 {

    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding: 18px !important;

}


/* ================================================= */
/* SMART TAX */
/* ================================================= */

#module-tax > h3 {

    font-size: 20px !important;
    line-height: 1.25 !important;
    margin-bottom: 18px !important;

}


#module-tax > .grid {

    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;

}


#module-tax input,
#module-tax select {

    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 0 12px !important;

    margin-top: 5px !important;

    box-sizing: border-box !important;

    font-size: 14px !important;

}


#module-tax label {

    font-size: 13px !important;
    line-height: 1.2 !important;

}


/* ================================================= */
/* PRODUCTS */
/* ================================================= */

#module-products > div:first-child {

    margin-bottom: 12px !important;

}


#module-products h3 {

    font-size: 20px !important;

}


#module-products > div:first-child button {

    height: 42px !important;

    padding: 0 15px !important;

    font-size: 14px !important;

}


/* ================================================= */
/* TOTALS */
/* ================================================= */

#module-totals > h3 {

    font-size: 20px !important;

}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 767px) {

    #module-customer > .grid,
    #module-tax > .grid {

        grid-template-columns: 1fr !important;

        gap: 16px !important;

    }

    #module-customer input,
    #module-customer select,
    #module-tax input,
    #module-tax select {

        height: 44px !important;
        min-height: 44px !important;

    }

}
/* =========================================================
   PREMIUM FORM UI — FINAL POLISH
   Customer + Tax + Products + Totals
   ========================================================= */

/* ---------------------------------------------------------
   MAIN FORM WIDTH
   --------------------------------------------------------- */

#invoice-builder-page .bg-white.rounded-xl.shadow-lg {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   CUSTOMER INFORMATION
   --------------------------------------------------------- */

#module-customer {
    padding: 4px 0;
}


/* Customer heading */

#module-customer > h3 {
    font-size: 24px !important;
    font-weight: 700 !important;
    margin-bottom: 22px !important;
    color: #0f172a;
}


/* Bill To / Ship To columns */

#module-customer > .grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 28px !important;
    align-items: start;
}


/* Column */

#module-customer > .grid > div {
    min-width: 0;
}


/* Bill To / Ship To heading */

#module-customer h4 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1e293b;
    margin-bottom: 10px !important;
}


/* All customer controls */

#module-customer input,
#module-customer select,
#module-customer textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}


/* Normal inputs */

#module-customer input,
#module-customer select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    margin-bottom: 10px !important;

    border: 1px solid #dbe2ea !important;
    border-radius: 9px !important;

    background: #ffffff !important;

    font-size: 14px !important;
    color: #0f172a;
}


/* Placeholder */

#module-customer input::placeholder,
#module-customer textarea::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}


/* Focus */

#module-customer input:focus,
#module-customer select:focus,
#module-customer textarea:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.10) !important;
}


/* Address labels */

#module-customer label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}


/* Address city/state rows */

#module-customer .grid.grid-cols-2 {
    gap: 8px !important;
}


/* Same address card */

#module-customer .border.border-slate-200.bg-slate-50 {
    padding: 14px 16px !important;
    margin-bottom: 16px !important;

    border-radius: 11px !important;
}


/* Same address checkbox */

#module-customer #same-as-billto {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
}


/* Same address text */

#module-customer #same-as-billto + span {
    font-size: 14px !important;
    font-weight: 600 !important;
}


/* Description */

#module-customer #same-as-billto
~ p {
    font-size: 12px !important;
    line-height: 1.4 !important;
}


/* ---------------------------------------------------------
   CUSTOMER PROFILES
   --------------------------------------------------------- */

#module-customer > .grid > div:last-child {
    min-width: 0;
}


/* Profile card */

#module-customer .mb-6.rounded-xl {
    margin-top: 18px !important;
    padding: 18px !important;
    border-radius: 12px !important;
}


/* Profile heading */

#module-customer .mb-6.rounded-xl h3 {
    font-size: 17px !important;
    margin-bottom: 8px !important;
}


/* Profile buttons */

#module-customer .mb-6.rounded-xl button {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}


/* ---------------------------------------------------------
   SMART TAX
   --------------------------------------------------------- */

#module-tax {
    padding: 4px 0;
}


/* Tax heading */

#module-tax > h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    color: #0f172a;
}


/* Tax grid */

#module-tax > .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}


/* Tax labels */

#module-tax label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}


/* Tax controls */

#module-tax input,
#module-tax select {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    margin-top: 0 !important;

    border: 1px solid #dbe2ea !important;
    border-radius: 9px !important;

    font-size: 14px !important;
}


/* ---------------------------------------------------------
   PRODUCTS
   --------------------------------------------------------- */

#module-products {
    padding: 4px 0;
}


/* Product header */

#module-products > div:first-child {
    min-height: 46px;
    margin-bottom: 12px !important;
}


/* Product heading */

#module-products h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a;
}


/* Add product */

#module-products > div:first-child button {
    height: 40px !important;
    padding: 0 16px !important;

    border-radius: 9px !important;

    font-size: 13px !important;
    font-weight: 600 !important;
}


/* Product table */

#module-products table {
    width: 100% !important;
    min-width: 700px;
    border-radius: 10px;
    overflow: hidden;
}


/* Table header */

#module-products thead {
    background: #1e293b !important;
}


#module-products thead th {
    height: 42px !important;
    padding: 8px 10px !important;

    font-size: 12px !important;
    font-weight: 700 !important;

    color: #ffffff !important;
}


/* Product body */

#module-products tbody td {
    padding: 7px 9px !important;
    font-size: 13px !important;
}


/* ---------------------------------------------------------
   INVOICE TOTALS
   --------------------------------------------------------- */

#module-totals {
    padding: 4px 0;
}


/* Heading */

#module-totals > h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #0f172a;
}


/* Totals container */

#module-totals > div {
    max-width: 500px !important;
}


/* Totals table */

#module-totals table {
    font-size: 14px;
}


/* Total rows */

#module-totals td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}


/* Total inputs */

#module-totals input {
    height: 38px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
}


/* Grand total */

#module-totals #grand-total {
    font-size: 20px !important;
}


/* Balance */

#module-totals #balance-due {
    font-size: 20px !important;
}


/* ---------------------------------------------------------
   SECTION DIVIDERS
   --------------------------------------------------------- */

#invoice-builder-page hr.my-8 {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
    border-color: #e2e8f0 !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #module-customer > .grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    #module-customer input,
    #module-customer select {
        height: 42px !important;
        min-height: 42px !important;
    }

    #module-tax > .grid {
        grid-template-columns: 1fr !important;
    }

    #module-products {
        overflow-x: auto !important;
    }

    #module-products table {
        min-width: 700px !important;
    }

    #module-totals > div {
        max-width: 100% !important;
    }

}
/* =========================================================
   INPUT PAGE — CLEAN FORM MODE
   Hide Dashboard + Engine + Template Details
   Only input form remains
   ========================================================= */


/* ---------------------------------------------------------
   1. REMOVE DASHBOARD / SIDEBAR
   --------------------------------------------------------- */

#invoice-builder-page > div > aside {
    display: none !important;
}


/* ---------------------------------------------------------
   2. MAIN INPUT AREA — FULL WIDTH
   --------------------------------------------------------- */

#invoice-builder-page > div > main {
    width: 100% !important;
    max-width: 100% !important;

    grid-column: 1 / -1 !important;

    min-width: 0 !important;
}


/* ---------------------------------------------------------
   3. REMOVE TEMPLATE DETAILS / MODERN INVOICE PANEL
   --------------------------------------------------------- */

#invoice-builder-page #template-details-panel {
    display: none !important;
}


/* ---------------------------------------------------------
   4. INPUT FORM TAKES FULL WIDTH
   --------------------------------------------------------- */

#invoice-builder-page > div > main > div {
    display: block !important;
    width: 100% !important;
}


/* ---------------------------------------------------------
   5. MAIN FORM AREA
   --------------------------------------------------------- */

#invoice-builder-page
main
section:not(#template-details-panel) {
    width: 100% !important;
    max-width: 100% !important;
}


/* ---------------------------------------------------------
   6. KEEP FORM CONTENT CLEAN
   --------------------------------------------------------- */

#invoice-builder-page {
    width: 100% !important;
    max-width: 100% !important;

    padding-left: 24px !important;
    padding-right: 24px !important;
}


/* ---------------------------------------------------------
   7. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #invoice-builder-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

}
/* =========================================================
   SUPPLIER INFORMATION — TOP SPACING
   ========================================================= */

#module-address {
    padding-top: 24px !important;
}
/* =========================================================
   CUSTOMER ADDRESS SELECT — FINAL TEXT ALIGNMENT FIX
   ========================================================= */

#module-customer select[data-model="billTo.addressMode"],
#module-customer select[data-model="shipTo.addressMode"] {

    width: 100% !important;

    height: 44px !important;
    min-height: 44px !important;

    padding: 0 12px !important;

    margin: 0 0 10px 0 !important;

    box-sizing: border-box !important;

    font-size: 14px !important;
    line-height: normal !important;

    vertical-align: middle !important;

    color: #0f172a !important;
    background-color: #ffffff !important;

}
/* ================================================= */
/* PROFESSIONAL INVOICE BUILDER TOOLBAR */
/* ================================================= */

.invoice-builder-toolbar {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:24px;

    padding:22px 26px;

    background:#ffffff;

    border-bottom:1px solid #e2e8f0;

}


/* ================================================= */
/* TITLE */
/* ================================================= */

.invoice-builder-title {

    display:flex;

    align-items:center;

    gap:14px;

    min-width:260px;

}


.invoice-builder-icon {

    width:46px;

    height:46px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:12px;

    background:#1e293b;

    color:#ffffff;

    font-size:20px;

}


.invoice-builder-title h2 {

    margin:0;

    font-size:21px;

    font-weight:700;

    line-height:1.25;

    color:#0f172a;

}


.invoice-builder-title p {

    margin:4px 0 0;

    font-size:13px;

    line-height:1.4;

    color:#64748b;

}


/* ================================================= */
/* ACTIONS */
/* ================================================= */

.invoice-builder-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    flex-wrap:wrap;

}


/* ================================================= */
/* ACTION BUTTON */
/* ================================================= */

.builder-action {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-height:42px;

    padding:0 14px;

    border:1px solid transparent;

    border-radius:9px;

    font-size:13px;

    font-weight:600;

    line-height:1;

    white-space:nowrap;

    cursor:pointer;

    transition:

        background .18s ease,

        border-color .18s ease,

        transform .18s ease,

        box-shadow .18s ease;

}


.builder-action i {

    font-size:14px;

}


/* ================================================= */
/* HOVER */
/* ================================================= */

.builder-action:hover {

    transform:translateY(-1px);

    box-shadow:0 4px 10px rgba(15,23,42,.10);

}


/* ================================================= */
/* NEW */
/* ================================================= */

.builder-action-new {

    background:#1e293b;

    color:#ffffff;

}


/* ================================================= */
/* SAVE */
/* ================================================= */

.builder-action-save {

    background:#16a34a;

    color:#ffffff;

}


/* ================================================= */
/* LOAD */
/* ================================================= */

.builder-action-load {

    background:#2563eb;

    color:#ffffff;

}


/* ================================================= */
/* IMPORT */
/* ================================================= */

.builder-action-import {

    background:#4f46e5;

    color:#ffffff;

}


/* ================================================= */
/* EXPORT */
/* ================================================= */

.builder-action-export {

    background:#9333ea;

    color:#ffffff;

}


/* ================================================= */
/* PDF SETTINGS */
/* ================================================= */

.builder-action-settings {

    background:#f8fafc;

    color:#334155;

    border-color:#cbd5e1;

}


/* ================================================= */
/* DOWNLOAD PDF */
/* ================================================= */

.builder-action-pdf {

    background:#dc2626;

    color:#ffffff;

}


/* ================================================= */
/* FOCUS */
/* ================================================= */

.builder-action:focus-visible {

    outline:3px solid rgba(37,99,235,.20);

    outline-offset:2px;

}


/* ================================================= */
/* TABLET */
/* ================================================= */

@media (max-width:1100px) {

    .invoice-builder-toolbar {

        align-items:flex-start;

        flex-direction:column;

    }

    .invoice-builder-actions {

        width:100%;

        justify-content:flex-start;

    }

}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width:767px) {

    .invoice-builder-toolbar {

        padding:16px;

        gap:16px;

    }


    .invoice-builder-title {

        width:100%;

        min-width:0;

    }


    .invoice-builder-title h2 {

        font-size:18px;

    }


    .invoice-builder-title p {

        font-size:12px;

    }


    .invoice-builder-icon {

        width:42px;

        height:42px;

        font-size:17px;

    }


    .invoice-builder-actions {

        display:grid;

        grid-template-columns:

            repeat(2, minmax(0, 1fr));

        width:100%;

        gap:8px;

    }


    .builder-action {

        width:100%;

        min-height:42px;

        padding:0 10px;

        font-size:12px;

    }

}
/* ================================================= */
/* PREMIUM INVOICE DETAILS */
/* ================================================= */

.invoice-details-section {

    margin-bottom: 32px;

}


/* ================================================= */
/* SECTION HEADER */
/* ================================================= */

.invoice-section-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 24px;

}


.invoice-section-icon {

    width: 46px;

    height: 46px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #1e293b;

    color: white;

    font-size: 18px;

    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);

}


.invoice-section-title {

    margin: 0;

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;

    color: #0f172a;

}


.invoice-section-subtitle {

    margin: 5px 0 0;

    font-size: 14px;

    line-height: 1.4;

    color: #64748b;

}


/* ================================================= */
/* FIELD GRID */
/* ================================================= */

.invoice-details-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px 22px;

}


.invoice-field {

    min-width: 0;

}


.invoice-field-label {

    display: block;

    margin-bottom: 8px;

    font-size: 13px;

    line-height: 1.2;

    font-weight: 700;

    color: #334155;

}


/* ================================================= */
/* INPUT WRAPPER */
/* ================================================= */

.invoice-input-wrap {

    position: relative;

    width: 100%;

}


.invoice-input-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: #94a3b8;

    font-size: 14px;

    pointer-events: none;

}


.invoice-modern-input {

    width: 100% !important;

    height: 48px !important;

    min-height: 48px !important;

    box-sizing: border-box !important;

    padding: 0 14px 0 40px !important;

    margin: 0 !important;

    border: 1px solid #dbe2ea !important;

    border-radius: 10px !important;

    background: #ffffff !important;

    color: #0f172a !important;

    font-size: 14px !important;

    line-height: 1.2 !important;

    outline: none !important;

    transition:

        border-color 0.2s ease,

        box-shadow 0.2s ease,

        background 0.2s ease;

}


.invoice-modern-input::placeholder {

    color: #94a3b8;

}


.invoice-modern-input:hover {

    border-color: #cbd5e1 !important;

}


.invoice-modern-input:focus {

    border-color: #2563eb !important;

    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10) !important;

    background: #ffffff !important;

}


/* ================================================= */
/* SELECT */
/* ================================================= */

.invoice-modern-select {

    appearance: auto;

    cursor: pointer;

}


/* ================================================= */
/* STATUS */
/* ================================================= */

.invoice-status-field {

    max-width: 50%;

}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 767px) {

    .invoice-section-heading {

        gap: 11px;

        margin-bottom: 18px;

    }


    .invoice-section-icon {

        width: 40px;

        height: 40px;

        border-radius: 10px;

        font-size: 15px;

    }


    .invoice-section-title {

        font-size: 19px;

    }


    .invoice-section-subtitle {

        font-size: 12px;

    }


    .invoice-details-grid {

        grid-template-columns: 1fr;

        gap: 15px;

    }


    .invoice-status-field {

        max-width: 100%;

    }


    .invoice-modern-input {

        height: 46px !important;

        min-height: 46px !important;

    }

}
/* ================================================= */
/* PREMIUM INVOICE WORKSPACE HEADER */
/* ================================================= */

.invoice-premium-header {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 32px;

    padding: 22px 26px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    border-bottom: 1px solid #e2e8f0;

}


/* ================================================= */
/* TITLE */
/* ================================================= */

.invoice-premium-title {

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 0;

}


.invoice-premium-icon {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background: #172033;

    color: #ffffff;

    font-size: 20px;

    box-shadow:
        0 8px 20px rgba(15, 23, 42, 0.14);

}


.invoice-premium-heading {

    min-width: 0;

}


.invoice-premium-eyebrow {

    margin-bottom: 3px;

    color: #64748b;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.14em;

}


.invoice-premium-heading h2 {

    margin: 0;

    color: #0f172a;

    font-size: 23px;

    line-height: 1.2;

    font-weight: 750;

}


.invoice-premium-heading p {

    margin: 5px 0 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.4;

}


/* ================================================= */
/* ACTIONS */
/* ================================================= */

.invoice-premium-actions {

    display: flex;

    align-items: center;

    gap: 9px;

    flex-shrink: 0;

}


.invoice-premium-btn {

    height: 44px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 17px;

    border: 0;

    border-radius: 11px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;

}


.invoice-premium-btn:hover {

    transform: translateY(-1px);

}


.invoice-premium-save {

    background: #ffffff;

    color: #334155;

    border: 1px solid #cbd5e1;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.05);

}


.invoice-premium-save:hover {

    background: #f8fafc;

    border-color: #94a3b8;

}


.invoice-premium-download {

    background: #172033;

    color: #ffffff;

    box-shadow:
        0 7px 16px rgba(15, 23, 42, 0.16);

}


.invoice-premium-download:hover {

    background: #0f172a;

    box-shadow:
        0 9px 20px rgba(15, 23, 42, 0.22);

}


/* ================================================= */
/* MORE BUTTON */
/* ================================================= */

.invoice-premium-more {

    position: relative;

}


.invoice-premium-more-btn {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #cbd5e1;

    border-radius: 11px;

    background: #ffffff;

    color: #475569;

    font-size: 18px;

    cursor: pointer;

    transition: all .18s ease;

}


.invoice-premium-more-btn:hover {

    background: #f8fafc;

    border-color: #94a3b8;

    color: #0f172a;

}


/* ================================================= */
/* DROPDOWN */
/* ================================================= */

.invoice-premium-menu {

    position: absolute;

    top: calc(100% + 9px);

    right: 0;

    z-index: 1000;

    width: 220px;

    padding: 7px;

    background: #ffffff;

    border: 1px solid #e2e8f0;

    border-radius: 13px;

    box-shadow:
        0 18px 45px rgba(15, 23, 42, 0.16);

    display: none;

}


.invoice-premium-menu.is-open {

    display: block;

}


.invoice-premium-menu button,
.invoice-premium-menu label {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 11px;

    padding: 10px 11px;

    border: 0;

    border-radius: 9px;

    background: transparent;

    color: #334155;

    font-size: 13px;

    font-weight: 600;

    text-align: left;

    cursor: pointer;

    box-sizing: border-box;

}


.invoice-premium-menu button:hover,
.invoice-premium-menu label:hover {

    background: #f1f5f9;

    color: #0f172a;

}


.invoice-premium-menu i {

    width: 17px;

    color: #64748b;

    text-align: center;

}


.invoice-premium-menu-divider {

    height: 1px;

    margin: 6px 4px;

    background: #e2e8f0;

}


/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 768px) {

    .invoice-premium-header {

        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 18px;

    }


    .invoice-premium-title {

        width: 100%;

    }


    .invoice-premium-heading h2 {

        font-size: 20px;

    }


    .invoice-premium-actions {

        width: 100%;

    }


    .invoice-premium-btn {

        flex: 1;

    }


    .invoice-premium-more {

        flex-shrink: 0;

    }

}


@media (max-width: 480px) {

    .invoice-premium-heading p {

        font-size: 12px;

    }


    .invoice-premium-btn span {

        display: none;

    }


    .invoice-premium-btn {

        width: 44px;

        padding: 0;

        flex: 0 0 44px;

    }

}
/* ===================================================== */
/* MY INVOICES — PREMIUM MODAL */
/* ===================================================== */

.invoice-modal {

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:24px;

}

.invoice-modal.is-open {

    display:flex;

}

.invoice-modal-backdrop {

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.58);

    backdrop-filter:blur(5px);

}

.invoice-modal-panel {

    position:relative;

    width:100%;

    max-width:760px;

    max-height:90vh;

    overflow:hidden;

    background:#fff;

    border:1px solid #e2e8f0;

    border-radius:22px;

    box-shadow:
        0 30px 80px rgba(15,23,42,.25);

    display:flex;

    flex-direction:column;

    animation:invoiceModalIn .18s ease-out;

}

@keyframes invoiceModalIn {

    from {

        opacity:0;

        transform:translateY(12px) scale(.98);

    }

    to {

        opacity:1;

        transform:translateY(0) scale(1);

    }

}


/* Header */

.invoice-modal-header {

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:24px 26px;

    border-bottom:1px solid #e2e8f0;

}

.invoice-modal-icon {

    width:46px;

    height:46px;

    border-radius:14px;

    background:#172033;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.invoice-modal-header h2 {

    margin:0;

    font-size:22px;

    font-weight:700;

    color:#172033;

}

.invoice-modal-header p {

    margin:4px 0 0;

    color:#64748b;

    font-size:14px;

}

.invoice-modal-close {

    width:40px;

    height:40px;

    border:0;

    border-radius:10px;

    background:#f1f5f9;

    color:#475569;

    cursor:pointer;

    font-size:18px;

}

.invoice-modal-close:hover {

    background:#e2e8f0;

}


/* Search */

.invoice-modal-search {

    position:relative;

    margin:20px 26px 0;

}

.invoice-modal-search i {

    position:absolute;

    left:15px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

}

.invoice-modal-search input {

    width:100%;

    height:48px;

    padding:0 16px 0 44px;

    border:1px solid #cbd5e1;

    border-radius:12px;

    outline:none;

    box-sizing:border-box;

    font-size:14px;

}

.invoice-modal-search input:focus {

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}


/* Content */

.invoice-modal-content {

    padding:22px 26px;

    overflow:auto;

}

.invoice-manager-status {

    margin-bottom:18px;

    padding:12px 14px;

    border:1px solid #e2e8f0;

    border-radius:12px;

    background:#f8fafc;

    color:#64748b;

    font-size:13px;

}

.invoice-modal-label {

    display:block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:700;

    color:#334155;

}

.invoice-select-wrapper {

    position:relative;

}

.invoice-select-wrapper i {

    position:absolute;

    left:15px;

    top:50%;

    transform:translateY(-50%);

    color:#94a3b8;

    pointer-events:none;

}

.invoice-select-wrapper select {

    width:100%;

    height:50px;

    padding:0 42px;

    border:1px solid #cbd5e1;

    border-radius:12px;

    background:#fff;

    color:#1e293b;

    font-size:14px;

    box-sizing:border-box;

    outline:none;

}

.invoice-select-wrapper select:focus {

    border-color:#2563eb;

    box-shadow:0 0 0 3px rgba(37,99,235,.12);

}


/* Actions */

.invoice-modal-actions {

    display:grid;

    grid-template-columns:2fr 1.5fr 1fr;

    gap:10px;

    margin-top:18px;

}

.invoice-modal-actions button {

    min-height:46px;

    border-radius:11px;

    border:1px solid transparent;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:.15s ease;

}

.invoice-action-primary {

    background:#172033;

    color:#fff;

}

.invoice-action-primary:hover {

    background:#0f172a;

}

.invoice-action-secondary {

    background:#fff;

    color:#172033;

    border-color:#cbd5e1 !important;

}

.invoice-action-secondary:hover {

    background:#f8fafc;

}

.invoice-action-danger {

    background:#fff;

    color:#dc2626;

    border-color:#fecaca !important;

}

.invoice-action-danger:hover {

    background:#fef2f2;

}


/* Footer */

.invoice-modal-footer {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:16px;

    padding:16px 26px;

    border-top:1px solid #e2e8f0;

    background:#f8fafc;

    color:#64748b;

    font-size:12px;

}

.invoice-modal-footer button {

    border:0;

    background:transparent;

    color:#475569;

    font-weight:600;

    cursor:pointer;

}


/* Mobile */

@media (max-width:767px) {

    .invoice-modal {

        padding:12px;

    }

    .invoice-modal-panel {

        max-height:94vh;

        border-radius:18px;

    }

    .invoice-modal-header {

        padding:18px;

    }

    .invoice-modal-content {

        padding:18px;

    }

    .invoice-modal-search {

        margin:16px 18px 0;

    }

    .invoice-modal-actions {

        grid-template-columns:1fr;

    }

    .invoice-modal-footer {

        padding:14px 18px;

    }

}
/* ===================================================== */
/* DELETE INVOICE CONFIRMATION */
/* ===================================================== */

.invoice-delete-modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}

.invoice-delete-modal.is-open {

    display: flex;

}

.invoice-delete-backdrop {

    position: absolute;

    inset: 0;

    background: rgba(15, 23, 42, .58);

    backdrop-filter: blur(4px);

}

.invoice-delete-panel {

    position: relative;

    width: 100%;

    max-width: 420px;

    padding: 28px;

    background: #ffffff;

    border-radius: 18px;

    text-align: center;

    box-shadow:
        0 25px 70px rgba(15, 23, 42, .22);

}

.invoice-delete-icon {

    width: 52px;

    height: 52px;

    margin: 0 auto 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 14px;

    background: #fef2f2;

    color: #dc2626;

    font-size: 20px;

}

.invoice-delete-panel h3 {

    margin: 0;

    color: #0f172a;

    font-size: 20px;

    font-weight: 700;

}

.invoice-delete-panel p {

    margin: 8px 0 22px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.5;

}

.invoice-delete-actions {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;

}

.invoice-delete-actions button {

    height: 44px;

    border-radius: 10px;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

}

.invoice-delete-cancel {

    border: 1px solid #cbd5e1;

    background: #ffffff;

    color: #334155;

}

.invoice-delete-confirm {

    border: 1px solid #dc2626;

    background: #dc2626;

    color: #ffffff;

}

.invoice-delete-confirm:hover {

    background: #b91c1c;

}

@media (max-width: 480px) {

    .invoice-delete-panel {

        padding: 22px;

    }

    .invoice-delete-actions {

        grid-template-columns: 1fr;

    }

}
/* =====================================================
   MY INVOICES – SAVED INVOICE CARDS UI
   ===================================================== */

#saved-invoice-cards {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 14px !important;
    width: 100% !important;
    max-height: 360px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 2px 10px;
}

#saved-invoice-cards .saved-invoice-card {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 9px;
    padding: 15px 16px !important;
    border: 1px solid #dbe2ea !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#saved-invoice-cards .saved-invoice-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
}

#saved-invoice-cards .saved-invoice-card.is-selected {
    border-color: #2563eb !important;
    background: #f8fbff !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10);
}

#saved-invoice-cards .saved-invoice-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    width: 100%;
}

#saved-invoice-cards .saved-invoice-card-top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
}

#saved-invoice-cards .saved-invoice-card-customer {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #64748b;
}

#saved-invoice-cards .saved-invoice-card-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding-top: 9px;
    border-top: 1px solid #eef2f6;
    font-size: 12px;
    color: #64748b;
}

#saved-invoice-cards .saved-invoice-card-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
}

#saved-invoice-cards .saved-invoice-card-company {
    font-size: 12px;
    color: #94a3b8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 700px) {
    #saved-invoice-cards {
        grid-template-columns: 1fr !important;
    }
}
/* =====================================================
   MY INVOICES – PROFESSIONAL MODAL SHELL UPGRADE
   Only popup/banner design
   ===================================================== */

.invoice-modal {

    padding: 32px;

}


.invoice-modal-backdrop {

    background:
        rgba(15, 23, 42, 0.68);

    backdrop-filter:
        blur(8px);

}


.invoice-modal-panel {

    width: min(
        980px,
        100%
    );

    max-width: 980px;

    max-height:
        min(86vh, 860px);

    border:
        1px solid
        rgba(255, 255, 255, 0.75);

    border-radius: 24px;

    background:
        #ffffff;

    box-shadow:
        0 32px 90px
        rgba(15, 23, 42, 0.32),
        0 2px 8px
        rgba(15, 23, 42, 0.08);

}


/* =====================================================
   PREMIUM HEADER
   ===================================================== */

.invoice-modal-header {

    padding:
        26px 30px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fafc 100%
        );

    border-bottom:
        1px solid
        #e5eaf0;

}


.invoice-modal-icon {

    width: 54px;

    height: 54px;

    border-radius: 16px;

    box-shadow:
        0 10px 24px
        rgba(23, 32, 51, 0.16);

}


.invoice-modal-header h2 {

    font-size:
        26px;

    letter-spacing:
        -0.02em;

}


.invoice-modal-header p {

    margin-top:
        5px;

    font-size:
        15px;

}


.invoice-modal-close {

    width: 46px;

    height: 46px;

    border:
        1px solid
        #e2e8f0;

    border-radius:
        14px;

    background:
        #ffffff;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}


.invoice-modal-close:hover {

    background:
        #f1f5f9;

    transform:
        rotate(90deg);

}


/* =====================================================
   SEARCH AREA
   ===================================================== */

.invoice-modal-search {

    margin:
        22px 30px 0;

}


.invoice-modal-search input {

    height:
        54px;

    border-radius:
        14px;

    background:
        #fbfcfe;

    font-size:
        15px;

}


/* =====================================================
   MAIN CONTENT
   ===================================================== */

.invoice-modal-content {

    padding:
        20px 30px 26px;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 767px) {

    .invoice-modal {

        padding:
            14px;

    }


    .invoice-modal-panel {

        max-height:
            92vh;

        border-radius:
            20px;

    }


    .invoice-modal-header {

        padding:
            20px;

    }


    .invoice-modal-search {

        margin:
            16px 20px 0;

    }


    .invoice-modal-content {

        padding:
            18px 20px 22px;

    }


    .invoice-modal-header h2 {

        font-size:
            22px;

    }


    .invoice-modal-icon {

        width:
            48px;

        height:
            48px;

    }

}
/* =========================================================
   PHASE 1 — DESKTOP / LAPTOP WORKSPACE FOUNDATION
   Desktop-first layout shell only
   ========================================================= */


/* ---------------------------------------------------------
   1. GLOBAL BOX SIZING
   --------------------------------------------------------- */

*,
*::before,
*::after {

    box-sizing: border-box;

}


/* ---------------------------------------------------------
   3. INVOICE BUILDER DESKTOP WORKSPACE
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #invoice-builder-page {

        width: 100% !important;

        max-width: 1600px !important;

        margin-left: auto !important;

        margin-right: auto !important;

        padding-left: 32px !important;

        padding-right: 32px !important;

    }

}


/* ---------------------------------------------------------
   4. BUILDER GRID SAFETY
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #invoice-builder-page > div {

        width: 100%;

        min-width: 0;

    }


    #invoice-builder-page main,
    #invoice-builder-page section {

        min-width: 0;

    }

}


/* ---------------------------------------------------------
   5. LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1440px) {

    #invoice-builder-page {

        max-width: 1760px !important;

        padding-left: 40px !important;

        padding-right: 40px !important;

    }

}


/* ---------------------------------------------------------
   6. NORMAL LAPTOP
   --------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {

    #invoice-builder-page {

        padding-left: 24px !important;

        padding-right: 24px !important;

    }

}
/* =========================================================
   PHASE 1 — STEP 2
   DESKTOP / LAPTOP TEMPLATE GALLERY OPTIMIZATION
   ========================================================= */


/* ---------------------------------------------------------
   TEMPLATE GALLERY WRAPPER
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #template-gallery-wrapper {

        width: 100%;

        margin-top: 8px;

    }

}


/* ---------------------------------------------------------
   DESKTOP TEMPLATE GRID
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #sidebar-template-list {

        display: grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 24px !important;

        width: 100%;

        align-items: stretch;

    }

}


/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1440px) {

    #sidebar-template-list {

        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 28px !important;

    }

}


/* ---------------------------------------------------------
   WIDE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1760px) {

    #sidebar-template-list {

        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

    }

}


/* ---------------------------------------------------------
   GRID ITEM SAFETY
   Prevent overflow / broken card sizing
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #sidebar-template-list > * {

        min-width: 0;

        width: 100%;

    }

}


/* ---------------------------------------------------------
   NORMAL LAPTOP
   --------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {

    #sidebar-template-list {

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 20px !important;

    }

}
/* =========================================================
   PHASE 1 — STEP 2B
   DESKTOP TEMPLATE GALLERY TOOLBAR POLISH
   ========================================================= */


/* ---------------------------------------------------------
   DESKTOP TOOLBAR CONTAINER
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #template-gallery-controls {

        width: 100%;

        padding: 22px 26px !important;

        border-radius: 20px;

    }

}


/* ---------------------------------------------------------
   TOOLBAR GRID SPACING
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #template-gallery-controls > div {

        align-items: stretch;

        gap: 20px !important;

    }

}


/* ---------------------------------------------------------
   SEARCH / SELECT CONTROLS
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #template-gallery-controls input,
    #template-gallery-controls select {

        height: 68px !important;

        border-radius: 16px !important;

        font-size: 18px !important;

        padding-top: 0 !important;

        padding-bottom: 0 !important;

    }

}


/* ---------------------------------------------------------
   CONTROL HOVER
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #template-gallery-controls input:hover,
    #template-gallery-controls select:hover {

        transform: translateY(-1px);

    }

}


/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1440px) {

    #template-gallery-controls {

        padding: 24px 30px !important;

    }


    #template-gallery-controls > div {

        gap: 24px !important;

    }

}


/* ---------------------------------------------------------
   NORMAL LAPTOP
   --------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {

    #template-gallery-controls {

        padding: 18px 20px !important;

    }


    #template-gallery-controls input,
    #template-gallery-controls select {

        height: 62px !important;

        font-size: 17px !important;

    }

}
/* =========================================================
   PHASE 1 — STEP 2C
   DESKTOP TEMPLATE CARD PROFESSIONAL POLISH
   ========================================================= */


@media (min-width: 1024px) {

    /* -----------------------------------------------------
       TEMPLATE CARD
       ----------------------------------------------------- */

    #sidebar-template-list > * {

        min-height: 420px;

        border-radius: 22px !important;

        overflow: hidden;

        transition:
            transform 0.25s ease,
            box-shadow 0.25s ease,
            border-color 0.25s ease;

    }


    /* -----------------------------------------------------
       CARD HOVER
       ----------------------------------------------------- */

    #sidebar-template-list > *:hover {

        transform: translateY(-5px);

        box-shadow:
            0 16px 35px
            rgba(15, 23, 42, 0.10);

    }

}


/* ---------------------------------------------------------
   LAPTOP HEIGHT
   --------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {

    #sidebar-template-list > * {

        min-height: 380px;

        border-radius: 20px !important;

    }

}


/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1440px) {

    #sidebar-template-list > * {

        min-height: 440px;

    }

}
/* =========================================================
   DESKTOP / LAPTOP SPACING + CONTAINER OPTIMIZATION
   Phase 2 — Step 1
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL DESKTOP CONTENT WIDTH
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #app {

        min-width: 1024px;

    }


    /* Main public website containers */

    header .max-w-7xl,

    #template-selector-page > div,

    #invoice-builder-page > div,

    #invoice-preview-page > div {

        width: 100%;

        max-width: 1600px;

        margin-left: auto;

        margin-right: auto;

    }


    /* Keep comfortable desktop side spacing */

    #template-selector-page,

    #invoice-builder-page,

    #invoice-preview-page {

        padding-left: 32px !important;

        padding-right: 32px !important;

    }

}


/* ---------------------------------------------------------
   LARGE DESKTOP
   --------------------------------------------------------- */

@media (min-width: 1440px) {

    #template-selector-page,

    #invoice-builder-page,

    #invoice-preview-page {

        padding-left: 48px !important;

        padding-right: 48px !important;

    }

}


/* ---------------------------------------------------------
   LAPTOP
   --------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1279px) {

    #template-selector-page,

    #invoice-builder-page,

    #invoice-preview-page {

        padding-left: 24px !important;

        padding-right: 24px !important;

    }

}


/* ---------------------------------------------------------
   PREVENT GRID ITEMS FROM STRETCHING OUT OF CONTAINER
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #template-selector-page *,

    #invoice-builder-page *,

    #invoice-preview-page * {

        min-width: 0;

    }

}

/* =========================================================
   PHASE 2 — STEP 3D
   DESKTOP / LAPTOP BUTTONS & ACTIONS POLISH
   ========================================================= */

@media (min-width: 1024px) {

    /* Common button consistency */

    button,
    input[type="button"],
    input[type="submit"],
    .btn {

        min-height: 44px;

        transition:
            transform 0.18s ease,
            box-shadow 0.18s ease,
            opacity 0.18s ease;

    }


    /* Interactive desktop feedback */

    button:not(:disabled):hover,
    input[type="button"]:not(:disabled):hover,
    input[type="submit"]:not(:disabled):hover,
    .btn:not(:disabled):hover {

        transform: translateY(-1px);

    }


    button:not(:disabled):active,
    input[type="button"]:not(:disabled):active,
    input[type="submit"]:not(:disabled):active,
    .btn:not(:disabled):active {

        transform: translateY(0);

    }


    /* Keyboard accessibility */

    button:focus-visible,
    input[type="button"]:focus-visible,
    input[type="submit"]:focus-visible,
    .btn:focus-visible {

        outline: 3px solid rgba(37, 99, 235, 0.28);

        outline-offset: 3px;

    }


    /* Disabled state */

    button:disabled,
    input[type="button"]:disabled,
    input[type="submit"]:disabled,
    .btn:disabled {

        cursor: not-allowed;

        opacity: 0.55;

    }

}
/* =========================================================
   PHASE 1 — BUILDER WORKSPACE DESKTOP POLISH
   STEP 3 — INVOICE FORM DESKTOP LAYOUT
   ========================================================= */

@media (min-width: 1024px) {

    /* -----------------------------------------------------
       MAIN INVOICE FORM CARD
       ----------------------------------------------------- */

    #invoice-builder-page
    .bg-white.rounded-xl.shadow-lg {

        border-radius: 24px !important;

        border-color: #dbe3ec !important;

        box-shadow:
            0 18px 45px
            rgba(15, 23, 42, 0.08) !important;

    }


    /* -----------------------------------------------------
       FORM CONTENT AREA
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-details-section {

        padding-top: 4px;

        margin-bottom: 36px !important;

    }


    /* -----------------------------------------------------
       SECTION HEADER
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-section-heading {

        margin-bottom: 28px !important;

        padding-bottom: 20px;

        border-bottom:
            1px solid #e8edf3;

    }


    /* -----------------------------------------------------
       INVOICE DETAILS GRID
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-details-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        column-gap: 28px !important;

        row-gap: 22px !important;

        width: 100%;

    }


    /* -----------------------------------------------------
       FIELD
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-field {

        min-width: 0;

    }


    /* -----------------------------------------------------
       LABEL
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-field-label {

        display: block;

        margin-bottom: 8px;

        font-size: 14px;

        font-weight: 700;

        color: #334155;

    }


    /* -----------------------------------------------------
       INPUT WRAPPER
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-input-wrap {

        min-height: 64px;

        border-radius: 14px;

    }


    /* -----------------------------------------------------
       INPUT
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-modern-input {

        min-height: 64px !important;

        font-size: 16px !important;

        border-radius: 14px !important;

    }


    /* -----------------------------------------------------
       SELECT
       ----------------------------------------------------- */

    #invoice-builder-page
    .invoice-modern-select {

        min-height: 64px !important;

        font-size: 16px !important;

        border-radius: 14px !important;

    }

}


/* =========================================================
   NORMAL LAPTOP
   ========================================================= */

@media (min-width: 1024px) and (max-width: 1279px) {

    #invoice-builder-page
    .invoice-details-grid {

        column-gap: 20px !important;

        row-gap: 18px !important;

    }


    #invoice-builder-page
    .invoice-input-wrap {

        min-height: 58px;

    }


    #invoice-builder-page
    .invoice-modern-input,

    #invoice-builder-page
    .invoice-modern-select {

        min-height: 58px !important;

        font-size: 15px !important;

    }

}
/* =========================================================
   SUPPLIER LOGO & STAMP — PROFESSIONAL UPLOAD UI
   FINAL FIX
   ========================================================= */


/* -----------------------------------------
   Logo + Stamp Section Container
----------------------------------------- */

#module-logo,
#module-stamp {

    width: 100% !important;

    margin-top: 22px !important;

    padding: 20px !important;

    background: #ffffff !important;

    border: 1px solid #e2e8f0 !important;

    border-radius: 16px !important;

    box-sizing: border-box !important;

}


/* -----------------------------------------
   Professional Label
----------------------------------------- */

#module-logo > label,
#module-stamp > label {

    display: block !important;

    margin-bottom: 12px !important;

    font-size: 18px !important;

    font-weight: 700 !important;

    color: #1e293b !important;

    line-height: 1.3 !important;

}


/* -----------------------------------------
   File Upload Field
----------------------------------------- */

#module-logo input[type="file"],
#module-stamp input[type="file"] {

    width: 100% !important;

    min-height: 56px !important;

    padding: 10px 12px !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 12px !important;

    background: #f8fafc !important;

    color: #334155 !important;

    font-size: 15px !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

}


/* -----------------------------------------
   Choose File Button
----------------------------------------- */

#module-logo input[type="file"]::file-selector-button,
#module-stamp input[type="file"]::file-selector-button {

    margin-right: 14px !important;

    padding: 10px 16px !important;

    border: 0 !important;

    border-radius: 8px !important;

    background: #1e293b !important;

    color: #ffffff !important;

    font-weight: 600 !important;

    cursor: pointer !important;

}


/* -----------------------------------------
   Preview Area
----------------------------------------- */

#company-logo-preview,
#company-stamp-preview {

    margin-top: 16px !important;

    padding-top: 16px !important;

    border-top: 1px solid #e2e8f0 !important;

}


/* -----------------------------------------
   Preview Images
----------------------------------------- */

#company-logo-image,
#company-stamp-image {

    width: 120px !important;

    height: 120px !important;

    display: block !important;

    object-fit: contain !important;

    padding: 8px !important;

    background: #ffffff !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 12px !important;

}


/* -----------------------------------------
   Remove Buttons
----------------------------------------- */

#company-logo-preview button,
#company-stamp-preview button {

    margin-top: 12px !important;

    padding: 9px 14px !important;

    border-radius: 8px !important;

    font-size: 14px !important;

    font-weight: 600 !important;

}


/* -----------------------------------------
   Desktop Layout
   Logo + Stamp Side By Side
----------------------------------------- */

#module-logo:not([hidden]),
#module-stamp:not([hidden]) {
    display: inline-block !important;
    vertical-align: top !important;
    width: calc(50% - 12px) !important;
}


#module-logo {

    margin-right: 20px !important;

}


/* -----------------------------------------
   Mobile Layout
----------------------------------------- */

@media (max-width: 767px) {

    #module-logo,
    #module-stamp {

        display: block !important;

        width: 100% !important;

        margin-right: 0 !important;

    }

}
/* =========================================================
   CUSTOMER INFORMATION — WIDTH & SAVED PROFILE FIX
========================================================= */

/* Customer section ko full professional width do */
#customer-section,
.customer-section,
.customer-information,
.customer-info-section {
    width: 100%;
    max-width: none;
}


/* Customer Profiles card ko unnecessary narrow mat hone do */
.customer-profiles,
.customer-profile-card,
#customer-profiles {
    width: 100%;
    max-width: none;
}


/* Customer profile controls full available width use karein */
.customer-profiles input,
.customer-profiles select,
.customer-profile-card input,
.customer-profile-card select,
#customer-profiles input,
#customer-profiles select {
    width: 100%;
    max-width: 100%;
}


/* Saved customer dropdown */
#savedCustomer,
#customerProfileSelect,
.customer-profile-select {
    width: 100%;
    min-width: 0;
    font-size: 16px;
    font-weight: 500;
    padding-right: 45px;

    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}


/* Dropdown ke andar option ka naam truncate na ho */
#savedCustomer option,
#customerProfileSelect option,
.customer-profile-select option {
    font-size: 16px;
    white-space: normal;
}


/* Customer Profiles ke select/input area ko zyada usable width */
.customer-profiles .form-control,
.customer-profile-card .form-control,
#customer-profiles .form-control {
    width: 100%;
    min-width: 100%;
}


/* Desktop par Customer Profiles ka card wider */
@media (min-width: 900px) {

    .customer-profiles,
    .customer-profile-card,
    #customer-profiles {
        max-width: 100%;
    }

}


/* Mobile responsiveness */
@media (max-width: 768px) {

    .customer-profiles,
    .customer-profile-card,
    #customer-profiles {
        width: 100%;
    }

    #savedCustomer,
    #customerProfileSelect,
    .customer-profile-select {
        font-size: 15px;
    }

}
/* =========================================================
   FINAL CUSTOMER PROFILES FIX
   Full Width + Saved Name Visibility
========================================================= */


/* ---------------------------------------------------------
   CUSTOMER PROFILE CARD
   It is currently inside the 2-column customer grid.
   Force it to span BOTH columns.
--------------------------------------------------------- */

#module-customer > .grid > .mb-6.rounded-xl {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: none !important;

    min-width: 0 !important;

    margin-top: 10px !important;
    margin-bottom: 0 !important;

    padding: 22px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   CARD CONTENT
--------------------------------------------------------- */

#module-customer > .grid > .mb-6.rounded-xl h3 {
    font-size: 20px !important;
    line-height: 1.3 !important;

    margin: 0 0 8px 0 !important;
}


#module-customer > .grid > .mb-6.rounded-xl
#customer-profile-status {
    font-size: 15px !important;
    line-height: 1.5 !important;

    margin-bottom: 18px !important;
}


/* ---------------------------------------------------------
   PROFILE NAME LABEL
--------------------------------------------------------- */

#module-customer #customer-profile-name {
    width: 100% !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 16px !important;

    font-size: 16px !important;
    line-height: normal !important;

    margin-bottom: 0 !important;
}


/* ---------------------------------------------------------
   SEARCH CUSTOMER
--------------------------------------------------------- */

#module-customer #customer-search {
    width: 100% !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 16px !important;

    font-size: 16px !important;
    line-height: normal !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------
   SAVED CUSTOMER DROPDOWN
   Important: fix clipped customer name
--------------------------------------------------------- */

#module-customer #customer-profile-list {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 52px !important;
    min-height: 52px !important;

    padding: 0 52px 0 16px !important;

    font-size: 16px !important;
    font-weight: 500 !important;

    line-height: normal !important;

    box-sizing: border-box !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    margin-bottom: 18px !important;
}


/* Native select options */

#module-customer #customer-profile-list option {
    font-size: 16px !important;
    line-height: 1.5 !important;

    padding: 10px !important;
}


/* ---------------------------------------------------------
   PROFILE BUTTONS
--------------------------------------------------------- */

#module-customer > .grid > .mb-6.rounded-xl
.grid.grid-cols-2.sm\:grid-cols-4 {
    width: 100% !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 12px !important;
}


#module-customer > .grid > .mb-6.rounded-xl button {
    width: 100% !important;

    min-height: 48px !important;

    padding: 0 16px !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
}


/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 900px) {

    #module-customer > .grid > .mb-6.rounded-xl
    .grid.grid-cols-2.sm\:grid-cols-4 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 640px) {

    #module-customer > .grid > .mb-6.rounded-xl {
        padding: 16px !important;
    }


    #module-customer > .grid > .mb-6.rounded-xl
    .grid.grid-cols-2.sm\:grid-cols-4 {
        grid-template-columns:
            1fr 1fr !important;
    }


    #module-customer #customer-profile-list {
        font-size: 15px !important;
    }

}
/* =========================================================
   PRODUCTS — FINAL PROFESSIONAL ALIGNMENT
   ========================================================= */

#module-products {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* ---------------------------------------------------------
   PRODUCT HEADER
   --------------------------------------------------------- */

#module-products > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 52px;

    margin-bottom: 14px !important;
}


#module-products h3 {
    margin: 0 !important;

    font-size: 22px !important;
    font-weight: 700 !important;

    line-height: 1.2 !important;

    color: #0f172a;
}


/* Add Product Button */

#module-products > div:first-child button {
    height: 42px !important;

    padding: 0 18px !important;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    white-space: nowrap;

    border-radius: 10px !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* =========================================================
   PRODUCT TABLE
   ========================================================= */

#module-products table {
    width: 100% !important;

    min-width: 1100px !important;

    table-layout: fixed;

    border-collapse: separate;
    border-spacing: 0;

    overflow: hidden;

    border: 1px solid #dbe2ea;

    border-radius: 12px;
}


/* ---------------------------------------------------------
   COLUMN WIDTHS
   --------------------------------------------------------- */

/* # */

#module-products th:nth-child(1),
#module-products td:nth-child(1) {
    width: 4%;
    min-width: 50px;

    text-align: center;
}


/* SKU */

#module-products th:nth-child(2),
#module-products td:nth-child(2) {
    width: 20%;
}


/* Product */

#module-products th:nth-child(3),
#module-products td:nth-child(3) {
    width: 29%;
}


/* Qty */

#module-products th:nth-child(4),
#module-products td:nth-child(4) {
    width: 10%;

    text-align: center;
}


/* Price */

#module-products th:nth-child(5),
#module-products td:nth-child(5) {
    width: 12%;

    text-align: center;
}


/* Total */

#module-products th:nth-child(6),
#module-products td:nth-child(6) {
    width: 10%;

    text-align: right;
}


/* Action */

#module-products th:nth-child(7),
#module-products td:nth-child(7) {
    width: 15%;

    text-align: center;
}


/* =========================================================
   TABLE HEADER
   ========================================================= */

#module-products thead th {
    height: 50px !important;

    padding: 0 14px !important;

    vertical-align: middle;

    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: 0.01em;

    white-space: nowrap;
}


/* =========================================================
   TABLE BODY
   ========================================================= */

#module-products tbody td {
    height: 76px;

    padding: 10px 14px !important;

    vertical-align: middle;

    font-size: 14px !important;

    border-top: 1px solid #e2e8f0;
}


/* =========================================================
   PRODUCT INPUTS
   ========================================================= */

#module-products tbody input,
#module-products tbody select {
    width: 100% !important;

    height: 48px !important;
    min-height: 48px !important;

    padding: 0 14px !important;

    margin: 0 !important;

    box-sizing: border-box;

    border-radius: 10px !important;

    font-size: 14px !important;

    line-height: 1.2 !important;
}


/* Quantity centered */

#module-products td:nth-child(4) input,
#module-products td:nth-child(4) select {
    text-align: center;
}


/* Price centered */

#module-products td:nth-child(5) input {
    text-align: center;
}


/* SKU / Product text */

#module-products td:nth-child(2) input,
#module-products td:nth-child(3) input {
    text-align: left;
}


/* =========================================================
   TOTAL
   ========================================================= */

#module-products td:nth-child(6) {
    white-space: nowrap;

    font-size: 15px !important;
    font-weight: 700 !important;

    color: #0f172a;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

#module-products td:nth-child(7) {
    white-space: nowrap;
}


#module-products td:nth-child(7) button {
    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;

    padding: 0 !important;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    vertical-align: middle;

    border-radius: 11px !important;

    font-size: 16px !important;

    margin: 0 4px !important;
}


/* =========================================================
   PRODUCT ROW HOVER
   ========================================================= */

#module-products tbody tr {
    transition: background 0.2s ease;
}


#module-products tbody tr:hover {
    background: #f8fafc;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #module-products {
        overflow-x: auto;
    }


    #module-products > div:first-child {
        flex-wrap: wrap;

        align-items: center;

        gap: 12px;
    }


    #module-products > div:first-child button {
        height: 44px !important;
    }


    #module-products table {
        min-width: 980px !important;
    }


    #module-products thead th {
        height: 48px !important;

        font-size: 12px !important;
    }


    #module-products tbody td {
        height: 70px;

        padding: 8px 10px !important;
    }


    #module-products tbody input,
    #module-products tbody select {
        height: 46px !important;
        min-height: 46px !important;

        font-size: 14px !important;
    }


    #module-products td:nth-child(7) button {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
    }

}
/* =========================================================
   INVOICE TOTALS — PREMIUM PROFESSIONAL FINAL DESIGN
   ========================================================= */

#module-totals {
    width: 100% !important;

    margin-top: 8px !important;
}


/* ---------------------------------------------------------
   SECTION TITLE
   --------------------------------------------------------- */

#module-totals > h3 {
    margin: 0 0 18px 0 !important;

    font-size: 24px !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;

    color: #1e293b !important;
}


/* ---------------------------------------------------------
   TOTALS CONTAINER
   --------------------------------------------------------- */

#module-totals > div {
    width: 100% !important;
    max-width: 680px !important;

    margin-left: auto !important;
    margin-right: 0 !important;

    padding: 18px 20px !important;

    background: #ffffff !important;

    border: 1px solid #dbe2ea !important;
    border-radius: 14px !important;

    box-sizing: border-box !important;

    box-shadow:
        0 6px 20px rgba(15, 23, 42, 0.05);
}


/* ---------------------------------------------------------
   TABLE
   --------------------------------------------------------- */

#module-totals table {
    width: 100% !important;

    border-collapse: collapse !important;
    border-spacing: 0 !important;

    table-layout: fixed !important;
}


/* ---------------------------------------------------------
   ALL ROWS
   --------------------------------------------------------- */

#module-totals table tr {
    border-bottom: 1px solid #e9eef4 !important;
}


#module-totals table tr:last-child {
    border-bottom: none !important;
}


/* ---------------------------------------------------------
   LABEL COLUMN
   --------------------------------------------------------- */

#module-totals table td:first-child {
    width: 48% !important;

    padding: 14px 10px !important;

    color: #475569 !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    vertical-align: middle !important;
}


/* ---------------------------------------------------------
   VALUE COLUMN
   --------------------------------------------------------- */

#module-totals table td:last-child {
    width: 52% !important;

    padding: 10px !important;

    text-align: right !important;

    vertical-align: middle !important;

    color: #0f172a !important;

    font-size: 16px !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   TOTAL INPUTS
   Shipping / Discount / Tax / Amount Paid
   --------------------------------------------------------- */

#module-totals input[type="number"] {
    width: 190px !important;

    height: 46px !important;
    min-height: 46px !important;

    padding: 0 14px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    text-align: right !important;

    font-size: 15px !important;
    font-weight: 600 !important;

    color: #0f172a !important;

    background: #ffffff !important;

    border: 1px solid #cbd5e1 !important;

    border-radius: 10px !important;

    outline: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


#module-totals input[type="number"]:focus {
    border-color: #2563eb !important;

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10) !important;
}


/* ---------------------------------------------------------
   SUBTOTAL
   --------------------------------------------------------- */

#module-totals #subtotal {
    color: #0f172a !important;

    font-size: 16px !important;
    font-weight: 700 !important;
}


/* ---------------------------------------------------------
   GRAND TOTAL ROW
   --------------------------------------------------------- */

#module-totals tr:has(#grand-total) {
    border-top: 2px solid #cbd5e1 !important;

    border-bottom: none !important;
}


#module-totals tr:has(#grand-total) td {
    padding-top: 20px !important;
    padding-bottom: 20px !important;

    background: #f8fafc !important;
}


#module-totals tr:has(#grand-total) td:first-child {
    padding-left: 16px !important;

    font-size: 18px !important;
    font-weight: 800 !important;

    color: #0f172a !important;
}


#module-totals #grand-total {
    padding-right: 16px !important;

    font-size: 24px !important;
    font-weight: 800 !important;

    color: #0f172a !important;

    white-space: nowrap !important;
}


/* ---------------------------------------------------------
   AMOUNT PAID
   --------------------------------------------------------- */

#module-totals
tr:has(input[data-model="totals.paid"]) {
    border-bottom: none !important;
}


#module-totals
tr:has(input[data-model="totals.paid"])
td {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}


/* ---------------------------------------------------------
   BALANCE DUE
   --------------------------------------------------------- */

#module-totals tr:has(#balance-due) {
    border-top: 2px solid #fecaca !important;

    border-bottom: none !important;
}


#module-totals tr:has(#balance-due) td {
    padding-top: 20px !important;
    padding-bottom: 20px !important;

    background: #fff7f7 !important;
}


#module-totals tr:has(#balance-due) td:first-child {
    padding-left: 16px !important;

    font-size: 17px !important;
    font-weight: 800 !important;

    color: #b91c1c !important;
}


#module-totals #balance-due {
    padding-right: 16px !important;

    font-size: 24px !important;
    font-weight: 800 !important;

    color: #dc2626 !important;

    white-space: nowrap !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    #module-totals > div {
        max-width: 100% !important;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #module-totals > h3 {
        font-size: 21px !important;

        margin-bottom: 14px !important;
    }


    #module-totals > div {
        padding: 12px !important;

        border-radius: 12px !important;
    }


    #module-totals table td:first-child {
        width: 44% !important;

        padding: 12px 6px !important;

        font-size: 14px !important;
    }


    #module-totals table td:last-child {
        width: 56% !important;

        padding: 8px 6px !important;
    }


    #module-totals input[type="number"] {
        width: 100% !important;

        height: 44px !important;
        min-height: 44px !important;

        font-size: 14px !important;
    }


    #module-totals tr:has(#grand-total) td:first-child,
    #module-totals tr:has(#balance-due) td:first-child {
        padding-left: 10px !important;

        font-size: 15px !important;
    }


    #module-totals #grand-total,
    #module-totals #balance-due {
        padding-right: 10px !important;

        font-size: 20px !important;
    }

}
/* =========================================================
   FINAL COMPACT INVOICE TOTALS
   ========================================================= */

#module-totals {
    padding: 0 !important;
}


/* Main totals box */

#module-totals > div {
    max-width: 460px !important;
}


/* Normal rows */

#module-totals td {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
}


/* Subtotal */

#module-totals #subtotal {
    font-size: 15px !important;
}


/* Inputs */

#module-totals input {
    height: 34px !important;
    min-height: 34px !important;

    font-size: 14px !important;

    border-radius: 8px !important;
}


/* Grand Total */

#module-totals tr:has(#grand-total) td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


#module-totals tr:has(#grand-total) td:first-child {
    font-size: 16px !important;
}


#module-totals #grand-total {
    font-size: 20px !important;
}


/* Amount Paid */

#module-totals
tr:has(input[data-model="totals.paid"])
td {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* Balance Due */

#module-totals tr:has(#balance-due) td {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}


#module-totals tr:has(#balance-due) td:first-child {
    font-size: 16px !important;
}


#module-totals #balance-due {
    font-size: 20px !important;
}


/* Mobile */

@media (max-width: 767px) {

    #module-totals > div {
        max-width: 100% !important;
    }

    #module-totals #grand-total,
    #module-totals #balance-due {
        font-size: 19px !important;
    }

}
/* =====================================================
   TEMPLATE REVIEW — PROFESSIONAL POPUP
   ===================================================== */

/* Overlay */
#template-review-panel {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(15, 23, 42, 0.55);

    box-sizing: border-box;
}
/* =====================================================
   TEMPLATE REVIEW — LAPTOP FRIENDLY
   ===================================================== */
/* Main Popup */
.template-review-modal-card {
    width: min(88vw, 900px);
    height: 88vh;

    max-height: 760px;

    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;

    box-shadow:
        0 24px 60px rgba(15, 23, 42, 0.24);
}

/* Preview Area */
#template-review-image {
    min-height: 0;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 16px 24px;

    overflow: hidden;

    box-sizing: border-box;

    background: #f8fafc;
}

/* Actual Preview Image */
#template-review-image img {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 48vh;

    object-fit: contain;

    margin: auto;
}


/* Review Navigation */
.template-review-navigation {
    min-height: 82px;

    display: flex !important;
    align-items: center;
    justify-content: space-between;

    padding: 12px 24px;

    box-sizing: border-box;

    background: #ffffff;
    border-top: 1px solid #e2e8f0;

    overflow: hidden;
}
/* Navigation Buttons */
.template-review-navigation button {
    flex: 1 1 0;
    min-width: 0;
}
/* Medium Laptop */
@media (max-height: 850px) {

    .template-review-modal-card {
        height: 88vh;
    }

    #template-review-image img {
        max-height: 44vh;
    }

}


/* Tablet / Mobile */
@media (max-width: 768px) {

    #template-review-panel {
        padding: 12px !important;
    }

    .template-review-modal-card {
        width: 100%;
        height: calc(100vh - 24px);

        border-radius: 16px;
    }

    #template-review-image {
        padding: 10px;
    }

    #template-review-image img {
        max-width: 100%;
        max-height: 48vh;
    }

    .template-review-navigation {
        min-height: 64px;

        padding: 10px 12px;

        gap: 8px;
    }

}
/* Keep modal header visible */
.template-review-modal-card > :first-child {
    flex: 0 0 auto;
}
/* Force hidden Template Review popup to stay closed */
#template-review-panel.hidden {
    display: none !important;
}
/* =========================================================
   INPUT PAGE SCROLL / BLACK SCREEN FIX
   ========================================================= */

html,
body {
    min-height: 100%;
    background: #f1f5f9;
}

body {
    min-height: 100vh;
}

#app {
    min-height: 100vh !important;
    background: #f1f5f9;
}

#invoice-builder-page {
    min-height: 100vh !important;
    background: #f1f5f9 !important;
}
/* =========================================
   TEMPLATE INPUT VISIBILITY FIX
   ========================================= */

[hidden] {
    display: none !important;
}
/* =====================================================
   MOBILE FOUNDATION
   Safe global responsiveness
===================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
canvas {
    max-width: 100%;
    height: auto;
}


/* =====================================================
   MOBILE
===================================================== */

@media screen and (max-width: 768px) {

    /* Prevent fixed elements from exceeding screen */
    body {
        min-width: 0;
    }

    /* Touch-friendly controls */
    input,
    select,
    textarea,
    button {
        font-size: 16px;
    }

    button,
    .btn,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px;
    }

    textarea {
        min-height: 100px;
    }

    /* Common responsive containers */
    .container,
    .main-container,
    .page-container,
    .content-container {
        width: 100%;
        max-width: 100%;
    }

    /* Generic two-column layouts */
    .grid-2,
    .two-column,
    .two-column-grid,
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    /* Flex rows can wrap safely */
    .actions,
    .button-group,
    .form-actions {
        flex-wrap: wrap;
    }

}
/* =========================================================
   PHASE M1 — GLOBAL MOBILE FOUNDATION
   SAFE VERSION
========================================================= */


/* ---------------------------------------------------------
   1. UNIVERSAL BOX SIZING
--------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ---------------------------------------------------------
   2. RESPONSIVE MEDIA
--------------------------------------------------------- */

img,
svg,
canvas,
video {
    max-width: 100%;
}


/* ---------------------------------------------------------
   3. MOBILE BASE
--------------------------------------------------------- */

@media (max-width: 767px) {

    /* Prevent form controls exceeding viewport */

    input,
    select,
    textarea,
    button {
        max-width: 100%;
    }


    /* Prevent unwanted mobile browser zoom */

    input,
    select,
    textarea {
        font-size: 16px !important;
    }


    /* Touch-friendly buttons */

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 44px;
    }

}
/* ================================================= */
/* MOBILE INVOICE ACTION BUTTONS */
/* ================================================= */

@media (max-width: 640px) {

    .invoice-premium-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .invoice-premium-btn {
        flex: 1 1 0;
        min-width: 0;
        height: 42px;
        padding: 0 8px;
        gap: 6px;
        font-size: 12px;
        white-space: nowrap;
    }

    .invoice-premium-btn span {
        display: inline !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        visibility: visible !important;
    }

    .invoice-premium-more {
        flex: 0 0 42px;
    }

    .invoice-premium-more-btn {
        width: 42px;
        height: 42px;
    }

}
/* =========================================================
   SUPPLIER INFORMATION — MOBILE SINGLE COLUMN FIX
   ========================================================= */

@media (max-width: 767px) {

    #module-address > .grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    #module-address > .grid > div {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #module-address > .grid input,
    #module-address > .grid select,
    #module-address > .grid textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

}
/* =========================================================
   SHIPPING INFORMATION — MOBILE SINGLE COLUMN FIX
   MOBILE ONLY — DESKTOP UNTOUCHED
========================================================= */

@media (max-width: 767px) {

    #module-shipping {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #module-shipping > .grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    #module-shipping > .grid > div {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1 !important;
    }

    #module-shipping input,
    #module-shipping select,
    #module-shipping textarea {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #module-shipping label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        white-space: normal !important;
    }

}