/* ============================================================
   dialog.css — Father Dialog Shell
   ============================================================
   Owns ONLY the shell: backdrop, card, head, body, foot, buttons.
   Zero knowledge of what goes inside any dialog.
   Children override/extend via their own scoped CSS files.
   ============================================================ */

/* ─── Tokens ─────────────────────────────────────────────── */

:root {
  --d-z:        1200;
  --d-backdrop: rgba(15, 23, 42, 0.55);
  --d-blur:     3px;
  --d-radius:   12px;
  --d-shadow:   0 24px 64px rgba(0, 0, 0, 0.16);
  --d-head-h:   54px;
  --d-ease:     0.18s ease;
}

/* Day values — derived from shared tokens */
:root {
  --d-bg:       var(--clr-bg-card);
  --d-border:   var(--clr-border);
  --d-text:     var(--clr-text-primary);
  --d-muted:    var(--clr-text-muted);
  --d-foot-bg:  var(--clr-bg);
}

/* Night overrides — simply inherit from the shared token overrides */
html.theme-night {
  --d-bg:      var(--dltpt-bg-card);
  --d-border:  var(--dltpt-border);
  --d-text:    var(--dltpt-text-1);
  --d-muted:   var(--dltpt-text-3);
  --d-foot-bg: var(--dltpt-bg-card-head);
}


/* ─── Backdrop ───────────────────────────────────────────── */

.d-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--d-z);
  background: var(--d-backdrop);
  backdrop-filter: blur(var(--d-blur));
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.d-backdrop.d-open { display: flex; }

.d-locked { overflow: hidden; }


/* ─── Box ────────────────────────────────────────────────── */

.d-box {
  background:     var(--d-bg);
  border-radius:  var(--d-radius);
  box-shadow:     var(--d-shadow);
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  width:          100%;
  max-width:      560px;
  max-height:     90vh;
  animation:      d-in var(--d-ease) both;
}

@keyframes d-in {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

[data-size="sm"]   .d-box { max-width: 400px; }
[data-size="md"]   .d-box { max-width: 560px; }
[data-size="lg"]   .d-box { max-width: 780px; }
[data-size="xl"]   .d-box { max-width: 960px; }
[data-size="full"] .d-box { max-width: min(1100px, 94vw); }


/* ─── Head ───────────────────────────────────────────────── */

.d-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         0 20px;
  height:          var(--d-head-h);
  border-bottom:   1px solid var(--d-border);
  background:      var(--d-bg);
  flex-shrink:     0;
}

.d-title {
  font-size:     0.9375rem;
  font-weight:   600;
  color:         var(--d-text);
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

.d-title .fa {
  color:      var(--clr-luna-blue);
  font-size:  0.85em;
  flex-shrink: 0;
}

.d-close {
  width:        30px;
  height:       30px;
  flex-shrink:  0;
  border:       none;
  background:   transparent;
  border-radius: 7px;
  display:      flex;
  align-items:  center;
  justify-content: center;
  cursor:       pointer;
  color:        var(--d-muted);
  font-size:    0.875rem;
  transition:   background 0.12s, color 0.12s;
  padding:      0;
  line-height:  1;
}

.d-close:hover {
  background: var(--clr-luna-gray-light);
  color:      var(--d-text);
}


/* ─── Body ───────────────────────────────────────────────── */

.d-body {
  flex:       1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding:    20px;
}

.d-body--flush {
  padding:  0;
  overflow: hidden;
}


/* ─── Foot ───────────────────────────────────────────────── */

.d-foot {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             8px;
  padding:         12px 20px;
  border-top:      1px solid var(--d-border);
  background:      var(--d-foot-bg);
  flex-shrink:     0;
}

.d-foot--left   { justify-content: flex-start; }
.d-foot--spread { justify-content: space-between; }


/* ─── Buttons ────────────────────────────────────────────── */

.d-btn {
  display:      inline-flex;
  align-items:  center;
  gap:          6px;
  padding:      8px 18px;
  border-radius: 7px;
  font-size:    0.875rem;
  font-weight:  500;
  font-family:  inherit;
  cursor:       pointer;
  border:       1px solid transparent;
  transition:   background 0.12s, border-color 0.12s, color 0.12s, filter 0.12s;
  line-height:  1;
  white-space:  nowrap;
}

.d-btn--primary {
  background:   var(--clr-luna-blue);
  color:        #fff;
  border-color: var(--clr-luna-blue);
}
.d-btn--primary:hover { filter: brightness(0.9); }

.d-btn--ghost {
  background:   transparent;
  color:        var(--d-muted);
  border-color: var(--d-border);
}
.d-btn--ghost:hover {
  background: var(--clr-luna-gray-light);
  color:      var(--d-text);
}

.d-btn--danger {
  background:   transparent;
  color:        var(--clr-luna-red);
  border-color: var(--clr-luna-red);
}
.d-btn--danger:hover { background: #fef2f2; }

.d-btn--success {
  background:   var(--clr-luna-green);
  color:        #fff;
  border-color: var(--clr-luna-green);
}
.d-btn--success:hover { filter: brightness(0.9); }

.d-btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }


/* ─── Split layout ───────────────────────────────────────── */

[data-layout="split"] .d-body {
  display:        flex !important;
  flex-direction: row;
  padding:        0;
  overflow:       hidden;
  height:         560px;
  max-height:     calc(90vh - var(--d-head-h));
}

[data-layout="split"] .d-panel--main {
  flex:       0 0 460px;
  width:      460px;
  overflow-y: auto;
  border-right: 1px solid var(--d-border);
}

[data-layout="split"] .d-panel--side {
  flex:            1 1 0;
  min-width:       0;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  background:      var(--clr-bg);
}

[data-layout="split"] .d-body.d-solo .d-panel--main {
  flex:         1 1 auto;
  width:        100%;
  border-right: none;
}

[data-layout="split"] .d-body.d-solo {
  height:     auto;
  min-height: 80px;
}


/* ─── Responsive ─────────────────────────────────────────── */

@media (max-width: 680px) {
  .d-backdrop { padding: 8px; align-items: flex-end; }
  .d-box {
    max-width:                   100% !important;
    max-height:                  95vh;
    border-bottom-left-radius:   0;
    border-bottom-right-radius:  0;
  }
  [data-layout="split"] .d-body {
    flex-direction: column !important;
    height:         auto;
    max-height:     none;
  }
  [data-layout="split"] .d-panel--main {
    flex:         none;
    width:        100%;
    border-right: none;
    border-bottom: 1px solid var(--d-border);
    max-height:   50vh;
  }
  [data-layout="split"] .d-panel--side {
    flex:   none;
    width:  100%;
    height: 420px;
  }
}