/**
 * System modals & offcanvas — matches the system chrome (16px radius, soft
 * shadows, hairline dividers, primary accents). Colours derive from
 * --primary-color. Light + dark aware. Applies to x-modal (.system-modal)
 * and x-modal-right (.system-offcanvas).
 */

:root {
  --sm-radius: 16px;
  --sm-border: rgba(16, 24, 40, .08);
  --sm-hair: rgba(16, 24, 40, .08);
  --sm-bg: #fff;
  --sm-fg: #384551;
  --sm-muted: #8a94a6;
}

/* ================================================================== */
/* MODAL                                                              */
/* ================================================================== */
.system-modal .modal-content {
  border: 1px solid var(--sm-border);
  border-radius: var(--sm-radius);
  background: var(--sm-bg);
  box-shadow: 0 30px 70px -25px rgba(16, 24, 40, .45);
  overflow: hidden;
}

.system-modal .modal-header {
  align-items: center;
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--sm-hair);
}
.system-modal .modal-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sm-fg);
  letter-spacing: .1px;
}
.system-modal .modal-body {
  padding: 1.4rem;
  color: var(--sm-fg);
}
.system-modal .modal-footer {
  gap: .5rem;
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--sm-hair);
}

/* Rounded, tactile close button (shared with offcanvas) */
.system-modal .btn-close,
.system-offcanvas .btn-close {
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border-radius: 9px;
  background-size: .8rem;
  opacity: .6;
  transition: background-color .15s ease, opacity .15s ease, transform .15s ease;
}
.system-modal .btn-close:hover,
.system-offcanvas .btn-close:hover {
  opacity: 1;
  background-color: color-mix(in srgb, var(--primary-color, #696cff) 10%, transparent);
  transform: rotate(90deg);
}
.system-modal .btn-close:focus,
.system-offcanvas .btn-close:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color, #696cff) 15%, transparent);
}

/* Entrance: gentle scale + rise */
.system-modal.fade .modal-dialog {
  transform: translateY(14px) scale(.97);
  transition: transform .22s cubic-bezier(.34, 1.4, .5, 1), opacity .2s ease;
}
.system-modal.show .modal-dialog {
  transform: none;
}

/* Softer, blurred backdrop */
.modal-backdrop.show { opacity: .5; }

/* ================================================================== */
/* OFFCANVAS (right slide-over form)                                  */
/* ================================================================== */
.system-offcanvas.offcanvas-end {
  width: 440px;
  max-width: 92vw;
  border: 0;
  border-start-start-radius: var(--sm-radius);
  border-end-start-radius: var(--sm-radius);
  background: var(--sm-bg);
  box-shadow: -24px 0 60px -28px rgba(16, 24, 40, .45);
  /* Column layout so header/footer pin and the body scrolls */
  display: flex;
  flex-direction: column;
}

.system-offcanvas .offcanvas-header {
  padding: 1.15rem 1.4rem;
  border-bottom: 1px solid var(--sm-hair);
}
.system-offcanvas .offcanvas-title {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--sm-fg);
}

/* The form fills the remaining height and is the scroll container, so the
   content flows naturally and the footer sits right below the last input. */
.system-offcanvas .system-offcanvas-form {
  flex: 1 1 auto;
  min-height: 0;
  /* beat the global `.offcanvas-body { overflow-y: visible !important }` */
  overflow-y: auto;
}
.system-offcanvas .offcanvas-body {
  padding: 1.4rem;
  overflow: visible !important;
  color: var(--sm-fg);
}
/* Footer flows immediately after the body (not pinned to the panel bottom) */
.system-offcanvas .system-offcanvas-footer {
  display: flex;
  gap: .6rem;
  padding: 0 1.4rem 1.4rem;
  background: var(--sm-bg);
}
.system-offcanvas .system-offcanvas-footer .btn { flex: 1 1 0; }

/* ================================================================== */
/* Dark theme                                                         */
/* ================================================================== */
html.dark-style {
  --sm-border: rgba(255, 255, 255, .10);
  --sm-hair: rgba(255, 255, 255, .08);
  --sm-bg: #2b2c40;
  --sm-fg: #cbcbe2;
  --sm-muted: #7071a4;
}
html.dark-style .system-modal .modal-content { box-shadow: 0 30px 70px -25px rgba(0, 0, 0, .7); }
html.dark-style .system-offcanvas.offcanvas-end { box-shadow: -24px 0 60px -28px rgba(0, 0, 0, .7); }
html.dark-style .system-modal .btn-close,
html.dark-style .system-offcanvas .btn-close { filter: invert(1) grayscale(1); }