/* ═══════════════════════════════════════════════════════════════════════════
   Modal v2 - lighter head, soft accent border, fade/scale-in animation,
   consistent section headings. Targets the existing .modal / .modal-overlay
   markup so every existing modal benefits without HTML changes.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Overlay ───────────────────────────────────────────────────────────── */
/* Slightly lighter backdrop than the legacy 0.5 alpha + softer blur. */
.modal-overlay {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: modalV2OverlayIn 0.18s ease-out;
}
.modal-overlay.hidden { animation: none; }
@keyframes modalV2OverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal panel ───────────────────────────────────────────────────────── */
.modal {
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.35),
              0 0 0 1px rgba(15, 23, 42, 0.04);
  border: 0;
  animation: modalV2In 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.hidden .modal { animation: none; }
@keyframes modalV2In {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Header v2 - light, accent border, cleaner type ────────────────────── */
.modal-head {
  background: #FFFFFF;
  padding: 16px 22px;
  border-bottom: 1px solid #E5E7EB;
  /* Subtle orange accent stripe along the top of the modal so it still
     reads as branded without the heavy black bar. */
  position: relative;
}
.modal-head::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FF5A00 0%, #FF8C42 100%);
}
.modal-head h2 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 800;
  color: #111827;
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0;
  text-transform: none;
  /* Override legacy uppercase + yellow color */
}
.modal-close {
  background: transparent;
  border: 1px solid transparent;
  color: #6B7280;
  font-size: 20px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  transition: all 0.12s ease;
}
.modal-close:hover {
  background: #F3F4F6;
  color: #111827;
  border-color: #E5E7EB;
}
.modal-close:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.18);
}

/* ── Body ──────────────────────────────────────────────────────────────── */
.modal-body {
  padding: 22px;
  background: #FFFFFF;
  color: #111827;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* Standardized section heading inside modal - replaces the various inline
   "u-section-label" / "u-note-12" labels used today. Still backwards compat: any existing
   `.u-section-label` style keeps its existing rules. */
.modal-v2-section {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111827;
  padding: 6px 0 5px;
  border-bottom: 2px solid var(--accent, #1565C0);
  margin: 0 0 12px;
}
.modal-v2-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--accent, #1565C0);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 16px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid #E5E7EB;
  background: #FAFAFA;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.modal-foot .btn {
  padding: 6px 14px;
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  border-radius: 6px;
  transition: all 0.12s ease;
}
.modal-foot .btn-yellow {
  background: #FF5A00;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(255, 90, 0, 0.18);
  border: 1px solid #FF5A00;
}
.modal-foot .btn-yellow:hover {
  background: #E64E00;
  filter: none;
  box-shadow: 0 2px 4px rgba(255, 90, 0, 0.25);
  transform: translateY(-0.5px);
}
.modal-foot .btn-yellow:disabled {
  background: #FCA5A5;
  border-color: #FCA5A5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.modal-foot .btn-outline {
  background: #FFFFFF;
  color: #4B5563;
  border: 1.5px solid #D1D5DB !important;
}
.modal-foot .btn-outline:hover {
  background: #F3F4F6;
  border-color: #9CA3AF !important;
  color: #111827;
}

/* ── Form fields inside modals - tighten + a11y focus ──────────────────── */
.modal-body .dp-field label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4B5563;
  margin-bottom: 4px;
  display: block;
}
.modal-body .dp-field input,
.modal-body .dp-field select,
.modal-body .dp-field textarea {
  width: 100%;
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: 'IBM Plex Sans', sans-serif;
  color: #111827;
  background: #FFFFFF;
  border: 1.5px solid #D1D5DB;
  border-radius: 6px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  outline: none;
}
.modal-body .dp-field input:hover,
.modal-body .dp-field select:hover,
.modal-body .dp-field textarea:hover {
  border-color: #9CA3AF;
}
.modal-body .dp-field input:focus,
.modal-body .dp-field select:focus,
.modal-body .dp-field textarea:focus {
  border-color: #1565C0;
  box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.15);
}
.modal-body .dp-field input:disabled,
.modal-body .dp-field select:disabled,
.modal-body .dp-field textarea:disabled {
  background: #F9FAFB;
  color: #9CA3AF;
  cursor: not-allowed;
}
/* Two-column field rows: bottom-align the cells so a label that wraps to two
   lines ("Management Level (optional)") doesn't push its control out of line
   with the neighboring field's control (e.g. Status). Equal heights keep an
   input flush with a select beside it (UA selects render ~2px taller). */
.modal-body .u-grid2-10 { align-items: end; }
.modal-body .u-grid2-10 .dp-field input,
.modal-body .u-grid2-10 .dp-field select { height: 33px; }

/* Drop-shadow on the close button when focused (matches drawer pattern) */
.modal[role="dialog"]:focus { outline: none; }