/* Rhino (TipTap) rich-text output, rendered identically on every web surface:
   the Avo editor, the Avo show page, the parent portal, the leader portal and dynamic forms.

   Mirrors the editor's own trix.css (rhino-editor gem): everything margin/padding 0, so what an
   admin types is what a parent sees. Keep in sync with RichText::Mail (lib/rich_text/mail.rb),
   which inlines the same rules for mail clients that ignore <style>.

   `.ka-richtext` is emitted by the `rich_text` helper (app/helpers/rich_text_helper.rb). */

.ka-richtext {
  overflow-wrap: break-word;
  word-break: break-word;
}

.ka-richtext p,
.ka-richtext figure,
.ka-richtext h1,
.ka-richtext h2,
.ka-richtext h3,
.ka-richtext h4,
.ka-richtext h5,
.ka-richtext h6 {
  /* !important: MDB ships `.card .card-body p {margin-bottom:1rem}` and friends, which outrank any
     sane single-class selector. This block is the normalization layer, so it has to win. */
  margin: 0 !important;
  padding: 0 !important;
}

/* TipTap emits <p></p> for a blank line; without content it would collapse to zero height */
.ka-richtext p:empty::before {
  content: "\00a0";
  display: inline-block;
}

.ka-richtext h1 { font-size: 1.2em; line-height: 1.2; font-weight: 700; }
.ka-richtext h2 { font-size: 1.1em; line-height: 1.2; font-weight: 700; }
.ka-richtext h3,
.ka-richtext h4,
.ka-richtext h5,
.ka-richtext h6 { font-size: 1em; line-height: 1.2; font-weight: 700; }

/* editor: 1rem above the list, 1.5rem indent on the list + 1em on the li (Tailwind preflight in
   the admin also kills the markers, hence the explicit list-style below) */
.ka-richtext ul,
.ka-richtext ol {
  margin: 1rem 0 0 !important;
  padding: 0 0 0 1.5rem !important;
}
.ka-richtext ul { list-style: disc; }
.ka-richtext ol { list-style: decimal; }
.ka-richtext li { margin: 0 0 0 1em !important; padding: 0 !important; }
.ka-richtext li > p { margin: 0 !important; }

.ka-richtext img,
.ka-richtext svg {
  max-width: 100%;
  height: auto;
}

.ka-richtext a {
  text-decoration: underline;
}

.ka-richtext blockquote {
  margin: 0;
  border: 0 solid #ccc;
  border-inline-start-width: 0.3em;
  margin-inline-start: 0.3em;
  padding-inline-start: 0.6em;
}

.ka-richtext pre {
  display: block;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  background-color: #eee;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.ka-richtext hr {
  margin: 0.5rem 0;
}

.ka-richtext table {
  border-collapse: collapse;
  max-width: 100%;
  margin: 0 0 0.5rem;
}
.ka-richtext th,
.ka-richtext td {
  border: 1px solid #d1d5db;
  padding: 0.25rem 0.5rem;
  text-align: left;
  vertical-align: top;
}
/*

 */

/* Style for invalid inputs after form submission */
/* `user-` is a new CSS syntax that triggers only after the user interacted with the form */
/* should be widely supported by browsers */
input:user-invalid {
  border-color: #dc3545;
  background-color: #fff;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

input:user-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Add error message styling */
input:user-invalid + .error-message {
  color: #dc3545;
  font-size: 0.875em;
  margin-top: 0.25rem;
}

.star-rating .stars i {
  color: #ffc107; /* Bootstrap's warning color - yellow */
  font-size: 1.25rem;
  cursor: pointer;
}

.star-rating .stars i.bi-star {
  color: #dee2e6; /* Bootstrap's gray-300 */
}

/* Image processing states */
.btn.processing-images {
  opacity: 0.7;
  cursor: not-allowed;
}

.dynamic-form-file-input:disabled + .form-text {
  color: #6c757d;
}

/* Upload progress styling */
/* ===========================================================-------------- */
progress[id*="form_uploads_progress_"] {
  width: 100%;
  height: 20px;
  border: none;
  border-radius: 8px;
  background-color: #e9ecef;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* WebKit browsers (Chrome, Safari, Edge) */
progress[id*="form_uploads_progress_"]::-webkit-progress-bar {
  background-color: #e9ecef;
  border-radius: 8px;
}

progress[id*="form_uploads_progress_"]::-webkit-progress-value {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
  border-radius: 8px;
  transition: width 0.3s ease;
}

/* Firefox */
progress[id*="form_uploads_progress_"]::-moz-progress-bar {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
  border-radius: 8px;
}

/* Upload status text styling */
div[id*="form_uploads_status_"] {
  font-size: 0.875rem;
  font-weight: 500;
  color: #495057;
}

/* Upload progress container */
.upload-progress-container {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
}

.upload-progress-container progress {
  margin-bottom: 8px;
}