/* ==========================================================================
   Quill editor — clean, modern, bordered look.
   Loaded AFTER quill.snow.css to override the default boxy styling.
   Toolbar is now generated by Quill (array config), so every dropdown works.
   ========================================================================== */

:root { --quill-border: #e3e8ef; --quill-accent: #308e87; }

/* Wrapper look: toolbar on top, editor below, one rounded card. */
.ql-toolbar.ql-snow {
  border: 1px solid var(--quill-border);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: none;
  background: #f8fafc;
  padding: 8px 10px;
}
.ql-container.ql-snow {
  border: 1px solid var(--quill-border);
  border-top: 1px solid #eef2f7;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  font-size: 15px;
  background: #fff;
}
.ql-container.ql-snow .ql-editor { min-height: 140px; line-height: 1.7; }
.ql-editor.ql-blank::before { color: #9aa5b1; font-style: normal; }

/* Toolbar groups: subtle separators + tidy spacing. */
.ql-snow.ql-toolbar .ql-formats {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #eef2f7;
}
.ql-snow.ql-toolbar .ql-formats:last-child { border-right: none; }

/* Dropdown pickers: remove the boxy border, make them clean pills. */
.ql-snow .ql-picker-label {
  border: none !important;
  border-radius: 6px;
  padding-left: 6px;
}
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-label.ql-active,
.ql-snow .ql-picker-item.ql-selected { color: var(--quill-accent); }
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: transparent !important;
  background: #eef2f7;
}
.ql-snow .ql-picker-options {
  border: 1px solid var(--quill-border) !important;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .10);
  padding: 6px;
  margin-top: 4px;
}

/* Buttons: rounded hover + accent colour on active/hover. */
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button { border-radius: 6px; transition: background .15s ease; }
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active { background: #eef2f7; }
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--quill-accent); }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--quill-accent); }

/* Safety net: never let a global `select`/`.form-select` rule reveal the raw
   <select> that Quill hides behind its picker (was showing as broken boxes). */
.ql-toolbar select { display: none !important; }

/* Dark mode friendliness. */
body.dark-only .ql-toolbar.ql-snow { background: #262932; border-color: #374151; }
body.dark-only .ql-container.ql-snow { background: #1d1e26; border-color: #374151; color: #d6d6d6; }
body.dark-only .ql-snow .ql-picker-options { background: #262932; border-color: #374151 !important; }
body.dark-only .ql-snow.ql-toolbar .ql-formats { border-right-color: #374151; }
body.dark-only .ql-snow .ql-stroke { stroke: #cbd2dc; }
body.dark-only .ql-snow .ql-fill { fill: #cbd2dc; }
body.dark-only .ql-snow .ql-picker { color: #cbd2dc; }