/* Shared CRUD form language: KPI Dashboard palette, spacing and restrained surfaces. */
.modal.modal-form-dialog{
  display:flex;
  flex-direction:column;
  width:min(940px,calc(100% - 32px));
  max-height:min(90vh,980px);
  max-height:min(90dvh,980px);
  overflow:hidden;
  border-radius:20px;
  background:rgba(255,255,255,.98);
}
.modal.modal-form-dialog.modal-form-compact{width:min(640px,calc(100% - 32px))}
/* Vue wraps the body and actions in a native form. It must pass the dialog's
   height constraint down to the scrolling body rather than grow past it. */
.modal-form-dialog>form{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.modal-form-dialog .modal-head{
  flex:0 0 auto;
  position:relative;
  padding:20px 24px 16px;
  background:#fff;
  border-bottom:1px solid var(--ink100);
}
.modal-form-dialog .modal-head b{font-size:16px;letter-spacing:-.02em;color:var(--ink900)}
.modal-form-dialog .modal-head .row-sub{margin-top:5px;line-height:1.5}
.modal-form-dialog .modal-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:22px 24px 26px;
  scrollbar-gutter:stable;
}
.modal-form-dialog .modal-foot{
  flex:0 0 auto;
  flex-wrap:wrap;
  padding:14px 24px;
  background:#fff;
  border-top:1px solid var(--ink100);
}
.modal-form-dialog .modal-foot .btn{min-height:40px}
.modal-form-dialog .modal-foot .btn-primary{min-width:132px}
.modal-form-dialog .form-grid{align-items:start;gap:16px 20px}
.modal-form-dialog .field{min-width:0}
.modal-form-dialog .field label{margin-bottom:7px;color:var(--ink700);font-size:11px;font-weight:700;line-height:1.45}
.modal-form-dialog .input,.modal-form-dialog .select,.modal-form-dialog .textarea{
  border-color:var(--ink200);border-radius:10px;background:#fff;color:var(--ink900);font-size:12px;line-height:1.5;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.modal-form-dialog .input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),.modal-form-dialog .select{min-height:42px}
.modal-form-dialog .textarea{min-height:112px;padding:11px 12px}
.modal-form-dialog .input::placeholder,.modal-form-dialog .textarea::placeholder{color:var(--ink400)}
.modal-form-dialog .input:focus,.modal-form-dialog .select:focus,.modal-form-dialog .textarea:focus{border-color:var(--navy500);background:#fff;box-shadow:0 0 0 3px rgba(76,114,165,.12)}
.modal-form-dialog .input[type="file"]{min-height:42px;padding:8px;background:var(--ink50);font-size:11px}
.modal-form-dialog input[type="checkbox"],.modal-form-dialog input[type="radio"]{accent-color:var(--navy700)}
.modal-form-dialog .hint{font-size:10px;line-height:1.55;color:var(--ink500)}
.modal-form-dialog .form-section{margin-top:8px;padding-top:18px;border-color:var(--ink200)}
.modal-form-dialog .form-section h4{font-size:13px;color:var(--ink900)}
.modal-form-dialog .form-section p{font-size:11px;line-height:1.55}
.modal-form-dialog .list-row{border-radius:11px}
.modal-form-dialog .relation-note{font-size:11px;line-height:1.6}

/* Material authoring is grouped by the work an Admin is doing. */
.material-editor-form{display:grid;gap:16px}
.material-editor-section{min-width:0;padding:20px;border:1px solid var(--ink200);border-radius:16px;background:#fff}
.material-editor-section-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px}
.material-editor-section-index{display:grid;flex:0 0 30px;width:30px;height:30px;place-items:center;border:1px solid var(--gold100);border-radius:9px;background:var(--gold50);color:var(--gold700);font:700 10px 'JetBrains Mono',monospace}
.material-editor-section-head h3{margin:1px 0 4px;font-size:14px;letter-spacing:-.02em;color:var(--ink900)}
.material-editor-section-head p{margin:0;color:var(--ink500);font-size:11px;line-height:1.55}
.material-editor-section .form-grid{gap:15px 18px}
.material-editor-section .section-head{align-items:center;margin:0 0 12px}
.material-editor-section .section-head h4{margin:0;font-size:12px;color:var(--ink800)}
.material-editor-section .section-head p{margin:4px 0 0;font-size:10px;line-height:1.5}
.material-editor-section .material-playlist-row{border:1px solid var(--ink200);border-radius:12px;background:var(--ink50)}
.material-question-pool{max-height:360px;overflow:auto;padding:7px;border:1px solid var(--ink200);border-radius:13px;background:var(--ink50)}
.material-question-pool .list-row{background:#fff}
.material-path-list{margin-top:0!important}
.material-path-list .list-row{padding:12px;border:1px solid var(--ink200);background:var(--ink50)}

@media(max-width:700px){
  .modal.modal-form-dialog{width:calc(100% - 16px);max-height:94vh;max-height:94dvh;border-radius:16px}
  .modal.modal-form-dialog.modal-form-compact{width:calc(100% - 16px)}
  .modal-form-dialog .modal-head{padding:15px 16px 13px}
  .modal-form-dialog .modal-body{padding:16px}
  .modal-form-dialog .modal-foot{padding:12px 16px}
  .modal-form-dialog .form-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .modal-form-dialog .field.full{grid-column:auto}
  .material-editor-form{gap:12px}
  .material-editor-section{padding:15px;border-radius:14px}
}

/* When the viewport cannot accommodate header and actions together, let the
   complete dialog scroll so its actions remain reachable. */
@media(max-height:360px){
  .modal.modal-form-dialog{overflow-y:auto}
  .modal-form-dialog>form{flex:0 0 auto;overflow:visible}
  .modal-form-dialog .modal-body{flex:0 0 auto;overflow:visible}
}