/* Rich text description */
.create-event-description {
    min-height: 80px;
    padding: 8px 0;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    /* The description is pre-filled as plain text; without this its newlines
       collapse to spaces and a three-line description shows on one line. */
    white-space: pre-wrap;
}

.create-event-description:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
}

.create-event-description:focus:not(:focus-visible) {
    outline: none;
}

.create-event-description ul,
.create-event-description ol {
    margin: 4px 0;
    padding-left: 20px;
}

.create-event-description ol {
    list-style-type: decimal;
}

.create-event-description ol ol,
.create-event-description ol li ol,
.create-event-description ol li > ol {
    list-style-type: lower-alpha !important;
}

.create-event-description ol ol ol,
.create-event-description ol li ol li ol,
.create-event-description ol li > ol li > ol {
    list-style-type: lower-roman !important;
}

.create-event-description li {
    margin: 2px 0;
}

.create-event-description li > ul,
.create-event-description li > ol {
    margin-top: 2px;
    margin-bottom: 0;
}

.create-event-section-description {
    align-items: flex-start;
}

.create-event-section-description .create-event-section-icon {
    padding-top: 10px;
}

.create-event-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
}

/* ============================================================================
   ACCESSIBILITY - Reduced Motion
   Respects user preference to minimize animations
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential feedback animations but make them instant */
    .snackbar,
    .modal,
    .dropdown,
    .tooltip {
        transition: opacity 0.01ms !important;
    }

    /* Disable decorative animations */
    .loading-spinner,
    .pulse-animation,
    .bounce-animation {
        animation: none !important;
    }

    /* Ensure focus states are still visible without animation */
    *:focus-visible {
        outline: var(--focus-outline) !important;
        outline-offset: var(--focus-outline-offset) !important;
        transition: none !important;
    }
}

/* ============================================================================
   RICH TEXT EDITOR ENHANCEMENTS
   Comprehensive styling for all new editor components
   ============================================================================ */

/* Slash Menu Categories */
.slash-menu-category {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    padding: 8px 12px 4px;
    margin-top: 8px;
}

.slash-menu-category:first-child {
    margin-top: 0;
}

/* Table Context Menu */
.table-context-menu {
    position: absolute;
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    min-width: 180px;
    z-index: var(--z-layer-modal);
    padding: 4px 0;
}

.table-context-menu-item {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: var(--font-size-14);
    color: var(--text-primary);
    transition: background var(--duration-fast) var(--ease-in-out);
}

.table-context-menu-item:hover,
.table-context-menu-item.selected {
    background: var(--accent-blue-light);
}

.table-context-menu-item svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.table-context-menu-divider {
    height: 1px;
    background: var(--border-light);
    margin: 4px 0;
}

/* ==================================================================
   RICH TEXT EDITOR - TOGGLE BLOCKS
   ================================================================== */
.toggle-block {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    margin: 12px 0;
    overflow: hidden;
}

.toggle-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    background: var(--bg-secondary);
    cursor: pointer;
    user-select: none;
}

.toggle-header:hover {
    background: var(--bg-hover);
}

.toggle-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform var(--duration-normal) var(--ease-in-out);
}

.toggle-block[data-collapsed="true"] .toggle-icon {
    transform: rotate(-90deg);
}

.toggle-block[data-collapsed="true"] .toggle-content {
    display: none;
}

.toggle-content {
    padding: 12px 16px 12px 36px;
    border-top: 1px solid var(--border-light);
}

/* Toggle heading span */
.toggle-header span[contenteditable="true"] {
    flex: 1;
    outline: none;
    font-weight: 500;
    min-width: 50px;
}

/* Toggle heading placeholder */
.toggle-header span[contenteditable="true"]:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Toggle block selection state */
.toggle-block.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Callout selection state */
.callout.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* Code block selection state */
.code-block.media-selected {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

/* ==================================================================
   RICH TEXT EDITOR - CALLOUT BLOCKS
   ================================================================== */
.callout {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    margin: 12px 0;
    border-left: 4px solid;
}

.callout-icon {
    font-size: var(--font-size-lg);
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.callout-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    flex-shrink: 0;
}

.callout-content {
    flex: 1;
}

.callout-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: #3b82f6;
}

.callout-info .callout-icon svg {
    stroke: #3b82f6;
}

.callout-warning {
    background: rgba(245, 158, 11, 0.1);
    border-color: var(--color-amber);
}

.callout-warning .callout-icon svg {
    stroke: var(--color-amber);
}

.callout-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--color-green);
}

.callout-success .callout-icon svg {
    stroke: var(--color-green);
}

.callout-error {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--color-red);
}

.callout-error .callout-icon svg {
    stroke: var(--color-red);
}