/* MkDocs admonition styling for WYSIWYG editor.
   When Material .md-typeset is on the editable area, Material's own admonition
   CSS applies and only editor-specific overrides are needed.  All visual
   styling is in the :not(.md-typeset) fallback section for standalone use. */

/* ===================================================================
   Editor-specific overrides — always apply
   =================================================================== */

/* Admonitions need position:relative for the settings gear button */
.md-editable-area .admonition,
.md-editable-area details[class] {
  position: relative;
}

/* Details: override native markers and set cursor for editing */
.md-editable-area details[class] > summary {
  cursor: text;
  list-style: none;
}

.md-editable-area details[class] > summary::-webkit-details-marker {
  display: none;
}

.md-editable-area details[class] > summary::marker {
  display: none;
  content: '';
}

/* Inline admonition placement (editor feature, not in Material) */
.md-editable-area .admonition.inline {
  float: left;
  width: 40%;
  margin-right: 1em;
  margin-top: 0;
}

.md-editable-area .admonition.inline.end {
  float: right;
  margin-right: 0;
  margin-left: 1em;
}

.md-editable-area details[class].inline {
  float: left;
  width: 40%;
  margin-right: 1em;
  margin-top: 0;
}

.md-editable-area details[class].inline.end {
  float: right;
  margin-right: 0;
  margin-left: 1em;
}

/* ===================================================================
   Fallback styles — only when Material .md-typeset is NOT present
   =================================================================== */

/* --- Base admonition --- */
.md-editable-area:not(.md-typeset) .admonition {
  margin: 1em 0;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border-left: 4px solid #6ab0de;
  background-color: var(--md-admonition-bg-color, #f7f9fc);
  color: var(--md-admonition-fg-color, inherit);
  position: relative;
}

.md-editable-area:not(.md-typeset) .admonition .admonition-title {
  font-weight: bold;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 1.75rem;
}

.md-editable-area:not(.md-typeset) .admonition .admonition-title::before {
  transform: translate(-0.5em, -0.5em);
}

/* --- Per-type admonition colors --- */
.md-editable-area:not(.md-typeset) .admonition.note {
  border-left-color: #6ab0de;
  background-color: #f0f7ff;
}

.md-editable-area:not(.md-typeset) .admonition.warning {
  border-left-color: #f0ad4e;
  background-color: #fff8e6;
}

.md-editable-area:not(.md-typeset) .admonition.danger {
  border-left-color: #d9534f;
  background-color: #fff0f0;
}

.md-editable-area:not(.md-typeset) .admonition.tip {
  border-left-color: #5cb85c;
  background-color: #f0fff4;
}

.md-editable-area:not(.md-typeset) .admonition.important {
  border-left-color: #f0ad4e;
  background-color: #fffbf0;
}

.md-editable-area:not(.md-typeset) .admonition.caution {
  border-left-color: #f0ad4e;
  background-color: #fff8e6;
}

.md-editable-area:not(.md-typeset) .admonition.error {
  border-left-color: #d9534f;
  background-color: #fff0f0;
}

.md-editable-area:not(.md-typeset) .admonition.attention {
  border-left-color: #f0ad4e;
  background-color: #fff8e6;
}

.md-editable-area:not(.md-typeset) .admonition.hint {
  border-left-color: #5cb85c;
  background-color: #f0fff4;
}

.md-editable-area:not(.md-typeset) .admonition.abstract {
  border-left-color: #00b0ff;
  background-color: #e8f5ff;
}

.md-editable-area:not(.md-typeset) .admonition.info {
  border-left-color: #00b8d4;
  background-color: #e0f7fa;
}

.md-editable-area:not(.md-typeset) .admonition.success {
  border-left-color: #00c853;
  background-color: #e8f5e9;
}

.md-editable-area:not(.md-typeset) .admonition.question {
  border-left-color: #64dd17;
  background-color: #f1f8e9;
}

.md-editable-area:not(.md-typeset) .admonition.failure {
  border-left-color: #ff5252;
  background-color: #ffebee;
}

.md-editable-area:not(.md-typeset) .admonition.bug {
  border-left-color: #f50057;
  background-color: #fce4ec;
}

.md-editable-area:not(.md-typeset) .admonition.example {
  border-left-color: #7c4dff;
  background-color: #ede7f6;
}

.md-editable-area:not(.md-typeset) .admonition.quote {
  border-left-color: #9e9e9e;
  background-color: #f5f5f5;
}

/* --- Base collapsible (<details>) --- */
.md-editable-area:not(.md-typeset) details[class] {
  margin: 1em 0;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  border-left: 4px solid #6ab0de;
  background-color: var(--md-admonition-bg-color, #f7f9fc);
  color: var(--md-admonition-fg-color, inherit);
  position: relative;
}

.md-editable-area:not(.md-typeset) details[class] > summary {
  font-weight: bold;
  margin: 0 0 0.5em 0;
  padding: 0 0 0 1.75rem;
  cursor: text;
  list-style: none;
}

.md-editable-area:not(.md-typeset) details[class] > summary::before {
  transform: translate(-0.5em, -0.5em);
}

.md-editable-area:not(.md-typeset) details[class] > summary::-webkit-details-marker {
  display: none;
}

.md-editable-area:not(.md-typeset) details[class] > summary::marker {
  display: none;
  content: '';
}

/* --- Per-type colors for <details> --- */
.md-editable-area:not(.md-typeset) details.note {
  border-left-color: #6ab0de;
  background-color: #f0f7ff;
}

.md-editable-area:not(.md-typeset) details.warning {
  border-left-color: #f0ad4e;
  background-color: #fff8e6;
}

.md-editable-area:not(.md-typeset) details.danger {
  border-left-color: #d9534f;
  background-color: #fff0f0;
}

.md-editable-area:not(.md-typeset) details.tip {
  border-left-color: #5cb85c;
  background-color: #f0fff4;
}

.md-editable-area:not(.md-typeset) details.important {
  border-left-color: #f0ad4e;
  background-color: #fffbf0;
}

.md-editable-area:not(.md-typeset) details.caution {
  border-left-color: #f0ad4e;
  background-color: #fff8e6;
}

.md-editable-area:not(.md-typeset) details.error {
  border-left-color: #d9534f;
  background-color: #fff0f0;
}

.md-editable-area:not(.md-typeset) details.attention {
  border-left-color: #f0ad4e;
  background-color: #fff8e6;
}

.md-editable-area:not(.md-typeset) details.hint {
  border-left-color: #5cb85c;
  background-color: #f0fff4;
}

.md-editable-area:not(.md-typeset) details.abstract {
  border-left-color: #00b0ff;
  background-color: #e8f5ff;
}

.md-editable-area:not(.md-typeset) details.info {
  border-left-color: #00b8d4;
  background-color: #e0f7fa;
}

.md-editable-area:not(.md-typeset) details.success {
  border-left-color: #00c853;
  background-color: #e8f5e9;
}

.md-editable-area:not(.md-typeset) details.question {
  border-left-color: #64dd17;
  background-color: #f1f8e9;
}

.md-editable-area:not(.md-typeset) details.failure {
  border-left-color: #ff5252;
  background-color: #ffebee;
}

.md-editable-area:not(.md-typeset) details.bug {
  border-left-color: #f50057;
  background-color: #fce4ec;
}

.md-editable-area:not(.md-typeset) details.example {
  border-left-color: #7c4dff;
  background-color: #ede7f6;
}

.md-editable-area:not(.md-typeset) details.quote {
  border-left-color: #9e9e9e;
  background-color: #f5f5f5;
}

/* WYSIWYG toggle button icon */
.live-wysiwyg-btn-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.25em;
}
