/* ═══ Invoice Generator Pro — CSS ═══ */
*{box-sizing:border-box}
.ipro-wrap{font-family:var(--ipro-font,Arial,sans-serif);font-size:14px;color:#222;max-width:1100px;margin:0 auto;padding:10px}

/* ── TOP BAR ── */
.ipro-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px;flex-wrap:wrap}
.ipro-tl{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ipro-tr{display:flex;gap:6px}
.ipro-btn{padding:8px 16px;border:none;border-radius:5px;cursor:pointer;font-size:13px;font-weight:700;line-height:1;transition:opacity .15s}
.ipro-btn-blue{background:#2196F3!important;color:#fff!important}
.ipro-btn-orange{background:#FF6B35!important;color:#fff!important}
.ipro-btn-gray{background:#555!important;color:#fff!important}
.ipro-btn-purple{background:#8e44ad!important;color:#fff!important}
.ipro-btn:hover{opacity:.85}
.ipro-cur-row{margin-bottom:10px}
.ipro-cur-row select{width:260px!important;max-width:100%;padding:7px 10px;border:1px solid #ccc;border-radius:6px;font-size:13px;background:#fff;color:#333}

/* ── DESIGN PANEL ── */
.ipro-design-panel{
  background:#fff;border:1.5px solid #e0e0e0;border-radius:10px;
  padding:16px 18px;margin-bottom:14px;
  display:none; /* hidden by default */
}
.ipro-design-panel.open{display:block}
.ipro-design-title{font-size:13px;font-weight:700;color:#333;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.ipro-design-title svg{width:16px;height:16px}

/* theme presets row */
.ipro-themes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ipro-theme-btn{
  padding:6px 14px;border-radius:20px;cursor:pointer;font-size:12px;font-weight:700;
  border:2px solid transparent;transition:all .15s;white-space:nowrap;
}
.ipro-theme-btn:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.15)}
.ipro-theme-btn.active{border-color:#333!important;box-shadow:0 0 0 3px rgba(0,0,0,.1)}

/* controls grid */
.ipro-design-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}
.ipro-design-item{display:flex;flex-direction:column;gap:4px}
.ipro-design-item label{font-size:11px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.04em}
.ipro-design-item input[type=color]{width:100%;height:34px;border:1.5px solid #ddd;border-radius:6px;cursor:pointer;padding:2px}
.ipro-design-item select{width:100%;padding:6px 8px;border:1.5px solid #ddd;border-radius:6px;font-size:12px;background:#fff;cursor:pointer}

/* design action buttons */
.ipro-design-actions{display:flex;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid #eee}

/* ── PAPER WRAP ── */
.ipro-pwrap{transform-origin:top left;transition:transform .2s}
.ipro-paper{
  background:#fff;border:1px solid #ddd;border-radius:6px;padding:24px;color:#222;
  font-family:var(--ipro-font,Arial,sans-serif);
}

/* ── HEADER ── */
.ipro-hdr{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:16px;margin-bottom:20px}
.ipro-logo-area{margin-bottom:10px}
.ipro-logo-btn{display:inline-block;padding:8px 14px;border:2px dashed #bbb;border-radius:6px;color:#888;font-size:12px;cursor:pointer}
.ipro-logo-btn:hover{border-color:#2196F3;color:#2196F3}
.ipro-logo-img{max-width:120px;max-height:80px;cursor:pointer;display:none}

/* floating label fields */
.ipro-field{position:relative;margin-bottom:10px}
.ipro-elbl{
  position:absolute;top:-8px;left:8px;background:#fff;padding:0 4px;
  font-weight:700;font-size:11px;color:var(--ipro-label-color,#555);
  z-index:1;outline:none;border-bottom:1px dashed transparent;line-height:1.2;
}
.ipro-elbl:focus{border-bottom-color:#2196F3}
.ipro-lbl{
  position:absolute;top:-8px;left:8px;background:#fff;padding:0 4px;
  font-weight:700;font-size:11px;color:var(--ipro-label-color,#555);
  z-index:1;pointer-events:none;line-height:1.2;
}
.ipro-inp{
  width:100%!important;padding:8px 10px!important;
  border:1.5px solid #c0c0c0!important;border-radius:7px!important;
  font-size:13px!important;font-family:inherit;color:#333!important;
  background:#fff!important;box-sizing:border-box!important;transition:border-color .2s;
}
.ipro-inp:focus{outline:none!important;border-color:#2196F3!important;box-shadow:0 0 0 2px rgba(33,150,243,.12)!important}
textarea.ipro-inp{resize:vertical;min-height:58px}

/* invoice title */
.ipro-title{
  font-size:32px;font-weight:900;text-align:center;letter-spacing:.05em;
  color:var(--ipro-title-color,#111);outline:none;border-bottom:2px dashed transparent;
  margin-bottom:14px;display:block;font-family:inherit;
}
.ipro-title:focus{border-bottom-color:#2196F3}
.ipro-meta{display:flex;flex-direction:column;gap:10px}

/* ── ITEMS TABLE ── */
.ipro-items{width:100%;border-collapse:collapse;margin-bottom:10px}
.ipro-items thead tr{background:var(--ipro-header-bg,#2d3748);color:var(--ipro-header-text,#fff)}
.ipro-items th{padding:9px 10px;text-align:left;font-size:13px;font-weight:700;outline:none;cursor:text}
.ipro-ith-d{width:48%}.ipro-ith-q{width:13%}.ipro-ith-p{width:14%}
.ipro-ith-t{width:16%;text-align:right!important}.ipro-ith-a{width:9%}
.ipro-items td{padding:5px 7px;border-bottom:1px solid #eee;vertical-align:middle}
.ipro-items td:nth-child(4){text-align:right}
.ipro-items td:nth-child(5){text-align:center}
.ipro-idesc{width:100%;border:1.5px solid #c0c0c0!important;border-radius:7px!important;padding:6px 9px;font-size:13px;font-family:inherit;resize:vertical;min-height:36px;box-sizing:border-box;background:#fff}
.ipro-idesc:focus{outline:none;border-color:#2196F3!important}
.ipro-inum{width:100%;border:1.5px solid #c0c0c0!important;border-radius:7px!important;padding:5px 7px;font-size:13px;text-align:center;font-family:inherit;box-sizing:border-box;background:#fff}
.ipro-inum:focus{outline:none;border-color:#2196F3!important}
.ipro-rtotal{font-weight:700;font-size:13px}
.ipro-rmbtn{background:#e53e3e!important;color:#fff!important;border:none;border-radius:5px;padding:5px 10px;cursor:pointer;font-size:12px;font-weight:700}
.ipro-rmbtn:hover{background:#c53030!important}
.ipro-addbtn{background:var(--ipro-accent,#38a169)!important;color:#fff!important;border:none;border-radius:5px;padding:8px 18px;cursor:pointer;font-size:13px;font-weight:700}
.ipro-addbtn:hover{opacity:.88}

/* ── BOTTOM ── */
.ipro-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;margin-top:8px}
.ipro-notes{min-height:100px;resize:vertical;width:100%!important;padding:8px 10px!important;border:1.5px solid #c0c0c0!important;border-radius:7px!important;font-size:13px;font-family:inherit;color:#333;background:#fff;box-sizing:border-box}
.ipro-notes:focus{outline:none;border-color:#2196F3!important}
.ipro-totals{width:100%}
.ipro-trow{display:grid!important;grid-template-columns:1fr 90px 110px!important;align-items:center!important;padding:7px 0!important;border-bottom:1px solid #eee!important;gap:0!important;background:transparent!important}
.ipro-tlbl{font-size:13px!important;color:#444!important;outline:none;cursor:text;border-bottom:1px dashed transparent!important;min-width:0;width:auto!important;flex:unset!important}
.ipro-tlbl:focus{border-bottom-color:#2196F3!important}
.ipro-wrap .ipro-totals input.ipro-tinp,.ipro-wrap input.ipro-tinp{
  width:80px!important;max-width:80px!important;border:1.5px solid #c0c0c0!important;
  border-radius:7px!important;padding:4px 6px!important;font-size:13px!important;
  text-align:center!important;font-family:inherit!important;justify-self:center;
  box-sizing:border-box!important;display:block!important;margin:0 auto!important;
  background:#fff!important;color:#333!important;
}
.ipro-wrap .ipro-totals input.ipro-tinp:focus,.ipro-wrap input.ipro-tinp:focus{outline:none!important;border-color:#2196F3!important}
.ipro-tval{font-weight:700!important;font-size:13px!important;text-align:right!important;white-space:nowrap}
.ipro-trow-tot{border-top:2px solid var(--ipro-accent,#333)!important;border-bottom:2px solid var(--ipro-accent,#333)!important;padding:8px 0!important;margin-top:3px}
.ipro-trow-tot .ipro-tlbl{font-weight:700!important;font-size:14px!important;color:#111!important}
.ipro-trow-tot .ipro-tval{font-size:14px!important}
.ipro-trow-bal{border-bottom:none!important;padding-top:7px!important}
.ipro-trow-bal .ipro-tlbl{font-weight:700!important;color:#111!important}
.ipro-trow-bal .ipro-tval{font-size:14px!important}
.ipro-qr-box{margin-top:16px;padding:12px;border:1px solid #e0e0e0;border-radius:8px;background:#fafafa;text-align:center;min-height:60px}

@media(max-width:700px){
  .ipro-hdr{grid-template-columns:1fr}.ipro-hdr-c{order:-1}
  .ipro-bottom{grid-template-columns:1fr}
  .ipro-title{font-size:24px}
  .ipro-topbar{flex-direction:column}.ipro-tr{align-self:flex-end}
  .ipro-design-grid{grid-template-columns:1fr 1fr}
}
@media print{
  .ipro-topbar,.ipro-cur-row,.ipro-design-panel,.ipro-logo-btn,.ipro-addbtn,.ipro-rmbtn{display:none!important}
  .ipro-wrap{padding:0}.ipro-paper{border:none;box-shadow:none;padding:0}
}