/* ============================================================================
   IESMAC ERP — Material skin over Phoenix Bootstrap 5.3
   SPRINT 8 · Third-party library polish
   ----------------------------------------------------------------------------
   Restyles popular libraries Phoenix bundles so they don't visually clash
   with the rest of the MUI skin.

   Libraries covered (in actual usage order from codebase audit):
     1. Flatpickr             — 24 hits, date/time picker
     2. Choices.js            — 8 hits, enhanced select
     3. Dropzone              — 7 hits, drag-and-drop file upload
     4. Bootstrap-Datepicker  — 5 hits, legacy
     5. Quill                 — 5 hits, rich text editor
     6. TinyMCE               — 3 hits, rich text editor

   Depends on: material-skin.css (Sprint 1) — for tokens

   Load order:
     1. theme.min.css        (Phoenix core)
     2. user.min.css         (empty Phoenix slot)
     3. style.css            (existing tweaks)
     4. material-skin.css           (Sprint 1)
     5. material-skin-surfaces.css  (Sprint 3)
     6. material-skin-data.css      (Sprint 4)
     7. material-skin-navigation.css (Sprint 5)
     8. material-skin-charts.css    (Sprint 6)
     9. material-skin-widgets.css   (Sprint 7)
    10. material-skin-libraries.css ← THIS FILE (LAST)

   Tenant theming: All brand color references use --md-* variables only.
   ============================================================================ */


/* ============================================================================
   1. FLATPICKR — date / time / range picker
   Specificity battle: Flatpickr injects high-specificity inline styles
   so we use `html body` + override patterns throughout.
   ============================================================================ */

/* Input that triggers the picker — inherits Sprint 1 form-control styles */
html body input.flatpickr-input {
  background-color: var(--md-surface-card) !important;
  cursor: pointer;
}

/* The picker popover */
html body .flatpickr-calendar {
  background-color: var(--md-surface-card) !important;
  border: 0 !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-3) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  padding: 10px !important;
  width: 280px;
}

html body .flatpickr-calendar.arrowTop::before,
html body .flatpickr-calendar.arrowTop::after,
html body .flatpickr-calendar.arrowBottom::before,
html body .flatpickr-calendar.arrowBottom::after {
  display: none;
}

/* Month / year navigation header */
html body .flatpickr-months {
  padding: 0 4px 8px;
  border-bottom: 1px solid var(--md-surface-divider);
  margin-bottom: 8px;
  align-items: center;
}

html body .flatpickr-month {
  background: transparent !important;
  color: var(--md-neutral-10) !important;
  font-weight: 500 !important;
  fill: var(--md-neutral-10) !important;
  height: 32px !important;
  line-height: 32px !important;
}

html body .flatpickr-current-month {
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 0 !important;
  color: var(--md-neutral-10) !important;
  font-family: 'Inter', sans-serif !important;
}

html body .flatpickr-current-month .flatpickr-monthDropdown-months {
  background: transparent !important;
  color: var(--md-neutral-10) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 2px 6px !important;
  border-radius: var(--md-radius-md) !important;
  border: 0 !important;
}

html body .flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: var(--md-primary-95) !important;
}

html body .flatpickr-current-month input.cur-year {
  color: var(--md-neutral-10) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Prev / next month buttons */
html body .flatpickr-prev-month,
html body .flatpickr-next-month {
  width: 28px !important;
  height: 28px !important;
  border-radius: var(--md-radius-lg) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  color: var(--md-neutral-30) !important;
  fill: var(--md-neutral-30) !important;
  transition: background-color 120ms ease;
}

html body .flatpickr-prev-month:hover,
html body .flatpickr-next-month:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-40) !important;
  fill: var(--md-primary-40) !important;
}

html body .flatpickr-prev-month svg,
html body .flatpickr-next-month svg {
  fill: inherit !important;
}

/* Weekday headers */
html body .flatpickr-weekdays {
  background: transparent !important;
  margin-bottom: 4px;
}

html body .flatpickr-weekday {
  background: transparent !important;
  color: var(--md-neutral-50) !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif !important;
}

/* Day cells */
html body .flatpickr-days {
  width: 100% !important;
}

html body .dayContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
}

html body .flatpickr-day {
  width: 34px !important;
  max-width: 34px !important;
  height: 30px !important;
  line-height: 30px !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  border-radius: var(--md-radius-pill) !important;
  color: var(--md-neutral-20) !important;
  border: 0 !important;
  margin: 1px 0 !important;
  font-family: 'Inter', sans-serif !important;
  transition: background-color 120ms ease, color 120ms ease;
}

html body .flatpickr-day:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

html body .flatpickr-day.today {
  border: 1.5px solid var(--md-primary-40) !important;
  color: var(--md-primary-40) !important;
  font-weight: 500 !important;
}

html body .flatpickr-day.selected,
html body .flatpickr-day.startRange,
html body .flatpickr-day.endRange {
  background-color: var(--md-primary-40) !important;
  border-color: var(--md-primary-40) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
}

html body .flatpickr-day.inRange {
  background-color: var(--md-primary-95) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--md-primary-10) !important;
}

html body .flatpickr-day.startRange.selected,
html body .flatpickr-day.startRange {
  border-radius: var(--md-radius-pill) 0 0 var(--md-radius-pill) !important;
}

html body .flatpickr-day.endRange.selected,
html body .flatpickr-day.endRange {
  border-radius: 0 var(--md-radius-pill) var(--md-radius-pill) 0 !important;
}

html body .flatpickr-day.startRange.endRange {
  border-radius: var(--md-radius-pill) !important;
}

html body .flatpickr-day.prevMonthDay,
html body .flatpickr-day.nextMonthDay {
  color: var(--md-neutral-70) !important;
}

html body .flatpickr-day.disabled,
html body .flatpickr-day.flatpickr-disabled {
  color: var(--md-neutral-80) !important;
  cursor: not-allowed;
}

/* Time picker */
html body .flatpickr-time {
  border-top: 1px solid var(--md-surface-divider) !important;
  padding-top: 8px !important;
  margin-top: 8px;
  background: transparent !important;
  height: 36px !important;
}

html body .flatpickr-time input {
  background-color: var(--md-neutral-98) !important;
  border: 1px solid var(--md-surface-border) !important;
  border-radius: var(--md-radius-md) !important;
  color: var(--md-neutral-10) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-variant-numeric: tabular-nums;
  height: 28px !important;
}

html body .flatpickr-time input:focus {
  background-color: var(--md-surface-card) !important;
  border-color: var(--md-primary-40) !important;
  box-shadow: 0 0 0 2px rgba(22, 127, 146, 0.10) !important;
}

html body .flatpickr-time .flatpickr-time-separator,
html body .flatpickr-time .flatpickr-am-pm {
  color: var(--md-neutral-30) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}

html body .flatpickr-time .flatpickr-am-pm:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

/* Inline / static calendar variant */
html body .flatpickr-calendar.inline,
html body .flatpickr-calendar.static {
  box-shadow: var(--md-elev-1) !important;
}


/* ============================================================================
   2. CHOICES.JS — enhanced select with search, multi-tag
   ============================================================================ */

/* Outer wrapper — match form-control styling */
html body .choices {
  font-family: 'Inter', sans-serif;
  margin-bottom: 0;
  font-size: 13px;
}

html body .choices.is-focused .choices__inner,
html body .choices.is-open .choices__inner {
  border-color: var(--md-primary-40) !important;
  border-width: 2px !important;
  background-color: var(--md-surface-card) !important;
}

/* Inner control — the visible field */
html body .choices__inner {
  background-color: var(--md-surface-card) !important;
  border: 1px solid var(--md-neutral-80) !important;
  border-radius: var(--md-radius-md) !important;
  padding: 4px 12px !important;
  min-height: 36px !important;
  font-size: 13px !important;
  color: var(--md-neutral-10) !important;
  transition: border-color 160ms ease;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

html body .choices__inner:hover {
  border-color: var(--md-neutral-30) !important;
}

/* Single-select shows the chosen item inline */
html body .choices__list--single {
  padding: 0 !important;
  display: flex;
  align-items: center;
}

html body .choices__list--single .choices__item {
  color: var(--md-neutral-10) !important;
  font-size: 13px !important;
  padding: 0 !important;
}

/* Multi-select shows chips */
html body .choices__list--multiple {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

html body .choices__list--multiple .choices__item {
  background-color: var(--md-primary-90) !important;
  border: 0 !important;
  border-radius: var(--md-radius-lg) !important;
  color: var(--md-primary-10) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 2px 9px !important;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

html body .choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--md-primary-80) !important;
  border: 0 !important;
}

/* Remove button on chips */
html body .choices__button {
  background-image: none !important;
  border-left: 0 !important;
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  width: 14px;
  height: 14px;
  position: relative;
  opacity: 0.7;
}

html body .choices__button::before {
  content: '×';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--md-primary-10);
}

html body .choices__button:hover {
  opacity: 1;
}

/* Input inside the select for type-to-search */
html body .choices__input {
  background-color: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--md-neutral-10) !important;
  outline: none !important;
}

html body .choices__input::placeholder {
  color: var(--md-neutral-60);
}

html body .choices__placeholder {
  color: var(--md-neutral-60) !important;
  opacity: 1 !important;
}

/* Dropdown */
html body .choices__list--dropdown,
html body .choices[data-type*="select-one"] .choices__list--dropdown,
html body .choices[data-type*="select-multiple"] .choices__list--dropdown {
  background-color: var(--md-surface-card) !important;
  border: 0 !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-3) !important;
  margin-top: 4px !important;
  padding: 6px !important;
  overflow: hidden;
}

html body .choices__list--dropdown .choices__list {
  padding: 0 !important;
  max-height: 240px;
}

html body .choices__list--dropdown .choices__item {
  padding: 7px 10px !important;
  font-size: 12.5px !important;
  color: var(--md-neutral-20) !important;
  border-radius: var(--md-radius-md) !important;
  margin: 1px 0;
  font-weight: 400 !important;
}

html body .choices__list--dropdown .choices__item--selectable.is-highlighted,
html body .choices__list--dropdown .choices__item--selectable:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

html body .choices__list--dropdown .choices__item--selectable.is-selected {
  background-color: var(--md-primary-90) !important;
  color: var(--md-primary-10) !important;
  font-weight: 500 !important;
}

/* Group headings inside dropdown */
html body .choices__heading {
  color: var(--md-neutral-50) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 0 !important;
  padding: 8px 10px 4px !important;
}

/* Disabled state */
html body .choices.is-disabled .choices__inner {
  background-color: var(--md-neutral-98) !important;
  color: var(--md-neutral-60) !important;
  cursor: not-allowed;
}


/* ============================================================================
   3. DROPZONE — drag-and-drop file upload
   ============================================================================ */

html body .dropzone,
html body .dz-default {
  background-color: var(--md-surface-tinted) !important;
  border: 2px dashed var(--md-primary-80) !important;
  border-radius: var(--md-radius-xl) !important;
  padding: 24px 20px !important;
  font-family: 'Inter', sans-serif !important;
  text-align: center;
  transition: background-color 160ms ease, border-color 160ms ease;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html body .dropzone:hover {
  background-color: var(--md-primary-95) !important;
  border-color: var(--md-primary-40) !important;
}

html body .dropzone.dz-drag-hover {
  background-color: var(--md-primary-90) !important;
  border-color: var(--md-primary-40) !important;
  border-style: solid !important;
}

/* Default message */
html body .dropzone .dz-message {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--md-neutral-30) !important;
  margin: 0 !important;
  font-family: 'Inter', sans-serif !important;
}

html body .dropzone .dz-message .dz-button {
  background: transparent !important;
  border: 0 !important;
  color: var(--md-primary-40) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  font-family: 'Inter', sans-serif !important;
  cursor: pointer;
  padding: 0;
}

html body .dropzone .dz-message .dz-button:hover {
  color: var(--md-primary-30) !important;
  text-decoration: underline;
}

/* File preview card */
html body .dropzone .dz-preview {
  background-color: var(--md-surface-card) !important;
  border-radius: var(--md-radius-lg) !important;
  box-shadow: var(--md-elev-1) !important;
  border: 0 !important;
  padding: 10px !important;
  margin: 8px !important;
  font-family: 'Inter', sans-serif !important;
}

html body .dropzone .dz-preview .dz-image {
  border-radius: var(--md-radius-md) !important;
  overflow: hidden;
}

html body .dropzone .dz-preview .dz-details {
  font-size: 11.5px;
  color: var(--md-neutral-20);
  padding: 6px 0 !important;
}

html body .dropzone .dz-preview .dz-filename {
  font-weight: 500;
  color: var(--md-neutral-10);
}

html body .dropzone .dz-preview .dz-size {
  color: var(--md-neutral-40);
  font-variant-numeric: tabular-nums;
}

/* Progress bar */
html body .dropzone .dz-preview .dz-progress {
  background-color: var(--md-neutral-95) !important;
  border-radius: 2px !important;
  height: 3px !important;
  overflow: hidden;
}

html body .dropzone .dz-preview .dz-progress .dz-upload {
  background-color: var(--md-primary-40) !important;
  border-radius: 2px !important;
}

/* Success/error indicators */
html body .dropzone .dz-preview.dz-success .dz-success-mark {
  color: var(--md-success-600) !important;
  fill: var(--md-success-600) !important;
}

html body .dropzone .dz-preview.dz-error .dz-error-mark {
  color: var(--md-error-600) !important;
  fill: var(--md-error-600) !important;
}

html body .dropzone .dz-preview .dz-error-message {
  background-color: var(--md-error-50) !important;
  color: var(--md-error-800) !important;
  font-size: 11px;
  padding: 4px 8px !important;
  border-radius: var(--md-radius-md) !important;
}

/* Remove button on preview */
html body .dropzone .dz-preview .dz-remove {
  color: var(--md-error-600) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif !important;
}

html body .dropzone .dz-preview .dz-remove:hover {
  color: var(--md-error-800) !important;
  text-decoration: underline !important;
}


/* ============================================================================
   4. BOOTSTRAP-DATEPICKER — legacy date picker (5 hits)
   Light-touch override since this is being phased out in favor of Flatpickr.
   ============================================================================ */

html body .datepicker {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  background-color: var(--md-surface-card) !important;
  border: 0 !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-3) !important;
  padding: 10px !important;
}

html body .datepicker table {
  border-collapse: separate;
  border-spacing: 0;
}

html body .datepicker table th {
  color: var(--md-neutral-50) !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background-color: transparent !important;
  padding: 6px 4px !important;
}

html body .datepicker table th.datepicker-switch,
html body .datepicker table th.prev,
html body .datepicker table th.next {
  color: var(--md-neutral-10) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--md-radius-md);
}

html body .datepicker table th.prev:hover,
html body .datepicker table th.next:hover,
html body .datepicker table th.datepicker-switch:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-40) !important;
}

html body .datepicker table td {
  padding: 0 !important;
}

html body .datepicker table td.day {
  width: 32px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: var(--md-neutral-20) !important;
  border-radius: var(--md-radius-pill) !important;
  background-color: transparent !important;
}

html body .datepicker table td.day:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

html body .datepicker table td.day.today {
  border: 1.5px solid var(--md-primary-40) !important;
  color: var(--md-primary-40) !important;
  font-weight: 500;
  background-color: transparent !important;
}

html body .datepicker table td.day.active,
html body .datepicker table td.day.active.active {
  background-color: var(--md-primary-40) !important;
  color: #FFFFFF !important;
  font-weight: 500;
}

html body .datepicker table td.day.old,
html body .datepicker table td.day.new {
  color: var(--md-neutral-70) !important;
}

html body .datepicker table td.day.disabled {
  color: var(--md-neutral-80) !important;
}


/* ============================================================================
   5. QUILL — rich text editor (5 hits)
   ============================================================================ */

html body .ql-container {
  background-color: var(--md-surface-card) !important;
  border: 1px solid var(--md-neutral-80) !important;
  border-top: 0 !important;
  border-radius: 0 0 var(--md-radius-md) var(--md-radius-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--md-neutral-10) !important;
  min-height: 140px;
}

html body .ql-toolbar {
  background-color: var(--md-surface-card-soft) !important;
  border: 1px solid var(--md-neutral-80) !important;
  border-bottom: 0 !important;
  border-radius: var(--md-radius-md) var(--md-radius-md) 0 0 !important;
  padding: 6px 8px !important;
  font-family: 'Inter', sans-serif !important;
}

/* Toolbar buttons */
html body .ql-toolbar button,
html body .ql-toolbar .ql-picker-label {
  border-radius: var(--md-radius-sm) !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 1px;
  padding: 4px !important;
  color: var(--md-neutral-30) !important;
  transition: background-color 120ms ease;
}

html body .ql-toolbar button:hover,
html body .ql-toolbar .ql-picker-label:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-40) !important;
}

html body .ql-toolbar button.ql-active,
html body .ql-toolbar .ql-picker-label.ql-active,
html body .ql-toolbar button:focus,
html body .ql-toolbar .ql-selected {
  background-color: var(--md-primary-90) !important;
  color: var(--md-primary-10) !important;
}

html body .ql-toolbar .ql-stroke {
  stroke: currentColor !important;
}

html body .ql-toolbar .ql-fill {
  fill: currentColor !important;
}

/* Picker dropdowns */
html body .ql-picker-options {
  background-color: var(--md-surface-card) !important;
  border: 0 !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-3) !important;
  padding: 6px !important;
  margin-top: 4px;
  font-family: 'Inter', sans-serif !important;
}

html body .ql-picker-item {
  padding: 6px 10px !important;
  border-radius: var(--md-radius-md) !important;
  color: var(--md-neutral-20) !important;
  font-size: 12.5px;
}

html body .ql-picker-item:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

/* Editor content area */
html body .ql-editor {
  padding: 12px !important;
  line-height: 1.55;
  color: var(--md-neutral-10) !important;
}

html body .ql-editor.ql-blank::before {
  color: var(--md-neutral-60) !important;
  font-style: normal !important;
  font-family: 'Inter', sans-serif !important;
}

html body .ql-editor:focus {
  outline: none;
}

/* Wrap focus state — moves to container */
html body .ql-container.ql-snow:focus-within,
html body .ql-container.ql-bubble:focus-within {
  border-color: var(--md-primary-40) !important;
  border-width: 2px !important;
}

html body .ql-toolbar.ql-snow + .ql-container.ql-snow:focus-within {
  /* The toolbar above also gets the teal focus border */
}


/* ============================================================================
   6. TINYMCE — rich text editor (3 hits)
   TinyMCE injects an iframe for the content area, so we can only
   restyle the chrome (.tox-* classes), not the in-iframe content.
   ============================================================================ */

html body .tox-tinymce {
  border: 1px solid var(--md-neutral-80) !important;
  border-radius: var(--md-radius-md) !important;
  font-family: 'Inter', sans-serif !important;
  overflow: hidden;
}

html body .tox-tinymce:focus-within {
  border-color: var(--md-primary-40) !important;
  border-width: 2px !important;
}

/* Top toolbar */
html body .tox .tox-editor-header {
  background-color: var(--md-surface-card-soft) !important;
  border-bottom: 1px solid var(--md-surface-divider) !important;
  box-shadow: none !important;
}

html body .tox .tox-toolbar,
html body .tox .tox-toolbar__overflow,
html body .tox .tox-toolbar__primary {
  background-color: var(--md-surface-card-soft) !important;
  background-image: none !important;
}

/* Toolbar buttons */
html body .tox .tox-tbtn {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: var(--md-radius-sm) !important;
  height: 28px !important;
  width: auto !important;
  min-width: 28px;
  margin: 0 1px !important;
  color: var(--md-neutral-30) !important;
  font-family: 'Inter', sans-serif !important;
}

html body .tox .tox-tbtn svg {
  fill: var(--md-neutral-30) !important;
}

html body .tox .tox-tbtn:hover {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-40) !important;
}

html body .tox .tox-tbtn:hover svg {
  fill: var(--md-primary-40) !important;
}

html body .tox .tox-tbtn--enabled,
html body .tox .tox-tbtn--enabled:hover,
html body .tox .tox-tbtn:active {
  background-color: var(--md-primary-90) !important;
  color: var(--md-primary-10) !important;
}

html body .tox .tox-tbtn--enabled svg,
html body .tox .tox-tbtn--enabled:hover svg {
  fill: var(--md-primary-10) !important;
}

/* Toolbar group separator */
html body .tox .tox-toolbar__group {
  border-color: var(--md-surface-divider) !important;
  padding: 0 4px !important;
}

/* Split / select toolbar items */
html body .tox .tox-tbtn--select,
html body .tox .tox-split-button {
  background-color: transparent !important;
  border-radius: var(--md-radius-sm) !important;
}

/* Dropdowns (font family, size, format) */
html body .tox .tox-menu,
html body .tox .tox-collection {
  background-color: var(--md-surface-card) !important;
  border: 0 !important;
  border-radius: var(--md-radius-xl) !important;
  box-shadow: var(--md-elev-3) !important;
  padding: 6px !important;
  font-family: 'Inter', sans-serif !important;
}

html body .tox .tox-collection__item {
  border-radius: var(--md-radius-md) !important;
  padding: 6px 10px !important;
  font-size: 12.5px !important;
  color: var(--md-neutral-20) !important;
}

html body .tox .tox-collection__item--active,
html body .tox .tox-collection__item:hover,
html body .tox .tox-collection__item:focus {
  background-color: var(--md-primary-95) !important;
  color: var(--md-primary-10) !important;
}

/* Status bar (bottom) */
html body .tox .tox-statusbar {
  background-color: var(--md-surface-card-soft) !important;
  border-top: 1px solid var(--md-surface-divider) !important;
  color: var(--md-neutral-50) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 10.5px !important;
}

html body .tox .tox-statusbar a {
  color: var(--md-neutral-50) !important;
}

/* Sidebar / panel (when present) */
html body .tox .tox-sidebar-wrap {
  background-color: var(--md-surface-card) !important;
}

/* Dialog modals from TinyMCE — match Sprint 3 modal style */
html body .tox .tox-dialog {
  background-color: var(--md-surface-card) !important;
  border: 0 !important;
  border-radius: var(--md-radius-2xl) !important;
  box-shadow: var(--md-elev-4) !important;
  font-family: 'Inter', sans-serif !important;
}

html body .tox .tox-dialog__header {
  background-color: transparent !important;
  border-bottom: 0 !important;
  padding: 18px 22px 4px !important;
}

html body .tox .tox-dialog__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--md-neutral-10) !important;
  letter-spacing: -0.2px;
}

html body .tox .tox-dialog__body {
  padding: 14px 22px 18px !important;
  font-size: 13px !important;
  color: var(--md-neutral-20) !important;
}

html body .tox .tox-dialog__footer {
  background-color: var(--md-surface-card-soft) !important;
  border-top: 1px solid var(--md-surface-divider) !important;
  padding: 12px 22px !important;
}

/* TinyMCE inputs in dialogs */
html body .tox .tox-textfield,
html body .tox .tox-listboxfield .tox-listbox--select,
html body .tox .tox-textarea {
  background-color: var(--md-surface-card) !important;
  border: 1px solid var(--md-neutral-80) !important;
  border-radius: var(--md-radius-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  color: var(--md-neutral-10) !important;
  height: 36px !important;
  padding: 7px 12px !important;
}

html body .tox .tox-textfield:focus,
html body .tox .tox-listboxfield .tox-listbox--select:focus {
  border-color: var(--md-primary-40) !important;
  border-width: 2px !important;
  outline: none !important;
  box-shadow: none !important;
}

html body .tox .tox-label,
html body .tox .tox-form__label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--md-neutral-30) !important;
  font-family: 'Inter', sans-serif !important;
  margin-bottom: 6px !important;
}

/* TinyMCE buttons */
html body .tox .tox-button,
html body .tox .tox-button--primary {
  background-color: var(--md-primary-40) !important;
  border-color: var(--md-primary-40) !important;
  color: #FFFFFF !important;
  border-radius: var(--md-radius-lg) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  box-shadow: var(--md-elev-1);
}

html body .tox .tox-button:hover,
html body .tox .tox-button--primary:hover {
  background-color: var(--md-primary-30) !important;
  border-color: var(--md-primary-30) !important;
}

html body .tox .tox-button--secondary {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--md-neutral-30) !important;
  box-shadow: none !important;
}

html body .tox .tox-button--secondary:hover {
  background-color: var(--md-neutral-95) !important;
  color: var(--md-neutral-10) !important;
}


/* ============================================================================
   7. ACCESSIBILITY — focus and reduced motion
   ============================================================================ */

html body .flatpickr-day:focus-visible,
html body .choices__inner:focus-within,
html body .ql-toolbar button:focus-visible,
html body .tox .tox-tbtn:focus-visible {
  outline: 2px solid var(--md-primary-40);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body .flatpickr-day,
  html body .choices__inner,
  html body .dropzone,
  html body .tox .tox-tbtn,
  html body .ql-toolbar button {
    transition: none !important;
  }
}


/* ============================================================================
   8. RESPONSIVE
   ============================================================================ */

@media (max-width: 576px) {
  html body .flatpickr-calendar {
    width: 100% !important;
    max-width: 320px;
  }
  html body .dropzone {
    padding: 18px 14px !important;
    min-height: 110px;
  }
}


/* ============================================================================
   END OF SPRINT 8 — ALL VISUAL SPRINTS COMPLETE
   ============================================================================ */