/* ========= SCOPE: only .toi-invoice ========= */
.toi-invoice{ font-family:'Poppins',sans-serif; color:#26272C; position:relative; isolation:isolate; }
.toi-invoice *{ box-sizing:border-box; }
.toi-invoice .wrap{ max-width:950px; margin:2rem auto; background:#fff; border-radius:12px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05); overflow:hidden; }

/* toolbar */
.toi-invoice .toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding:24px; background:#f6f7f9; border-bottom:1px solid #e5e7eb; }
.toi-invoice .title { font-size:28px; font-weight:600; margin:0; color:#26272C; }
.toi-invoice .toolbar .controls{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.toi-invoice .label{ font-size:13px; color:#6b7280; margin-right:6px; }
.toi-invoice .select,.toi-invoice .input,.toi-invoice .textarea{
  width:100%; padding:10px 12px; border:1px solid #d1d5db; border-radius:8px; background:#fff; font-size:14px;
  outline:none; transition:border-color .2s,box-shadow .2s; }
.toi-invoice .select:focus,.toi-invoice .input:focus,.toi-invoice .textarea:focus{
  border-color:#E60000; box-shadow:0 0 0 2px rgba(230,0,0,.25); }
.toi-invoice .btn{ border:0; border-radius:8px; padding:10px 12px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.toi-invoice .btn.gray{ background:#4b5563; color:#fff; } .toi-invoice .btn.gray:hover{ opacity:.9; }
.toi-invoice .btn.primary{ background:#E60000; color:#fff; } .toi-invoice .btn.primary:hover{ opacity:.9; }

/* content */
.toi-invoice .content{ padding:32px; background:#fff; }

/* header */
.toi-invoice .header{ display:flex; gap:24px; flex-wrap:wrap; justify-content:space-between; margin-bottom:32px; }
.toi-invoice .logo-uploader{ width:120px; height:120px; border:2px dashed #d1d5db; border-radius:8px; background:#f9fafb;
  display:flex; align-items:center; justify-content:center; color:#6b7280; cursor:pointer; overflow:hidden; text-align:center; }
.toi-invoice .logo-uploader img{ max-width:100%; max-height:100%; object-fit:contain; display:none; }
.toi-invoice .logo-uploader.has-img span{ display:none; } .toi-invoice .logo-uploader.has-img img{ display:block; }
.toi-invoice .inv-right{ flex:1 1 320px; text-align:right; min-width:260px; }
.toi-invoice .inv-title{ font-size:28px; font-weight:700; letter-spacing:.04em; }
.toi-invoice .invno-block{ display:inline-block; margin-top:8px; text-align:center; }
.toi-invoice .invno-block label{ display:block; font-size:12px; color:#6b7280; margin-bottom:6px; text-align:center; }
.toi-invoice .inv-input{ width:160px; max-width:100%; }

/* Mobile tweaks */
@media (max-width:480px){
  .toi-invoice .inv-right{ text-align:left; min-width:0; }
  .toi-invoice .invno-block{ text-align:left; }
  .toi-invoice .inv-input{ width:100%; }
}

/* boxes */
.toi-invoice .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:768px){ .toi-invoice .grid-2{ grid-template-columns:1fr; } }
.toi-invoice .box{ border:1px solid #d1d5db; border-radius:10px; background:#fff; padding:16px; }

/* meta */
.toi-invoice .meta{ border:1px solid #d1d5db; border-radius:10px; background:#fff; padding:16px; margin:24px 0; }
.toi-invoice .meta .grid-4{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
@media (max-width:900px){ .toi-invoice .meta .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ .toi-invoice .meta .grid-4{ grid-template-columns:1fr; } }

/* table */
.toi-invoice .table-wrap{ overflow-x:auto; }
.toi-invoice table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
.toi-invoice thead th{ background:#111827; color:#fff; font-size:13px; padding:12px; text-align:left; font-weight:600; }
.toi-invoice tbody td{ border-bottom:1px solid #e5e7eb; padding:6px; vertical-align:top; }
.toi-invoice .table-input{ width:100%; padding:8px; border:0; background:transparent; font-size:14px; }
.toi-invoice .table-input:focus{ outline:none; background:#fee2e2; border-radius:6px; }
.toi-invoice .amount{text-align:right; font-weight:600;}
.toi-invoice .del-btn{ background:transparent; border:0; color:#9ca3af; cursor:pointer; padding:6px; }
.toi-invoice .del-btn:hover{ color:#ef4444; }
.toi-invoice .add-btn{ margin-top:12px; }

/* summary */
.toi-invoice .summary{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
@media (max-width:900px){ .toi-invoice .summary{ grid-template-columns:1fr; } }
.toi-invoice .subbox{ border:1px solid #d1d5db; border-radius:8px; background:#f9fafb; padding:12px; }

/* rows */
.toi-invoice .row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.toi-invoice .total{ display:flex; align-items:center; justify-content:space-between; font-size:20px; font-weight:700; padding-top:8px; border-top:1px solid #e5e7eb; margin-top:8px; }
.toi-invoice .balance{ display:flex; align-items:center; justify-content:space-between; font-size:22px; font-weight:800; color:#E60000; background:#ffe6e6; padding:12px; border-radius:10px; }

/* bold labels */
.toi-invoice .row .lbl,.toi-invoice .total .lbl,.toi-invoice .balance .lbl{ font-weight:700; }

/* toast */
.toi-invoice .toast{ position:absolute; top:12px; left:50%; transform:translateX(-50%);
  background:#22c55e; color:#fff; font-weight:600; padding:10px 16px; border-radius:8px;
  z-index:9999; opacity:0; visibility:hidden; transition:opacity .25s,visibility .25s; }
.toi-invoice .toast.show{ opacity:1; visibility:visible; }

/* helpers */
.toi-invoice .box, .toi-invoice .meta, .toi-invoice .summary{ overflow:visible; }