/**
 * Details/Summary TinyMCE Plugin Styles
 * Supports color schemes, icons, borders, spacing, alignment, and animations
 */

/* Base Details Element */
.tinymce-details {
  margin: 1em 0;
  border: 1px solid #ddd;
  background: #fff;
  transition: all 0.3s ease;
}

.tinymce-details summary {
  padding: 0.75em 1em;
  cursor: pointer;
  user-select: none;
  font-weight: 500;
  position: relative;
  list-style: none;
  transition: all 0.3s ease;
}

/* Remove default disclosure triangle */
.tinymce-details summary::-webkit-details-marker {
  display: none;
}

.tinymce-details summary::marker {
  display: none;
}

.tinymce-details .details-content {
  padding: 1em;
  border-top: 1px solid #ddd;
}

.tinymce-details:not([open]) .details-content {
  display: none;
}

/* Hover effect for summary */
.tinymce-details summary:hover {
  background: rgba(0, 0, 0, 0.03);
}

/* ================================================
   COLOR SCHEMES
   ================================================ */

/* Primary (Blue) */
.tinymce-details.details-color-primary {
  border-color: #2196F3;
}

.tinymce-details.details-color-primary summary {
  background: #E3F2FD;
  color: #1976D2;
  border-bottom: 1px solid #2196F3;
}

.tinymce-details.details-color-primary summary:hover {
  background: #BBDEFB;
}

.tinymce-details.details-color-primary .details-content {
  border-top-color: #2196F3;
  background: #F5FCFF;
}

/* Success (Green) */
.tinymce-details.details-color-success {
  border-color: #4CAF50;
}

.tinymce-details.details-color-success summary {
  background: #E8F5E9;
  color: #2E7D32;
  border-bottom: 1px solid #4CAF50;
}

.tinymce-details.details-color-success summary:hover {
  background: #C8E6C9;
}

.tinymce-details.details-color-success .details-content {
  border-top-color: #4CAF50;
  background: #F1F8F4;
}

/* Info (Cyan) */
.tinymce-details.details-color-info {
  border-color: #00BCD4;
}

.tinymce-details.details-color-info summary {
  background: #E0F7FA;
  color: #00838F;
  border-bottom: 1px solid #00BCD4;
}

.tinymce-details.details-color-info summary:hover {
  background: #B2EBF2;
}

.tinymce-details.details-color-info .details-content {
  border-top-color: #00BCD4;
  background: #F0FAFB;
}

/* Warning (Orange) */
.tinymce-details.details-color-warning {
  border-color: #FF9800;
}

.tinymce-details.details-color-warning summary {
  background: #FFF3E0;
  color: #E65100;
  border-bottom: 1px solid #FF9800;
}

.tinymce-details.details-color-warning summary:hover {
  background: #FFE0B2;
}

.tinymce-details.details-color-warning .details-content {
  border-top-color: #FF9800;
  background: #FFF8F0;
}

/* Danger (Red) */
.tinymce-details.details-color-danger {
  border-color: #F44336;
}

.tinymce-details.details-color-danger summary {
  background: #FFEBEE;
  color: #C62828;
  border-bottom: 1px solid #F44336;
}

.tinymce-details.details-color-danger summary:hover {
  background: #FFCDD2;
}

.tinymce-details.details-color-danger .details-content {
  border-top-color: #F44336;
  background: #FFF5F5;
}

/* Dark */
.tinymce-details.details-color-dark {
  border-color: #424242;
  background: #212121;
}

.tinymce-details.details-color-dark summary {
  background: #424242;
  color: #fff;
  border-bottom: 1px solid #616161;
}

.tinymce-details.details-color-dark summary:hover {
  background: #616161;
}

.tinymce-details.details-color-dark .details-content {
  border-top-color: #616161;
  background: #303030;
  color: #fff;
}

/* Light */
.tinymce-details.details-color-light {
  border-color: #e0e0e0;
  background: #fafafa;
}

.tinymce-details.details-color-light summary {
  background: #f5f5f5;
  color: #424242;
  border-bottom: 1px solid #e0e0e0;
}

.tinymce-details.details-color-light summary:hover {
  background: #eeeeee;
}

.tinymce-details.details-color-light .details-content {
  border-top-color: #e0e0e0;
  background: #fafafa;
}

/* ================================================
   ICON TYPES
   ================================================ */

/* Triangle Icon ▶ */
.tinymce-details.details-icon-triangle summary::before {
  content: '▶';
  margin-right: 0.5em;
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 0.8em;
}

.tinymce-details.details-icon-triangle[open] summary::before {
  transform: rotate(90deg);
}

/* Chevron Icon ▼ */
.tinymce-details.details-icon-chevron summary::before {
  content: '▼';
  margin-right: 0.5em;
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 0.8em;
}

.tinymce-details.details-icon-chevron[open] summary::before {
  transform: rotate(180deg);
}

/* Plus Icon + */
.tinymce-details.details-icon-plus summary::before {
  content: '+';
  margin-right: 0.5em;
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 1.2em;
  font-weight: bold;
}

.tinymce-details.details-icon-plus[open] summary::before {
  content: '−';
}

/* Bullet Icon • */
.tinymce-details.details-icon-bullet summary::before {
  content: '•';
  margin-right: 0.5em;
  display: inline-block;
  font-size: 1.5em;
}

.tinymce-details.details-icon-bullet[open] summary::before {
  content: '◦';
}

/* Arrow Icon → */
.tinymce-details.details-icon-arrow summary::before {
  content: '→';
  margin-right: 0.5em;
  transition: transform 0.3s ease;
  display: inline-block;
  font-size: 1em;
}

.tinymce-details.details-icon-arrow[open] summary::before {
  transform: rotate(90deg);
}

/* No Icon */
.tinymce-details.details-icon-none summary::before {
  display: none;
}

/* ================================================
   ICON POSITION
   ================================================ */

/* Icon on the right */
.tinymce-details.details-iconpos-right summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tinymce-details.details-iconpos-right summary::before {
  order: 1;
  margin-right: 0;
  margin-left: 0.5em;
}

/* ================================================
   BORDER STYLES
   ================================================ */

/* No border */
.tinymce-details.details-border-none {
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tinymce-details.details-border-none summary {
  border-bottom: none;
}

.tinymce-details.details-border-none .details-content {
  border-top: none;
}

/* Dashed border */
.tinymce-details.details-border-dashed {
  border-style: dashed;
}

.tinymce-details.details-border-dashed summary {
  border-bottom-style: dashed;
}

.tinymce-details.details-border-dashed .details-content {
  border-top-style: dashed;
}

/* Rounded corners */
.tinymce-details.details-border-rounded {
  border-radius: 8px;
  border: none;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tinymce-details.details-border-rounded summary {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Rounded with solid border */
.tinymce-details.details-border-rounded-solid {
  border-radius: 8px;
  overflow: hidden;
}

/* ================================================
   SPACING OPTIONS
   ================================================ */

/* Compact spacing */
.tinymce-details.details-spacing-compact summary {
  padding: 0.5em 0.75em;
}

.tinymce-details.details-spacing-compact .details-content {
  padding: 0.5em 0.75em;
}

/* Normal spacing (default) */
.tinymce-details.details-spacing-normal summary {
  padding: 0.75em 1em;
}

.tinymce-details.details-spacing-normal .details-content {
  padding: 1em;
}

/* Spacious */
.tinymce-details.details-spacing-spacious summary {
  padding: 1.25em 1.5em;
}

.tinymce-details.details-spacing-spacious .details-content {
  padding: 1.5em;
}

/* ================================================
   CONTENT ALIGNMENT
   ================================================ */

.tinymce-details.details-align-left .details-content {
  text-align: left;
}

.tinymce-details.details-align-center .details-content {
  text-align: center;
}

.tinymce-details.details-align-right .details-content {
  text-align: right;
}

/* ================================================
   ANIMATIONS
   ================================================ */

/* No animation */
.tinymce-details.details-anim-none {
  transition: none;
}

.tinymce-details.details-anim-none summary {
  transition: none;
}

.tinymce-details.details-anim-none .details-content {
  transition: none;
}

/* Smooth animation (default) */
.tinymce-details.details-anim-smooth {
  transition: all 0.3s ease;
}

.tinymce-details.details-anim-smooth summary {
  transition: all 0.3s ease;
}

.tinymce-details.details-anim-smooth .details-content {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade animation */
.tinymce-details.details-anim-fade .details-content {
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
  .tinymce-details {
    margin: 0.75em 0;
  }

  .tinymce-details summary {
    padding: 0.6em 0.8em;
    font-size: 0.95em;
  }

  .tinymce-details .details-content {
    padding: 0.8em;
    font-size: 0.95em;
  }

  .tinymce-details.details-spacing-compact summary {
    padding: 0.4em 0.6em;
  }

  .tinymce-details.details-spacing-compact .details-content {
    padding: 0.4em 0.6em;
  }

  .tinymce-details.details-spacing-spacious summary {
    padding: 0.9em 1em;
  }

  .tinymce-details.details-spacing-spacious .details-content {
    padding: 1em;
  }
}

/* ================================================
   PRINT STYLES
   ================================================ */

@media print {
  .tinymce-details {
    border: 1px solid #000;
  }

  .tinymce-details[open] .details-content {
    display: block !important;
  }

  .tinymce-details summary::before {
    display: none;
  }
}

/* ================================================
   HEADING STYLES (H1-H6)
   ================================================ */

/* H1 Style - 32px */
.tinymce-details.details-heading-h1 summary {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2;
}

/* H2 Style - 24px */
.tinymce-details.details-heading-h2 summary {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

/* H3 Style - 20px (было 18.72px - слишком мелко!) */
.tinymce-details.details-heading-h3 summary {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

/* H4 Style - 18px */
.tinymce-details.details-heading-h4 summary {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

/* H5 Style - 16px */
.tinymce-details.details-heading-h5 summary {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

/* H6 Style - 14px */
.tinymce-details.details-heading-h6 summary {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

/* Custom font size - ПРИОРИТЕТ над стилями H1-H6 */
.tinymce-details.details-custom-fontsize summary {
  font-size: var(--custom-font-size) !important;
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

.tinymce-details summary:focus {
  outline: 2px solid #2196F3;
  outline-offset: 2px;
}

.tinymce-details summary:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .tinymce-details {
    border-width: 2px;
  }

  .tinymce-details summary {
    font-weight: 600;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .tinymce-details,
  .tinymce-details summary,
  .tinymce-details .details-content,
  .tinymce-details summary::before {
    transition: none !important;
    animation: none !important;
  }
}