/* =====================================================================
   1. ROOT VARIABLES & GLOBAL RESET
   ===================================================================== */
:root{
  --gold:#d2a33c;
  --gold-light:#f0dfa8;
  --gold-dark:#9c7d3f;
  --navy-deep:#080b1a;
  --navy:#0d2f60;
  --glass-bg:rgba(255,255,255,.09);
  --glass-bg-strong:rgba(255,255,255,.14);
  --glass-border:rgba(255,255,255,.20);
  --text-light:#f6f2e9;
  --text-muted:#c9c4b8;
  --success:#3ddc97;
  --danger:#ff6b6b;
  --radius-lg:22px;
  --radius-md:14px;
  --radius-sm:8px;
  --shadow-luxury:0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box;}

html,body{
  height:100%;
  margin:0;
  padding:0;
}

body{
  font-family:'Poppins',sans-serif;
  color:var(--text-light);
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  background:var(--navy-deep);
}

::selection{background:var(--gold);color:#1a1305;}

/* Custom scrollbar */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:rgba(255,255,255,.04);}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--gold),var(--gold-dark));border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-light);}

/* =====================================================================
   2. BACKGROUND SLIDESHOW
   ===================================================================== */
.bg-slideshow{
  position:fixed;
  inset:0;
  z-index:-3;
  background:linear-gradient(135deg,#0a0e27 0%,#1a1040 50%,#0a0e27 100%);
}

.bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transform:scale(1.08);
  transition:opacity 2.5s ease-in-out, transform 9s ease-in-out;
  filter:saturate(1.05) brightness(.9);
}

.bg-slide.active{
  opacity:1;
  transform:scale(1);
}

.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 20% 10%, rgba(201,169,97,.10), transparent 45%),
    linear-gradient(180deg, rgba(4,6,18,.72) 0%, rgba(4,6,18,.62) 40%, rgba(4,6,18,.82) 100%);
  backdrop-filter:blur(1px);
}

/* Subtle animated gold particles feel via gradient noise */
.bg-overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 80% 90%, rgba(201,169,97,.08), transparent 40%);
}

/* =====================================================================
   3. GLASSMORPHISM CARD SYSTEM
   ===================================================================== */
.glass-card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:var(--shadow-luxury);
  position:relative;
  overflow:hidden;
  animation:fadeSlideUp .7s ease both;
}

.glass-card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-light),transparent);
  opacity:.6;
}

@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:translateY(0);}
}

/* =====================================================================
   4. LAYOUT CONTAINER
   ===================================================================== */
.main-container{
  max-width:1600px;
  margin:0 auto;
  padding-left:clamp(12px,3vw,40px);
  padding-right:clamp(12px,3vw,40px);
  position:relative;
  z-index:1;
}

/* =====================================================================
   5. HEADER
   ===================================================================== */
.header-card{
  padding:clamp(24px,4vw,44px) 20px;
}

.logo-placeholder{
  width:90px;height:90px;
  margin:0 auto 14px;
  border-radius:24px;
  background:linear-gradient(145deg,var(--gold-light),var(--gold) 55%,var(--gold-dark));
  display:flex;align-items:center;justify-content:center;
  font-size:32px;
  color:#1a1305;
  box-shadow:0 8px 26px rgba(201,169,97,.45), inset 0 0 0 3px rgba(255,255,255,.25);
  animation:floaty 4.5s ease-in-out infinite;
  overflow:hidden;
  padding:10px;
  background:#ffffff;
}

.header-logo-img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  padding:4px;
}

@keyframes floaty{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}

.header-card h1{
  font-weight:700;
  font-size:clamp(22px,3.6vw,38px);
  letter-spacing:.5px;
  margin-bottom:6px;
  background:linear-gradient(90deg,var(--gold-light),var(--gold) 45%,var(--gold-light));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.header-card .subtitle{
  font-weight:500;
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:clamp(12px,1.4vw,15px);
  color:var(--text-muted);
  margin:0;
}

.header-card .subtitle::before,
.header-card .subtitle::after{
  content:"✦";
  color:var(--gold);
  margin:0 10px;
  font-size:10px;
}

/* =====================================================================
   6. SECTION HEADINGS
   ===================================================================== */
.section-title{
  font-weight:600;
  font-size:17px;
  color:var(--gold-light);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid var(--glass-border);
}

.section-title i{
  width:34px;height:34px;
  border-radius:10px;
  background:rgba(201,169,97,.15);
  display:flex;align-items:center;justify-content:center;
  color:var(--gold);
  font-size:14px;
}

/* =====================================================================
   7. FORM CONTROLS
   ===================================================================== */
.form-label{
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:6px;
}

.form-control,.form-select{
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  color:var(--text-light);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  font-size:14.5px;
  transition:all .25s ease;
}

.form-control::placeholder{color:rgba(255,255,255,.35);}

.form-control:focus,.form-select:focus{
  background:rgba(255,255,255,.10);
  border-color:var(--gold);
  color:var(--text-light);
  box-shadow:0 0 0 4px rgba(201,169,97,.18);
}

.form-control[readonly]{
  background:rgba(201,169,97,.08);
  color:var(--gold-light);
  font-weight:500;
  cursor:not-allowed;
}

.form-control[type="date"]{
  color-scheme:dark;
}

/* =====================================================================
   8. ROOM TABLE
   ===================================================================== */
.table-wrapper{
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--glass-border);
}

table.room-table{
  width:100%;
  border-collapse:collapse;
  margin:0;
  font-size:14px;
}

.room-table thead th{
  background:linear-gradient(90deg,rgba(201,169,97,.22),rgba(201,169,97,.10));
  color:var(--gold-light);
  font-weight:600;
  text-transform:uppercase;
  font-size:11.5px;
  letter-spacing:.6px;
  padding:14px 12px;
  border-bottom:1px solid var(--glass-border);
  white-space:nowrap;
}

.room-table tbody td{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:middle;
  color:var(--text-light);
}

.room-table tbody tr{
  transition:background .2s ease;
}

.room-table tbody tr:hover{
  background:rgba(201,169,97,.06);
}

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

.room-type-cell{
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
}

.guest-badge{
  font-size:10.5px;
  font-weight:600;
  padding:3px 8px;
  border-radius:20px;
  background:rgba(201,169,97,.18);
  color:var(--gold-light);
  border:1px solid rgba(201,169,97,.3);
  white-space:nowrap;
}

.room-table input.qty-input,
.room-table input.rate-input{
  width:100%;
  min-width:80px;
  text-align:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--glass-border);
  color:var(--text-light);
  border-radius:8px;
  padding:8px 6px;
  font-weight:500;
}

.room-table input.qty-input:focus,
.room-table input.rate-input:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,169,97,.18);
  background:rgba(255,255,255,.1);
  outline:none;
}

.row-total{
  font-weight:700;
  color:var(--success);
  white-space:nowrap;
}

/* =====================================================================
   9. SUMMARY CARD
   ===================================================================== */
.summary-card .summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:11px 0;
  border-bottom:1px dashed rgba(255,255,255,.12);
  font-size:14px;
}

.summary-card .summary-row:last-of-type{border-bottom:none;}

.summary-card .summary-row span:first-child{color:var(--text-muted);}
.summary-card .summary-row span:last-child{font-weight:600;color:var(--text-light);}

.summary-grand{
  margin-top:14px;
  padding:18px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,rgba(201,169,97,.22),rgba(201,169,97,.08));
  border:1px solid rgba(201,169,97,.35);
  text-align:center;
}

.summary-grand .label{
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  margin-bottom:6px;
}

.summary-grand .value{
  font-size:clamp(24px,2.4vw,32px);
  font-weight:800;
  color:#fff;
  letter-spacing:.5px;
}

.summary-grand .value small{
  font-size:15px;
  font-weight:500;
  color:var(--gold-light);
  margin-right:6px;
}

.nights-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:30px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--glass-border);
  font-weight:600;
  font-size:14px;
  margin-top:10px;
}

.nights-pill i{color:var(--gold);}

/* =====================================================================
   10. ACTION BUTTONS
   ===================================================================== */
.btn-luxury{
  position:relative;
  overflow:hidden;
  border:none;
  border-radius:var(--radius-sm);
  padding:13px 18px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  width:100%;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-luxury:active{transform:scale(.97);}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-dark));
  color:#1a1305;
  box-shadow:0 10px 26px rgba(201,169,97,.35);
}
.btn-gold:hover{filter:brightness(1.08);box-shadow:0 14px 32px rgba(201,169,97,.5);}

.btn-outline-luxury{
  background:rgba(255,255,255,.06);
  color:var(--text-light);
  border:1px solid var(--glass-border);
}
.btn-outline-luxury:hover{background:rgba(255,255,255,.12);border-color:var(--gold);}

.btn-danger-luxury{
  background:rgba(255,107,107,.12);
  color:#ffb3b3;
  border:1px solid rgba(255,107,107,.35);
}
.btn-danger-luxury:hover{background:rgba(255,107,107,.22);}

/* Ripple effect */
.ripple{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);
  animation:rippleAnim .6s linear;
  pointer-events:none;
}
@keyframes rippleAnim{
  to{transform:scale(3.2);opacity:0;}
}

/* =====================================================================
   11. LIVE PREVIEW (on-screen)
   ===================================================================== */
.preview-box{
  background:linear-gradient(180deg,#fbf9f3,#f3ede0);
  color:#2a2416;
  border-radius:var(--radius-md);
  padding:clamp(16px,3vw,36px);
  font-size:13.5px;
  max-height:640px;
  overflow-y:auto;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

.preview-box *{color:#2a2416;}

.preview-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:3px solid #0c2347;
  padding-bottom:14px;
  margin-bottom:18px;
  flex-wrap:wrap;
  gap:10px;
}

.preview-status-block{text-align:right;}
.preview-status-block .status-word{
  font-size:26px;
  font-weight:800;
  letter-spacing:1px;
  color:#0c2347;
}
.preview-status-block .resno{
  font-size:30px;
  font-weight:800;
  color:#0c2347;
  margin-left:8px;
}
.preview-status-block .doc-title{font-weight:700;font-size:15px;margin-top:2px;}
.preview-status-block .doc-status{font-size:13px;}
.preview-status-block .doc-hotel{font-weight:800;font-size:16px;text-transform:uppercase;margin-top:2px;}

.preview-info-grid{
  display:grid;
  grid-template-columns:150px 1fr;
  row-gap:5px;
  font-size:13.5px;
  margin:16px 0;
}
.preview-info-grid .k{color:#665f4a;}
.preview-info-grid .v{font-weight:600;}

.preview-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  margin-top:10px;
}
.preview-table th{
  background:#e7ded0;
  border:1px solid #cfc4ac;
  padding:8px 6px;
  text-transform:uppercase;
  font-size:10.5px;
  letter-spacing:.3px;
}
.preview-table td{
  border:1px solid #d8cfba;
  padding:7px 6px;
  text-align:center;
}
.preview-table td:first-child{text-align:left;font-weight:600;}

.preview-net-row td{
  font-weight:700;
  background:#f1ead8;
}
.preview-sar-row td{
  font-weight:800;
  background:#e2d6b3;
  font-size:14px;
}

.preview-footer-title{
  font-weight:700;
  margin-top:18px;
  margin-bottom:6px;
  font-size:13px;
  border-bottom:1px solid #cfc4ac;
  padding-bottom:4px;
}
.preview-footer-text{font-size:12px;line-height:1.7;color:#4a4433;}

/* =====================================================================
   12. TOAST NOTIFICATION
   ===================================================================== */
.toast{
  background:var(--glass-bg-strong) !important;
  backdrop-filter:blur(16px);
  border:1px solid var(--glass-border) !important;
  color:var(--text-light);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-luxury);
}
.toast .toast-header{
  background:transparent;
  color:var(--gold-light);
  border-bottom:1px solid var(--glass-border);
}

/* =====================================================================
   13. LOADING OVERLAY
   ===================================================================== */
.loading-overlay{
  position:fixed;inset:0;
  z-index:99999;
  background:rgba(5,7,20,.72);
  backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
}
.loading-overlay p{
  font-weight:500;
  letter-spacing:1px;
  color:var(--gold-light);
}
.spinner-luxury{
  width:64px;height:64px;
  border-radius:50%;
  border:4px solid rgba(201,169,97,.2);
  border-top-color:var(--gold);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* =====================================================================
   14. MODAL (Preview PDF)
   ===================================================================== */
.modal-content.glass-modal{
  background:linear-gradient(180deg,#161c3d,#0c0f24);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  color:var(--text-light);
}
.modal-header{border-bottom:1px solid var(--glass-border);}
.modal-footer{border-top:1px solid var(--glass-border);}
.btn-close{filter:invert(1) grayscale(1) brightness(2);}

/* =====================================================================
   15. HIDDEN PDF TEMPLATE (A4)
   ===================================================================== */
#pdfTemplate{
  position:fixed;
  left:-10000px;
  top:0;
  z-index:99990;
  visibility:visible;
  opacity:1;
  pointer-events:none;
  transform:none;
  width:210mm;
  min-height:297mm;
  background:#ffffff;
  color:#1c1c1c;
  font-family:'Poppins',sans-serif;
  padding:14mm 14mm;
  font-size:11px;
}
#pdfTemplate .pdf-header-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:3px solid #0c2347;
  padding-bottom:12px;
  margin-bottom:16px;
}
#pdfTemplate .pdf-brand-side{display:flex;align-items:center;gap:12px;}
#pdfTemplate .pdf-doc-logo{width:60px;height:60px;object-fit:contain;border:1px solid #d9cfbc;border-radius:12px;padding:5px;background:#fff;flex:0 0 auto;}
#pdfTemplate .pdf-brand-name{font-weight:800;font-size:15px;line-height:1.2;color:#103b74;margin-bottom:2px;}
#pdfTemplate .pdf-status-word{font-size:24px;font-weight:800;letter-spacing:1px;}
#pdfTemplate .pdf-resno{font-size:28px;font-weight:800;margin-left:6px;}
#pdfTemplate .pdf-doc-title{font-weight:700;font-size:14px;margin-top:2px;}
#pdfTemplate .pdf-doc-hotel{font-weight:800;font-size:15px;text-transform:uppercase;margin-top:2px;}
#pdfTemplate .pdf-info-grid{display:grid;grid-template-columns:140px 1fr;row-gap:4px;font-size:11.5px;margin:14px 0;}
#pdfTemplate .pdf-info-grid .k{color:#555;}
#pdfTemplate .pdf-info-grid .v{font-weight:600;}
#pdfTemplate table.pdf-table{width:100%;border-collapse:collapse;font-size:10px;margin-top:8px;}
#pdfTemplate table.pdf-table th{background:#e7ded0;border:1px solid #b9ad91;padding:7px 5px;text-transform:uppercase;font-size:9px;}
#pdfTemplate table.pdf-table td{border:1px solid #cfc4ac;padding:6px 5px;text-align:center;}
#pdfTemplate table.pdf-table td:first-child{text-align:left;font-weight:600;}
#pdfTemplate .pdf-net-row td{font-weight:700;background:#f1ead8;}
#pdfTemplate .pdf-sar-row td{font-weight:800;background:#dcccA0;font-size:12px;}
#pdfTemplate .pdf-footer-title{font-weight:700;margin-top:16px;margin-bottom:5px;font-size:11.5px;border-bottom:1px solid #ccc;padding-bottom:3px;}
#pdfTemplate .pdf-footer-text{font-size:9.5px;line-height:1.7;color:#333;}
#pdfTemplate .pdf-bottom-row{display:flex;justify-content:space-between;margin-top:30px;font-size:10px;font-weight:600;}
#pdfTemplate .pdf-license-row{display:flex;justify-content:space-between;margin-top:60px;font-size:9.5px;font-weight:700;border-top:1px solid #ccc;padding-top:10px;}

/* Saat proses ekspor, template diposisikan di viewport agar html2canvas
   tidak menghasilkan halaman kosong. Loading overlay tetap menutupinya. */
#pdfTemplate.pdf-exporting{
  left:0 !important;
  top:0 !important;
  z-index:99990 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  transform:none !important;
}

/* =====================================================================
   16. PRINT MODE
   ===================================================================== */
@media print{
  html,body{background:#fff !important;}
  body *{visibility:hidden !important;}
  .bg-slideshow,.bg-overlay,.footer-stage,.header-card,.workspace-menu,.workspace-side,.glass-modal,.modal,.mobile-print-toolbar{display:none !important;}
  #pdfTemplate, #pdfTemplate *{visibility:visible !important;}
  #pdfTemplate{position:absolute !important;left:0 !important;top:0 !important;z-index:999999 !important;display:block !important;visibility:visible !important;opacity:1 !important;box-shadow:none !important;background:#fff !important;width:210mm !important;min-height:297mm !important;}
}

/* =====================================================================
   17. RESPONSIVE
   ===================================================================== */
@media (max-width:991.98px){
  .room-table{font-size:12.5px;}
  .preview-info-grid{grid-template-columns:120px 1fr;}
}
@media (max-width:767.98px){
  .header-card h1{font-size:20px;}
  .room-table thead th,.room-table tbody td{padding:8px 6px;}
  .room-table input.qty-input,.room-table input.rate-input{min-width:60px;font-size:12.5px;padding:6px 4px;}
  .summary-grand .value{font-size:22px;}
}
@media (max-width:575.98px){
  .preview-status-block{text-align:left;width:100%;}
  .preview-header-row{flex-direction:column;}
}


/* =====================================================================
   18. iPHONE / iOS SAFARI COMPATIBILITY
   ===================================================================== */
html{min-height:100%;min-height:-webkit-fill-available;}
body{min-height:100vh;min-height:-webkit-fill-available;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);}
@supports (-webkit-touch-callout:none){
  input,select,textarea,.form-control,.form-select{font-size:16px !important;}
  .glass-card{-webkit-backdrop-filter:blur(14px) saturate(130%);}
  .modal{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
  .modal-dialog{margin:.5rem;max-width:calc(100% - 1rem);}
  .preview-box{-webkit-overflow-scrolling:touch;}
  .invoice-brand-side{align-items:flex-start;}
  .invoice-logo{width:62px;height:62px;}
}

/* Invoice preview + PDF */
.invoice-wrap{font-family:'Poppins',Arial,sans-serif;color:#232323;background:#fff;}
.invoice-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #0c2347;padding-bottom:16px;gap:18px;}
.invoice-brand-side{display:flex;align-items:center;gap:14px;}
.invoice-logo{width:78px;height:78px;object-fit:contain;border:1px solid #d9cfbc;border-radius:16px;padding:6px;background:#fff;flex:0 0 auto;}
.invoice-brand{font-size:19px;font-weight:800;text-transform:uppercase;color:#0c2347;}
.invoice-title{font-size:34px;font-weight:800;letter-spacing:2px;color:#0c2347;text-align:right;}
.invoice-meta{font-size:11.5px;line-height:1.75;text-align:right;}
.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0;}
.invoice-parties > div:last-child{justify-self:end;text-align:right;}
.invoice-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#8a7540;margin-bottom:6px;}
.invoice-party-name{font-size:14px;font-weight:700;}
.invoice-small{font-size:11px;line-height:1.65;color:#555;}
.invoice-table{width:100%;border-collapse:collapse;font-size:10.5px;}
.invoice-table th{background:#ffffff;color:#232323;padding:9px 7px;border:.6px solid #999;text-transform:uppercase;font-size:9px;letter-spacing:.3px;}
.invoice-table td{padding:8px 7px;border:.6px solid #aaa;vertical-align:top;}
.invoice-table td.num{text-align:right;white-space:nowrap;}
.invoice-totals{width:43%;margin-left:auto;margin-top:12px;border-collapse:collapse;font-size:11px;}
.invoice-totals td{padding:6px 9px;border-bottom:1px solid #ddd;}
.invoice-totals td:last-child{text-align:right;font-weight:700;}
.invoice-totals .grand td{background:#ffffff;border:.6px solid #999;font-size:14px;font-weight:800;color:#232323;}
.invoice-note{margin-top:14px;padding:11px 13px;background:#f7f3e8;border-left:4px solid #d8b86a;font-size:10.2px;line-height:1.55;}
.invoice-footer{display:flex;justify-content:space-between;gap:20px;margin-top:14px;padding-top:10px;border-top:1px solid #ddd;font-size:9.2px;color:#555;}
.invoice-closing-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:24px;margin-top:16px;align-items:stretch;}
.invoice-bank-card,.invoice-signature-card{background:#fff;border-top:1.2px solid #333;padding:10px 12px 8px;min-height:145px;box-sizing:border-box;font-size:10px;line-height:1.75;}
.invoice-closing-title{font-weight:800;font-size:11.5px;margin-bottom:8px;letter-spacing:.15px;}
.invoice-signature-card{text-align:center;}
.invoice-signature-space{height:62px;}
.invoice-signature-name{font-size:14px;font-weight:800;text-transform:uppercase;line-height:1.35;letter-spacing:.25px;}
.invoice-signature-role{font-size:10.8px;font-weight:600;margin-top:5px;color:#444;}
@media(max-width:575.98px){
  .invoice-head,.invoice-footer{flex-direction:column;}
  .invoice-closing-grid{grid-template-columns:1fr;gap:12px;}
  .invoice-title,.invoice-meta{text-align:left;}
  .invoice-parties{grid-template-columns:1fr;gap:14px;}
  .invoice-parties > div:last-child{justify-self:stretch;text-align:left;}
  .invoice-totals{width:100%;}
}

/* Flexible invoice payment plan */
.payment-plan-toolbar{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.exchange-rate-box{min-width:260px;flex:1;max-width:440px;}
.exchange-rate-input{display:grid;grid-template-columns:auto minmax(120px,1fr) auto;align-items:center;gap:9px;background:rgba(255,255,255,.055);border:1px solid var(--glass-border);border-radius:12px;padding:7px 12px;}
.exchange-rate-input span{font-size:13px;color:var(--text-muted);white-space:nowrap;}
.exchange-rate-input input{border:0!important;background:transparent!important;box-shadow:none!important;text-align:center;padding:7px!important;color:var(--gold-light)!important;font-weight:700;min-width:0;}
.payment-plan-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:100%;}
.payment-plan-actions .btn-luxury{flex:0 1 auto;max-width:100%;}
.btn-compact{width:auto!important;min-width:0;padding:9px 12px;font-size:12px;white-space:nowrap;}
.payment-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.82fr) minmax(0,.68fr) minmax(0,.82fr) minmax(0,.9fr) minmax(0,.76fr) 40px;gap:8px;align-items:end;padding:13px;border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(255,255,255,.045);margin-bottom:10px;}
.payment-row > div{min-width:0;}
.payment-row .form-control,.payment-row .form-select{min-width:0;width:100%;}
.payment-row .form-label{font-size:10px;margin-bottom:5px;line-height:1.25;white-space:normal;}
.payment-row .payment-sar-display{height:46px;display:flex;align-items:center;padding:10px 12px;border-radius:8px;background:rgba(201,169,97,.09);border:1px solid rgba(201,169,97,.25);color:var(--gold-light);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.payment-remove{height:46px;width:42px;border-radius:9px;border:1px solid rgba(255,107,107,.35);background:rgba(255,107,107,.11);color:#ffb3b3;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s ease;}
.payment-remove:hover{background:rgba(255,107,107,.24);}
.payment-plan-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px;}
.payment-summary-item{border:1px solid var(--glass-border);border-radius:12px;padding:12px;background:rgba(255,255,255,.045);}
.payment-summary-item .s-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:4px;}
.payment-summary-item .s-value{font-weight:700;color:var(--text-light);font-size:13px;line-height:1.45;}
.payment-summary-item .s-value small{display:block;font-size:10.5px;font-weight:500;color:var(--text-muted);margin-top:2px;}
.payment-summary-item.highlight{background:rgba(201,169,97,.12);border-color:rgba(201,169,97,.32);}
.payment-summary-item.highlight .s-value{color:var(--gold-light);}
.payment-help{font-size:11px;color:var(--text-muted);line-height:1.6;margin-top:11px;}
.invoice-payment-title{font-size:12px;font-weight:800;margin:16px 0 7px;color:#0c2347;text-transform:uppercase;letter-spacing:.6px;}
.invoice-payment-table{width:100%;border-collapse:collapse;font-size:9.5px;}
.invoice-payment-table th{background:#ffffff;color:#232323;padding:7px 6px;border:.6px solid #999;text-transform:uppercase;font-size:8.5px;}
.invoice-payment-table td{padding:7px 6px;border:.6px solid #aaa;vertical-align:middle;}
.invoice-payment-table td.num{text-align:right;white-space:nowrap;}
.invoice-payment-table .status-paid{font-weight:700;color:#18794e;}
.invoice-payment-table .status-pending{font-weight:700;color:#a76400;}
.invoice-payment-table .status-planned{font-weight:700;color:#4b5d8a;}
.invoice-currency-box{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;}
.invoice-currency-card{border:1px solid #d8d1c1;background:#faf8f2;padding:9px 11px;font-size:9.8px;line-height:1.55;}
.invoice-currency-card strong{font-size:12px;color:#0c2347;}
@media(max-width:991.98px){
  .payment-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .payment-remove{width:100%;}
  .payment-plan-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:575.98px){
  .payment-plan-toolbar{align-items:stretch;}
  .exchange-rate-box{min-width:100%;max-width:none;}
  .payment-plan-actions{width:100%;}
  .payment-plan-actions .btn-luxury{flex:0 1 auto;}
  .payment-row{grid-template-columns:1fr;}
  .payment-remove{height:42px;}
  .payment-plan-summary{grid-template-columns:1fr 1fr;}
  .invoice-currency-box{grid-template-columns:1fr;}
}



/* =====================================================================
   BASYARAH CIPTA — PREMIUM EMERALD BRAND THEME (V9)
   ===================================================================== */
:root{
  --gold:#d2a33c;
  --gold-light:#f5e6b8;
  --gold-dark:#a98232;
  --navy-deep:#06162d;
  --navy:#0d2f60;
  --emerald:#103b74;
  --emerald-soft:#11756a;
  --cream:#fffaf0;
  --glass-bg:rgba(4,42,38,.76);
  --glass-bg-strong:rgba(7,63,57,.92);
  --glass-border:rgba(216,184,106,.31);
  --text-light:#fffaf0;
  --text-muted:#d9d2c2;
  --success:#79d9b8;
  --danger:#ff9c9c;
  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:11px;
  --shadow-luxury:0 24px 70px rgba(0,20,18,.55),0 2px 0 rgba(255,255,255,.025) inset;
}

body{
  background:#06162d;
  background-image:
    radial-gradient(circle at 10% 0%,rgba(216,184,106,.10),transparent 34%),
    radial-gradient(circle at 92% 90%,rgba(17,117,106,.20),transparent 38%);
}

.bg-slideshow{
  background:linear-gradient(145deg,#021715 0%,#0d2f60 48%,#06162d 100%);
}
.bg-slide{filter:saturate(.82) brightness(.62) contrast(1.06);}
.bg-overlay{
  background:
    linear-gradient(120deg,rgba(2,26,23,.92),rgba(4,52,46,.70) 52%,rgba(2,25,23,.90)),
    radial-gradient(circle at 18% 12%,rgba(216,184,106,.17),transparent 36%);
  backdrop-filter:blur(2px);
}
.bg-overlay::before{
  content:"";position:absolute;inset:0;opacity:.12;pointer-events:none;
  background-image:linear-gradient(30deg,rgba(255,255,255,.06) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.06) 87.5%),linear-gradient(150deg,rgba(255,255,255,.06) 12%,transparent 12.5%,transparent 87%,rgba(255,255,255,.06) 87.5%);
  background-size:44px 76px;
}
.bg-overlay::after{background:radial-gradient(circle at 82% 88%,rgba(216,184,106,.12),transparent 36%);}

.glass-card{
  background:linear-gradient(145deg,rgba(8,70,63,.84),rgba(3,33,30,.84));
  border:1px solid var(--glass-border);
  box-shadow:var(--shadow-luxury);
}
.glass-card::before{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.85;}
.glass-card::after{
  content:"";position:absolute;right:-90px;top:-90px;width:190px;height:190px;border:1px solid rgba(216,184,106,.12);border-radius:50%;pointer-events:none;
}

.header-card{
  padding:clamp(28px,4.5vw,52px) 24px;
  background:
    radial-gradient(circle at 50% -25%,rgba(216,184,106,.22),transparent 43%),
    linear-gradient(135deg,rgba(9,83,74,.95),rgba(3,36,32,.95));
}
.logo-placeholder{
  width:110px;height:110px;border-radius:26px;padding:9px;
  background:linear-gradient(145deg,#fff9e9,#d8b86a 60%,#947125);
  box-shadow:0 18px 40px rgba(0,24,21,.48),0 0 0 1px rgba(255,255,255,.26) inset;
  animation:floaty 5.2s ease-in-out infinite;
}
.header-logo-img{border-radius:19px;padding:3px;box-shadow:0 3px 12px rgba(0,0,0,.10);}
.header-card h1{
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(30px,4.5vw,52px);font-weight:700;letter-spacing:.3px;line-height:1.04;
  background:linear-gradient(90deg,#fff8df,#d8b86a 48%,#fff2ca);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 8px 35px rgba(0,0,0,.22);
}
.header-card .subtitle{font-size:clamp(10px,1.2vw,13px);letter-spacing:3.2px;color:#eee2c8;font-weight:600;}
.header-card .subtitle::before,.header-card .subtitle::after{color:#d8b86a;}

.section-title{color:#fff1c8;font-weight:700;letter-spacing:.15px;}
.section-title i{
  background:linear-gradient(145deg,rgba(216,184,106,.24),rgba(216,184,106,.08));
  color:#f5d98d;border:1px solid rgba(216,184,106,.28);box-shadow:0 8px 18px rgba(0,0,0,.14);
}

.form-label{color:#e0d7c6;font-weight:600;letter-spacing:.55px;}
.form-control,.form-select,
.room-table input.qty-input,.room-table input.rate-input{
  background:rgba(1,24,22,.42);border:1px solid rgba(239,220,174,.22);color:#fffaf0;
  box-shadow:0 1px 0 rgba(255,255,255,.025) inset;
}
.form-control:hover,.form-select:hover,.room-table input.qty-input:hover,.room-table input.rate-input:hover{border-color:rgba(216,184,106,.48);}
.form-control:focus,.form-select:focus,.room-table input.qty-input:focus,.room-table input.rate-input:focus{
  background:rgba(2,34,31,.78);border-color:#d8b86a;color:#fffaf0;box-shadow:0 0 0 4px rgba(216,184,106,.16),0 10px 24px rgba(0,0,0,.14);
}
.form-control[readonly]{background:rgba(216,184,106,.10);color:#f6e5b7;border-color:rgba(216,184,106,.25);}
.form-control::placeholder{color:rgba(255,250,240,.39);}

.table-wrapper{border-color:rgba(216,184,106,.24);box-shadow:0 10px 32px rgba(0,0,0,.12);}
.room-table thead th{
  background:linear-gradient(90deg,rgba(216,184,106,.30),rgba(216,184,106,.11));
  color:#fff0c3;border-bottom-color:rgba(216,184,106,.30);
}
.room-table tbody tr:hover{background:rgba(216,184,106,.075);}
.guest-badge{background:rgba(216,184,106,.16);color:#f5e3ad;border-color:rgba(216,184,106,.32);}
.row-total{color:#93e2c6;}

.summary-grand{
  background:linear-gradient(135deg,rgba(216,184,106,.31),rgba(7,86,76,.42));
  border-color:rgba(216,184,106,.50);box-shadow:0 16px 34px rgba(0,0,0,.18),0 1px 0 rgba(255,255,255,.10) inset;
}
.summary-grand .label,.summary-grand .value small{color:#ffedbc;}
.nights-pill{background:rgba(2,31,28,.48);border-color:rgba(216,184,106,.28);}

.btn-luxury{border-radius:12px;min-height:48px;transition:transform .2s ease,box-shadow .25s ease,filter .2s ease,border-color .2s ease;}
.btn-luxury:hover{transform:translateY(-2px);}
.btn-gold{
  background:linear-gradient(135deg,#f6e3ad,#d8b86a 58%,#a9802f);color:#0d2446;
  box-shadow:0 12px 28px rgba(216,184,106,.25),0 1px 0 rgba(255,255,255,.52) inset;
}
.btn-gold:hover{box-shadow:0 17px 35px rgba(216,184,106,.38);filter:brightness(1.04);}
.btn-outline-luxury{background:rgba(1,28,25,.40);border-color:rgba(216,184,106,.28);}
.btn-outline-luxury:hover{background:rgba(216,184,106,.11);border-color:#d8b86a;}
.btn-danger-luxury{background:rgba(151,55,55,.19);border-color:rgba(255,156,156,.34);}

.exchange-rate-input,.payment-row,.payment-summary-item{
  background:linear-gradient(145deg,rgba(3,39,35,.62),rgba(255,255,255,.025));
  border-color:rgba(216,184,106,.24);
}
.exchange-rate-input input{color:#f6dc97!important;}
.payment-row{box-shadow:0 12px 28px rgba(0,0,0,.11);}
.payment-row .payment-sar-display{background:rgba(216,184,106,.12);border-color:rgba(216,184,106,.31);color:#f5dfa5;}
.payment-summary-item.highlight{background:linear-gradient(145deg,rgba(216,184,106,.20),rgba(7,80,71,.28));border-color:rgba(216,184,106,.42);}

.preview-box{background:linear-gradient(180deg,#fffdf8,#f6f0e3);border:1px solid rgba(216,184,106,.42);box-shadow:0 16px 42px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.7);}
.modal-content.glass-modal{background:linear-gradient(165deg,#095349,#022824);border-color:rgba(216,184,106,.34);box-shadow:0 30px 90px rgba(0,0,0,.55);}
.modal-header,.modal-footer{border-color:rgba(216,184,106,.22);}

/* Confirmation & PDF branding */
.doc-wrap .header-row-flex{border-bottom-color:#103b74!important;}
.doc-wrap .doc-brand-name{color:#103b74!important;font-family:'Cormorant Garamond',serif;font-size:22px!important;}
.doc-wrap .status-word,.doc-wrap .resno{color:#103b74!important;}
.doc-wrap table.doc-table th{background:#ffffff!important;color:#232323!important;border-color:#666!important;}
.doc-wrap .sar-row td{background:#ffffff!important;color:#232323!important;}

#pdfTemplate .pdf-header-row{border-bottom-color:#103b74;}
#pdfTemplate .pdf-brand-name{color:#103b74;font-family:'Cormorant Garamond',serif;font-size:17px;}
#pdfTemplate .pdf-status-word,#pdfTemplate .pdf-resno{color:#103b74;}
#pdfTemplate table.pdf-table th{background:#ffffff;color:#232323;border-color:#666;}
#pdfTemplate .pdf-sar-row td{background:#ffffff;color:#232323;}

/* Invoice visual identity */
.invoice-head{border-bottom-color:#103b74;}
.invoice-brand{font-family:'Cormorant Garamond',serif;font-size:25px;color:#103b74;letter-spacing:.4px;}
.invoice-title{font-family:'Cormorant Garamond',serif;color:#103b74;font-size:39px;}
.invoice-label{color:#9b772b;}
.invoice-table th{background:#ffffff;border-color:#d8d1c1;color:#232323;}
.invoice-totals .grand td{background:#ffffff;color:#232323;}
.invoice-note{background:#fbf7eb;border-left-color:#d8b86a;}
.invoice-payment-title{color:#103b74;}
.invoice-payment-table th{background:#ffffff;color:#232323;border-color:#cfc4ac;}
.invoice-currency-card strong{color:#103b74;}
.invoice-logo,.doc-wrap .doc-logo,#pdfTemplate .pdf-doc-logo{border-color:#d8b86a;box-shadow:0 6px 18px rgba(11,91,82,.10);}

.toast{background:rgba(5,66,59,.95)!important;border-color:rgba(216,184,106,.32)!important;}
.spinner-luxury{border-color:rgba(216,184,106,.20);border-top-color:#d8b86a;}

@media(max-width:575.98px){
  .header-card{padding:28px 16px;}
  .logo-placeholder{width:94px;height:94px;border-radius:23px;}
  .header-card h1{font-size:33px;}
  .header-card .subtitle{letter-spacing:2px;line-height:1.6;}
  .glass-card{border-radius:20px;}
}




.footer-stage{margin-top:18px;border:1px solid rgba(216,184,106,.26);border-radius:18px;background:linear-gradient(145deg,rgba(4,39,35,.80),rgba(2,24,22,.86));box-shadow:0 14px 34px rgba(0,0,0,.18);overflow:hidden;}
.footer-stage-inner{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:16px 20px;flex-wrap:wrap;}
.footer-stage-title{font-size:16px;font-weight:700;color:#fff1c8;margin-bottom:4px;}
.footer-stage-copy{font-size:12px;line-height:1.65;color:#d9d2c2;max-width:820px;}
.footer-stage-badge{padding:10px 14px;border-radius:12px;background:rgba(216,184,106,.14);border:1px solid rgba(216,184,106,.24);color:#f5e6b8;font-weight:700;font-size:12px;white-space:nowrap;}
@media(max-width:575.98px){.footer-stage-inner{padding:14px 16px;}.footer-stage-badge{width:100%;text-align:center;}}

/* =====================================================================
   19. DATABASE MANAGER
   ===================================================================== */
.db-record-state{
  border:1px solid rgba(216,184,106,.28);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(2,31,28,.45);
  font-size:11.5px;
  line-height:1.55;
  color:var(--text-muted);
}
.db-record-state strong{color:var(--gold-light);}
.db-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
.db-toolbar .form-control{flex:1;min-width:230px;}
.db-status-line{font-size:12px;color:var(--text-muted);margin-left:auto;}
.db-table-wrap{overflow:auto;border:1px solid rgba(216,184,106,.24);border-radius:14px;max-height:58vh;}
.db-table{width:100%;border-collapse:collapse;min-width:920px;font-size:12px;}
.db-table th{position:sticky;top:0;z-index:2;background:#103b74;color:#fff;padding:10px 9px;text-transform:uppercase;font-size:10px;letter-spacing:.35px;white-space:nowrap;}
.db-table td{padding:10px 9px;border-bottom:1px solid rgba(255,255,255,.09);vertical-align:middle;color:var(--text-light);}
.db-table tbody tr:hover{background:rgba(216,184,106,.075);}
.db-table .db-actions{display:flex;gap:7px;white-space:nowrap;}
.db-mini-btn{border-radius:8px;border:1px solid rgba(216,184,106,.3);padding:7px 9px;background:rgba(1,28,25,.48);color:#fff;cursor:pointer;font-weight:600;font-size:11px;}
.db-mini-btn:hover{border-color:#d8b86a;background:rgba(216,184,106,.13);}
.db-mini-btn.danger{border-color:rgba(255,156,156,.35);color:#ffc2c2;background:rgba(151,55,55,.18);}
.db-empty{text-align:center;padding:34px 16px!important;color:var(--text-muted)!important;}
.db-modal-body{background:linear-gradient(165deg,#07483f,#022824);}
@media(max-width:575.98px){
  .db-toolbar .form-control{min-width:100%;}
  .db-status-line{width:100%;margin-left:0;}
}


/* =====================================================================
   V3 — HOTEL + VISA + TRANSPORT / DUAL CURRENCY SAR & USD
   ===================================================================== */
.room-table select.currency-select,
.service-table input.service-description{
  width:100%;
  background:rgba(1,24,22,.42);
  border:1px solid rgba(239,220,174,.22);
  color:#fffaf0;
  border-radius:8px;
  padding:8px 7px;
  font-weight:500;
}
.room-table select.currency-select:focus,
.service-table input.service-description:focus{
  outline:none;
  border-color:#d8b86a;
  box-shadow:0 0 0 3px rgba(216,184,106,.16);
}
.room-table select.currency-select option{color:#111;background:#fff;}
.service-name{font-weight:700;color:var(--gold-light);}
.dual-currency-grand{display:grid;gap:5px;}
.dual-total-line{display:flex;align-items:baseline;justify-content:center;gap:9px;font-size:22px;font-weight:800;}
.dual-total-line small{font-size:13px;color:var(--gold-light);font-weight:600;min-width:32px;text-align:right;}
.payment-row{grid-template-columns:minmax(120px,1.18fr) minmax(125px,.95fr) minmax(105px,.82fr) minmax(85px,.58fr) minmax(112px,.82fr) minmax(125px,.9fr) minmax(100px,.72fr) 42px;}
.payment-row .payment-equivalent-display{height:46px;display:flex;align-items:center;padding:10px 12px;border-radius:8px;background:rgba(216,184,106,.12);border:1px solid rgba(216,184,106,.31);color:#f5dfa5;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.currency-total-stack{line-height:1.55;white-space:nowrap;}
.currency-total-stack small{display:block;font-size:10px;color:var(--text-muted);font-weight:500;}
.invoice-totals .currency-zero{color:#777;font-weight:500;}
@media(max-width:1199.98px){.payment-row{grid-template-columns:repeat(2,minmax(0,1fr));}.payment-remove{width:100%;}}
@media(max-width:575.98px){.payment-row{grid-template-columns:1fr;}.service-table{min-width:720px;}.table-wrapper{overflow-x:auto;}}


/* V3.4 — Visa & Transport defaults to USD + status column alignment */
.payment-row{
  position:relative;
  grid-template-columns:minmax(116px,1.04fr) minmax(126px,.94fr) minmax(104px,.78fr) minmax(84px,.55fr) minmax(112px,.78fr) minmax(124px,.88fr) minmax(116px,.80fr);
  gap:8px;
  padding:13px 58px 13px 13px;
}
.payment-row .payment-status{
  min-width:0;
  width:100%;
  padding-left:10px;
  padding-right:28px;
  font-size:14px;
}
.payment-row .payment-remove{
  position:absolute;
  right:11px;
  bottom:13px;
  width:38px;
  height:46px;
}
@media(max-width:1199.98px){
  .payment-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px;}
  .payment-row .payment-remove{position:static;width:100%;height:42px;}
}
@media(max-width:575.98px){.payment-row{grid-template-columns:1fr;}}

/* V3.5 — pisahkan tombol hapus dari kolom Status */
.payment-row{
  grid-template-columns:
    minmax(100px,1.08fr)
    minmax(110px,1fr)
    minmax(86px,.78fr)
    minmax(72px,.58fr)
    minmax(92px,.78fr)
    minmax(102px,.9fr)
    minmax(106px,.9fr);
  gap:8px;
  padding:13px;
  overflow:visible;
}
.payment-row .payment-status{
  min-width:106px;
  width:100%;
  padding-left:10px;
  padding-right:30px;
  font-size:13.5px;
}
.payment-row .payment-remove{
  position:static;
  grid-column:1 / -1;
  justify-self:end;
  width:42px;
  height:38px;
  margin-top:2px;
}
@media(max-width:1199.98px){
  .payment-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:13px;}
  .payment-row .payment-status{min-width:0;}
  .payment-row .payment-remove{grid-column:2;justify-self:end;width:42px;height:40px;}
}
@media(max-width:575.98px){
  .payment-row{grid-template-columns:1fr;}
  .payment-row .payment-remove{grid-column:1;}
}

/* V3.2 separate category payment plans */
.payment-plan-card .section-title{margin-bottom:14px;}
.payment-plan-card + .payment-plan-card{margin-top:0;}
.category-total-table{width:58%;margin-left:auto;margin-top:8px!important;margin-bottom:12px;table-layout:fixed;}
.category-total-table td:first-child{width:70%;white-space:nowrap;}
.category-total-table td:last-child{width:30%;white-space:nowrap;text-align:right;}
.invoice-detail-block{break-inside:avoid;page-break-inside:avoid;}
.invoice-payment-block{break-inside:avoid;page-break-inside:avoid;}
.payment-category-summary{width:48%;margin-left:auto;break-inside:avoid;page-break-inside:avoid;}
.invoice-payment-page{
  break-before:page;
  page-break-before:always;
  padding-top:8mm;
}
.invoice-payment-page .invoice-payment-title{margin:8px 0 5px;font-size:11px;}
.invoice-payment-page .invoice-payment-table th{padding:5px 5px;font-size:8px;}
.invoice-payment-page .invoice-payment-table td{padding:5px 5px;font-size:9px;}
.invoice-payment-page .payment-category-summary{margin-top:6px!important;font-size:9.5px;}
.invoice-payment-page .payment-category-summary td{padding:4px 7px;}
.invoice-payment-page .invoice-note{margin-top:9px;padding:8px 10px;font-size:9.3px;line-height:1.45;}
.invoice-payment-page .invoice-footer{margin-top:8px;padding-top:8px;font-size:9px;}
@media(max-width:767.98px){
  .category-total-table,.payment-category-summary{width:100%;}
}




.payment-currency-fixed{font-weight:800;text-align:center;color:#0c2347!important;background:#fff!important;}
.payment-category-summary tr:first-child td{font-weight:800;}
.payment-over-row td{font-weight:800!important;color:#8a1c1c!important;}
.payment-warning-row td{font-weight:800!important;color:#8a5a00!important;}

/* =====================================================================
   V4.0 — FLAT WORKSPACE + 5 SECTION MENU
   ===================================================================== */
body.workspace-flat .main-container{max-width:1840px;}
.workspace-main{min-width:0;}
.workspace-side{min-width:0;}

.quick-booking-flat{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;
  padding:14px 16px;margin-bottom:12px;
  background:rgba(3,45,40,.90);border:1px solid rgba(216,184,106,.34);
  border-radius:10px;box-shadow:none;
}
.quick-booking-flat .form-label{margin-bottom:5px;}
.quick-booking-flat .form-control{min-height:44px;}

.workspace-menu{
  display:flex;align-items:stretch;gap:7px;margin-bottom:12px;padding:7px;
  overflow-x:auto;scrollbar-width:thin;
  background:rgba(3,45,40,.94);border:1px solid rgba(216,184,106,.34);
  border-radius:10px;box-shadow:none;
  position:sticky;top:8px;z-index:40;
}
.workspace-menu-btn{
  appearance:none;border:1px solid rgba(216,184,106,.20);border-radius:8px;
  background:rgba(1,28,25,.55);color:#e8dfcc;min-width:154px;flex:1;
  padding:10px 12px;font-size:12px;font-weight:700;line-height:1.25;
  display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  transition:.18s ease;
}
.workspace-menu-btn:hover{background:rgba(216,184,106,.10);border-color:rgba(216,184,106,.48);color:#fff5d7;}
.workspace-menu-btn.active{
  background:linear-gradient(135deg,#f6e3ad,#d8b86a 58%,#a9802f);
  border-color:#e7ca7d;color:#0d2446;box-shadow:none;
}
.workspace-panel{display:none!important;}
.workspace-panel.active{display:block!important;}
.workspace-panel.glass-card,
.workspace-side .glass-card{
  background:rgba(3,45,40,.92);border:1px solid rgba(216,184,106,.34);
  border-radius:10px;box-shadow:none;
}
.workspace-panel.glass-card::before,.workspace-panel.glass-card::after,
.workspace-side .glass-card::before,.workspace-side .glass-card::after{display:none;}
.workspace-panel{margin-bottom:0!important;}
.workspace-panel .section-title{margin-bottom:13px;}
.workspace-panel-scroll{max-height:calc(100vh - 305px);overflow:auto;overscroll-behavior:contain;}
.workspace-side{position:sticky;top:8px;align-self:flex-start;}
.workspace-side .glass-card{padding:17px!important;margin-bottom:12px!important;}
.workspace-side .section-title{margin-bottom:12px;padding-bottom:9px;}
.workspace-side .summary-row{padding:7px 0;font-size:12px;}
.workspace-side .summary-grand{padding:12px;margin-top:10px;}
.workspace-side .d-grid{gap:8px!important;}
.workspace-side .btn-luxury{min-height:41px;padding:9px 11px;font-size:12px;border-radius:8px;}
.workspace-side .db-record-state{font-size:10px;line-height:1.45;}

/* Live preview sengaja dihilangkan. Preview hanya muncul melalui action/modal. */
#livePreview{display:none!important;}

@media(min-width:992px){
  body.workspace-flat .main-container{padding-top:14px!important;padding-bottom:18px!important;}
  body.workspace-flat .header-card{padding:14px 20px;margin-bottom:12px!important;display:flex;align-items:center;justify-content:center;gap:15px;border-radius:10px;box-shadow:none;}
  body.workspace-flat .header-card .logo-placeholder{width:62px;height:62px;margin:0;border-radius:15px;flex:0 0 auto;}
  body.workspace-flat .header-card h1{font-size:29px;margin:0;}
  body.workspace-flat .header-card .subtitle{font-size:10px;letter-spacing:2px;}
}
@media(max-width:991.98px){
  .workspace-side{position:static;}
  .workspace-panel-scroll{max-height:none;overflow:visible;}
  .workspace-menu{position:static;}
}
@media(max-width:575.98px){
  .quick-booking-flat{grid-template-columns:1fr;padding:12px;}
  .workspace-menu-btn{min-width:142px;padding:9px 10px;font-size:11px;}
}

/* =====================================================================
   V4.1 — PAYMENT COLUMNS ALIGNED IN ONE CLEAN ROW
   ===================================================================== */
.payment-input-hint{display:none!important;}
.payment-row{
  display:grid;
  grid-template-columns:
    minmax(0,1.28fr)
    minmax(0,1.08fr)
    minmax(0,.84fr)
    minmax(76px,.62fr)
    minmax(0,.90fr)
    minmax(0,.96fr)
    minmax(104px,.78fr)
    44px;
  gap:10px;
  align-items:end;
  padding:14px;
  overflow:visible;
}
.payment-row > div{
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
}
.payment-row .form-label{
  min-height:25px;
  display:flex;
  align-items:flex-end;
  margin-bottom:6px;
  line-height:1.2;
  white-space:normal;
}
.payment-row .form-control,
.payment-row .form-select,
.payment-row .payment-equivalent-display{
  width:100%;
  height:46px;
  min-height:46px;
  margin:0;
}
.payment-row .payment-status{
  min-width:0;
  width:100%;
  padding-left:10px;
  padding-right:28px;
  font-size:13px;
}
.payment-row .payment-remove{
  position:static;
  grid-column:auto;
  justify-self:stretch;
  align-self:end;
  width:44px;
  height:46px;
  margin:0;
}
.payment-row .payment-name,
.payment-row .payment-date,
.payment-row .payment-amount-idr,
.payment-row .payment-exchange-rate{
  min-width:0;
}
@media(max-width:1199.98px){
  .payment-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding:13px;
  }
  .payment-row .payment-remove{
    grid-column:2;
    justify-self:end;
    width:44px;
    height:42px;
  }
}
@media(max-width:575.98px){
  .payment-row{grid-template-columns:1fr;}
  .payment-row .payment-remove{grid-column:1;}
}

/* =====================================================================
   V4.2 — NAVY BLUE THEME + SMART IDR INPUT
   ===================================================================== */
:root{
  --gold:#d7aa45;
  --gold-light:#f6e6b8;
  --gold-dark:#a87f2f;
  --navy-deep:#071426;
  --navy:#102a4f;
  --glass-bg:rgba(13,36,69,.92);
  --glass-bg-strong:rgba(18,48,88,.96);
  --glass-border:rgba(219,181,95,.34);
  --text-light:#fffaf0;
  --text-muted:#d7dce7;
}
body{
  background:#071426;
  background-image:
    radial-gradient(circle at 8% 0%,rgba(215,170,69,.12),transparent 32%),
    radial-gradient(circle at 90% 92%,rgba(67,111,166,.22),transparent 38%);
}
.bg-slideshow{background:linear-gradient(145deg,#061224 0%,#102a4f 54%,#08172c 100%);}
.bg-slide{filter:saturate(.70) brightness(.48) contrast(1.08) hue-rotate(8deg);}
.bg-overlay{
  background:
    linear-gradient(120deg,rgba(5,17,35,.93),rgba(12,39,73,.78) 52%,rgba(5,18,38,.93)),
    radial-gradient(circle at 18% 12%,rgba(215,170,69,.15),transparent 36%);
}
.bg-overlay::after{background:radial-gradient(circle at 82% 88%,rgba(75,120,178,.18),transparent 36%);}
.glass-card,
.quick-booking-flat,
.workspace-menu,
.workspace-panel.glass-card,
.workspace-side .glass-card{
  background:rgba(10,31,59,.94)!important;
  border-color:rgba(219,181,95,.34)!important;
}
.header-card{
  background:
    radial-gradient(circle at 50% -25%,rgba(215,170,69,.19),transparent 43%),
    linear-gradient(135deg,rgba(18,54,96,.97),rgba(7,25,49,.97))!important;
}
.workspace-menu-btn{background:rgba(5,20,41,.72);color:#e5eaf3;}
.workspace-menu-btn:hover{background:rgba(215,170,69,.11);}
.form-control,.form-select,
.room-table input.qty-input,.room-table input.rate-input{
  background:rgba(4,18,38,.68)!important;
  border-color:rgba(226,205,157,.24)!important;
}
.form-control:focus,.form-select:focus,
.room-table input.qty-input:focus,.room-table input.rate-input:focus{
  background:rgba(8,27,53,.92)!important;
  border-color:#d7aa45!important;
}
.payment-row,.payment-summary-item,.exchange-rate-input{
  background:linear-gradient(145deg,rgba(7,27,53,.82),rgba(255,255,255,.025))!important;
}
.payment-row .payment-equivalent-display,
.payment-row .payment-sar-display{
  background:rgba(215,170,69,.13)!important;
  border-color:rgba(215,170,69,.33)!important;
}
.summary-grand{background:linear-gradient(135deg,rgba(215,170,69,.26),rgba(22,66,112,.45))!important;}
.modal-content.glass-modal{background:linear-gradient(165deg,#123a67,#071a34)!important;}
.toast{background:rgba(14,47,83,.97)!important;}
.rate-warning{
  border-color:#ff9d72!important;
  box-shadow:0 0 0 3px rgba(255,112,67,.18)!important;
}


/* =====================================================================
   V5.0 — SIMPLIFIED WORKFLOW
   ===================================================================== */
.app-version-badge{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:7px 12px;
  border:1px solid rgba(240,223,168,.28);border-radius:999px;
  background:rgba(8,27,53,.55);color:var(--gold-light);font-size:11px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;
}
.wizard-progress-card{
  display:flex;align-items:center;gap:14px;margin:0 0 14px;padding:14px 16px;
  border:1px solid rgba(215,170,69,.22);border-radius:14px;
  background:linear-gradient(145deg,rgba(7,27,53,.78),rgba(255,255,255,.025));
}
.wizard-progress-copy{min-width:150px;}
.wizard-progress-copy strong{display:block;font-size:13px;color:var(--gold-light);}
.wizard-progress-copy small{display:block;color:var(--text-muted);font-size:11px;margin-top:2px;}
.wizard-progress-track{height:8px;flex:1;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.09);}
.wizard-progress-bar{height:100%;width:20%;border-radius:inherit;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));transition:width .25s ease;}
.wizard-navigation{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 24px;
  padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(7,26,52,.82);backdrop-filter:blur(14px);
}
.wizard-navigation .btn-luxury{width:auto;min-width:132px;}
.wizard-step-label{font-size:12px;color:var(--text-muted);text-align:center;}
.field-with-action{display:flex;align-items:stretch;gap:8px;}
.field-with-action .form-control{min-width:0;}
.btn-field-action{flex:0 0 auto;padding:0 13px;border-radius:12px;border:1px solid rgba(215,170,69,.42);background:rgba(215,170,69,.13);color:var(--gold-light);font-weight:700;font-size:12px;}
.btn-field-action:hover{background:rgba(215,170,69,.24);}
.draft-notice{
  display:none;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;padding:12px 14px;
  border-radius:14px;border:1px solid rgba(61,220,151,.28);background:rgba(61,220,151,.08);
}
.draft-notice.show{display:flex;}
.draft-notice-copy{font-size:12px;color:var(--text-muted);}
.draft-notice-copy strong{display:block;color:var(--text-light);font-size:13px;}
.draft-notice-actions{display:flex;gap:8px;flex-wrap:wrap;}
.draft-state{margin-top:8px;font-size:11px;color:var(--text-muted);text-align:center;}
.required-mark{color:#ffb3b3;margin-left:3px;}
.workspace-menu-btn .step-number{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.10);font-size:10px;font-weight:800;
}
.workspace-menu-btn.active .step-number{background:var(--gold);color:#161006;}
@media (max-width:767.98px){
  .wizard-progress-card{align-items:flex-start;flex-direction:column;gap:9px;}
  .wizard-progress-track{width:100%;flex:none;}
  .wizard-navigation{position:sticky;bottom:8px;z-index:40;padding:10px;box-shadow:0 12px 34px rgba(0,0,0,.35);}
  .wizard-navigation .btn-luxury{min-width:0;flex:1;padding:11px 9px;font-size:12px;}
  .wizard-step-label{display:none;}
  .field-with-action{flex-direction:column;}
  .btn-field-action{min-height:42px;}
  .draft-notice{align-items:flex-start;flex-direction:column;}
}


/* =====================================================================
   V5.1 — UNBRANDED DEFAULT + HEADER LOGO UPLOAD
   ===================================================================== */
.header-brand-tools{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.header-title-group{min-width:0;}
.header-logo-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
}
.header-logo-actions small{
  max-width:190px;
  color:rgba(255,250,240,.62);
  font-size:10px;
  line-height:1.35;
}
.header-logo-button{
  width:auto;
  min-width:132px;
  min-height:36px;
  padding:7px 12px;
  white-space:nowrap;
}
.logo-placeholder{
  border:1px dashed rgba(216,184,106,.66);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  animation:none;
}
.logo-placeholder.has-logo{
  border-style:solid;
  background:#fff;
  box-shadow:0 10px 28px rgba(0,24,21,.35);
}
.logo-empty-state{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:rgba(255,241,200,.72);
  font-size:11px;
  font-weight:700;
  letter-spacing:.5px;
}
.logo-empty-state i{font-size:23px;}
.header-logo-img[hidden],.logo-empty-state[hidden]{display:none!important;}

@media(min-width:992px){
  body.workspace-flat .header-card{justify-content:space-between;}
  body.workspace-flat .header-brand-tools{justify-content:flex-start;flex:0 0 auto;}
  body.workspace-flat .header-title-group{flex:1;text-align:center;}
  body.workspace-flat .header-logo-actions{flex-direction:row;align-items:center;flex-wrap:wrap;max-width:305px;}
  body.workspace-flat .header-logo-actions small{flex-basis:100%;max-width:none;}
  body.workspace-flat .header-logo-button{min-width:auto;}
}
@media(max-width:991.98px){
  .header-card{display:flex;flex-direction:column;align-items:center;gap:14px;}
  .header-brand-tools{flex-wrap:wrap;}
  .header-logo-actions{align-items:center;}
}
@media(max-width:575.98px){
  .header-brand-tools{flex-direction:column;}
  .header-logo-actions{width:100%;}
  .header-logo-button{width:100%;}
}