/* Invoice Builder */
.invoice-page { padding: 48px 0 80px; background: #eef1ee; min-height: calc(100vh - 80px); }
.invoice-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:32px; }
.invoice-heading h1 { margin:8px 0 8px; font-size:clamp(30px,4vw,46px); letter-spacing:-1.5px; }
.invoice-heading p { margin:0; color:var(--text-light); }
.invoice-actions-top { display:flex; gap:10px; flex-shrink:0; }

.builder-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(430px,0.9fr); gap:24px; align-items:start; }
/* Clear visual separation between the editing workspace and the live document preview. */
.builder-panel { background:#e8ece9; border:1px solid #d2d8d4; border-radius:20px; overflow:hidden; }
.preview-panel { background:#f8f8f6; border:1px solid #d5dad7; border-radius:20px; padding:20px; box-shadow:0 12px 34px rgba(32,37,43,.045); }
.panel-section { padding:26px; border-bottom:1px solid #d4dad6; }
.panel-section:last-child { border-bottom:0; }
.section-title-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.section-title-row h2 { margin:0; font-size:17px; }
.section-number { font-size:12px; color:var(--text-light); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; color:var(--text); }
label.full { grid-column:1/-1; }
input, select, textarea { width:100%; border:1px solid var(--border); border-radius:9px; padding:11px 12px; font:inherit; color:var(--text); background:#fff; outline:none; transition:.2s; box-sizing:border-box; }
textarea { resize:vertical; min-height:70px; }
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }

.logo-upload-row { display:flex; align-items:center; gap:15px; margin-bottom:20px; }
.logo-upload-box { width:100px; height:78px; border:1px dashed #cdd2cf; border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; overflow:hidden; background:#fafbfa; }
.logo-upload-box strong { display:block; font-size:12px; }
.logo-upload-box small { display:block; margin-top:4px; font-size:10px; color:var(--text-light); }
.logo-upload-box img { width:100%; height:100%; object-fit:contain; padding:8px; box-sizing:border-box; }
.logo-upload-help p { margin:4px 0 0; color:var(--text-light); font-size:12px; }

.items-editor { display:flex; flex-direction:column; gap:9px; }
.item-row, .tax-row { display:grid; gap:8px; align-items:end; }
.item-row { grid-template-columns:minmax(0,1fr) 70px 100px 100px 32px; }
.tax-row { grid-template-columns:minmax(0,1fr) 100px 32px; }
.row-label { font-size:10px; color:var(--text-light); margin-bottom:4px; display:block; }
.item-row input, .tax-row input { padding:9px 9px; font-size:12px; }
.amount-output { height:38px; display:flex; align-items:center; justify-content:flex-end; font-size:12px; font-weight:600; }
.remove-row { border:0; background:transparent; color:#89918d; cursor:pointer; font-size:18px; padding:0 5px 8px; }
.remove-row:hover { color:#b14f42; }
.add-row-btn { border:0; background:transparent; color:var(--accent-dark); font-weight:600; font-size:12px; cursor:pointer; padding:12px 0 0; }
.discount-row { margin-top:20px; max-width:180px; }
.input-with-suffix { position:relative; }
.input-with-suffix input { padding-right:30px; }
.input-with-suffix span { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:12px; }

.template-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.template-option { border:1px solid var(--border); background:#fff; border-radius:10px; padding:12px; cursor:pointer; font-weight:600; font-size:12px; color:var(--text); }
.template-option.active { border-color:var(--accent); background:var(--accent-light); color:var(--accent-dark); }

.preview-panel { position:sticky; top:20px; }
.preview-label { display:flex; justify-content:space-between; align-items:center; margin:0 4px 14px; font-size:13px; font-weight:700; letter-spacing:.8px; color:var(--text-light); }
.preview-status { font-weight:500; letter-spacing:0; }
.invoice-paper { background:#fff; min-height:650px; padding:42px; border:2px solid var(--accent); box-shadow:0 15px 45px rgba(32,37,43,.08); border-radius:4px; color:#24282b; }
.paper-top { display:flex; justify-content:space-between; gap:20px; padding-bottom:28px; border-bottom:1px solid #e8e9e8; }
.paper-brand { display:flex; gap:12px; align-items:flex-start; }
.paper-logo { width:58px; height:42px; border-radius:6px; background:#f3f4f2; display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:700; color:#7b817e; overflow:hidden; }
.paper-logo img { width:100%; height:100%; object-fit:contain; }
.paper-brand h3 { margin:0 0 3px; font-size:14px; }
.paper-brand p, .paper-meta p { margin:2px 0; font-size:9px; color:#737a77; }
.paper-invoice-title { text-align:right; }
.paper-invoice-title span { display:block; font-size:25px; letter-spacing:2px; font-weight:700; }
.paper-invoice-title strong { display:block; margin-top:5px; font-size:10px; color:#737a77; }

.paper-meta { display:flex; justify-content:space-between; padding:25px 0; }
.paper-meta small, .paper-notes small { display:block; font-size:8px; font-weight:700; letter-spacing:.8px; color:#8a908d; margin-bottom:6px; }
.paper-meta strong { display:block; font-size:11px; }
.dates { text-align:right; min-width:120px; }
.dates p { display:flex; justify-content:space-between; gap:18px; }
.dates span { color:#8a908d; }

.paper-items { width:100%; border-collapse:collapse; font-size:9px; }
.paper-items th { text-align:left; color:#8a908d; font-size:8px; letter-spacing:.5px; padding:9px 5px; border-bottom:1px solid #ddd; }
.paper-items th:not(:first-child), .paper-items td:not(:first-child) { text-align:right; }
.paper-items td { padding:11px 5px; border-bottom:1px solid #eee; }
.paper-bottom { display:grid; grid-template-columns:1fr 180px; gap:30px; padding-top:24px; }
.paper-notes p { font-size:8px; line-height:1.5; color:#737a77; max-width:250px; }
.paper-totals { font-size:9px; }
.paper-totals > div { display:flex; justify-content:space-between; gap:20px; padding:4px 0; }
.paper-totals .grand-total { margin-top:8px; padding-top:11px; border-top:1px solid #333; font-size:12px; }
.paper-footer { margin-top:35px; padding-top:12px; border-top:1px solid #eee; text-align:center; color:#a0a5a2; font-size:8px; }

.invoice-paper.template-classic { border-top:5px solid #24282b; }
.invoice-paper.template-minimal { box-shadow:none; border:0; }

@media (max-width:1000px) {
    .builder-layout { grid-template-columns:1fr; }
    .preview-panel { position:static; padding:14px; }
}
@media (max-width:650px) {
    .invoice-heading { align-items:flex-start; flex-direction:column; }
    .invoice-actions-top { width:100%; }
    .invoice-actions-top .btn { flex:1; }
    .form-grid { grid-template-columns:1fr; }
    label.full { grid-column:auto; }
    .item-row { grid-template-columns:1fr 60px 85px 85px 25px; overflow-x:auto; }
    .paper-bottom { grid-template-columns:1fr; }
    .invoice-paper { padding:24px; }
}

/* Added invoice workflow controls */
.invoice-actions-top { flex-wrap:wrap; }
.invoice-actions-top .btn { padding:9px 13px; font-size:13px; }
.paper-invoice-title em {
    display:inline-block; margin-top:8px; padding:4px 7px; border-radius:20px;
    background:#f2f3f1; color:#737a77; font-size:10px; font-style:normal;
}
.terms-presets { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.terms-presets button {
    border:1px solid var(--border); background:#fff; color:var(--text-light);
    border-radius:20px; padding:7px 10px; font-size:12px; cursor:pointer;
}
.terms-presets button:hover { border-color:var(--accent); color:var(--accent-dark); }
.invoice-toast {
    position:fixed; right:22px; bottom:22px; z-index:1000;
    background:#24282b; color:#fff; padding:10px 15px; border-radius:8px;
    font-size:12px; opacity:0; transform:translateY(8px); pointer-events:none;
    transition:.2s ease;
}
.invoice-toast.show { opacity:1; transform:translateY(0); }
@media (max-width:650px) {
    .invoice-actions-top .btn { flex:initial; }
}
@media print {
    .site-header, .invoice-heading, .builder-panel, .preview-label { display:none !important; }
    .invoice-page { padding:0; background:#fff; }
    .builder-layout { display:block; }
    .preview-panel { position:static; padding:14px; }
    .invoice-paper { box-shadow:none; border:0; width:auto; }
}

/* Distinct invoice templates */
.invoice-paper.template-modern {
    border-radius:4px;
}

/* Classic — traditional, centered, formal */
.invoice-paper.template-classic {
    border:1px solid #d8d3ca;
    border-top:6px solid #24282b;
    border-radius:0;
    box-shadow:0 8px 24px rgba(32,37,43,.06);
    font-family: Georgia, 'Times New Roman', serif;
    color:#2b2926;
}
.invoice-paper.template-classic .paper-top {
    display:block;
    text-align:center;
    padding-bottom:22px;
    border-bottom:2px solid #24282b;
}
.invoice-paper.template-classic .paper-brand {
    display:block;
}
.invoice-paper.template-classic .paper-logo {
    margin:0 auto 10px;
    border-radius:0;
    background:#f4f1eb;
}
.invoice-paper.template-classic .paper-brand h3 {
    font-size:18px;
    margin-bottom:5px;
}
.invoice-paper.template-classic .paper-brand p {
    font-size:9px;
}
.invoice-paper.template-classic .paper-invoice-title {
    text-align:center;
    margin-top:18px;
}
.invoice-paper.template-classic .paper-invoice-title span {
    font-family: Georgia, 'Times New Roman', serif;
    font-size:28px;
    letter-spacing:3px;
}
.invoice-paper.template-classic .paper-meta {
    padding:20px 0;
    border-bottom:1px solid #d8d3ca;
}
.invoice-paper.template-classic .paper-items th {
    color:#514d47;
    border-bottom:2px solid #24282b;
    font-family: Arial, sans-serif;
}
.invoice-paper.template-classic .paper-items td {
    border-bottom:1px solid #e2ded7;
}
.invoice-paper.template-classic .paper-totals .grand-total {
    border-top:2px solid #24282b;
}
.invoice-paper.template-classic .paper-footer {
    border-top:1px solid #d8d3ca;
}

/* Minimal — clean, spacious, almost no visual chrome */
.invoice-paper.template-minimal {
    border:0;
    border-radius:0;
    box-shadow:none;
    padding:50px;
    color:#20252b;
}
.invoice-paper.template-minimal .paper-top {
    border-bottom:0;
    padding-bottom:42px;
}
.invoice-paper.template-minimal .paper-logo {
    background:transparent;
    border:1px solid #eceeec;
}
.invoice-paper.template-minimal .paper-invoice-title span {
    font-size:22px;
    font-weight:600;
    letter-spacing:1.5px;
}
.invoice-paper.template-minimal .paper-invoice-title strong {
    font-weight:500;
}
.invoice-paper.template-minimal .paper-meta {
    padding:0 0 30px;
}
.invoice-paper.template-minimal .paper-items th {
    color:#20252b;
    font-weight:600;
    border-bottom:1px solid #20252b;
}
.invoice-paper.template-minimal .paper-items td {
    padding:14px 5px;
    border-bottom:1px solid #f0f1ef;
}
.invoice-paper.template-minimal .paper-bottom {
    padding-top:34px;
}
.invoice-paper.template-minimal .paper-totals .grand-total {
    border-top:1px solid #20252b;
    padding-top:14px;
    font-size:12px;
}
.invoice-paper.template-minimal .paper-footer {
    margin-top:48px;
    border-top:0;
    padding-top:0;
}


/* v23: stronger separation without making the editor noisy */
.builder-panel{border-color:var(--frame-accent);}
.preview-pane{border:1.5px solid var(--frame-accent);border-radius:20px;background:#fff;}