/* Invoice Generator — module-specific CSS, basis: invoice-generator.css v2.6.4 */
/* Invoice Generator – Scoped CSS v3 (Final) */
#invgen *,#invgen *::before,#invgen *::after{box-sizing:border-box;}
#invgen{margin:0;padding:0;font-family:'Plus Jakarta Sans',system-ui,sans-serif;line-height:1.5;font-size:16px;color:#1e293b;}
#invgen ::placeholder{color:#c8d0dc;opacity:1;}
#invgen ::-webkit-input-placeholder{color:#c8d0dc;}
#invgen ::-moz-placeholder{color:#c8d0dc;opacity:1;}

/* Container */
#invgen .invgen-container{max-width:1200px;margin:0 auto;background:white;border-radius:0;box-shadow:0 4px 24px rgba(0,0,0,0.07);overflow:hidden;}

/* Header */
#invgen .invgen-header{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:22px 28px;text-align:center;}
#invgen .invgen-header h1{font-size:1.35rem;font-weight:700;margin:0;color:#f8fafc;letter-spacing:-0.01em;}
#invgen .invgen-header p{font-size:0.8rem;color:#94a3b8;margin:6px 0 0;}

/* Form */
#invgen .invgen-form{padding:24px;}
#invgen .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;}
#invgen .form-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;display:flex;flex-direction:column;}
#invgen .section-title{font-size:0.9rem;font-weight:700;color:#0f172a;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid #e2e8f0;}
#invgen .grid-half{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
#invgen .field-group{display:flex;flex-direction:column;}
#invgen .field-group.span2{grid-column:span 2;}
#invgen .field-group label{font-size:0.67rem;font-weight:700;color:#64748b;margin-bottom:5px;text-transform:uppercase;letter-spacing:0.4px;}
#invgen .field-group label .req{color:#ef4444;margin-left:2px;}
#invgen .field-group input,#invgen .field-group textarea,#invgen .field-group select{width:100%;padding:9px 11px;border:1px solid #e2e8f0;border-radius:8px;font-size:0.875rem;font-family:inherit;background:#fafbfc;transition:border-color .15s,box-shadow .15s;color:#1e293b;margin:0;}
#invgen .field-group input:focus,#invgen .field-group textarea:focus,#invgen .field-group select:focus{outline:none;border-color:#2563a8;box-shadow:0 0 0 3px rgba(37,99,168,0.1);background:white;}
#invgen .field-group textarea{resize:vertical;}

/* Validation States */
#invgen .field-group input.input-ok{border-color:#059669;}
#invgen .field-group input.input-err{border-color:#ef4444;}
#invgen .wa-hint{font-size:0.7rem;margin-top:3px;color:#94a3b8;}
#invgen .wa-hint.err{color:#ef4444;}
#invgen .wa-hint.ok{color:#059669;}

/* File Input Row */
#invgen .logo-row{display:flex;align-items:center;gap:8px;position:relative;}
#invgen .logo-row input[type="file"]{flex:1;font-size:0.8rem;}
#invgen .browse-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;background:#0f172a;color:white;border-radius:7px;font-size:0.78rem;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s;}
#invgen .browse-btn:hover{background:#1e293b;}
#invgen .logo-hint{font-size:0.7rem;color:#94a3b8;flex-shrink:0;}

/* Hints */
#invgen .website-hint{font-size:0.7rem;color:#94a3b8;margin-top:5px;}
#invgen .website-hint a{color:#2563eb;text-decoration:none;}
#invgen .website-hint a:hover{text-decoration:underline;}

/* Items Section */
#invgen .items-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:20px;}
#invgen .tbl-wrap{overflow-x:auto;}
#invgen .item-table{width:100%;border-collapse:collapse;margin:12px 0 8px;min-width:480px;}
#invgen .item-table th{background:#f8fafc;font-size:0.72rem;font-weight:700;text-align:left;padding:10px 8px;color:#475569;border-bottom:2px solid #e2e8f0;text-transform:uppercase;letter-spacing:0.3px;}
#invgen .item-table td{padding:8px;border-bottom:1px solid #f1f5f9;vertical-align:middle;}
#invgen .item-table input{width:100%;padding:7px 8px;border:1px solid #e2e8f0;border-radius:6px;font-size:0.85rem;font-family:inherit;background:#fafbfc;color:#1e293b;}
#invgen .item-table input:focus{outline:none;border-color:#2563a8;background:white;}
#invgen .i-total-cell{text-align:right;font-weight:600;font-size:0.85rem;color:#0f172a;white-space:nowrap;}
#invgen .btn-del{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:none;border:none;cursor:pointer;color:#ef4444;font-size:17px;line-height:1;transition:color .15s,transform .12s;}
#invgen .btn-del:hover{color:#dc2626;transform:scale(1.15);}
#invgen .btn-add{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;width:fit-content;background:#fafbfc;color:#94a3b8;border:1.5px dashed #e9edf2;padding:7px 14px;border-radius:8px;cursor:pointer;font-size:0.8rem;font-weight:600;margin-top:8px;font-family:inherit;transition:border-color .15s,color .15s,background .15s;}
#invgen .btn-add:hover{color:#2563a8;border-color:#c7d6e8;background:#f4f8ff;}

/* Finance Section */
#invgen .finance-section{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:20px;}
#invgen .finance-inner{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
#invgen .finance-inner .span2{grid-column:span 2;}
#invgen .total-display{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:2px solid #e2e8f0;font-size:1.15rem;font-weight:700;color:#0f172a;}

/* Action Buttons */
#invgen .action-buttons{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
#invgen .btn-gen{flex:1;min-width:120px;padding:12px 18px;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-size:0.88rem;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:7px;transition:transform .1s,filter .1s;}
#invgen .btn-gen:hover{transform:translateY(-1px);filter:brightness(1.07);}
#invgen .btn-gen:active{transform:translateY(0);}
#invgen .btn-invoice{background:#0f172a;color:white;}
#invgen .btn-receipt{background:#059669;color:white;}
#invgen .btn-delivery{background:#d97706;color:white;}

/* Bottom Links */
#invgen .bottom-links{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid #e2e8f0;margin-bottom:16px;}
#invgen .reset-link,#invgen .history-link{color:#64748b;text-decoration:none;font-size:0.83rem;cursor:pointer;background:none;border:none;font-family:inherit;}
#invgen .reset-link:hover{color:#ef4444;}
#invgen .history-link{color:#0f172a;font-weight:600;}
#invgen .history-link:hover{text-decoration:underline;}
#invgen .status{margin-top:12px;text-align:center;font-size:0.85rem;padding:8px;border-radius:8px;min-height:28px;}

/* Modal */
.invgen-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.45);z-index:99999;overflow-y:auto;padding:0;}
.invgen-modal-content{
  background:white;
  max-width:900px;
  width:calc(100% - 32px);
  margin:16px auto;
  border-radius:16px;
  padding:20px;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  max-height:calc(100vh - 80px);
}
.invgen-modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:2px solid #e2e8f0;
  flex-shrink:0;
}
.invgen-modal-header h3{font-size:0.95rem;font-weight:700;margin:0;}
.invgen-close-modal{cursor:pointer;font-size:22px;color:#64748b;background:none;border:none;flex-shrink:0;}

/* Scroll hint */
.invgen-scroll-hint{
  display:none;
  font-size:0.7rem;
  color:#94a3b8;
  text-align:right;
  margin:0 0 8px 0;
  padding-right:2px;
  flex-shrink:0;
}

/* History wrap — scroll container dalam modal */
.invgen-history-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid #e2e8f0;
  border-radius:8px;
  flex:1;
  min-height:200px;
  position:relative;
}

/* Scroll hint gradient — hanya di mobile */
@media(max-width:600px){
  .invgen-history-wrap::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:24px;
    background:linear-gradient(to right,transparent,rgba(255,255,255,0.95));
    pointer-events:none;
    border-radius:0 8px 8px 0;
  }
}

/* History table */
.invgen-history-table{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}

.invgen-history-table th,.invgen-history-table td{
  padding:9px 10px;
  text-align:left;
  border-bottom:1px solid #e2e8f0;
  font-size:0.82rem;
  white-space:nowrap;
}

.invgen-history-table th{
  background:#f8fafc;
  font-weight:700;
  font-size:0.72rem;
  text-transform:uppercase;
  position:sticky;
  top:0;
  z-index:10;
}

.invgen-history-table tbody tr:last-child td{border-bottom:none;}

/* Action buttons in history */
.invgen-action-links{white-space:nowrap;padding:8px 10px;}

.hist-btn{
  display:inline-block;
  padding:3px 0;
  width:68px;
  text-align:center;
  border-radius:5px;
  border:1.5px solid;
  font-size:0.72rem;
  font-weight:600;
  cursor:pointer;
  background:white;
  font-family:inherit;
  margin-right:3px;
  transition:background .12s,color .12s;
}

.hist-btn:last-child{margin-right:0;}

.hist-btn-inv{border-color:#2563a8;color:#2563a8;}
.hist-btn-inv:hover,.hist-btn-inv:active{background:#2563a8;color:white;}

.hist-btn-rcp{border-color:#059669;color:#059669;}
.hist-btn-rcp:hover,.hist-btn-rcp:active{background:#059669;color:white;}

.hist-btn-sj{border-color:#d97706;color:#d97706;}
.hist-btn-sj:hover,.hist-btn-sj:active{background:#d97706;color:white;}

/* Modal footer hint */
.invgen-modal-footer-hint{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #e2e8f0;
  font-size:0.78rem;
  color:#475569;
  text-align:center;
  flex-shrink:0;
}

.invgen-modal-footer-hint a{color:#2563eb;text-decoration:none;font-weight:600;}
.invgen-modal-footer-hint a:hover{text-decoration:underline;}

/* Engagement */
#invgen .engage-section{margin:0 24px 24px;border:1px solid #e2e8f0;border-radius:12px;padding:20px 24px;background:linear-gradient(135deg,#f8fafc 0%,#f1f5f9 100%);text-align:center;}
#invgen .engage-title{font-size:0.92rem;font-weight:700;color:#0f172a;margin-bottom:16px;}
#invgen .engage-title-br{display:none;}
#invgen .engage-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
#invgen .engage-col{vertical-align:middle;background:white;border-radius:10px;padding:16px;border:1px solid #e2e8f0;}
#invgen .engage-col-title{font-size:0.78rem;font-weight:700;color:#475569;margin-bottom:22px;text-transform:uppercase;letter-spacing:0.3px;}
#invgen .rating-placeholder{background:#f8fafc;border:2px dashed #e2e8f0;border-radius:8px;padding:5px 20px;font-size:0.75rem;color:#94a3b8;margin-bottom:8px;}
#invgen .rating-rendered{margin-bottom:8px;}
#invgen .engage-hint{font-size:0.72rem;color:#94a3b8;}
#invgen .share-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:8px;}
#invgen .share-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 10px;border-radius:8px;border:1px solid #d1d5db;font-size:0.78rem;font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit;background:#f1f5f9;color:#475569;transition:background .15s,color .15s,border-color .15s,transform .1s;}
#invgen .share-btn:hover{background:#334155;color:white;border-color:#334155;transform:translateY(-1px);}

/* FAQ Section */
#invgen .faq-section{margin:0 24px 28px;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;}
#invgen .faq-title{font-size:1rem;font-weight:700;color:#0f172a;margin:0;padding:18px 20px 14px;border-bottom:1px solid #e2e8f0;background:#f8fafc;}
#invgen .faq-list{padding:4px 0;}
#invgen .faq-item{border-bottom:1px solid #f1f5f9;}
#invgen .faq-item:last-child{border-bottom:none;}
#invgen .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:none;border:none;cursor:pointer;font-family:inherit;font-size:0.9rem;font-weight:600;color:#0f172a;text-align:left;gap:12px;transition:background .1s;}
#invgen .faq-question:hover{background:#f8fafc;}
#invgen .faq-icon{font-size:1.2rem;font-weight:300;color:#94a3b8;flex-shrink:0;transition:transform .2s,color .2s;line-height:1;}
#invgen .faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg);color:#2563a8;}
#invgen .faq-answer{padding:0 20px 16px;font-size:0.875rem;color:#475569;line-height:1.7;}
#invgen .faq-answer[hidden]{display:none;}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:700px){
  #invgen .invgen-form{padding:14px;}
  #invgen .form-grid{grid-template-columns:1fr;gap:14px;}
  #invgen .grid-half{grid-template-columns:1fr 1fr;}
  #invgen .finance-inner{grid-template-columns:1fr 1fr;}
  #invgen .form-section{padding:14px;}
  #invgen .action-buttons{gap:8px;}
  #invgen .btn-gen{padding:11px 8px;font-size:0.82rem;}
  #invgen .engage-section{margin:0 14px 20px;}
  #invgen .engage-cols{grid-template-columns:1fr;}
  #invgen .engage-title-br{display:inline;}
  #invgen .share-label{display:none;}
  #invgen .share-btn{padding:10px 8px;justify-content:center;}
  #invgen .share-btns{gap:8px;}
  #invgen .faq-section{margin:0 14px 20px;}
  
  /* Full-width fields pada mobile */
  #invgen .field-group.full-mobile{grid-column:span 2;}
  
  /* Modal responsive */
  .invgen-modal-content{width:calc(100% - 16px);margin:8px auto;border-radius:12px;max-height:calc(100vh - 60px);}
  .invgen-scroll-hint{display:block;}
  .invgen-history-table th:last-child{min-width:200px;}
}

@media(max-width:500px){
  #invgen .field-group.span2{grid-column:span 2;}
  #invgen .btn-gen{min-width:0;padding:10px 6px;font-size:0.78rem;}
  
  /* Full-width pada ukuran sangat kecil */
  #invgen .field-group.full-mobile{grid-column:span 2;}
  
  /* Modal fit to screen */
  .invgen-modal-content{width:calc(100% - 12px);margin:6px auto;}
  .invgen-history-table th:last-child{min-width:180px;}
}

@media(max-width:360px){
  #invgen .grid-half{grid-template-columns:1fr;}
  #invgen .field-group.span2{grid-column:span 1;}
  #invgen .finance-inner{grid-template-columns:1fr;}
  #invgen .finance-inner .span2{grid-column:span 1;}
  
  /* Tetap full-width di ukuran terkecil */
  #invgen .field-group.full-mobile{grid-column:span 2;}
  
  .invgen-modal-content{width:calc(100% - 8px);}
  .hist-btn{width:60px;font-size:0.68rem;}
}
/* ════════════════════════════════════════════════════════════════════
   v2.5: SUCCESS / QRIS MODAL (sistem pop-up — diadaptasi dari cpgen v1.1.4)
   Self-contained di bawah .cg-modal — modal berada DI LUAR #invgen
   ════════════════════════════════════════════════════════════════════ */
.cg-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 16px; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.cg-modal[hidden] { display: none !important; }
.cg-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,0.62); backdrop-filter: blur(2px); }
.cg-modal-box { position: relative; background: #fff; border-radius: 14px; max-width: 560px; width: 100%; max-height: 90vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); display: flex; flex-direction: column; animation: invgenModalIn .18s ease-out; }
@keyframes invgenModalIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cg-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; background: linear-gradient(135deg, #f8fafc, #f1f5f9); }
.cg-modal-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: #0f172a; line-height: 1.35; }
.cg-modal-close { background: none; border: none; font-size: 26px; line-height: 1; color: #94a3b8; cursor: pointer; padding: 0 4px; font-family: inherit; }
.cg-modal-close:hover { color: #0f172a; }
.cg-modal-body { padding: 18px 20px 20px; overflow-y: auto; }

/* Share buttons di dalam modal (mandiri, tidak bergantung #invgen) */
.cg-modal .share-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.cg-modal .share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 9px 8px; border-radius: 8px; border: 1px solid #d1d5db; font-size: 0.78rem; font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit; background: #f1f5f9; color: #475569; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.cg-modal .share-btn:hover { background: #334155; color: #fff; border-color: #334155; transform: translateY(-1px); }

/* QRIS Modal */
.cg-modal-qris { max-width: 420px; }
.qris-body { text-align: center; }
.qris-wrap { position: relative; display: inline-block; margin: 4px auto 14px; }
.qris-img { width: 100%; max-width: 280px; height: auto; display: block; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; }
.qris-download { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: #0f172a; color: #fff; font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.25); transition: transform .12s, background .15s; }
.qris-download:hover { background: #2563a8; color: #fff; transform: translateY(-1px); }
.qris-note { font-size: 12px; color: #475569; line-height: 1.55; margin: 6px 0 0; }

/* Success / Thank-you Modal */
.cg-modal-success { max-width: 440px; }
.cg-modal-success .success-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 26px; line-height: 1; color: #cbd5e1; cursor: pointer; padding: 0 4px; font-family: inherit; z-index: 2; }
.cg-modal-success .success-close:hover { color: #0f172a; }
.success-body { text-align: center; padding: 30px 26px 24px; }
.success-emoji { font-size: 46px; line-height: 1; margin-bottom: 6px; animation: invgenPop .35s ease-out; }
@keyframes invgenPop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.success-title { font-size: 19px; font-weight: 800; color: #0f172a; margin: 0 0 10px; }
.success-desc { font-size: 13px; color: #475569; line-height: 1.6; margin: 0 0 6px; }
.success-desc b { color: #0f172a; }
.success-share-label { font-size: 11px; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.4px; margin: 20px 0 10px; }
.success-share-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.success-share-btns .share-btn { padding: 10px 6px; font-size: 0.74rem; }
.success-share-btns .share-fb:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.success-share-btns .share-li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.success-dismiss { margin-top: 16px; background: none; border: none; color: #94a3b8; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.success-dismiss:hover { color: #0f172a; }
@media (max-width: 460px){
  .cg-modal .success-share-btns { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .cg-modal .success-share-btns .share-btn { padding: 9px 4px; font-size: 0.68rem; gap: 3px; }
}

/* ── VOICE INPUT (mic clean tanpa kotak, ala chat box) ── */
/* Voice input mic button — sudah di-handle global oleh suite-core.css (.lgs-app .voice-mic) */

/* ════════════════════════════════════════════════════════════════════
   v2.6.2: CHECKBOX SUBTOTAL/TOTAL
   ════════════════════════════════════════════════════════════════════ */
#invgen .invgen-total-check { display: inline-flex; align-items: center; cursor: pointer; }
#invgen .invgen-total-check input[type=checkbox] { width: 15px; height: 15px; accent-color: #2563a8; cursor: pointer; margin: 0; }