:root{
    --navy:#123b63;
    --navy-dark:#082844;
    --blue:#2563eb;
    --cyan:#0891b2;
    --teal:#0f766e;
    --orange:#f59e0b;
    --rose:#e11d48;
    --purple:#7c3aed;
    --ink:#182235;
    --muted:#65758b;
    --border:#d8e2ec;
    --soft:#f5f8fc;
    --paper:#ffffff;
    --page:#eaf1f8;
    --shadow:0 20px 55px rgba(18,59,99,.14);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    color:var(--ink);
    background:
        radial-gradient(circle at top left,rgba(37,99,235,.13),transparent 28%),
        radial-gradient(circle at bottom right,rgba(245,158,11,.11),transparent 30%),
        linear-gradient(135deg,#eef5fb,#f9fbfd 48%,#edf5fb);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input,select,textarea{font:inherit}

.app-shell{
    width:min(1580px,100%);
    margin:auto;
    padding:24px;
}

.topbar{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
    padding:22px 26px;
    border-radius:22px;
    color:#fff;
    background:linear-gradient(125deg,var(--navy-dark),var(--navy) 55%,#155e75);
    box-shadow:var(--shadow);
}

.topbar::before{
    content:"";
    position:absolute;
    inset:-80px auto auto 42%;
    width:290px;
    height:290px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
}

.topbar::after{
    content:"";
    position:absolute;
    right:-40px;
    bottom:-85px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(245,158,11,.18);
}

.brand,.toolbar{position:relative;z-index:1}

.brand h1{
    margin:0;
    font-size:clamp(24px,3vw,36px);
    letter-spacing:-.7px;
}

.brand p{
    margin:6px 0 0;
    color:#d8eafa;
    font-size:14px;
}

.toolbar{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:9px;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:11px 15px;
    border:0;
    border-radius:11px;
    cursor:pointer;
    font-weight:800;
    transition:.2s ease;
    box-shadow:0 7px 16px rgba(0,0,0,.09);
}

.btn:hover{transform:translateY(-2px)}

.btn-light{color:var(--navy);background:#fff}
.btn-success{color:#fff;background:linear-gradient(135deg,#0f766e,#0d9488)}
.btn-accent{color:#322000;background:linear-gradient(135deg,#fbbf24,#f59e0b)}
.btn-danger{color:#b91c1c;background:#fee2e2}
.btn-outline{
    color:var(--navy);
    background:#f8fbff;
    border:1px solid #bdd0e1;
    box-shadow:none;
}

.layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 570px;
    gap:22px;
    align-items:start;
}

.panel{
    overflow:hidden;
    border:1px solid rgba(207,220,232,.95);
    border-radius:19px;
    background:rgba(255,255,255,.97);
    box-shadow:var(--shadow);
}

.panel-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 20px;
    border-bottom:1px solid var(--border);
    background:linear-gradient(90deg,#fbfdff,#f1f6fb);
}

.panel-header h2{
    margin:0;
    color:var(--navy);
    font-size:18px;
}

.panel-body{padding:19px}

.section{
    position:relative;
    margin-bottom:16px;
    padding:17px;
    border:1px solid var(--border);
    border-radius:15px;
    background:#fff;
    box-shadow:0 8px 22px rgba(15,61,104,.045);
}

.section::before{
    content:"";
    position:absolute;
    left:0;
    top:16px;
    bottom:16px;
    width:4px;
    border-radius:0 5px 5px 0;
    background:linear-gradient(var(--blue),var(--cyan));
}

.section:nth-of-type(2n)::before{
    background:linear-gradient(var(--orange),#fb7185);
}

.section:nth-of-type(3n)::before{
    background:linear-gradient(var(--teal),#22c55e);
}

.section-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 14px;
    padding-left:4px;
    color:var(--navy);
    font-size:14px;
    letter-spacing:.55px;
    text-transform:uppercase;
}

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

.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}
.col-3{grid-column:span 3}
.col-2{grid-column:span 2}

label{
    display:block;
    margin-bottom:6px;
    color:#42546b;
    font-size:11px;
    font-weight:850;
}

input,select,textarea{
    width:100%;
    padding:10px 11px;
    border:1px solid #cbd8e4;
    border-radius:9px;
    outline:none;
    color:var(--ink);
    background:#fff;
    transition:.18s;
}

input:focus,select:focus,textarea:focus{
    border-color:#4f8bc4;
    box-shadow:0 0 0 3px rgba(37,99,235,.1);
}

textarea{
    min-height:72px;
    resize:vertical;
}

.hint{
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
}

.badge{
    display:inline-flex;
    align-items:center;
    padding:5px 9px;
    border:1px solid #c8dbed;
    border-radius:999px;
    color:var(--navy);
    background:#ebf5ff;
    font-size:10px;
    font-weight:850;
}

.status-line{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.items-wrap{
    overflow:auto;
    border:1px solid var(--border);
    border-radius:12px;
}

table{
    width:100%;
    border-collapse:collapse;
}

th{
    padding:9px 7px;
    border-bottom:1px solid var(--border);
    color:var(--navy);
    background:#edf5fc;
    font-size:10px;
    letter-spacing:.25px;
    text-transform:uppercase;
    white-space:nowrap;
}

td{
    padding:7px;
    border-bottom:1px solid #e8eef4;
    vertical-align:top;
}

td input,td select,td textarea{
    min-width:75px;
    padding:7px;
    font-size:12px;
}

.desc-field{
    min-width:210px;
    min-height:40px;
}

.row-total{
    font-weight:850;
    white-space:nowrap;
}

.remove-row{padding:7px 9px}

.muted-card{
    padding:12px;
    border:1px dashed #bfd0df;
    border-radius:11px;
    color:#526477;
    background:#f8fbfe;
    font-size:11px;
}

.invoice-preview{
    position:sticky;
    top:14px;
}

.invoice-paper,.receipt-paper{
    position:relative;
    overflow:hidden;
    color:#172033;
    background:#fff;
    box-shadow:0 12px 35px rgba(15,23,42,.08);
}

.invoice-paper{
    min-height:760px;
    padding:22px;
    border-radius:15px;
    font-size:11px;
}

.invoice-paper::before,.receipt-paper::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:7px;
    background:linear-gradient(90deg,var(--navy),var(--blue),var(--cyan),var(--orange));
}

.invoice-head{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-bottom:10px;
    padding:5px 0 11px;
    border-bottom:3px solid var(--navy);
}

.invoice-head h2{
    margin:0 0 3px;
    color:var(--navy);
    font-size:22px;
    letter-spacing:-.3px;
}

.invoice-title{text-align:right}

.invoice-title strong{
    display:block;
    color:var(--navy);
    font-size:20px;
    letter-spacing:1px;
}

.invoice-title span{
    display:inline-block;
    margin-top:4px;
    padding:3px 7px;
    border-radius:999px;
    color:#854d0e;
    background:#fef3c7;
    font-size:9px;
    font-weight:800;
}

.small{
    color:#4b5d72;
    font-size:9.6px;
    line-height:1.35;
}

.preview-meta{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    overflow:hidden;
    margin-bottom:8px;
    border:1px solid #cfdbe6;
    border-radius:8px;
}

.preview-meta div{
    min-height:39px;
    padding:6px 8px;
    border-bottom:1px solid #e4ebf1;
    font-size:9px;
}

.preview-meta div:nth-child(odd){
    border-right:1px solid #e4ebf1;
}

.preview-meta strong{color:var(--navy)}

.preview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-bottom:8px;
}

.preview-box{
    min-height:79px;
    padding:7px;
    border:1px solid #cfdbe6;
    border-radius:8px;
    background:linear-gradient(180deg,#fff,#fbfdff);
}

.preview-box h4{
    margin:0 0 4px;
    color:var(--navy);
    font-size:9px;
    letter-spacing:.35px;
    text-transform:uppercase;
}

.preview-table{
    table-layout:fixed;
    border:1px solid #cfdbe6;
}

.preview-table th{
    padding:5px 4px;
    color:#fff;
    background:linear-gradient(90deg,var(--navy),#185a8c);
    font-size:7.7px;
    white-space:normal;
}

.preview-table td{
    padding:4px;
    font-size:7.8px;
    line-height:1.2;
}

.preview-table tbody tr:nth-child(even){background:#f7fbff}

.summary{
    width:70%;
    margin-top:7px;
    margin-left:auto;
    overflow:hidden;
    border:1px solid #cfdbe6;
    border-radius:8px;
}

.summary-row{
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding:4px 8px;
    border-bottom:1px solid #e4ebf1;
    font-size:8.4px;
}

.summary-row:last-child{border-bottom:0}

.summary-row.total{
    color:#fff;
    background:linear-gradient(90deg,var(--navy),var(--blue));
    font-size:10.5px;
    font-weight:900;
}

.amount-words{
    margin-top:7px;
    padding:6px 8px;
    border:1px solid #cfdbe6;
    border-left:4px solid var(--orange);
    border-radius:7px;
    font-size:8.5px;
    background:#fffdf5;
}

.insurance-preview{
    margin-top:7px;
    overflow:hidden;
    border:1px solid #b9d6dc;
    border-radius:8px;
    background:#f7feff;
}

.insurance-preview-title{
    padding:5px 7px;
    color:#fff;
    background:linear-gradient(90deg,var(--teal),var(--cyan));
    font-size:8px;
    font-weight:900;
    letter-spacing:.35px;
    text-transform:uppercase;
}

.insurance-preview-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.insurance-preview-grid > div{
    padding:4px 6px;
    border-bottom:1px solid #d9ebee;
    font-size:7.5px;
}

.insurance-preview-grid > div:nth-child(odd){
    border-right:1px solid #d9ebee;
}

.insurance-preview-notes{
    grid-column:1/-1;
    border-right:0!important;
}

.footer-note{
    display:flex;
    justify-content:space-between;
    gap:15px;
    margin-top:11px;
}

.signature{
    min-width:145px;
    text-align:center;
}

.signature-space{height:34px}

.receipt-page{margin-top:22px}

.receipt-paper{
    min-height:760px;
    padding:22px;
    border-radius:15px;
}

.receipt-heading{
    margin:13px 0;
    padding:10px;
    border:2px solid var(--navy);
    border-radius:8px;
    color:var(--navy);
    text-align:center;
    background:linear-gradient(90deg,#eff6ff,#ecfeff,#fff7ed);
    font-size:20px;
    font-weight:900;
    letter-spacing:1px;
}

.receipt-table td{
    padding:9px;
    border:1px solid #d5e0e9;
    font-size:10px;
}

.receipt-table td:first-child{
    width:35%;
    color:var(--navy);
    background:#f2f7fc;
    font-weight:850;
}

.receipt-amount{
    margin:15px 0;
    padding:16px;
    border:2px solid var(--teal);
    border-radius:11px;
    text-align:center;
    background:linear-gradient(135deg,#ecfdf5,#ecfeff);
}

.receipt-amount span{
    display:block;
    color:#5d7184;
    font-size:9px;
    font-weight:850;
    text-transform:uppercase;
}

.receipt-amount strong{
    display:block;
    margin-top:4px;
    color:var(--teal);
    font-size:28px;
}

.receipt-against{
    min-height:72px;
    margin-top:13px;
    padding:10px;
    border:1px solid #cfdbe6;
    border-radius:8px;
    background:#fbfdff;
}

.receipt-against h4{
    margin:0 0 6px;
    color:var(--navy);
    font-size:9px;
    text-transform:uppercase;
}

.receipt-footer{margin-top:45px}

@media(max-width:1250px){
    .layout{grid-template-columns:1fr}
    .invoice-preview{position:static}
}

@media(max-width:720px){
    .app-shell{padding:10px}
    .topbar{align-items:flex-start;flex-direction:column;padding:17px}
    .toolbar{justify-content:flex-start}
    .grid{grid-template-columns:1fr}
    [class^="col-"]{grid-column:1!important}
    .preview-grid,.preview-meta,.insurance-preview-grid{grid-template-columns:1fr}
    .preview-meta div:nth-child(odd),.insurance-preview-grid > div:nth-child(odd){border-right:0}
    .summary{width:100%}
    .panel-body{padding:12px}
}

/* Print: readable A4, page 1 invoice, page 2 receipt */
@media print{
    @page{
        size:A4 portrait;
        margin:7mm;
    }

    html,body{
        width:100%;
        margin:0!important;
        padding:0!important;
        background:#fff!important;
        print-color-adjust:exact;
        -webkit-print-color-adjust:exact;
    }

    .topbar,.editor-panel,.panel-header,.screen-only{
        display:none!important;
    }

    .app-shell,.layout,.panel,.invoice-preview,.panel-body{
        width:100%!important;
        max-width:none!important;
        margin:0!important;
        padding:0!important;
        border:0!important;
        border-radius:0!important;
        box-shadow:none!important;
        background:#fff!important;
    }

    .layout{display:block!important}
    .invoice-preview{position:static!important;overflow:visible!important}

    .invoice-paper{
        width:100%!important;
        height:283mm!important;
        min-height:283mm!important;
        max-height:283mm!important;
        padding:0!important;
        overflow:hidden!important;
        border-radius:0!important;
        box-shadow:none!important;
        page-break-after:always!important;
        break-after:page!important;
        font-size:8.5px!important;
        line-height:1.14!important;
        zoom:var(--invoice-print-zoom,1);
    }

    .invoice-paper::before,.receipt-paper::before{height:5px}

    .invoice-head{
        margin-bottom:6px!important;
        padding:5px 0 7px!important;
    }

    .invoice-head h2{font-size:17px!important}
    .invoice-title strong{font-size:15px!important}
    .invoice-title span{font-size:7px!important}
    .small{font-size:7.5px!important;line-height:1.2!important}

    .preview-meta{margin-bottom:5px!important}
    .preview-meta div{
        min-height:29px!important;
        padding:4px 6px!important;
        font-size:7.4px!important;
    }

    .preview-grid{gap:5px!important;margin-bottom:5px!important}
    .preview-box{min-height:57px!important;padding:5px!important}
    .preview-box h4{font-size:7.4px!important;margin-bottom:2px!important}

    .preview-table th{
        padding:3px!important;
        font-size:6.4px!important;
    }

    .preview-table td{
        padding:2.7px 3px!important;
        font-size:6.7px!important;
        line-height:1.12!important;
    }

    .summary{width:66%!important;margin-top:5px!important}
    .summary-row{padding:2.7px 6px!important;font-size:7px!important}
    .summary-row.total{font-size:8.7px!important}

    .amount-words{
        margin-top:5px!important;
        padding:4px 6px!important;
        font-size:7px!important;
    }

    .insurance-preview{margin-top:5px!important}
    .insurance-preview-title{padding:3px 5px!important;font-size:6.7px!important}
    .insurance-preview-grid > div{padding:2.5px 4px!important;font-size:6.5px!important}

    .invoice-paper .preview-grid[style*="margin-top"]{
        margin-top:5px!important;
    }

    .footer-note{
        margin-top:7px!important;
        gap:10px!important;
    }

    .signature{min-width:120px!important}
    .signature-space{height:21px!important}

    .receipt-page{
        display:block!important;
        width:100%!important;
        margin:0!important;
        page-break-before:always!important;
        break-before:page!important;
    }

    .receipt-paper{
        width:100%!important;
        height:283mm!important;
        min-height:283mm!important;
        max-height:283mm!important;
        margin:0!important;
        padding:0!important;
        overflow:hidden!important;
        border-radius:0!important;
        box-shadow:none!important;
    }

    .receipt-heading{
        margin:10px 0!important;
        padding:8px!important;
        font-size:17px!important;
    }

    .receipt-table td{
        padding:7px!important;
        font-size:8.5px!important;
    }

    .receipt-amount{
        margin:12px 0!important;
        padding:12px!important;
    }

    .receipt-amount strong{font-size:23px!important}
    .receipt-against{min-height:60px!important;margin-top:10px!important;padding:8px!important}
    .receipt-footer{margin-top:32px!important}
}


/* =========================================================
   FULL-SIZE A4 PRINT OVERRIDE
   Keeps the invoice large and readable.
   Shrinking is handled only when content actually overflows.
   ========================================================= */
@media print {
    @page {
        size: A4 portrait;
        margin: 5mm;
    }

    html,
    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #ffffff !important;
        print-color-adjust: exact !important;
        -webkit-print-color-adjust: exact !important;
    }

    .app-shell,
    .layout,
    .panel,
    .invoice-preview,
    .panel-body {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .invoice-paper {
        width: 100% !important;
        height: 287mm !important;
        min-height: 287mm !important;
        max-height: 287mm !important;
        padding: 4mm !important;
        overflow: hidden !important;
        font-size: 10px !important;
        line-height: 1.24 !important;
        zoom: var(--invoice-print-zoom, 1) !important;
        transform-origin: top left !important;
    }

    .invoice-paper::before {
        height: 6px !important;
    }

    .invoice-head {
        margin-bottom: 8px !important;
        padding: 6px 0 10px !important;
        gap: 14px !important;
    }

    .invoice-head h2 {
        font-size: 21px !important;
        line-height: 1.08 !important;
    }

    .invoice-title strong {
        font-size: 18px !important;
        line-height: 1.05 !important;
    }

    .invoice-title span {
        padding: 3px 7px !important;
        font-size: 8px !important;
    }

    .small {
        font-size: 8.8px !important;
        line-height: 1.3 !important;
    }

    .preview-meta {
        margin-bottom: 7px !important;
    }

    .preview-meta div {
        min-height: 35px !important;
        padding: 5px 7px !important;
        font-size: 8.7px !important;
        line-height: 1.18 !important;
    }

    .preview-grid {
        gap: 7px !important;
        margin-bottom: 7px !important;
    }

    .preview-box {
        min-height: 68px !important;
        padding: 7px !important;
    }

    .preview-box h4 {
        margin-bottom: 4px !important;
        font-size: 8.7px !important;
    }

    .preview-table th {
        padding: 5px 4px !important;
        font-size: 7.5px !important;
        line-height: 1.15 !important;
    }

    .preview-table td {
        padding: 4px !important;
        font-size: 7.8px !important;
        line-height: 1.2 !important;
    }

    .summary {
        width: 68% !important;
        margin-top: 7px !important;
    }

    .summary-row {
        padding: 4px 7px !important;
        font-size: 8.2px !important;
        line-height: 1.18 !important;
    }

    .summary-row.total {
        font-size: 10.5px !important;
    }

    .amount-words {
        margin-top: 7px !important;
        padding: 6px 8px !important;
        font-size: 8.2px !important;
        line-height: 1.2 !important;
    }

    .insurance-preview {
        margin-top: 7px !important;
    }

    .insurance-preview-title {
        padding: 5px 7px !important;
        font-size: 7.8px !important;
    }

    .insurance-preview-grid > div {
        padding: 4px 6px !important;
        font-size: 7.5px !important;
        line-height: 1.18 !important;
    }

    .invoice-paper .preview-grid[style*="margin-top"] {
        margin-top: 7px !important;
    }

    .footer-note {
        margin-top: 9px !important;
        gap: 16px !important;
    }

    .signature {
        min-width: 145px !important;
        font-size: 8px !important;
    }

    .signature-space {
        height: 30px !important;
    }

    .receipt-paper {
        width: 100% !important;
        height: 287mm !important;
        min-height: 287mm !important;
        max-height: 287mm !important;
        padding: 4mm !important;
    }
}


/* Brand logo and watermark */
.invoice-brand{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:0;
}

.invoice-logo{
    display:block;
    width:190px;
    max-width:42%;
    height:auto;
    object-fit:contain;
}

.invoice-business-details{
    min-width:0;
}

.invoice-paper > *,
.receipt-paper > *{
    position:relative;
    z-index:2;
}

.invoice-paper::after{
    content:"";
    position:absolute;
    z-index:1;
    left:50%;
    top:54%;
    width:62%;
    height:42%;
    transform:translate(-50%,-50%);
    background-image:url("logo.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:.055;
    pointer-events:none;
    filter:grayscale(18%);
}

@media(max-width:720px){
    .invoice-brand{
        align-items:flex-start;
        flex-direction:column;
        gap:7px;
    }

    .invoice-logo{
        width:175px;
        max-width:72%;
    }
}

@media print{
    .invoice-brand{
        gap:9px!important;
    }

    .invoice-logo{
        width:46mm!important;
        max-width:46mm!important;
        height:auto!important;
    }

    .invoice-business-details .small{
        font-size:8.4px!important;
        line-height:1.24!important;
    }

    .invoice-paper::after{
        width:122mm!important;
        height:92mm!important;
        top:55%!important;
        opacity:.05!important;
        -webkit-print-color-adjust:exact!important;
        print-color-adjust:exact!important;
    }

    .receipt-paper .invoice-logo{
        width:42mm!important;
        max-width:42mm!important;
    }
}

.quotation-summary-box{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:8px;overflow:hidden;border:1px solid #cfdbe6;border-radius:8px;background:#f8fbff}
.quotation-summary-box>div{padding:6px 8px;border-bottom:1px solid #e4ebf1;font-size:8.2px}
.quotation-summary-box>div:nth-child(odd){border-right:1px solid #e4ebf1}
.quotation-summary-box>div:last-child{grid-column:1/-1;border-right:0}
@media print{.receipt-page,.receipt-paper{display:none!important}.invoice-paper{page-break-after:auto!important;break-after:auto!important}.quotation-summary-box{margin-top:6px!important}.quotation-summary-box>div{padding:4px 6px!important;font-size:7.2px!important}}