/* Studio Ninja «New Quote» / «New Invoice» page (measured 2026-10-21 at 961px): 15px gutters, labels 14px/500 var(--sn-text,#18181b),
   36px square inputs var(--sn-border,#d4d4d8), section titles 20px/500, summary cards with a var(--sn-soft,#f4f4f5) header, light-green empty state. */
body[data-page=docedit] main{max-width:none;margin:0;padding:0 15px 60px}
.de-page{max-width:1100px;margin:0 auto}
.de-head{display:grid!important;grid-template-columns:1fr auto 1fr;align-items:center;margin:0 -15px 15px;padding:12px 15px;border-bottom:1px solid var(--sn-line)}
.de-head h1{font-size:18px;font-weight:500;margin:0;text-align:center}
.de-head .button{justify-self:start;font-size:12px;padding:5px 12px}
.de-ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.de-field{display:block;margin:0 0 18px}
.de-field>span{display:block;font-size:14px;font-weight:500;color:var(--sn-text);margin-bottom:8px}
.de-field>span:empty{display:none}
.de-field input,.de-field select,.de-field textarea{width:100%;box-sizing:border-box;height:36px;border:1px solid var(--sn-border);border-radius:0;padding:0 10px;font-size:13px;background:var(--sn-surface,#fff);color:var(--sn-text)}
.de-field textarea{height:84px;padding:8px 10px;resize:vertical;line-height:20px}
.de-field textarea.de-notes{height:168px}
.de-field input:focus,.de-field select:focus,.de-field textarea:focus{outline:none;border-color:var(--sn-green)}
.de-count{display:block;text-align:right;font-size:11px;color:var(--sn-chip,#a1a1aa);margin-top:2px}
.de-sum{border:1px solid var(--sn-border);border-radius:5px;margin:0 0 15px;overflow:hidden}
.de-sum h3{margin:0;background:var(--sn-soft);border-radius:5px 5px 0 0;padding:16px;font-size:14px;font-weight:500}
.de-sum h4{margin:0;padding:16px 16px 8px;font-size:14px;font-weight:500;border-top:1px solid var(--sn-line)}
.de-sum__name{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:15px;color:var(--sn-text)}
.de-sum__row{display:flex;gap:14px;padding:10px 16px 12px;align-items:flex-start;border-top:1px solid var(--sn-line)}
.de-sum h4+.de-sum__row{border-top:0}
.de-sum__row small{display:block;font-size:12px;font-weight:500;color:var(--sn-text)}
.de-sum__row span{font-size:13px;color:var(--sn-label);line-height:20px}
.de-h2{font-size:20px;font-weight:500;margin:30px 0 6px}
.de-sub{font-size:13px;color:var(--sn-label);margin:0 0 15px}
.de-muted{font-size:13px;color:var(--sn-muted)}
.de-empty{background:rgba(231,253,243,.5);border:1px solid #9ff9cd;border-radius:8px;padding:90px 15px;text-align:center;margin-bottom:24px}
.de-empty h3{font-size:20px;font-weight:500;margin:0 0 8px}
.de-empty p{max-width:300px;margin:0 auto 18px;font-size:13px;color:var(--sn-label)}
.de-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;position:relative;font-size:14px;padding:11px 16px;margin:0 0 12px}
.de-add i{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:#065f36;display:flex;align-items:center;justify-content:center}
.de-add i .de-ico{width:16px;height:16px;stroke:#fff}
.de-add--pill{display:inline-flex;width:auto;padding:11px 22px 11px 48px;margin:0}
.de-outline{width:100%;background:var(--sn-surface,#fff);border:1px solid var(--sn-border);font-size:14px;padding:11px 16px;margin:0 0 24px}
.de-item{border:1px solid var(--sn-border);border-radius:6px;margin:0 0 12px;overflow:hidden;background:var(--sn-surface,#fff)}
.de-item__bar{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;border-bottom:1px solid var(--sn-line)}
.de-grip{color:var(--sn-label);cursor:grab;display:flex}
.de-grip .de-ico{stroke-width:3}
.de-item__tools{display:flex;gap:4px}
.de-item__tools button{border:0;background:none;padding:4px;box-shadow:none;color:var(--sn-label);min-height:0}
.de-item__tools button:hover{color:var(--sn-text);background:var(--sn-soft)}
.de-item__tools .de-ico{width:16px;height:16px}
.de-item__head{padding:14px 14px 10px;border-bottom:1px solid var(--sn-line)}
.de-item__head b{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.de-chip{display:inline-block;background:var(--ph-post-soft,#e0f2fe);color:#0369a1;border-radius:360px;padding:2px 8px;font-size:12px;line-height:16px;margin-right:4px}
.de-chip--disc{background:var(--ph-prod-soft,#fef3c7);color:#92400e}
.de-item__desc{padding:14px;font-size:13px;color:var(--sn-label);border-bottom:1px solid var(--sn-line);overflow-wrap:anywhere}
.de-item__sum{background:var(--sn-soft);padding:10px 14px}
.de-item__sum>div{display:flex;justify-content:space-between;font-size:13px;line-height:22px}
.de-item__sum>div:last-child{font-size:12px;color:var(--sn-label)}
.de-totals{border-top:1px solid var(--sn-line);margin-top:6px}
.de-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px solid var(--sn-line);font-size:13px}
.de-row--strong{font-size:16px;font-weight:500}
.de-link{border:0;background:none;padding:0;box-shadow:none;color:#0ea5e9;font-size:13px;font-weight:400;min-height:0}
.de-link-val{color:#0ea5e9}
.de-inst{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--sn-line)}
.de-inst b{display:block;font-size:13px}
.de-inst small{display:block;font-size:12px;color:var(--sn-label);margin-top:6px}
.de-inst__date{display:inline-block;border:1px solid var(--sn-border);padding:7px 10px;font-size:13px;margin-top:4px;min-width:140px}
.de-inst__amt{text-align:right}
.de-inst__amt b{font-size:14px;margin-top:4px}
.de-pill{display:inline-block;background:var(--sn-soft);color:var(--sn-label);border-radius:4px;padding:2px 8px;font-size:12px}
.de-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sn-text);margin:12px 0}
.de-check input{width:16px;height:16px;margin:0;accent-color:var(--sn-green)}
.de-error{color:#dc2626;font-style:italic;font-size:13px;text-align:center;min-height:18px;margin:16px 0 0}
.de-actions{display:flex;flex-direction:column;align-items:center;gap:12px;border-top:1px solid var(--sn-line);padding-top:24px;margin-top:8px}
.de-actions button{width:min(340px,100%);font-size:14px;padding:11px 16px;margin:0}
.de-actions .de-cancel{background:var(--sn-soft);border-color:var(--sn-border)}
.de-itemtotal{background:var(--sn-soft);border-radius:4px;padding:12px 14px;margin-top:4px}
.de-itemtotal>div{display:flex;justify-content:space-between;font-size:13px;line-height:24px}
.de-itemtotal>div:first-child{font-size:12px}
.de-back-pill{margin-top:16px;font-size:12px;padding:5px 12px}
@media(min-width:992px){
 body[data-page=docedit] main{padding:0 30px 60px}
 .de-head{margin:0 -30px 24px;padding:16px 30px}
}
/* Quote / invoice page (Studio Ninja, 961px). */
body[data-page=documents] main:has(.de-view){max-width:none;margin:0;padding:0 0 60px}
.de-view .de-head{margin:0;padding:12px 15px}
.de-head h1 small{display:block;font-size:12px;font-weight:400;color:var(--sn-muted);margin-top:2px}
.de-pdf,.de-round{justify-self:end;width:30px;height:30px;border-radius:50%;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--sn-border);background:var(--sn-surface,#fff)}
.de-pdf .de-ico,.de-round .de-ico{width:15px;height:15px}
.de-head a.de-pdf{justify-self:end!important;min-width:0;color:inherit;text-decoration:none}
.de-total{text-align:center;padding:16px 15px 20px;border-bottom:1px solid var(--sn-line)}
.de-total small{display:block;font-size:12px;color:var(--sn-label);margin-bottom:6px}
.de-total b{font-size:28px;font-weight:500;color:var(--sn-green)}
.de-pays{border-bottom:1px solid var(--sn-line)}
.de-pay{display:flex;align-items:center;gap:16px;padding:12px 15px;border-bottom:1px solid var(--sn-line)}
.de-pay>div{flex:1}
.de-pay b{display:block;font-size:13px;font-weight:500}
.de-pay small{display:block;font-size:12px;color:var(--sn-label)}
.de-paychip{display:inline-block;min-width:58px;text-align:center;background:var(--sn-soft);color:var(--sn-label);border-radius:4px;padding:3px 8px;font-size:12px}
.de-paychip--paid{background:var(--ok-soft,#dcfce7);color:#166534}
.de-balance{display:flex;gap:16px;padding:12px 15px;font-size:12px;color:var(--sn-label);align-items:center}
.de-balance b{font-size:13px;color:var(--sn-text);font-weight:500}
.de-paydots>summary,.de-docdots>summary{font-size:20px}
.de-bar{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--sn-line)}
.de-bar__right{display:flex;gap:8px;align-items:center}
.de-send{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;background:var(--sn-surface,#fff)}
.de-send .de-ico{width:14px;height:14px}
.de-docdots>summary{width:30px;height:30px;border:1px solid var(--sn-border);border-radius:50%;font-size:16px}
.de-docdots .sn-menu{right:0;min-width:230px}
.de-paper{background:var(--sn-soft);padding:15px}
.de-pv{background:var(--sn-surface,#fff);border-radius:4px;box-shadow:0 1px 4px #0000001a;padding:24px 15px;text-align:left}
.de-pv>h2{text-align:center;font-size:20px;font-weight:400;color:var(--sn-label);margin:0 0 8px}
.de-badge{display:table;margin:0 auto 24px;background:var(--sn-label,#3f3f46);color:#fff;border-radius:360px;padding:3px 12px;font-size:11px;font-weight:500;letter-spacing:.02em}
.de-badge--ok{background:var(--sn-green,#097c43)}
.de-badge--sent{background:#0284c7}
.de-badge--part{background:#d97706}
.de-pv-grid{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--sn-text);padding-bottom:16px;border-bottom:1px solid var(--sn-line)}
.de-pv-grid small{display:block;color:var(--sn-label);margin:10px 0 2px}
.de-pv-grid small:first-child{margin-top:0}
.de-pv-grid b,.de-pv-grid span{display:block;line-height:18px}
.de-pv-client{margin-top:12px}
.de-pv-ids{text-align:right}
.de-pv-intro{font-size:13px;color:var(--sn-label);margin:16px 0}
.de-pv-item{padding:14px 0;border-bottom:1px solid var(--sn-line)}
.de-pv-item__top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.de-pv-item p{font-size:12px;color:var(--sn-label);margin:10px 0 0}
.de-pv-tot>div{display:flex;justify-content:space-between;padding:10px 0;font-size:13px;border-bottom:1px solid var(--sn-line)}
.de-pv-total{font-size:15px!important}
.de-pv-paid span:last-child{color:#15803d}
.de-pv h3{font-size:14px;font-weight:500;margin:20px 0 4px}
.de-pv-inst{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;padding:6px 0}
.de-pv-inst b{font-size:13px}
.de-pv-att{border-top:1px solid var(--sn-line);margin-top:14px;padding-top:6px}
.de-pv-att h4{font-size:13px;font-weight:500;margin:12px 0 2px}
.de-pv-att p{font-size:12px;color:var(--sn-label);margin:0}
.de-pv-notes{font-size:12px;color:var(--sn-label);border-top:1px solid var(--sn-line);margin-top:14px;padding-top:12px}
.de-pv-auto{font-size:12px;color:var(--sn-label);text-align:center;margin:20px 0 0}
.de-pv-send{display:block;width:min(340px,100%);margin:20px auto 0;font-size:14px;padding:11px 16px}
.de-more{margin:20px 15px}
.de-more>summary{cursor:pointer;font-size:13px;color:var(--sn-label);padding:10px 0}
.de-info{background:var(--ph-post-soft,#e0f2fe);color:#0c4a6e;border-radius:4px;padding:10px 12px;font-size:13px;margin:4px 0 0}
.de-info a{color:#0369a1}
#modal.sn-confirm-form{width:min(366px,92vw)}
@media(min-width:992px){
 body[data-page=documents] main:has(.de-view){padding:0 30px 60px}
 .de-view .de-head{margin:0 -30px;padding:16px 30px}
 .de-paper{padding:30px}
 .de-pv{max-width:800px;margin:0 auto;padding:40px}
}
#modal.sn-confirm footer .sn-danger-btn{background:#dc2626;border-color:#dc2626;color:#fff}
.de-warn{margin:12px 15px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:6px;padding:10px 12px;font-size:13px}
.de-paychip--off{background:var(--sn-line,#e4e4e7);color:#52525b}
.de-pay--writeoff small{overflow-wrap:anywhere}
.de-info--warn{background:var(--ph-prod-soft,#fef3c7);color:#78350f}
#modal:has(.de-payform) .sn-danger-btn,#modal.sn-confirm-form footer .sn-danger-btn{background:#dc2626;border-color:#dc2626;color:#fff}
/* Small dialogs (payment, write-off, choosers). Safari 26 drew the payment dialog with no visible box when its height
   was fit-content while the form inside asked for 100% of it (forms-sn.css). Here the height is plain auto (no percentages
   inside); with bottom:auto it follows the content instead of stretching, and top 50% + translate centres it. */
#modal.sn-small{height:auto!important;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);top:50%;bottom:auto;margin:0 auto!important;transform:translateY(-50%);overflow:auto}
#modal.sn-small #form{display:block;height:auto!important}
#modal.sn-small #fields{flex:none;max-height:none;overflow:visible}
.de-balance .de-paybtn{margin-left:auto;font-size:13px;padding:7px 14px}
.de-menu-note{display:block;padding:9px 16px;font-size:12px;color:var(--sn-muted);max-width:240px}
.de-voided{padding:4px 15px 12px;font-size:12px;color:var(--sn-label)}
.de-voided>summary{cursor:pointer;padding:6px 0}
.de-voided__row{padding:6px 0;border-top:1px solid var(--sn-line)}
.de-voided__row small{display:block;color:var(--sn-muted)}
.de-balance__acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.de-balance__acts .de-paybtn{margin-left:0}
.de-planbtn{font-size:13px;padding:7px 14px;background:var(--sn-surface,#fff)}
#modal.de-plan-modal{width:min(620px,96vw)}
.de-plan__head,.de-plan__row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,.8fr) 32px;gap:8px;align-items:center}
.de-plan__head{font-size:12px;font-weight:500;color:var(--sn-label);margin-bottom:6px}
.de-plan__row{margin-bottom:8px}
.de-plan__row input{width:100%!important;height:36px;border:1px solid var(--sn-border);border-radius:0;padding:0 8px;font-size:13px;box-sizing:border-box}
.de-plan__del{border:0;background:none;font-size:20px;color:var(--sn-muted);padding:0;box-shadow:none}
.de-plan__add{margin:4px 0 10px}
.de-plan__sum{font-size:13px;color:#b45309;margin:0}
.de-plan__sum--ok{color:var(--sn-green)}
@media(max-width:600px){.de-plan__head{display:none}.de-plan__row{grid-template-columns:1fr 1fr 32px}.de-plan__row [name=planName]{grid-column:1/-1}}
/* Cmd+P on a quote/invoice page prints only the A4 document, without the app around it or its buttons. */
@page{size:A4;margin:14mm}
@media print{
body:has(.de-view) header,body:has(.de-view) #notice-panel,body:has(.de-view) .de-view>:not(.de-paper),body:has(.de-view) .de-pv button,body:has(.de-view) .de-pv .button,body:has(.de-view) #modal,body:has(.de-view) .toast{display:none!important}
body:has(.de-view){background:var(--sn-surface,#fff)!important}
body:has(.de-view) main,body:has(.de-view) .de-view,body:has(.de-view) .de-paper{margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;background:var(--sn-surface,#fff)!important;max-width:none!important;width:auto!important}
body:has(.de-view) .de-pv{box-shadow:none!important;border:0!important;margin:0!important}
}