/* Reusable modal styles. Loaded after tailwind.css so these win specificity ties. */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.55); /* slate-900/55 */
  z-index: 60;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 1rem 2rem;
  overflow-y: auto;
}

.modal-card {
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 8px 10px -6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 42rem; /* ~672px, matches the screenshot */
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid #e2e8f0; /* slate-200 */
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a; /* slate-900 */
  margin: 0;
}

.modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex: 1 1 auto;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  background: #f8fafc; /* slate-50 */
}

/* Form polish inside the modal — keep it consistent with the rest of the app. */
.modal-body label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155; /* slate-700 */
  margin-bottom: 0.25rem;
}
.modal-body input[type="text"],
.modal-body input[type="password"],
.modal-body input[type="number"],
.modal-body input[type="email"],
.modal-body select,
.modal-body textarea {
  width: 100%;
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background: #ffffff;
}
.modal-body input[type="checkbox"] {
  margin-right: 0.5rem;
}
.modal-body .help-text {
  color: #94a3b8; /* slate-400 */
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.modal-body .error-text {
  color: #b91c1c; /* red-700 */
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.modal-body .field {
  margin-bottom: 1rem;
}
.modal-body .field-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.modal-body .field-row .field {
  margin-bottom: 0;
}
.modal-body .field-row label {
  font-size: 0.75rem;
  color: #64748b; /* slate-500 */
  font-weight: 500;
}
.modal-body .checkbox-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}
.modal-body .checkbox-row label {
  margin-bottom: 0;
  font-weight: 400;
}

/* Buttons */
.btn-cancel {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-cancel:hover { background: #f1f5f9; }

.btn-save {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #65a30d; /* lime-600 */
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.btn-save:hover { background: #4d7c0f; } /* lime-700 */
.btn-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* Tile action buttons (Edit / Archive) */
.tile-action {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
}
.tile-action:hover { background: #f1f5f9; }
.tile-action-primary {
  border-color: #65a30d;
  color: #4d7c0f;
}
.tile-action-primary:hover { background: #ecfccb; }


/* -----------------------------------------------------------------------
   Day-structure editor's Remove-block confirmation modal (change 006, r2)

   The body fragment carries its own actions row (.ds-remove-confirm-actions).
   The page-level modal shell hides its own .modal-footer while the body
   has the .ds-remove-confirm marker class (see MutationObserver in
   partials/_modal.html), so exactly one button strip is visible: bottom-right.
----------------------------------------------------------------------- */
.ds-remove-confirm {
  display: flex;
  flex-direction: column;
  min-height: 6rem;  /* ensures the actions row anchors to the bottom right */
}
.ds-remove-confirm-intro {
  margin: 0 0 1rem;
  color: #334155;  /* slate-700 */
}
.ds-remove-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;  /* push to the bottom of the .modal-body flex parent */
  padding-top: 0.75rem;
}

/* Destructive primary — same shape as .btn-save but red. */
.btn-danger {
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  background: #b91c1c;  /* red-700 */
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.btn-danger:hover { background: #991b1b; }
.btn-danger:disabled { opacity: 0.6; cursor: not-allowed; }


/* -----------------------------------------------------------------------
   Day-structure editor: Reset-to-factory controls (change 006, r4)

   ``.ds-header-actions`` is the small header strip just below the
   subtitle and above the day-picker tabs. ``.btn-reset`` is the
   secondary warning-style button that lives there. Destructive intent,
   but not the primary action — Save changes in the modal shell footer
   is the primary, so this is right-aligned and visually quieter.
----------------------------------------------------------------------- */
.ds-header-actions {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.75rem;
}

.btn-reset {
  padding: 0.375rem 0.875rem;
  border-radius: 0.5rem;
  background: #fff7ed;          /* orange-50 */
  border: 1px solid #fed7aa;    /* orange-200 */
  color: #9a3412;               /* orange-800 */
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.btn-reset:hover { background: #ffedd5; }   /* orange-100 */
.btn-reset:focus-visible {
  outline: 2px solid #f97316;   /* orange-500 */
  outline-offset: 2px;
}
.btn-reset:disabled { opacity: 0.6; cursor: not-allowed; }


/* -----------------------------------------------------------------------
   Reset preview body (change 006, r4 + r6)

   The Reset endpoint returns a partial that wraps the canonical rows in
   the same shape the editor uses, but the times are read-only spans and
   the body owns its own Cancel + Apply reset buttons (r6).

   The page-level modal shell hides its own .modal-footer while the body
   has the .ds-form-reset-preview marker class (see MutationObserver in
   partials/_modal.html), so exactly one button strip is visible:
   bottom-right inside the body.
----------------------------------------------------------------------- */
.ds-form-reset-preview {
  display: flex;
  flex-direction: column;
  min-height: 6rem;  /* mirror .ds-remove-confirm so the actions row anchors */
}
.ds-reset-banner {
  margin: 0 0 0.75rem;
  padding: 0.625rem 0.875rem;
  background: #fef3c7;          /* amber-100 */
  border: 1px solid #fde68a;    /* amber-200 */
  border-radius: 0.5rem;
  color: #78350f;               /* amber-900 */
  font-size: 0.8125rem;
}
.ds-time-readout {
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}

/* Reset-preview actions row (r6). Mirrors .ds-remove-confirm-actions so
   Cancel + Apply reset sit on the bottom-right inside the modal body. */
.ds-reset-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.75rem;
}

/* Duration pill in the row template + reset preview. Wider min-width so
   "1h30m" lines up vertically across rows (no jitter on edit). */
.ds-row-duration {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: #475569;               /* slate-600 */
  min-width: 3.25rem;
  text-align: right;
}


/* -----------------------------------------------------------------------
   Reusable slim confirmation modal (change 004, final).

   Lives in partials/_confirm_modal.html. Smaller, denser variant of the
   form modal: no header divider, no body form chrome, no Save button.
   Icon + title in a row at the top, a single short message below, and
   Cancel + a single confirm button in the footer. The confirm button
   inherits its colours from .btn-save or .btn-danger depending on the
   confirmClass passed in.
----------------------------------------------------------------------- */
.confirm-modal-backdrop {
  /* Centre vertically too — confirmations are short, no need to pin to top. */
  align-items: center;
  padding: 1rem;
}

.confirm-modal-card {
  max-width: 26rem;  /* ~416px — much narrower than the 42rem form modal */
  animation: confirm-modal-pop 150ms ease-out;
}

@keyframes confirm-modal-pop {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* Header: icon (left) + title (right), no border, no padding-bottom. */
.confirm-modal-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem 0.5rem;
}
.confirm-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
}
.confirm-modal-icon--warning {
  background: #fef3c7;          /* amber-100 */
  color: #b45309;               /* amber-700 */
}
.confirm-modal-icon--info {
  background: #dbeafe;          /* blue-100 */
  color: #1d4ed8;               /* blue-700 */
}
.confirm-modal-title {
  font-size: 1.0625rem;
  line-height: 1.4;
}

.confirm-modal-body {
  padding: 0.25rem 1.5rem 1.25rem;
}
.confirm-modal-message {
  margin: 0;
  color: #334155;               /* slate-700 */
  font-size: 0.9375rem;
  line-height: 1.55;
}

.confirm-modal-footer {
  /* Slightly tighter than the form modal's footer. */
  padding: 0.75rem 1.25rem;
  background: #f8fafc;          /* slate-50 — same as form modal */
}

.confirm-modal-confirm {
  /* Inherits from .btn-save (default) or .btn-danger — both are
     already defined above with identical padding/border-radius. This
     class is just a marker so :class bindings work in Alpine. */
}