@layer tokens;

@layer tokens {
    /* ══════════════════════════════════════════
       OKLCH Color Variables
       ══════════════════════════════════════════ */

    :root {
        --yes-teal: 0.73 0.12 181;
        --yes-dark-teal: 0.46 0.08 185;
        --yes-yellow: 0.91 0.11 93;
        --yes-coral: 0.65 0.18 27;
        --yes-navy: 0.22 0.05 232;
        --yes-orange: 0.72 0.17 62;
        --yes-blue: 0.32 0.15 262;
        --yes-purple: 0.41 0.15 323;
        --black: 0 0 0;
    }

    :root {
        --neutral-50: 0.98 0 0;
        --neutral-100: 0.96 0 0;
        --neutral-200: 0.93 0 0;
        --neutral-300: 0.87 0 0;
        --neutral-400: 0.71 0 0;
        --neutral-500: 0.55 0 0;
        --neutral-600: 0.45 0 0;
        --neutral-700: 0.40 0 0;
        --shadow-sm: 0 1px 2px 0 oklch(0 0 0 / 0.05);
        --shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1);
    }
}

/* ══════════════════════════════════════════
   Card Color Wrappers
   ══════════════════════════════════════════ */

.block-card {
    --card-padding: 3rem;
    --block-padding: 3rem;
    --block-gap: 16px;
    --block-font-size: 1rem;
    --block-title-size: 1.375rem;
    --block-radius: 1rem;
    container-type: inline-size;
    border-radius: var(--block-radius);
    overflow-wrap: break-word;
    color: var(--block-text-color, inherit);
    padding: var(--card-padding);
    min-height: 40px;
    min-width: 160px;
    font-size: 1rem;
    line-height: 1.5;
}

.block-card ul,
.block-card ol { list-style-position: inside; }

/* ── Rich text content (shared formatting for HTML from rich text editor) ── */
.rich-text p { margin-bottom: 8px; }
.rich-text p:last-child { margin-bottom: 0; }
.rich-text ul,
.rich-text ol { padding-left: 0; margin: 4px 0; }
.rich-text li { margin-bottom: 2px; padding-left: 1.5em; text-indent: -1.5em; }
.rich-text span[style*="color"] { color: inherit !important; }
.block-card a {
    color: oklch(var(--yes-purple));
    text-decoration: underline;
    pointer-events: none;
    cursor: default;
}
.block-card a[href^="lms://"] {
    text-decoration-style: dashed;
}

/* ── Responsive block card variables ── */
@container (max-width: 400px) {
    .block-card {
        --card-padding: 1.5rem;
        --block-padding: 1.5rem;
        --block-gap: 10px;
        --block-font-size: 0.9375rem;
        --block-title-size: 1.125rem;
    }
}

@container (max-width: 250px) {
    .block-card {
        --card-padding: 0.75rem;
        --block-padding: 0.75rem;
        --block-gap: 8px;
        --block-font-size: 0.875rem;
    }
}

.block-card--black     { background: oklch(0 0 0); }
.block-card--white     { background: oklch(1 0 0); }
.block-card--teal      { background: oklch(0.73 0.12 181); }
.block-card--dark-teal { background: oklch(0.46 0.08 185); }
.block-card--coral     { background: oklch(0.65 0.18 27); }
.block-card--navy      { background: oklch(0.22 0.05 232); }
.block-card--orange    { background: oklch(0.72 0.17 62); }
.block-card--blue      { background: oklch(0.32 0.15 262); }
.block-card--purple    { background: oklch(0.41 0.15 323); }
.block-card--yellow    { background: oklch(0.91 0.11 93); }

.block-card--transparent { background: transparent; }
.block-card--flush { --card-padding: 0; overflow: hidden; }
.block-card--flush.has-title { --card-padding: var(--block-padding, 2rem); }

/* Text color utility classes — force color on element and all descendants */
.text-color--black,     .text-color--black *     { color: oklch(0 0 0) !important; }
.text-color--white,     .text-color--white *     { color: oklch(1 0 0) !important; }
.text-color--teal,      .text-color--teal *      { color: oklch(0.73 0.12 181) !important; }
.text-color--dark-teal, .text-color--dark-teal * { color: oklch(0.46 0.08 185) !important; }
.text-color--coral,     .text-color--coral *     { color: oklch(0.65 0.18 27) !important; }
.text-color--navy,      .text-color--navy *      { color: oklch(0.22 0.05 232) !important; }
.text-color--orange,    .text-color--orange *    { color: oklch(0.72 0.17 62) !important; }
.text-color--blue,      .text-color--blue *      { color: oklch(0.32 0.15 262) !important; }
.text-color--purple,    .text-color--purple *    { color: oklch(0.41 0.15 323) !important; }
.text-color--yellow,    .text-color--yellow *    { color: oklch(0.91 0.11 93) !important; }

/* Background color utilities */
.bg--black     { background: oklch(var(--black)); }
.bg--white     { background: oklch(1 0 0); }
.bg--teal      { background: oklch(var(--yes-teal)); }
.bg--dark-teal { background: oklch(var(--yes-dark-teal)); }
.bg--coral     { background: oklch(var(--yes-coral)); }
.bg--navy      { background: oklch(var(--yes-navy)); }
.bg--orange    { background: oklch(var(--yes-orange)); }
.bg--blue      { background: oklch(var(--yes-blue)); }
.bg--purple    { background: oklch(var(--yes-purple)); }
.bg--yellow    { background: oklch(var(--yes-yellow)); }

/* Foreground color utilities */
.fg--black     { color: oklch(var(--black)); }
.fg--white     { color: oklch(1 0 0); }
.fg--teal      { color: oklch(var(--yes-teal)); }
.fg--dark-teal { color: oklch(var(--yes-dark-teal)); }
.fg--coral     { color: oklch(var(--yes-coral)); }
.fg--navy      { color: oklch(var(--yes-navy)); }
.fg--orange    { color: oklch(var(--yes-orange)); }
.fg--blue      { color: oklch(var(--yes-blue)); }
.fg--purple    { color: oklch(var(--yes-purple)); }
.fg--yellow    { color: oklch(var(--yes-yellow)); }

/* Border color utilities — sets --border-color variable for descendant use */
.border--black     { --border-color: oklch(var(--black)); }
.border--white     { --border-color: oklch(1 0 0); }
.border--teal      { --border-color: oklch(var(--yes-teal)); }
.border--dark-teal { --border-color: oklch(var(--yes-dark-teal)); }
.border--coral     { --border-color: oklch(var(--yes-coral)); }
.border--navy      { --border-color: oklch(var(--yes-navy)); }
.border--orange    { --border-color: oklch(var(--yes-orange)); }
.border--blue      { --border-color: oklch(var(--yes-blue)); }
.border--purple    { --border-color: oklch(var(--yes-purple)); }
.border--yellow    { --border-color: oklch(var(--yes-yellow)); }

/* Text alignment utilities */
.text-align--center { text-align: center; }
.text-align--right  { text-align: right; }

.block-card:not(.block-card--transparent) {
    box-shadow:
        0 1px 2px oklch(var(--yes-navy) / 0.08),
        0 4px 12px oklch(var(--yes-navy) / 0.1),
        0 20px 60px -20px oklch(var(--yes-navy) / 0.25);
}

/* ── Shared layout block styles ── */
.layout-grid { display: grid; gap: 8px; }

/* ── Shared empty state ── */
.block-empty {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.layout-child--selected {
    border: 2px dashed oklch(var(--yes-teal));
    border-radius: 0.75rem;
    padding: 8px;
}

.layout-nested-block { container: nested-block / inline-size; }
.layout-nested-block .block-card { height: 100%; }

.media-placeholder {
    background: oklch(var(--neutral-100));
    border: 2px dashed oklch(var(--neutral-300));
    border-radius: 1rem;
    padding: 40px;
    color: var(--mud-palette-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ── Alt Text Warning (unlayered — must beat MudBlazor resets) ── */

.alt-text-warning {
    background: oklch(0.95 0.05 85);
    border: 1px solid oklch(0.75 0.12 85);
    border-radius: 0.5rem;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: oklch(0.45 0.1 65);
    font-size: 0.85rem;
    font-weight: 500;
}

.alt-text-warning .mud-icon-root {
    color: oklch(0.65 0.15 85);
    flex-shrink: 0;
}

.alt-text-warning--overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    padding: 10px 14px;
    font-size: 0.8rem;
}


/* ══════════════════════════════════════════
   LMS Content Editor Styles
   ══════════════════════════════════════════ */

.lms-editor-layout {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

.lms-editor-layout {
    display: grid;
    grid-template-columns: var(--palette-width, 280px) auto 1fr auto var(--properties-width, 360px);
    grid-template-rows: auto 1fr;
    height: 100vh;
    overflow: hidden;
}

.lms-editor-toolbar {
    grid-column: 1 / -1;
    border-bottom: 1px solid oklch(var(--yes-purple) / 0.3);
    background: var(--mud-palette-surface);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.lms-editor-toolbar .toolbar-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.lms-editor-toolbar .dirty-ring {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-warning);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px oklch(0.85 0.15 85 / 0.4);
}

.lms-editor-toolbar .dirty-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-warning);
    display: block;
    animation: dirty-pulse 1.5s ease-in-out infinite;
}

.lms-editor-toolbar .toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lms-editor-toolbar .dirty-label {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--mud-palette-warning);
}

@keyframes dirty-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

/* ── Palette Panel ── */

.lms-palette {
    border-right: 1px solid oklch(var(--yes-purple) / 0.3);
    background: var(--mud-palette-surface);
    overflow-y: auto;
    padding: 0 12px 12px;
}

.lms-palette .palette-category {
    margin-bottom: 12px;
}

.lms-palette .palette-category-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white;
    background: linear-gradient(135deg, oklch(var(--yes-purple)), oklch(0.50 0.20 300));
    padding: 5px 12px;
    margin: 0 -12px 8px;
    text-align: center;
}

.lms-palette .palette-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: background 0.15s;
}

.lms-palette .palette-item .mud-icon-root {
    color: black;
    transition: color 0.15s;
}

.lms-palette .palette-item:hover .mud-icon-root {
    color: oklch(var(--yes-purple));
}

.lms-palette .palette-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.lms-palette .palette-item--disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.lms-palette .palette-nested-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    margin: 8px 0;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
}

/* Canvas: "new blocks insert here" marker below the selected block. */
.lms-canvas .block-insert-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -16px 0;
    pointer-events: none;
}

.lms-canvas .block-insert-marker::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 2px dashed var(--mud-palette-primary);
    opacity: 0.5;
}

.lms-canvas .block-insert-marker-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Canvas Panel ── */

.lms-canvas {
    overflow-y: auto;
    background: var(--mud-palette-background);
    padding: 24px;
}

.lms-canvas-inner {
    max-width: 672px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.lms-canvas .block-wrapper {
    position: relative;
    outline: 2px solid transparent;
    outline-offset: 4px;
    border-radius: 1rem;
    transition: outline-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

.lms-canvas .block-wrapper:hover {
    outline-color: var(--mud-palette-primary-lighten);
}

.lms-canvas .block-wrapper.selected {
    outline-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.lms-canvas .block-wrapper .block-actions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 2px;
    z-index: 15;
}

.lms-canvas .block-wrapper:hover .block-actions,
.lms-canvas .block-wrapper.selected .block-actions {
    display: flex;
}

.lms-canvas .block-wrapper .block-actions {
    background: white;
    border-radius: 6px;
    padding: 2px 4px;
    box-shadow: 0 1px 4px oklch(0 0 0 / 0.15);
}

.lms-canvas .block-wrapper--white .block-actions {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.lms-canvas .block-type-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--mud-palette-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 15;
}

.lms-canvas .block-wrapper:hover .block-type-badge {
    opacity: 1;
}

.lms-canvas .empty-canvas {
    text-align: center;
    padding: 64px 24px;
    color: var(--mud-palette-text-secondary);
}

/* ── Properties Panel ── */

.lms-properties {
    border-left: 1px solid oklch(var(--yes-purple) / 0.3);
    background: var(--mud-palette-surface);
    overflow-y: auto;
    padding: 12px;
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
}

.lms-properties .properties-header {
    font-weight: 700;
    font-size: 0.95rem;
    margin: -12px -12px 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: oklch(var(--yes-purple));
    color: white;
}

.lms-properties .property-group {
    margin-bottom: 10px;
}

/* ── Simple accordion inside properties panel ── */

.lms-properties .properties-header + .property-accordion {
    margin: -12px -12px 0;
}

.lms-properties .property-accordion {
    margin: 0 -12px;
}

.lms-properties .accordion-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: oklch(var(--yes-purple));
    background: oklch(var(--yes-purple) / 0.06);
    border-top: 1px solid oklch(var(--yes-purple) / 0.15);
    cursor: pointer;
    user-select: none;
}

.lms-properties .accordion-header:first-child {
    border-top: none;
}

.lms-properties .accordion-header:hover {
    background: oklch(var(--yes-purple) / 0.1);
}

.lms-properties .accordion-chevron {
    transition: transform 0.2s ease;
    transform: rotate(-90deg);
    font-size: 1rem !important;
}

.lms-properties .accordion-header.open .accordion-chevron {
    transform: rotate(0deg);
}

.lms-properties .accordion-body {
    padding: 8px 12px 4px;
}

.lms-properties .property-subgroup {
    margin-top: -2px;
    margin-bottom: 10px;
    padding: 8px 10px 2px;
    border: 1px solid oklch(var(--yes-purple) / 0.4);
    border-radius: 6px;
}

.lms-properties .property-subgroup .property-group {
    margin-bottom: 8px;
}

.lms-properties .property-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
}

.lms-properties .mud-radio .mud-typography {
    font-size: 0.8125rem;
}

.lms-properties .heading-size-toggle {
    width: 100%;
}

.lms-properties .heading-size-toggle .mud-toggle-item {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
}


/* Compact MudBlazor inputs inside properties panel */
.lms-properties .mud-input-control {
    margin-top: 0;
}

.lms-properties .mud-input.mud-input-outlined {
    font-size: 0.8rem;
}

.lms-properties .mud-input-outlined .mud-input-slot {
    padding: 6px 10px;
}

.lms-properties .mud-select .mud-input-slot {
    font-size: 0.8rem;
}

.lms-properties .mud-checkbox .mud-typography {
    font-size: 0.8rem;
}

.lms-properties .mud-input-control .mud-input-slot::placeholder {
    color: oklch(0 0 0 / 0.45);
    opacity: 1;
}

/* ── Rich-text editor (Quill) inside properties panel ── */

.lms-properties .html-editor .ql-toolbar.ql-snow {
    border: 1px solid oklch(var(--yes-purple) / 0.3);
    border-radius: 6px 6px 0 0;
    padding: 4px 6px;
    background: oklch(var(--yes-purple) / 0.05);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.lms-properties .html-editor .ql-toolbar.ql-snow .ql-formats {
    margin-right: 6px;
}

.lms-properties .html-editor .ql-container.ql-snow {
    border: 1px solid oklch(var(--yes-purple) / 0.3);
    border-top: none;
    border-radius: 0 0 6px 6px;
    font-size: 0.8rem;
    min-height: 150px;
}

.lms-properties .html-editor .ql-editor {
    min-height: 150px;
    padding: 10px 12px;
}

.lms-properties .html-editor .ql-editor.ql-blank::before {
    color: oklch(0 0 0 / 0.4);
    font-style: normal;
    font-size: 0.8rem;
}

.lms-properties .html-editor .ql-snow .ql-picker {
    font-size: 0.75rem;
}

.lms-properties .html-editor .ql-snow .ql-picker-label {
    padding: 2px 4px;
}

.lms-properties .html-editor .ql-snow button {
    width: 26px;
    height: 26px;
    padding: 3px;
}

.lms-properties .html-editor .ql-snow button:hover,
.lms-properties .html-editor .ql-snow .ql-picker-label:hover {
    color: oklch(var(--yes-purple));
}

.lms-properties .html-editor .ql-snow button.ql-active,
.lms-properties .html-editor .ql-snow .ql-picker-label.ql-active {
    color: oklch(var(--yes-purple));
}

.lms-properties .html-editor .ql-snow .ql-stroke {
    stroke: oklch(0 0 0 / 0.6);
}

.lms-properties .html-editor .ql-snow button:hover .ql-stroke,
.lms-properties .html-editor .ql-snow button.ql-active .ql-stroke {
    stroke: oklch(var(--yes-purple));
}

.lms-properties .html-editor .ql-snow .ql-fill {
    fill: oklch(0 0 0 / 0.6);
}

.lms-properties .html-editor .ql-snow button:hover .ql-fill,
.lms-properties .html-editor .ql-snow button.ql-active .ql-fill {
    fill: oklch(var(--yes-purple));
}

/* Hide Quill's built-in tooltip — we use a MudBlazor dialog instead */
.lms-properties .html-editor .ql-tooltip {
    display: none !important;
}

/* Lesson links inside Quill editor */
.lms-properties .html-editor .ql-editor a[href^="lms://"] {
    color: oklch(var(--yes-purple));
    text-decoration: underline;
    text-decoration-style: dashed;
}

.lms-properties .return-to-layout {
    margin: auto -12px -12px;
    padding: 12px;
    position: sticky;
    bottom: -12px;
    background: var(--mud-palette-surface);
}

.lms-properties .no-selection {
    text-align: center;
    padding: 48px 16px;
    color: var(--mud-palette-text-secondary);
}

/* ── Resize Handles ── */

.lms-resize-handle {
    width: 5px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    z-index: 5;
    transition: background 0.15s;
}

.lms-resize-handle:hover,
.lms-resize-handle.dragging {
    background: color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.lms-resize-handle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 32px;
    border-radius: 3px;
    background: oklch(var(--neutral-300));
    opacity: 0;
    transition: opacity 0.15s;
}

.lms-resize-handle:hover::after,
.lms-resize-handle.dragging::after {
    opacity: 1;
    background: var(--mud-palette-primary);
}

.lms-properties .required-marker {
    color: var(--mud-palette-error);
    font-weight: 700;
}

/* ── Checklist Editor ── */

.checklist-editor-category {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
}

.checklist-editor-category:first-child {
    margin-top: 0;
}

/* Hide underlines on checklist category text fields */
.checklist-editor-category .mud-input-underline::before,
.checklist-editor-category .mud-input-underline::after {
    display: none;
}

.checklist-drop-zone {
    min-height: 4px;
    padding-top: 2px;
}

.checklist-drop-zone--indented {
    padding-left: 16px;
}

.checklist-editor-item {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

/* Strip MudBlazor default spacing */
.checklist-editor-item .mud-input-control {
    margin: 0;
}


/* ── Media Library Grid ── */

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.media-item {
    position: relative;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.media-item:hover {
    border-color: var(--mud-palette-primary-lighten);
}

.media-item.selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
}

.media-item-preview {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
    overflow: hidden;
    min-height: 0;
}

.media-item-preview img,
.media-item-preview video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media-item-preview img.media-doc-icon {
    position: static;
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.media-item-info {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.media-item-name {
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-item-size {
    font-size: 0.65rem;
    color: var(--mud-palette-text-secondary);
}

.media-item-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0;
    transition: opacity 0.15s;
    background: rgba(255, 255, 255, 0.85) !important;
}

.media-item:hover .media-item-delete {
    opacity: 1;
}

/* ── Drop indicator ── */
.drop-indicator {
    height: 4px;
    background: var(--mud-palette-primary);
    border-radius: 2px;
    margin: 2px 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.drop-indicator.active {
    opacity: 1;
}

/* ══════════════════════════════════════════
   Module List Page — Card Grid
   ══════════════════════════════════════════ */

.module-list-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: oklch(0.965 0 0);
}

/* ── Card entrance animation ── */

@keyframes ml-card-enter {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ml-card { animation: none !important; }
}

/* ── Header ── */

.ml-header {
    flex-shrink: 0;
    background: white;
    padding: 20px 40px;
    z-index: 2;
}

.ml-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.ml-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: oklch(0.2 0 0);
    outline: none;
}

.ml-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ml-search {
    width: 200px;
}

.ml-search .mud-input-outlined-border {
    border-radius: 8px !important;
}

.ml-count {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    background: rgba(0, 0, 0, 0.04);
    padding: 2px 8px;
    border-radius: 10px;
    font-variant-numeric: tabular-nums;
}

.ml-create-btn {
    border-radius: 8px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    padding: 6px 16px !important;
    font-size: 0.8125rem !important;
    flex-shrink: 0;
}

/* ── Scrollable content ── */

.ml-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px 48px;
}

/* ── Card grid ── */

.ml-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 36px;
}

/* ── Module card ── */

.ml-card {
    position: relative;
    background: white;
    border-radius: 10px;
    overflow: hidden;
    cursor: grab;
    border: none;
    box-shadow:
        0 1px 0 0 oklch(0.78 0 0),
        0 2px 0 0 oklch(0.75 0 0),
        0 3px 0 0 oklch(0.72 0 0),
        0 4px 0 0 oklch(0.69 0 0),
        0 5px 0 0 oklch(0.66 0 0),
        0 6px 0 0 oklch(0.63 0 0),
        -10px 14px 28px oklch(0 0 0 / 0.30);
    transition:
        transform 0.2s ease-out,
        box-shadow 0.2s ease-out;
    animation: ml-card-enter 0.3s ease-out both;
    display: flex;
    flex-direction: column;
}

.ml-card::after {
    content: '';
    position: absolute;
    top: 120px;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0 0 10px 10px;
    pointer-events: none;
    z-index: 1;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color:
        transparent
        oklch(0.85 0 0 / 0.22)
        oklch(0.65 0 0 / 0.32)
        oklch(0.65 0 0 / 0.32);
}

.ml-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 1px 0 0 oklch(0.78 0 0),
        0 2px 0 0 oklch(0.75 0 0),
        0 3px 0 0 oklch(0.72 0 0),
        0 4px 0 0 oklch(0.69 0 0),
        0 5px 0 0 oklch(0.66 0 0),
        0 6px 0 0 oklch(0.63 0 0),
        -12px 18px 32px oklch(0 0 0 / 0.33);
}

.ml-card:active {
    transform: translateY(2px);
    box-shadow:
        0 1px 0 0 oklch(0.78 0 0),
        0 2px 0 0 oklch(0.75 0 0),
        0 3px 0 0 oklch(0.72 0 0),
        0 4px 0 0 oklch(0.69 0 0),
        0 5px 0 0 oklch(0.66 0 0),
        0 6px 0 0 oklch(0.63 0 0),
        -4px 6px 10px oklch(0 0 0 / 0.12);
    transition-duration: 0.06s;
}

.ml-card--dragging {
    opacity: 0.4;
    transform: scale(0.95);
    cursor: grabbing;
}

.ml-card--drop-before {
    outline: 2px dashed oklch(0.55 0.2 260);
    outline-offset: 4px;
}

.ml-card--draft {
    opacity: 0.3;
    filter: grayscale(1);
}

.ml-card--draft:hover {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.ml-card--skeleton {
    cursor: default;
    animation: none;
}

.ml-card--skeleton:hover {
    transform: none;
    box-shadow:
        0 1px 0 0 oklch(0.78 0 0),
        0 2px 0 0 oklch(0.75 0 0),
        0 3px 0 0 oklch(0.72 0 0),
        0 4px 0 0 oklch(0.69 0 0),
        0 5px 0 0 oklch(0.66 0 0),
        0 6px 0 0 oklch(0.63 0 0),
        -8px 12px 20px oklch(0 0 0 / 0.25);
}

/* ── Banner (colored top) ── */

.ml-card-banner {
    position: relative;
    height: 120px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--banner-bg, oklch(0.6 0.2 260));
    border-radius: 10px 10px 0 0;
    padding: 0.5rem;
}

.ml-card-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border-style: solid;
    border-width: 4px;
    border-color:
        oklch(1 0 0 / 0.3)
        oklch(0 0 0 / 0.12)
        oklch(0 0 0 / 0.25)
        oklch(1 0 0 / 0.2);
    pointer-events: none;
    z-index: 1;
    box-shadow: inset -8px 8px 10px -8px oklch(1 0 0 / 0.45);
}

.ml-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ml-card-emoji {
    font-size: 5.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.2));
}

/* ── Vivid banner gradient themes (OKLCH max-chroma) ── */
/* Each theme sets --banner-bg (gradient) and --card-shadow (darker accent) */

.ml-banner--teal-coral    { --banner-bg: linear-gradient(135deg, oklch(0.80 0.30 155), oklch(0.72 0.32 25));  --card-shadow: oklch(0.52 0.18 155); }
.ml-banner--coral-teal    { --banner-bg: linear-gradient(135deg, oklch(0.75 0.33 350), oklch(0.82 0.28 195)); --card-shadow: oklch(0.50 0.20 350); }
.ml-banner--purple-coral  { --banner-bg: linear-gradient(135deg, oklch(0.60 0.35 305), oklch(0.78 0.30 50));  --card-shadow: oklch(0.38 0.22 305); }
.ml-banner--coral-purple  { --banner-bg: linear-gradient(135deg, oklch(0.72 0.35 15), oklch(0.55 0.35 290));  --card-shadow: oklch(0.48 0.22 15); }
.ml-banner--teal-yellow   { --banner-bg: linear-gradient(135deg, oklch(0.80 0.30 165), oklch(0.93 0.25 100)); --card-shadow: oklch(0.52 0.18 165); }
.ml-banner--yellow-teal   { --banner-bg: linear-gradient(135deg, oklch(0.90 0.28 90), oklch(0.75 0.28 150));  --card-shadow: oklch(0.58 0.18 90); }
.ml-banner--purple-teal   { --banner-bg: linear-gradient(135deg, oklch(0.62 0.35 280), oklch(0.82 0.28 170)); --card-shadow: oklch(0.40 0.22 280); }
.ml-banner--teal-purple   { --banner-bg: linear-gradient(135deg, oklch(0.82 0.28 160), oklch(0.62 0.35 310)); --card-shadow: oklch(0.52 0.18 160); }
.ml-banner--navy-teal     { --banner-bg: linear-gradient(135deg, oklch(0.48 0.30 260), oklch(0.82 0.30 170)); --card-shadow: oklch(0.30 0.18 260); }
.ml-banner--teal-navy     { --banner-bg: linear-gradient(135deg, oklch(0.80 0.28 185), oklch(0.45 0.30 260)); --card-shadow: oklch(0.52 0.18 185); }
.ml-banner--orange-coral  { --banner-bg: linear-gradient(135deg, oklch(0.82 0.30 65), oklch(0.70 0.33 20));   --card-shadow: oklch(0.55 0.20 65); }
.ml-banner--coral-orange  { --banner-bg: linear-gradient(135deg, oklch(0.70 0.35 5), oklch(0.85 0.28 70));    --card-shadow: oklch(0.48 0.22 5); }
.ml-banner--blue-purple   { --banner-bg: linear-gradient(135deg, oklch(0.60 0.33 260), oklch(0.65 0.35 320)); --card-shadow: oklch(0.38 0.20 260); }
.ml-banner--purple-blue   { --banner-bg: linear-gradient(135deg, oklch(0.68 0.35 310), oklch(0.58 0.30 255)); --card-shadow: oklch(0.42 0.22 310); }
.ml-banner--navy-coral    { --banner-bg: linear-gradient(135deg, oklch(0.45 0.30 255), oklch(0.75 0.33 25));  --card-shadow: oklch(0.30 0.18 255); }
.ml-banner--coral-navy    { --banner-bg: linear-gradient(135deg, oklch(0.72 0.35 10), oklch(0.48 0.30 265));  --card-shadow: oklch(0.48 0.22 10); }

/* ── Card menu (top-right corner) ── */

.ml-card-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.ml-card:hover .ml-card-actions {
    opacity: 1;
}

.ml-card-menu-btn {
    color: white !important;
    background: oklch(0 0 0 / 0.2) !important;
    border-radius: 6px !important;
}

.ml-card-menu-btn:hover {
    background: oklch(0 0 0 / 0.35) !important;
}

/* ── Body ── */

.ml-card-body {
    position: relative;
    padding: 14px 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.ml-card-body::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 10px;
    background: linear-gradient(170deg, oklch(0 0 0 / 0.3) 0%, oklch(0 0 0 / 0.24) 70%, oklch(0 0 0 / 0.16) 90%, oklch(0 0 0 / 0.06) 98%, oklch(0 0 0 / 0) 100%);
    filter: blur(3px);
    pointer-events: none;
    z-index: 2;
}

.ml-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
    color: oklch(0.15 0 0);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ml-card-desc {
    font-size: 0.8rem;
    color: oklch(0.35 0 0);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Footer ── */

.ml-card-footer {
    padding: 10px 16px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ml-card-lessons {
    font-size: 0.75rem;
    color: oklch(0.5 0 0);
    font-variant-numeric: tabular-nums;
}

/* Status badge */
.ml-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 10px 3px;
    border-radius: 999px;
    cursor: pointer;
    transition: opacity 0.12s ease-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 20px;
    box-sizing: border-box;
}

.ml-badge:hover {
    opacity: 0.8;
}

.ml-badge--active {
    color: oklch(0.3 0.1 150);
    background: oklch(0.92 0.12 150);
}

.ml-badge--draft {
    color: oklch(0.45 0 0);
    background: oklch(0 0 0 / 0.08);
}

/* Shared action btn style */
.ml-action-btn {
    color: var(--mud-palette-text-secondary) !important;
}

/* Icon used on lesson list header */
.ml-row-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ml-emoji {
    font-size: 1.15rem;
    line-height: 1;
}

/* ── Empty state ── */

.ml-empty {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    text-align: center;
}

.ml-empty-ring {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ml-empty-title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 16px 0 0;
    color: var(--mud-palette-text-primary);
}

.ml-empty-desc {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.55;
    margin: 6px 0 0;
    max-width: 280px;
}

/* ══════════════════════════════════════════
   Lesson List Page
   ══════════════════════════════════════════ */

.ll-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: oklch(0.965 0 0);
}

/* ── Header ── */

.ll-header {
    flex-shrink: 0;
    background: white;
    padding: 20px 40px;
    z-index: 2;
    container-type: inline-size;
}

.ll-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ll-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.ll-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ll-back-btn {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary) !important;
}

.ll-module-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    flex-shrink: 0;
}

.ll-module-icon .ml-emoji {
    font-size: 2.25rem;
}

.ll-header-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.ll-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    color: oklch(0.2 0 0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ll-subtitle {
    font-size: 0.775rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ── Scrollable content ── */

.ll-content {
    flex: 1;
    overflow-y: auto;
    padding: 32px 40px 48px;
    container-type: inline-size;
}

/* ── List container ── */

/* Lesson grid styles are in LessonGrid.razor.css (scoped) */

/* ── Empty state (reuses ml-empty styles) ── */

.ll-empty {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 24px;
    text-align: center;
}

/* ══════════════════════════════════════════
   Emoji Picker
   ══════════════════════════════════════════ */

.emoji-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.emoji-picker-trigger {
    text-transform: none !important;
    font-weight: 500 !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    gap: 8px !important;
    height: 40px !important;
    width: 100% !important;
}

.emoji-picker-current {
    font-size: 1.5rem;
    line-height: 1;
}

.emoji-picker-current-icon {
    font-size: 1.25rem !important;
}

.emoji-picker-label {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.emoji-picker-clear {
    flex-shrink: 0;
}

.emoji-picker-popover {
    z-index: 100;
}

.emoji-picker-panel {
    width: 380px;
    max-height: 380px;
    display: flex;
    flex-direction: column;
    padding: 12px;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.emoji-picker-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding-bottom: 0;
}

.emoji-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.emoji-tab-btn:hover {
    color: var(--mud-palette-text-primary);
}

.emoji-tab-btn.active {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

.emoji-picker-search {
    margin-bottom: 8px;
}

.emoji-picker-grid {
    flex: 1;
    overflow-y: auto;
}

.emoji-category-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary);
    padding: 8px 0 4px;
}

.emoji-category-items {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}

.emoji-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s;
}

.emoji-btn:hover {
    background: var(--mud-palette-action-default-hover);
}

.emoji-btn.selected {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
    outline: 2px solid var(--mud-palette-primary);
}

.emoji-btn.icon-btn {
    color: var(--mud-palette-text-primary);
}

.emoji-no-results {
    text-align: center;
    padding: 24px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
}

.emoji-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99;
}

/* ══════════════════════════════════════════
   Module Dialog
   ══════════════════════════════════════════ */

/* ── Shared dialog styling (modules, lessons, etc.) ── */

.lms-dialog .mud-dialog-title {
    padding: 0 !important;
}

.lms-dialog-header {
    background: linear-gradient(135deg, oklch(var(--yes-purple)), oklch(0.50 0.20 300));
    color: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
}

.lms-dialog .mud-dialog-content {
    padding: 28px 32px 12px !important;
}

.lms-dialog-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lms-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lms-dialog-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.3 0 0);
}

.lms-dialog-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.lms-dialog-row .lms-dialog-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lms-dialog-row .mud-input-control {
    margin-top: 0 !important;
}

.lms-dialog-row .emoji-picker-wrapper {
    height: 40px;
    display: flex;
    align-items: center;
}

.lms-dialog .mud-dialog-actions {
    display: block !important;
    padding: 0 !important;
}

.lms-dialog-submit {
    text-transform: none !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    letter-spacing: 0 !important;
    padding: 6px 20px !important;
}

.lms-dialog-cancel {
    text-transform: none !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    letter-spacing: 0 !important;
    padding: 6px 20px !important;
    background: oklch(0.88 0 0) !important;
    color: oklch(0.3 0 0) !important;
}

.lms-dialog-cancel:hover {
    background: oklch(0.83 0 0) !important;
}

.lms-dialog-buttons {
    display: flex;
    gap: 8px;
    padding: 16px 32px;
}

.lms-dialog-save-reminder {
    background: oklch(0.55 0.19 40);
    color: white;
    height: 40px;
    font-size: 0.8125rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 0 0 4px 4px;
}


/* ══════════════════════════════════════════
   Color Swatches
   ══════════════════════════════════════════ */

.color-swatch-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.color-swatch {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color 0.15s, transform 0.15s;
    box-sizing: border-box;
}

.color-swatch:hover {
    transform: scale(1.1);
    border-color: oklch(0 0 0 / 0.15);
}

.color-swatch.selected {
    border-color: white;
    box-shadow: 0 0 0 2px var(--mud-palette-primary);
}

.color-swatch--media {
    background: var(--mud-palette-background);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.color-swatch--media:hover {
    color: var(--mud-palette-text-primary);
}

.color-swatch--media.selected {
    background: var(--mud-palette-primary);
    color: white;
}

/* Module dialog swatches use banner gradient CSS variables */
.color-swatch[class*="ml-banner--"] {
    background: var(--banner-bg);
}

.color-swatch-grid--module {
    gap: 6px;
}

.color-swatch-grid--module .color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

/* ── Image Position Picker ── */

.position-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    width: 60px;
    background: oklch(0 0 0 / 0.2);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid oklch(0 0 0 / 0.2);
}

.position-cell {
    aspect-ratio: 1;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: background-color 0.15s;
}

.position-cell:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 20%, var(--mud-palette-surface));
}

.position-cell.selected {
    background: var(--mud-palette-primary);
}

/* ── Alignment Toggle Row ── */

.align-toggle-row {
    display: flex;
    gap: 4px;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .ml-header {
        padding: 12px 16px;
    }

    .ml-content {
        padding: 16px 12px 32px;
    }

    .ml-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 16px;
    }

    .ml-header-inner {
        flex-wrap: wrap;
    }

    .ml-search {
        width: 160px;
    }

    .ml-card-actions {
        opacity: 1;
    }
}

/* ── Lesson list container queries ── */

@container (max-width: 700px) {
    .ll-title {
        font-size: 1.15rem;
    }

    .ll-subtitle {
        display: none;
    }
}

@container (max-width: 640px) {
    .ll-header-inner {
        flex-wrap: wrap;
    }

    .ll-module-icon {
        display: none;
    }
}

@container (max-width: 400px) {
    .ll-header-inner {
        gap: 8px;
    }

    .ll-title {
        font-size: 1rem;
    }

    .ll-module-icon,
    .ll-lesson-count {
        display: none;
    }
}

@media (max-width: 480px) {
    .ml-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .ml-card-banner {
        height: 90px;
    }

    .ml-card-emoji {
        font-size: 2.25rem;
    }
}

/* ══════════════════════════════════════════
   Layout Editor — Nested Block Management
   ══════════════════════════════════════════ */

.layout-child-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.layout-child-panel:hover {
    border-color: var(--mud-palette-primary-lighten);
}

.layout-child-panel--selected {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, transparent);
}

.nested-blocks-list {
    margin-top: 4px;
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 4px;
}

.nested-block-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 0.8rem;
}

.nested-block-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.nested-block-type {
    font-weight: 600;
    white-space: nowrap;
    min-width: 0;
}

.nested-block-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--mud-palette-text-secondary);
}

.nested-block-actions {
    display: flex;
    gap: 0;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.15s;
}

.nested-block-row:hover .nested-block-actions {
    opacity: 1;
}

.nested-add-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 4px 2px;
    margin-top: 4px;
}

/* ── Back to Layout breadcrumb ── */

.properties-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    margin: -8px -12px 8px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background 0.15s;
}

.properties-breadcrumb:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
}