/*
 * KD-Plant — Copyright (c) 2026 Kevin Dennis. All rights reserved.
 * Proprietary and confidential. Not open source. See LICENSE.
 */
/* ---- One popup ----------------------------------------------------------
   Every dialog in the product is a <dialog class="kd-modal">: the same box,
   the same backdrop, the same header, body and footer, the same buttons, in
   both themes. A page never draws its own. */

dialog.kd-modal {
  /* A visible edge, and one spot on the screen: dead centre of the viewport,
     whatever the page behind it is doing. */
  border: 2px solid var(--kd-modal-edge, var(--db-border-strong, #cbd5e1)); padding: 0;
  /* The !important is deliberate: a popup's markup sits wherever a page put
     it, and a page's own spacing utility (space-y-*, mt-*) on that container
     reaches the dialog and drags it to the top. Placement is not the page's. */
  position: fixed !important; inset: 0 !important; margin: auto !important; transform: none;
  top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: var(--db-surface, #fff); color: var(--db-text, #0f172a);
  border-radius: 18px; width: min(92vw, 26rem); max-height: min(88vh, 62rem);
  box-shadow: 0 30px 70px -24px rgba(2, 6, 23, .55), 0 2px 8px rgba(2, 6, 23, .08);
  overflow: hidden; font-family: inherit;
}
dialog.kd-modal.is-wide { width: min(94vw, 42rem); }
dialog.kd-modal.is-xl { width: min(96vw, 54rem); }
dialog.kd-modal::backdrop { background: rgba(2, 6, 23, .5); backdrop-filter: blur(3px); }
dialog.kd-modal[open] { display: flex; flex-direction: column; animation: kd-modal-in .18s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes kd-modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.kd-modal[open] { animation: none; } }

/* The one child (usually a form) carries the three parts, and the body is
   the part that scrolls. */
dialog.kd-modal > form, dialog.kd-modal > .kd-modal-w { display: flex; flex-direction: column; min-height: 0; max-height: inherit; margin: 0; }

.kd-modal-h { padding: 1.2rem 1.4rem .5rem; flex: none; }
.kd-modal-h h2, .kd-modal-h h3 { margin: 0; font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; color: var(--db-text, #0f172a); }
.kd-modal-h p { margin: .3rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--db-text-2, #475569); }
.kd-modal.is-danger .kd-modal-h h2, .kd-modal.is-danger .kd-modal-h h3 { color: var(--db-bad-fg, #be123c); }

.kd-modal-b { padding: .5rem 1.4rem 1.1rem; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: .85rem; font-size: .86rem; color: var(--db-text, #0f172a); }
.kd-modal-b[hidden] { display: none; }
.kd-modal-b p { margin: 0; line-height: 1.5; color: var(--db-text-2, #475569); }

/* A labelled field: small caps label above, the control below, full width. */
.kd-field { display: flex; flex-direction: column; gap: .32rem; min-width: 0; }
.kd-field > span { font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .07em; color: var(--db-text-2, #475569); }
.kd-field > span small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--db-text-3, #64748b); }
.kd-modal-b input:not([type="checkbox"]):not([type="radio"]), .kd-modal-b select, .kd-modal-b textarea { width: 100%; font-size: .9rem; }
.kd-modal-b textarea { min-height: 4.5rem; resize: vertical; }
.kd-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
@media (max-width: 480px) { .kd-grid-2 { grid-template-columns: 1fr; } }
.kd-check { display: flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 500; color: var(--db-text, #0f172a); cursor: pointer; }
.kd-check input { width: 1.05rem; height: 1.05rem; }

/* A header with a close button in its corner. */
.kd-modal-h.has-x { display: flex; align-items: flex-start; gap: .75rem; }
.kd-modal-h.has-x h2, .kd-modal-h.has-x h3 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kd-modal-x { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--db-border, #e9edf3); background: var(--db-surface-2, #f8fafc); color: var(--db-text-2, #475569); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: -.2rem -.3rem 0 0; }
.kd-modal-x:hover { color: var(--db-text, #0f172a); border-color: var(--db-border-strong, #cbd5e1); }
.kd-modal-x svg, .kd-modal-x i { width: 16px; height: 16px; }

/* A list that used to slide in from the side now sits in the popup, and
   nothing is dragged out of a popup: the grips go, the rows are tapped. */
dialog.kd-modal .drawer-card-grip, dialog.kd-modal .lucide-grip-vertical { display: none; }
dialog.kd-modal .drawer-row { cursor: pointer; }

/* Move a job from its popup: a date and a button on one line. */
.kd-move-row { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.kd-move-row .kd-field { flex: 1 1 10rem; }
.kd-move-row .kd-btn { min-height: 40px; }

/* A note inside the body: a fact, a warning, a problem. */
.kd-modal-note { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .75rem; border-radius: 10px; font-size: .82rem; font-weight: 600; line-height: 1.4;
  background: var(--db-surface-2, #f8fafc); color: var(--db-text-2, #475569); border: 1px solid var(--db-border, #e9edf3); }
.kd-modal-note.hidden { display: none; }
.kd-modal-note i, .kd-modal-note svg { width: 15px; height: 15px; flex: none; margin-top: .1rem; }
.kd-modal-note.is-warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.kd-modal-note.is-bad { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.kd-modal-note.is-good { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
html[data-theme="dark"] .kd-modal-note.is-warn { background: #3b2a09; color: #fcd34d; border-color: #78350f; }
html[data-theme="dark"] .kd-modal-note.is-bad { background: #3f1220; color: #fda4af; border-color: #881337; }
html[data-theme="dark"] .kd-modal-note.is-good { background: #0e2a20; color: #6ee7b7; border-color: #065f46; }

/* A value to copy: a key, a secret, a link. */
.kd-modal-copy { display: flex; gap: .5rem; align-items: stretch; }
.kd-modal-copy input { font-family: var(--db-mono); font-size: .82rem; }
.kd-modal-copy .kd-btn { flex: none; }

/* The footer: quiet actions left, the decision right; stacked on a phone. */
.kd-modal-f { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex: none; flex-wrap: wrap;
  padding: .85rem 1.4rem 1.1rem; border-top: 1px solid var(--db-border, #e9edf3); background: var(--db-surface-2, #f8fafc); }
.kd-modal-f .kd-fill { flex: 1 1 auto; font-size: .8rem; color: var(--db-text-2, #475569); }
.kd-modal-f .kd-btn { min-height: 40px; padding-left: 1rem; padding-right: 1rem; }
.kd-modal-f .kd-btn[hidden] { display: none; }
@media (max-width: 600px) {
  .kd-modal-f { flex-direction: column-reverse; align-items: stretch; }
  .kd-modal-f .kd-btn { width: 100%; min-height: 46px; }
  .kd-modal-f .kd-fill { text-align: center; }
}

/* The solid red for a decision that cannot be undone. */
.kd-btn.is-danger-solid { background: var(--db-bad, #dc2626); border-color: transparent; color: #fff; }
.kd-btn.is-danger-solid:hover { filter: brightness(1.08); color: #fff; }
.kd-btn.is-warn-solid { background: var(--db-warn, #d97706); border-color: transparent; color: #fff; }
.kd-btn.is-warn-solid:hover { filter: brightness(1.08); color: #fff; }

/* The pages that build an overlay in script draw the same box. */
.db-modal-box, .jsa-modal-box { border-radius: 18px; box-shadow: 0 30px 70px -24px rgba(2, 6, 23, .55), 0 2px 8px rgba(2, 6, 23, .08); }