// :host {
//   display: contents;
// }

// :host(.modern-modal) .ti-modal-content {
//   border-radius: 1rem !important;
//   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
//   border-color: var(--color-defaultborder) !important;

//   &:where(.dark, .dark *) {
//     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
//   }
// }

// :host(.modern-modal) .ti-modal-header {
//   padding-inline: 1.5rem !important;
//   padding-block: 1.25rem !important;
//   border-color: var(--color-defaultborder) !important;
// }

// :host(.modern-modal) .ti-modal-title {
//   font-size: 1.125rem !important;
//   font-weight: 600 !important;
//   color: var(--color-gray-800) !important;

//   &:where(.dark, .dark *) {
//     color: var(--color-white) !important;
//   }
// }

// :host(.modern-modal) .ti-modal-close-btn {
//   border-radius: 0.5rem !important;
//   color: var(--color-gray-500) !important;
//   transition: all 0.2s ease !important;

//   &:hover {
//     color: var(--color-primary) !important;
//     background-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
//   }
// }

// :host(.modern-modal) .ti-modal-body {
//   padding: 1.5rem !important;
// }

// :host(.modern-modal) .ti-modal-footer {
//   padding-inline: 1.5rem !important;
//   padding-block: 1rem !important;
//   gap: 0.75rem !important;
//   border-color: var(--color-defaultborder) !important;
// }


/* ==========================================================
   Overlay
========================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 1.5rem;

  animation: modalFade .22s ease;
}

/* ==========================================================
   Backdrop
========================================================== */

.modal-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(15, 23, 42, .42);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

/* ==========================================================
   Wrapper
========================================================== */

.modern-modal-wrapper {

  position: relative;

  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: auto;

  animation: modalSlide .28s ease;
}

/* ==========================================================
   Modal
========================================================== */

.modern-modal {

  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  max-height: 90vh;

  overflow: hidden;

  border-radius: 20px;

  background: #ffffff;

  // border: 1px solid #edf2f7;

  box-shadow:
    0 15px 40px rgba(15, 23, 42, .10),
    0 30px 80px rgba(15, 23, 42, .14);

}

/* ==========================================================
   Header
========================================================== */

.modern-modal-header {

  position: relative;

  overflow: hidden;

  border-bottom: 1px solid rgba(255, 255, 255, .08);

  // background: linear-gradient(135deg,
  //     #020617 0%,
  //     #172554 40%,
  //     #4338CA 75%,
  //     #7C3AED 100%);
  // background: linear-gradient(135deg,
  //   #111C43 0%,
  //   #16285c 55%,
  //   #1d3578 100%);
  background-color: #7c3deb;

  isolation: isolate;
}

/* Decorative Background */
.modal-header-bg {

  position: absolute;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}

/* Left Glow */

.modal-header-bg::before {

  content: "";

  position: absolute;

  width: 280px;

  height: 280px;

  left: -120px;

  top: -120px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(255, 255, 255, .14),
      transparent 72%);

  filter: blur(8px);
}

/* Right Glow */

.modal-header-bg::after {

  content: "";

  position: absolute;

  width: 240px;

  height: 240px;

  right: -80px;

  top: -90px;

  border-radius: 50%;

  background:
    radial-gradient(circle,
      rgba(91, 140, 255, .25),
      transparent 72%);

  filter: blur(10px);
}

.modern-modal-header::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: 1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .18),
      transparent);
}

/* Header Layout */

.modal-header-content {

  position: relative;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 10px 2rem;
}

.modal-header-left {

  display: flex;

  align-items: center;

  gap: 18px;

  min-width: 0;

  flex: 1;
}

/* ==========================================================
   Icon
========================================================== */

.modal-icon {

  flex-shrink: 0;
}

.modal-icon-inner {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #ffffff;

  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, .18),
      rgba(255, 255, 255, .06));

  border: 1px solid rgba(255, 255, 255, .18);

  backdrop-filter: blur(12px);

  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .15),
    0 10px 30px rgba(0, 0, 0, .25);
}

.modal-icon-inner i {

  font-size: 17px;
}

/* ==========================================================
   Title
========================================================== */

.modal-title-wrapper {

  min-width: 0;
}

.modern-modal-title {

  margin: 0;

  color: #ffffff;

  font-size: 17px;

  font-weight: 700;

  letter-spacing: -.4px;

  line-height: 1.3;
}

.modern-modal-subtitle {

  margin-top: .45rem;

  color: rgba(255, 255, 255, .72);

  font-size: .9rem;

  line-height: 1.6;
}

/* ==========================================================
   Close
========================================================== */

.modern-close-btn {

  width: 25px;

  height: 25px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  color: #ffffff;

  background: rgba(255, 255, 255, .08);

  // border: 1px solid rgba(255, 255, 255, .12);

  backdrop-filter: blur(8px);

  transition: .28s;
}

.modern-close-btn:hover {

  background: rgba(255, 255, 255, .18);

  transform: rotate(90deg) scale(1.05);

  border-color: rgba(255, 255, 255, .25);
}

.modern-close-btn i {

  font-size: 16px;
}

/* ==========================================================
   Body
========================================================== */

.modern-modal-body {

  flex: 1;

  overflow: auto;

  padding: 2rem;
}

.modal-content-wrapper {

  display: flex;

  flex-direction: column;

  gap: 1.5rem;
}

/* Scroll */

.modern-modal-body::-webkit-scrollbar {

  width: 7px;
}

.modern-modal-body::-webkit-scrollbar-thumb {

  background: #d4dbe6;

  border-radius: 20px;
}

.modern-modal-body::-webkit-scrollbar-thumb:hover {

  background: #b8c3d3;
}

/* ==========================================================
   Footer
========================================================== */
/* Footer */

.modern-modal-footer {

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 12px;

  padding: 5px 2rem;

  border-top: 1px solid #edf2f7;

  background: #ffffff;
}

/* ==========================================================
   Dark Mode
   ========================================================== */

:host-context(.dark) .modern-modal {
  background: var(--color-bodybg) !important;
  box-shadow:
    0 15px 40px rgba(0, 0, 0, .25),
    0 30px 80px rgba(0, 0, 0, .35);
}

:host-context(.dark) .modern-modal-body {
  color: var(--color-defaulttextcolor) !important;
}

:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb {
  background: var(--color-inputborder) !important;
}

:host-context(.dark) .modern-modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-textmuted) !important;
}

:host-context(.dark) .modern-modal-footer {
  background: var(--color-bodybg) !important;
  border-top: 1px solid var(--color-inputborder) !important;
}

:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button {
  background: var(--color-light) !important;
  border-color: var(--color-inputborder) !important;
  color: var(--color-defaulttextcolor) !important;
}

:host-context(.dark) ::ng-deep .modern-modal-footer app-button:first-child button:hover {
  background: var(--color-bodybg) !important;
  border-color: var(--color-textmuted) !important;
}

:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button {
  box-shadow:
    0 8px 20px rgba(125, 61, 235, 0.55) !important;
}

:host-context(.dark) ::ng-deep .modern-modal-footer app-button:last-child button:hover {
  box-shadow:
    0 12px 28px rgba(125, 61, 235, .65) !important;
}

/* ==========================================================
   Modal form-control borders in dark mode
   ========================================================== */

:host-context(.dark) ::ng-deep .modern-modal {

  .shared-form-input,
  .custom-floating-input,
  .form-control,
  .form-select,
  .ti-form-input,
  .ti-form-select,
  .ti-form-control,
  .ng-select-container,
  textarea,
  input[type="text"],
  input:not([type]),
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="month"],
  input[type="time"],
  input[type="week"] {
    border-color: rgb(115 122 130) !important;
  }

  .form-check-input:not(:checked) {
    border-color: rgb(115 122 130) !important;
  }

  /* keep focus / validation colors */
  .shared-form-control.is-focused .shared-form-input,
  .shared-form-input:focus,
  .custom-floating-input:focus,
  .form-control:focus,
  .form-select:focus,
  .ti-form-input:focus,
  .ti-form-select:focus,
  .ti-form-control:focus,
  .ng-select.ng-select-focused .ng-select-container,
  textarea:focus {
    border-color: var(--color-primary) !important;
  }

  .form-control.is-invalid,
  .form-select.is-invalid,
  .ti-form-input.is-invalid,
  .ti-form-select.is-invalid,
  .ti-form-control.is-invalid,
  textarea.is-invalid,
  .has-error .shared-form-input,
  .ng-invalid.ng-touched,
  .custom-floating-input.ng-invalid.ng-touched {
    border-color: var(--color-danger) !important;
  }

  .form-check-input:checked,
  .form-check-input.is-invalid {
    border-color: var(--color-primary) !important;
  }

  .form-check-input.is-invalid:not(:checked) {
    border-color: var(--color-danger) !important;
  }
}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width:768px) {

  .modal-overlay {

    padding: 1rem;
  }

  .modern-modal {

    border-radius: 18px;

    max-height: 95vh;
  }

  .modal-header-content {

    padding: 1em;
  }

  .modal-icon-inner {

    width: 48px;
    height: 48px;

    border-radius: 14px;
  }

  .modern-modal-title {

    font-size: 12px;
  }

  .modern-modal-body {

    padding: 1.2rem;
  }

  .modern-modal-footer {

    padding: 1rem 1.2rem;

    flex-wrap: wrap;
  }

}

/* ==========================================================
   Animation
========================================================== */

@keyframes modalFade {

  from {

    opacity: 0;
  }

  to {

    opacity: 1;
  }

}

@keyframes modalSlide {

  from {

    opacity: 0;

    transform: translateY(20px) scale(.98);
  }

  to {

    opacity: 1;

    transform: translateY(0) scale(1);
  }

}