/* =========================================================
   modal.css — DutchLine UI (Modals / Offcanvas overlays)
   - Bootstrap modal/offcanvas enhanced styling
   - Premium, soft, enterprise
   - Variants: neutral/success/danger/warning/info
   ========================================================= */

/* Backdrop: softer + blur */
.modal-backdrop.show{
  opacity: .42;
}
@supports (backdrop-filter: blur(10px)){
  .modal-backdrop.show{
    backdrop-filter: blur(10px) saturate(1.2);
  }
}

/* Dialog entrance animation */
.modal.fade .modal-dialog{
  transform: translateY(12px) scale(.985);
  transition: transform .22s ease, opacity .22s ease;
}
.modal.show .modal-dialog{
  transform: translateY(0) scale(1);
}

/* DutchLine modal shell */
.dl-modal .modal-content{
  border-radius: calc(var(--r2) + 2px);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.94);
  box-shadow: 0 26px 90px rgba(11,18,32,.18);
  overflow:hidden;
}

/* Top accent line */
.dl-modal .modal-content::before{
  content:"";
  display:block;
  height: 2px;
  background: linear-gradient(90deg, rgba(48,77,161,.70), rgba(128,160,208,.25), transparent);
  opacity: .9;
}

/* Header / body / footer */
.dl-modal .modal-header{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px 16px;
}
.dl-modal .modal-title{
  font-weight: 950;
  letter-spacing: -.02em;
}
.dl-modal .modal-body{
  padding: 16px;
  color: rgba(11,18,32,.90);
}
.dl-modal .modal-footer{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  padding: 14px 16px;
  gap: 10px;
}

/* Close button toned down */
.dl-modal .btn-close{
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}
.dl-modal .btn-close:hover{
  opacity: .85;
  transform: translateY(-1px);
}

/* Optional icon chip inside header/body */
.dl-modal-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  display:grid;
  place-items:center;
  font-weight: 950;
}

/* Variant system (soft only) */
.dl-modal[data-variant="neutral"] .modal-content::before{
  background: linear-gradient(90deg, rgba(11,18,32,.26), rgba(11,18,32,.10), transparent);
}
.dl-modal[data-variant="success"] .modal-content::before{
  background: linear-gradient(90deg, rgba(32,201,151,.75), rgba(32,201,151,.18), transparent);
}
.dl-modal[data-variant="danger"] .modal-content::before{
  background: linear-gradient(90deg, rgba(255,77,77,.75), rgba(255,77,77,.18), transparent);
}
.dl-modal[data-variant="warning"] .modal-content::before{
  background: linear-gradient(90deg, rgba(255,193,7,.80), rgba(255,193,7,.18), transparent);
}
.dl-modal[data-variant="info"] .modal-content::before{
  background: linear-gradient(90deg, rgba(13,110,253,.80), rgba(13,110,253,.18), transparent);
}

/* Variant icon chip backgrounds */
.dl-modal[data-variant="success"] .dl-modal-icon{
  border-color: rgba(32,201,151,.22);
  background: rgba(32,201,151,.10);
}
.dl-modal[data-variant="danger"] .dl-modal-icon{
  border-color: rgba(255,77,77,.22);
  background: rgba(255,77,77,.10);
}
.dl-modal[data-variant="warning"] .dl-modal-icon{
  border-color: rgba(255,193,7,.22);
  background: rgba(255,193,7,.12);
}
.dl-modal[data-variant="info"] .dl-modal-icon{
  border-color: rgba(13,110,253,.22);
  background: rgba(13,110,253,.10);
}

/* Full width modal (within container width) */
.modal-dialog.dl-modal-wide{
  max-width: min(1100px, 92vw);
}

/* “Full width” meaning almost screen-wide */
.modal-dialog.dl-modal-full{
  max-width: min(1320px, 96vw);
}

/* Scrollable modal body polish */
.modal-dialog-scrollable .modal-body{
  scrollbar-gutter: stable;
}
.modal-dialog-scrollable .modal-body::-webkit-scrollbar{ width: 10px; }
.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}

/* Form layout inside modal */
.dl-modal .dl-form-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.dl-modal .dl-col-6{ grid-column: span 6; }
.dl-modal .dl-col-12{ grid-column: span 12; }
@media (max-width: 991px){
  .dl-modal .dl-col-6{ grid-column: span 12; }
}

/* Signature pad */
.dl-signature{
  border-radius: var(--r2);
  border: 1px solid var(--border);
  background:
    radial-gradient(520px 180px at 20% 20%, rgba(48,77,161,.08), transparent 60%),
    var(--surface);
  overflow:hidden;
}
.dl-signature .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.86);
}
.dl-signature canvas{
  width: 100%;
  height: 180px;
  display:block;
  cursor: crosshair;
}
.dl-signature .hint{
  color: var(--muted);
  font-size: .92rem;
}

/* Offcanvas polish (optional, but nice here) */
.offcanvas{
  border-left: 1px solid var(--border);
  background: rgba(255,255,255,.94);
}
.offcanvas .offcanvas-header{
  border-bottom: 1px solid var(--border);
}
.offcanvas .offcanvas-title{
  font-weight: 950;
  letter-spacing: -.02em;
}