/* ============================================================
   Call-pop modals — extracted from design_handoff_callpop
   Modal Designs.html (final-dark + parchment light themes).
   Keyed off #modal-root .m so it doesn't collide with the
   summary-card .row or the legacy .modal selector.
   ============================================================ */

#modal-root .modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 24px;
}

/* === Modal frame === */
#modal-root .m {
  background: var(--d-surface, #1F1D17);
  border: 1px solid var(--d-rule, #3A382F);
  border-radius: 4px;
  width: 100%;
  max-width: 520px;
  box-shadow: 0 24px 60px -10px rgba(0,0,0,0.5), 0 6px 16px rgba(0,0,0,0.3);
  overflow: hidden;
  color: var(--d-ink, #F1ECE0);
  font-family: "Nunito", system-ui, sans-serif;
}
#modal-root .m.wide { max-width: 600px; }
#modal-root .m.compact .m-body { padding-bottom: 18px; }

#modal-root .m-head {
  padding: 20px 26px 16px;
  border-bottom: 3px double var(--d-rule, #3A382F);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
#modal-root .m-head .kicker {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--d-muted, #8A8474);
  margin: 0 0 6px;
}
#modal-root .m-head h2 {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--d-ink, #F1ECE0);
  margin: 0;
  line-height: 1.1;
}
#modal-root .m-close {
  width: 26px;
  height: 26px;
  border: 1px solid var(--d-rule, #3A382F);
  background: transparent;
  color: var(--d-ink-2, #D9D2BD);
  cursor: pointer;
  font-size: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 0;
}
#modal-root .m-back {
  border: 1px solid var(--d-rule, #3A382F);
  background: transparent;
  color: var(--d-ink-2, #D9D2BD);
  cursor: pointer;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  flex-shrink: 0;
  border-radius: 0;
  align-self: flex-start;
}
#modal-root .m-back:hover {
  background: rgba(241,236,224,0.08);
  color: var(--d-ink, #F1ECE0);
  border-color: var(--d-ink, #F1ECE0);
}
#modal-root .m-head-text { flex: 1; min-width: 0; }
html[data-theme="light"] #modal-root .m-back {
  border-color: #BFB7A0 !important;
  color: #3A382F !important;
}
html[data-theme="light"] #modal-root .m-back:hover {
  background: rgba(26,25,22,0.06) !important;
  color: #1A1916 !important;
  border-color: #1A1916 !important;
}

#modal-root .m-body {
  padding: 20px 26px 6px;
  max-height: 70vh;
  overflow-y: auto;
}
#modal-root .m-body > p.lead {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d-ink-2, #D9D2BD);
  margin: 0 0 16px;
}
#modal-root .m-body > p.lead strong { color: var(--d-ink, #F1ECE0); font-weight: 700; }

#modal-root .m-foot {
  padding: 14px 26px 18px;
  border-top: 1px solid var(--d-rule-2, #2A2720);
  background: var(--d-surface-2, #232017);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
#modal-root .m-foot .endpoint {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  color: var(--d-muted, #8A8474);
}
#modal-root .m-foot .endpoint b { color: var(--d-ink, #F1ECE0); font-weight: 700; }
#modal-root .m-foot .btn-row { display: flex; gap: 8px; }

/* === Form fields === */
#modal-root .field { margin-bottom: 14px; }
#modal-root .field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--d-muted, #8A8474);
  margin-bottom: 5px;
}
#modal-root .field-label .req { color: var(--d-danger, #E26659); }
#modal-root .field-label .opt { color: var(--d-muted, #8A8474); font-weight: 400; }

#modal-root .input,
#modal-root .textarea,
#modal-root .select {
  width: 100%;
  background: #14130F;
  border: 1px solid var(--d-rule, #3A382F);
  border-radius: 0;
  padding: 10px 12px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  color: var(--d-ink, #F1ECE0);
  box-sizing: border-box;
  outline: none;
}
#modal-root .input:focus,
#modal-root .textarea:focus,
#modal-root .select:focus {
  border-color: var(--d-ink, #F1ECE0);
  box-shadow: 0 0 0 3px rgba(241,236,224,0.10);
  background: #0F0E0B;
}
#modal-root .input.readonly,
#modal-root .input[readonly] {
  background: var(--d-surface-3, #2A2620);
  color: var(--d-ink, #F1ECE0);
  font-weight: 600;
  cursor: default;
}
#modal-root .textarea { min-height: 72px; resize: vertical; }
#modal-root .textarea.tall { min-height: 132px; }

#modal-root .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#modal-root .field-row.threes { grid-template-columns: 1fr 1fr 1fr; }
#modal-root .field-help {
  margin-top: 4px;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10px;
  color: var(--d-muted, #8A8474);
  letter-spacing: 0.04em;
}
#modal-root .check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--d-text, #E8E2D4);
  cursor: pointer;
  user-select: none;
}
#modal-root .check-row input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--d-accent, #B89968);
}
#modal-root textarea.input {
  resize: vertical;
  min-height: 56px;
  font-family: inherit;
  line-height: 1.4;
}

/* select w/ chevron */
#modal-root .select-wrap { position: relative; }
#modal-root .select-wrap::after {
  content: "▾";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--d-ink-2, #D9D2BD);
  pointer-events: none;
  font-size: 12px;
}
#modal-root select.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  color-scheme: dark;
}

/* === Property picker rows === */
#modal-root .prop-list { display: grid; gap: 8px; }
#modal-root .prop-row {
  border: 1px solid var(--d-rule, #3A382F);
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #14130F;
  cursor: pointer;
  color: var(--d-ink, #F1ECE0);
  border-radius: 0;
}
#modal-root .prop-row.sel {
  border-color: var(--d-ink, #F1ECE0);
  background: #0F0E0B;
  box-shadow: inset 4px 0 0 var(--d-green, #5BB269);
  padding-left: 16px;
}
#modal-root .prop-row input[type="radio"] { display: none; }
#modal-root .prop-row .radio {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--d-ink-2, #D9D2BD);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  background: transparent;
}
#modal-root .prop-row.sel .radio::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--d-green, #5BB269);
}
#modal-root .prop-row .addr {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--d-ink, #F1ECE0);
  line-height: 1.3;
}
#modal-root .prop-row .city {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10.5px;
  color: var(--d-muted, #8A8474);
  margin-top: 2px;
  letter-spacing: 0.06em;
}

/* === Buttons === */
#modal-root .m .btn {
  padding: 10px 18px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--d-ink-2, #D9D2BD);
  background: transparent;
  color: var(--d-ink, #F1ECE0);
  cursor: pointer;
  border-radius: 0;
}
#modal-root .m .btn.primary {
  background: var(--d-ink, #F1ECE0);
  color: var(--d-bg, #1A1916);
  border-color: var(--d-ink, #F1ECE0);
}
#modal-root .m .btn.primary.green {
  background: var(--d-green, #5BB269);
  border-color: var(--d-green, #5BB269);
  color: #0F0E0B;
}
#modal-root .m .btn.danger {
  background: var(--d-danger, #E26659);
  border-color: var(--d-danger, #E26659);
  color: #14130F;
}
#modal-root .m .btn.ghost { border-color: var(--d-rule, #3A382F); color: var(--d-ink-2, #D9D2BD); }
#modal-root .m .btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* === Confirm callout (one-click archives) === */
#modal-root .confirm-box {
  border: 1px solid var(--d-rule, #3A382F);
  background: #14130F;
  padding: 14px 16px;
  margin-bottom: 16px;
}
#modal-root .confirm-box.danger {
  border-color: var(--d-danger, #E26659);
  background: rgba(226,102,89,0.12);
}
#modal-root .confirm-box .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 4px 0;
  color: var(--d-ink-2, #D9D2BD);
  border: 0;
}
#modal-root .confirm-box .row + .row { border-top: 1px dashed var(--d-rule-2, #2A2720); }
#modal-root .confirm-box .row .k { color: var(--d-muted, #8A8474); }
#modal-root .confirm-box .row .v { color: var(--d-ink, #F1ECE0); font-weight: 700; }
#modal-root .confirm-box .row .v.danger { color: var(--d-danger, #E26659); }

#modal-root .warn-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--d-danger, #E26659);
  padding: 6px 0 4px;
}
#modal-root .warn-line .sq { width: 8px; height: 8px; background: var(--d-danger, #E26659); display: inline-block; }

/* === Service ticket nature toggle (segmented) === */
#modal-root .seg {
  display: inline-flex;
  border: 1px solid var(--d-rule, #3A382F);
  background: #14130F;
  flex-wrap: wrap;
}
#modal-root .seg label {
  cursor: pointer;
  display: inline-flex;
}
#modal-root .seg input[type="radio"] { display: none; }
#modal-root .seg .seg-opt {
  padding: 8px 12px;
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--d-ink-2, #D9D2BD);
  cursor: pointer;
  border-right: 1px solid var(--d-rule-2, #2A2720);
  user-select: none;
}
#modal-root .seg label:last-child .seg-opt { border-right: 0; }
#modal-root .seg input:checked + .seg-opt {
  background: var(--d-ink, #F1ECE0);
  color: var(--d-bg, #1A1916);
}

/* External link card (Add Appointment 03a) */
#modal-root .ext-card {
  border: 1px solid var(--d-rule, #3A382F);
  background: #14130F;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}
#modal-root .ext-card .glyph {
  width: 40px;
  height: 40px;
  border: 1px solid var(--d-ink, #F1ECE0);
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 16px;
  color: var(--d-ink, #F1ECE0);
  flex-shrink: 0;
}
#modal-root .ext-card .ext-body { flex: 1; min-width: 0; }
#modal-root .ext-card .ext-h {
  font-family: "Nunito", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: var(--d-ink, #F1ECE0);
  margin-bottom: 2px;
}
#modal-root .ext-card .ext-u {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10.5px;
  color: var(--d-muted, #8A8474);
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* Client typeahead (Add Note modal) */
#modal-root .client-results {
  border: 1px solid var(--d-rule, #3A382F);
  border-top: 0;
  background: #14130F;
  max-height: 220px;
  overflow-y: auto;
  margin-top: -1px;
}
#modal-root .client-results[hidden] { display: none !important; }
#modal-root .client-result {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--d-rule-2, #2A2720);
}
#modal-root .client-result:last-child { border-bottom: 0; }
#modal-root .client-result:hover { background: rgba(241,236,224,0.06); }
#modal-root .client-result.empty { color: var(--d-muted, #8A8474); cursor: default; font-style: italic; }
#modal-root .client-result .cr-name {
  font-family: "Nunito", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--d-ink, #F1ECE0);
}
#modal-root .client-result .cr-meta {
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 10.5px;
  color: var(--d-muted, #8A8474);
  margin-top: 2px;
  letter-spacing: 0.04em;
}
html[data-theme="light"] #modal-root .client-results {
  background: #FFFFFF !important;
  border-color: #BFB7A0 !important;
}
html[data-theme="light"] #modal-root .client-result {
  border-bottom-color: #D9D2BD !important;
}
html[data-theme="light"] #modal-root .client-result:hover { background: #F6F1E2 !important; }
html[data-theme="light"] #modal-root .client-result .cr-name { color: #1A1916 !important; }
html[data-theme="light"] #modal-root .client-result .cr-meta { color: #6B6657 !important; }

/* form-error slot (rendered by openModal on submit failure) */
#modal-root .form-error {
  color: var(--d-danger, #E26659);
  font-family: "JetBrains Mono", "Roboto Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(226,102,89,0.12);
  border-left: 3px solid var(--d-danger, #E26659);
}

/* ============================================================
   LIGHT THEME OVERRIDES — kick in when final-dark.css disabled
   ============================================================ */
html[data-theme="light"] {
  --d-bg:          #F1ECE0;
  --d-surface:     #FAF7EE;
  --d-surface-2:   #F6F1E2;
  --d-surface-3:   #EFE9D7;
  --d-ink:         #1A1916;
  --d-ink-2:       #3A382F;
  --d-muted:       #6B6657;
  --d-rule:        #BFB7A0;
  --d-rule-2:      #D9D2BD;
  --d-green:       #3F9D46;
  --d-blue:        #18428F;
  --d-danger:      #B8362A;
  --d-danger-soft: rgba(184,54,42,0.10);
}
html[data-theme="light"] #modal-root .m {
  background: #FAF7EE;
  border-color: #BFB7A0;
  box-shadow: 0 24px 60px -10px rgba(40,32,15,0.18), 0 6px 16px rgba(40,32,15,0.08);
}
html[data-theme="light"] #modal-root .m-head { border-bottom-color: #BFB7A0; }
html[data-theme="light"] #modal-root .m-foot {
  border-top-color: #D9D2BD;
  background: #F1ECE0;
}
html[data-theme="light"] #modal-root .input,
html[data-theme="light"] #modal-root .textarea,
html[data-theme="light"] #modal-root .select { background: #FFFFFF; color: #1A1916; }
html[data-theme="light"] #modal-root .input:focus,
html[data-theme="light"] #modal-root .textarea:focus,
html[data-theme="light"] #modal-root .select:focus {
  background: #FFFFFF;
  border-color: #1A1916;
  box-shadow: 0 0 0 3px rgba(26,25,22,0.10);
}
html[data-theme="light"] #modal-root .input.readonly,
html[data-theme="light"] #modal-root .input[readonly] { background: #EFE9D7; }
html[data-theme="light"] #modal-root select.select { color-scheme: light; }
html[data-theme="light"] #modal-root .prop-row { background: #FFFFFF; color: #1A1916; }
html[data-theme="light"] #modal-root .prop-row.sel { background: #F6F1E2; border-color: #1A1916; }
html[data-theme="light"] #modal-root .m .btn { background: transparent; color: #1A1916; border-color: #6B6657; }
html[data-theme="light"] #modal-root .m .btn.primary { background: #1A1916; color: #F1ECE0; border-color: #1A1916; }
html[data-theme="light"] #modal-root .m .btn.primary.green { background: #3F9D46; border-color: #3F9D46; color: #FFFFFF; }
html[data-theme="light"] #modal-root .m .btn.danger { background: #B8362A; border-color: #B8362A; color: #FFFFFF; }
html[data-theme="light"] #modal-root .m .btn.ghost { color: #3A382F; border-color: #BFB7A0; }
html[data-theme="light"] #modal-root .confirm-box { background: #FFFFFF; border-color: #BFB7A0; }
html[data-theme="light"] #modal-root .confirm-box.danger { background: rgba(184,54,42,0.06); border-color: #B8362A; }
html[data-theme="light"] #modal-root .confirm-box .row { color: #3A382F; }
html[data-theme="light"] #modal-root .confirm-box .row + .row { border-top-color: #D9D2BD; }
html[data-theme="light"] #modal-root .confirm-box .row .k { color: #6B6657; }
html[data-theme="light"] #modal-root .confirm-box .row .v { color: #1A1916; }
html[data-theme="light"] #modal-root .confirm-box .row .v.danger { color: #B8362A; }
html[data-theme="light"] #modal-root .warn-line { color: #B8362A; }
html[data-theme="light"] #modal-root .warn-line .sq { background: #B8362A; }
html[data-theme="light"] #modal-root .seg { background: #FFFFFF; border-color: #BFB7A0; }
html[data-theme="light"] #modal-root .seg .seg-opt { color: #3A382F; border-right-color: #D9D2BD; }
html[data-theme="light"] #modal-root .seg input:checked + .seg-opt { background: #1A1916; color: #F1ECE0; }
html[data-theme="light"] #modal-root .ext-card { background: #FFFFFF; border-color: #BFB7A0; }
html[data-theme="light"] #modal-root .ext-card .glyph { border-color: #1A1916; color: #1A1916; }
html[data-theme="light"] #modal-root .form-error { background: rgba(184,54,42,0.10); border-left-color: #B8362A; color: #B8362A; }