/* modals.css
   Modal shell, form fields and auto-growing text inputs.

   Part of the dashboard stylesheet, split by concern. index.html links these
   in source order; keep that order, the cascade depends on it. */

/* ── Modal ──────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 300; padding: 18px;
  background: rgba(10,10,20,0.42); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.15s ease;
}
.modal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column;
  animation: scaleIn 0.2s cubic-bezier(0.34,1.56,0.64,1) both;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 4px; }
.modal-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.modal-close { width: 30px; height: 30px; border-radius: 50%; border: none; background: none; color: var(--label-3); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s, color 0.12s; }
.modal-close:hover { background: var(--surface-2); color: var(--label); }
.modal-body { padding: 14px 22px 4px; overflow-y: auto; }
.modal-foot { padding: 16px 22px 20px; display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.modal-foot-right { display: flex; gap: 10px; margin-left: auto; }

.field { margin-bottom: 14px; }
.field-label { display: block; font-size: 11.5px; font-weight: 650; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
.field-input, .field-select, .field-textarea {
  width: 100%; padding: 9px 12px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; color: var(--label); outline: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); background: var(--surface); }
.field-input:disabled, .field-select:disabled, .field-textarea:disabled {
  opacity: 0.62; cursor: not-allowed; background: var(--surface-2);
}
.field-textarea { min-height: 78px; resize: vertical; line-height: 1.5; font-family: var(--font); }

/* Read-only editors — same modal chrome, no way to save. A small tag next to
   the title is the only visual difference beyond disabled fields. */
.modal-overlay.is-readonly .modal-title::after {
  content: 'Read only'; margin-left: 8px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px;
  border-radius: var(--r-full); background: var(--slate-light); color: var(--slate);
  vertical-align: middle;
}
.field-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239a9aa6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Auto-growing text fields ────────────────────────────────────────────
   Fields that read as one line (themes of the day, points of emphasis, must
   wins, rep management, grade notes…) but wrap onto the next line and grow
   instead of scrolling sideways. autoGrow() sets the height from scrollHeight;
   the shared line-height below is what the marker offsets are measured from. */
textarea.autogrow {
  display: block; resize: none; overflow: hidden;
  font-family: var(--font); line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: break-word;
  min-width: 0;   /* a textarea's intrinsic `cols` width must not widen its flex/grid track */
}