/**
 * Manhattan UI Framework Styles
 * Modern, fully custom component styling
 */

/* === Base: Icon reset ===
 * Font Awesome icons should never be selectable as text or show a text cursor.
 * pointer-events:none passes clicks through to the parent button/link.
 *
 * Space reservation: FA glyphs are rendered by a webfont. Until the font
 * finishes loading the browser draws an invisible placeholder whose width can
 * be 0 (FOIT). When the glyph finally paints, surrounding inline content
 * reflows — producing the visible "flash" / content shift. Fix:
 *
 *   • display:inline-block lifts the element out of inline text flow and
 *     gives it a stable box even before the glyph is drawn.
 *   • min-width:1em reserves exactly one character-width of space.
 *   • text-align:center keeps glyphs centred in that reserved box.
 *   • line-height:1 prevents descender-gap when icons appear inside flex rows.
 *   • vertical-align:middle aligns icons with adjacent text without the gap
 *     that baseline alignment causes for inline-block elements.
 *
 * Together these ensure icons occupy a stable layout slot from the first
 * paint, so no reflow occurs when the webfont completes loading. */
.fas, .far, .fab, .fal, .fat, .fad, .fa {
    display: inline-block;
    min-width: 1em;
    text-align: center;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
    cursor: inherit;
    pointer-events: none;
}

/* === Badge Component === */
.m-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

.m-badge-primary {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.m-badge-success {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.m-badge-warning {
    background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3);
}

.m-badge-danger {
    background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(244, 67, 54, 0.3);
}

.m-badge-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.m-badge-secondary {
    background: linear-gradient(135deg, #607D8B 0%, #455A64 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(96, 125, 139, 0.3);
}

.m-badge-info {
    background: linear-gradient(135deg, #00BCD4 0%, #0097A7 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

/* === Chip Component (soft inline status/category tags) === */
.m-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
}

.m-chip-primary {
    background: rgba(33, 150, 243, 0.12);
    color: #1976D2;
}

.m-chip-success {
    background: rgba(76, 175, 80, 0.12);
    color: #388E3C;
}

.m-chip-warning {
    background: rgba(255, 152, 0, 0.12);
    color: #F57C00;
}

.m-chip-danger {
    background: rgba(244, 67, 54, 0.12);
    color: #d32f2f;
}

.m-chip-purple {
    background: rgba(102, 126, 234, 0.12);
    color: #5e35b1;
}

.m-chip-secondary {
    background: rgba(96, 125, 139, 0.12);
    color: #546E7A;
}

.m-chip-default {
    background: rgba(0, 0, 0, 0.08);
    color: #616161;
}

.m-chip-info {
    background: rgba(0, 188, 212, 0.12);
    color: #0097A7;
}

/* === Label Component (semantic form label) === */
.m-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--m-text, #333);
    margin-bottom: 0.25rem;
    line-height: 1.4;
    cursor: default;
}

.m-label-required {
    color: #e53935;
    margin-left: 0.25rem;
    font-weight: 700;
}

.m-label-hint {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--m-text-muted, #888);
}

/* === Button Component === */
.m-button {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    outline: none;
}

/* === Card Component === */
.m-card {
    display: block;
}

/* === Chart Component === */
.m-chart {
    display: block;
    width: 100%;
    color: #2c3e50;
}

.m-chart-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: inherit;
}

.m-chart-swatch {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.m-chart-svg {
    width: 100%;
    height: auto;
    display: block;
}

.m-chart-axis {
    font-size: 11px;
    fill: currentColor;
    opacity: 0.75;
}

.m-chart-x {
    font-size: 11px;
    fill: currentColor;
    opacity: 0.85;
}

.m-chart-axis-line {
    stroke: currentColor;
    opacity: 0.3;
    stroke-width: 1;
}

.m-chart-grid {
    stroke: currentColor;
    opacity: 0.10;
    stroke-width: 1;
}

.m-chart-bar,
.m-chart-point {
    cursor: pointer;
}

.m-chart-bar:hover,
.m-chart-point:hover {
    opacity: 0.85;
}

.m-chart-empty {
    padding: 12px;
    border: 1px dashed rgba(0,0,0,0.18);
    border-radius: 10px;
    color: rgba(0,0,0,0.55);
    font-size: 13px;
}

/* === Tooltip Component === */
.m-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 320px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(44, 62, 80, 0.96);
    color: #ecf0f1;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.1px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(2px);
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

.m-tooltip.m-tooltip-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === Popover Component === */
.m-popover {
    position: absolute;
    z-index: 2500;
    max-width: 360px;
    min-width: 160px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.07);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.97) translateY(-3px);
    transition: opacity 150ms ease, transform 150ms ease;
    overflow: visible;
}

.m-popover.m-popover-visible {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1) translateY(0);
}

/* Placement-aware hidden-state transforms so the entrance animation always
   originates from the trigger side (the base rule handles bottom). */
.m-popover-top   { transform: scale(0.97) translateY( 3px); }
.m-popover-left  { transform: scale(0.97) translateX( 3px); }
.m-popover-right { transform: scale(0.97) translateX(-3px); }

/* Arrow — zero-size element; actual triangle is built via ::before (border)
   and ::after (fill) so the popover background covers the inner half cleanly. */
.m-popover-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

/* Bottom placement: popover below trigger, arrow points up */
.m-popover-bottom .m-popover-arrow {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(0, 0, 0, 0.12);
}
.m-popover-bottom .m-popover-arrow::after {
    content: '';
    position: absolute;
    top: 2px;
    left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ffffff;
}

/* Top placement: popover above trigger, arrow points down */
.m-popover-top .m-popover-arrow {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid rgba(0, 0, 0, 0.12);
}
.m-popover-top .m-popover-arrow::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ffffff;
}

/* Right placement: popover to the right, arrow points left */
.m-popover-right .m-popover-arrow {
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid rgba(0, 0, 0, 0.12);
}
.m-popover-right .m-popover-arrow::after {
    content: '';
    position: absolute;
    top: -7px;
    left: 2px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #ffffff;
}

/* Left placement: popover to the left, arrow points right */
.m-popover-left .m-popover-arrow {
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid rgba(0, 0, 0, 0.12);
}
.m-popover-left .m-popover-arrow::after {
    content: '';
    position: absolute;
    top: -7px;
    right: 2px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #ffffff;
}

.m-popover-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.m-popover-title {
    font-size: 13px;
    font-weight: 600;
    color: #2c3e50;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-popover-body {
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #444;
}

.m-popover-body p:first-child { margin-top: 0; }
.m-popover-body p:last-child  { margin-bottom: 0; }

.m-popover-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    min-height: 60px;
}

.m-popover-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    color: #e74c3c;
    font-size: 12px;
}

/* === Pagination Component === */
.m-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    font-size: 14px;
}

/* Left alignment: controls start left, info/sizes follow */
.m-pagination-left  { justify-items: start; }
.m-pagination-right { justify-items: end; }
/* Center (default): controls centered via grid */

/* --- Label position: above --- */
/* Info spans full width in its own row above the controls row */
.m-pagination-label-above .m-pagination-info {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
}
.m-pagination-label-above .m-pagination-controls {
    grid-column: 2;
    grid-row: 2;
}
.m-pagination-label-above .m-pagination-sizes {
    grid-column: 3;
    grid-row: 2;
}

/* --- Label position: below --- */
/* Controls row first, info spans full width below */
.m-pagination-label-below .m-pagination-info {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
}
.m-pagination-label-below .m-pagination-controls {
    grid-column: 2;
    grid-row: 1;
}
.m-pagination-label-below .m-pagination-sizes {
    grid-column: 3;
    grid-row: 1;
}

/* --- Label position: right --- */
/* Info on the right, sizes swap to the left */
.m-pagination-label-right .m-pagination-info {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
}
.m-pagination-label-right .m-pagination-controls {
    grid-column: 2;
    grid-row: 1;
}
.m-pagination-label-right .m-pagination-sizes {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.m-pagination-info {
    justify-self: start;
    font-size: 13px;
    color: #666;
    white-space: nowrap;
}

.m-pagination-controls {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
}

.m-pagination-sizes {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.m-pagination-size-label {
    font-size: 12px;
    color: #888;
}

/* Size selector — Manhattan Dropdown component */
.m-pagination-sizes .m-dropdown-wrapper {
    position: relative;
}
.m-pagination-sizes .m-dropdown-custom {
    min-width: 72px;
}
.m-pagination-sizes .m-dropdown-header {
    padding: 0 30px 0 10px;
    font-size: 13px;
    height: 34px;
    border-color: #dde3ec;
}

/* Page buttons */
.m-pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid #dde3ec;
    border-radius: 6px;
    background: #fff;
    color: #444;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    -webkit-user-select: none;
}

.m-pagination-btn:hover:not(.m-pagination-disabled):not(.m-pagination-active) {
    background: #f0f6fa;
    border-color: #118AB2;
    color: #118AB2;
}

.m-pagination-btn:focus-visible {
    outline: 2px solid #118AB2;
    outline-offset: 2px;
}

/* Active / current page */
.m-pagination-btn.m-pagination-active {
    background: #118AB2;
    border-color: #118AB2;
    color: #fff;
    cursor: default;
    font-weight: 600;
}

/* Disabled nav button */
.m-pagination-btn.m-pagination-disabled,
.m-pagination-btn[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Nav (‹ ›) buttons: slightly narrower */
.m-pagination-nav {
    min-width: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

/* Ellipsis */
.m-pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 34px;
    font-size: 13px;
    color: #aaa;
    user-select: none;
    -webkit-user-select: none;
}

/* --- Compact variant --- */
.m-pagination-compact .m-pagination-btn {
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 12px;
    border-radius: 4px;
}
.m-pagination-compact .m-pagination-nav {
    min-width: 26px;
    font-size: 14px;
}
.m-pagination-compact .m-pagination-ellipsis {
    height: 28px;
    min-width: 24px;
    font-size: 12px;
}
.m-pagination-compact .m-pagination-info,
.m-pagination-compact .m-pagination-size-label {
    font-size: 11px;
}
.m-pagination-compact .m-pagination-sizes .m-dropdown-header {
    font-size: 11px;
    height: 28px;
    padding: 0 26px 0 8px;
    min-width: 56px;
}

/* --- Large variant --- */
.m-pagination-large .m-pagination-btn {
    min-width: 42px;
    height: 42px;
    padding: 0 12px;
    font-size: 15px;
    border-radius: 8px;
}
.m-pagination-large .m-pagination-nav {
    min-width: 36px;
    font-size: 20px;
}
.m-pagination-large .m-pagination-ellipsis {
    height: 42px;
    font-size: 16px;
}
.m-pagination-large .m-pagination-sizes .m-dropdown-header {
    font-size: 15px;
    height: 42px;
    padding: 0 34px 0 14px;
}

/* Target element loading state (ajax mode) */
.m-pagination-target-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Responsive: collapse to single column on very small screens */
@media (max-width: 480px) {
    .m-pagination {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    .m-pagination-info,
    .m-pagination-sizes {
        justify-self: center;
    }
    .m-pagination-controls {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* === Loader Component === */
.m-hidden {
    display: none !important;
}

/* === CodeArea Component === */
.m-codearea-wrapper {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
    background: #1f232a;
    color: #c9d1d9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.m-codearea-wrapper:focus-within {
    border-color: rgba(33, 150, 243, 0.6);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.m-codearea-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #282c34;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.m-codearea-language {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.m-codearea-copy {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.m-codearea-copy:hover {
    background: rgba(255, 255, 255, 0.10);
}

.m-codearea-editor {
    position: relative;
}

.m-codearea-highlight {
    margin: 0;
    padding: 12px;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}
.m-codearea-wrap .m-codearea-highlight {
    white-space: pre-wrap;
    word-break: break-word;
}
.m-codearea-nowrap .m-codearea-highlight {
    white-space: pre;
}

.m-codearea {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 12px;
    resize: vertical;
    border: none;
    outline: none;
    background: transparent;
    color: transparent;
    caret-color: #ffffff;
    overflow: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.5;
}
.m-codearea-wrap .m-codearea {
    white-space: pre-wrap;
    word-break: break-word;
}
.m-codearea-nowrap .m-codearea {
    white-space: pre;
}

.m-codearea::selection {
    background: rgba(33, 150, 243, 0.35);
}

.m-codearea-token-keyword { color: #79c0ff; }
.m-codearea-token-string { color: #a5d6ff; }
.m-codearea-token-comment { color: rgba(201, 209, 217, 0.55); font-style: italic; }
.m-codearea-token-number { color: #ffb86c; }
.m-codearea-token-constant { color: #7ee787; }

/* PHP on dark theme (more "typical" PHP-ish palette) */
.m-codearea-lang-php .m-codearea-token-keyword { color: #ff7b72; }
.m-codearea-lang-php .m-codearea-token-string { color: #a6e22e; }
.m-codearea-lang-php .m-codearea-token-comment { color: rgba(201, 209, 217, 0.55); }
.m-codearea-lang-php .m-codearea-token-number { color: #ffb86c; }
.m-codearea-lang-php .m-codearea-token-constant { color: #d2a8ff; }
.m-codearea-lang-php .m-codearea-token-variable { color: #79c0ff; }

.m-loader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #7f8c8d;
}

.m-loader-inline {
    position: relative;
}

.m-loader-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(1px);
    border-radius: inherit;
    z-index: 5;
}

.m-loader-spinner {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(44, 62, 80, 0.18);
    border-top-color: #2196F3;
    animation: m-spin 0.8s linear infinite;
}

.m-loader-sm .m-loader-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.m-loader-lg .m-loader-spinner {
    width: 22px;
    height: 22px;
    border-width: 3px;
}

.m-loader-text {
    font-size: 14px;
    font-weight: 600;
    color: #2c3e50;
}

/* Animated ellipsis dots rendered inside .m-loader-text */
.m-loader-dots {
    display: inline-flex;
    align-items: center;
    margin-left: 1px;
}
.m-loader-dots span {
    opacity: 0;
    animation: m-dot-blink 1.4s ease-in-out infinite;
}
.m-loader-dots span:nth-child(1) { animation-delay: 0s; }
.m-loader-dots span:nth-child(2) { animation-delay: 0.2s; }
.m-loader-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes m-dot-blink {
    0%, 80%, 100% { opacity: 0; }
    40%            { opacity: 1; }
}

@keyframes m-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.m-card-header {
    padding: 0;
    border-bottom: none;
}

.m-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.m-card-subtitle {
    margin-top: 6px;
    color: #7f8c8d;
    font-size: 14px;
}

.m-card-body {
    padding: 0;
}

.m-card-footer {
    padding: 0;
    border-top: none;
}

/* Default (opinionated) card styling */
.m-card-default {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.m-card-default .m-card-header {
    padding: 18px 20px 10px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.m-card-default .m-card-body {
    padding: 18px 20px;
}

.m-card-default .m-card-footer {
    padding: 12px 20px 18px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* === List Component === */
.m-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.m-list-item {
    position: relative;
}

.m-list-empty {
    color: var(--m-text-muted, #888);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}


/* === Reorderable Component === */
.m-reorderable {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.m-reorderable-loader {
    border-radius: 8px;
}

/* Card frame — flex row with handle on left */
.m-reorderable-item {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--m-card-bg, #fff);
    border: 1px solid var(--m-border, rgba(0, 0, 0, 0.1));
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Grip handle — fa-grip-vertical icon */
.m-reorderable-handle {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0.5rem 0.45rem;
    color: var(--m-text-muted, #bbb);
    background-color: rgba(0, 0, 0, 0.025);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
    cursor: grab;
    user-select: none;
    font-size: 0.85rem;
    line-height: 1;
}

.m-reorderable-handle:active {
    cursor: grabbing;
}

/* Content fills remaining width */
.m-reorderable-item > *:not(.m-reorderable-handle) {
    flex: 1;
    min-width: 0;
}

.m-reorderable-item:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* No-handles mode — whole item is the drag target (classic grip-dot gutter) */
.m-reorderable[data-handles="0"] .m-reorderable-item {
    cursor: grab;
    padding-left: 1.75rem;
}

.m-reorderable[data-handles="0"] .m-reorderable-item:active {
    cursor: grabbing;
}

.m-reorderable[data-handles="0"] .m-reorderable-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1.75rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-right: 1px solid rgba(0, 0, 0, 0.07);
    background-image:
        radial-gradient(circle, rgba(0, 0, 0, 0.22) 1.5px, transparent 1.5px),
        radial-gradient(circle, rgba(0, 0, 0, 0.22) 1.5px, transparent 1.5px);
    background-position:
        calc(50% - 3px) center,
        calc(50% + 3px) center;
    background-size: 4px 6px, 4px 6px;
    background-repeat: repeat-y, repeat-y;
}

.m-reorderable-item.m-reorderable-dragging {
    opacity: 0.55;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.m-reorderable-item.m-reorderable-drop-target {
    border-color: var(--m-primary, #2196F3);
    box-shadow: inset 0 0 0 1px var(--m-primary, #2196F3);
    outline: none;
}

.m-reorderable-empty {
    color: var(--m-text-muted, #888);
    font-size: 0.9rem;
    padding: 0.5rem 0;
}


/* === Toaster Component === */
.m-toaster {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: min(420px, calc(100vw - 2rem));
    pointer-events: none;
}

/* Banner/panel mode: render in-flow where the toaster element appears in the view */
.m-toaster-banner {
    position: static;
    z-index: auto;
    display: block;
    max-width: none;
    width: 100%;
    pointer-events: auto;
    margin-bottom: 1rem;
}

/* Preserve existing alert look; just avoid trailing whitespace */
.m-toaster-banner .alert:last-child {
    margin-bottom: 0;
}

.m-toaster-top-right {
    top: 1rem;
    right: 1rem;
}

.m-toaster-top-left {
    top: 1rem;
    left: 1rem;
}

.m-toaster-bottom-right {
    bottom: 1rem;
    right: 1rem;
}

.m-toaster-bottom-left {
    bottom: 1rem;
    left: 1rem;
}

.m-toast {
    pointer-events: auto;
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: start;
    gap: 0.75rem;
    padding: 0.9rem 0.95rem;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #2196F3;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease;
}

.m-toast-show {
    opacity: 1;
    transform: translateY(0);
}

.m-toast-hide {
    opacity: 0;
    transform: translateY(-6px);
}

.m-toast-icon {
    color: #2196F3;
    font-size: 1.1rem;
    line-height: 1.2;
    margin-top: 0.05rem;
}

.m-toast-message {
    color: #2c3e50;
    font-size: 0.95rem;
    line-height: 1.35;
    word-break: break-word;
}

.m-toast-close {
    border: none;
    background: transparent;
    color: #7f8c8d;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    border-radius: 6px;
}

.m-toast-close:hover {
    background: rgba(0, 0, 0, 0.06);
}

.m-toast-success {
    border-left-color: #4CAF50;
}

.m-toast-success .m-toast-icon {
    color: #4CAF50;
}

.m-toast-error {
    border-left-color: #e74c3c;
}

.m-toast-error .m-toast-icon {
    color: #e74c3c;
}

.m-toast-warning {
    border-left-color: #FF9800;
}

.m-toast-warning .m-toast-icon {
    color: #FF9800;
}

.m-button:hover {
    background-color: #f8f9fa;
    border-color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.m-button:active {
    transform: translateY(0);
}

.m-button.m-button-primary {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.m-button.m-button-primary:hover {
    background-color: #1976D2;
    border-color: #1976D2;
}

.m-button.m-button-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.m-button.m-button-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}

.m-button.m-button-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

.m-button.m-button-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.m-button.m-button-success {
    background-color: #4CAF50;
    border-color: #4CAF50;
    color: #fff;
}

.m-button.m-button-success:hover {
    background-color: #45a049;
    border-color: #45a049;
}

.m-button.m-button-block {
    display: block;
    width: 100%;
}

.m-button:disabled,
.m-button.m-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.m-button i {
    margin-right: 6px;
}

.m-button .m-button-icon.m-icon-right {
    margin-right: 0;
    margin-left: 6px;
}

/* Toggle Switch */
.m-switch-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.m-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

.m-switch-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.m-switch-slider {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 28px;
    background: #d1d5db;
    border-radius: 999px;
    transition: background-color 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
    flex-shrink: 0;
}

.m-switch-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.m-switch-input:checked + .m-switch-slider {
    background: #2196F3;
}

.m-switch-input:checked + .m-switch-slider::after {
    transform: translateX(20px);
}

.m-switch-input:focus-visible + .m-switch-slider {
    outline: 3px solid rgba(33, 150, 243, 0.25);
    outline-offset: 2px;
}

.m-switch-label {
    font-weight: 600;
    color: #2c3e50;
    line-height: 28px;
}

.m-switch-state-label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    min-width: 60px;
    line-height: 28px;
}

.m-switch-input:checked ~ .m-switch-state-off {
    display: none;
}

.m-switch-input:not(:checked) ~ .m-switch-state-on {
    display: none;
}

.m-switch-input:disabled + .m-switch-slider {
    opacity: 0.6;
}

.m-switch-input:disabled ~ .m-switch-label,
.m-switch-input:disabled ~ .m-switch-state-label,
.m-switch-input:disabled + .m-switch-slider {
    cursor: not-allowed;
    opacity: 0.6;
}

/* === Validator Component === */
.m-validator-field {
    position: relative;
    margin-bottom: 0;
}

.m-validator-error {
    color: #e74c3c;
    font-size: 12px;
    font-weight: 600;
    margin-top: 6px;
    padding-left: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: m-validator-shake 0.3s ease;
}

.m-validator-error::before {
    content: '⚠';
    font-size: 14px;
}

.m-validator-invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15) !important;
}

@keyframes m-validator-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Checkbox / Radio */
.m-choice-wrapper {
    display: inline-flex;
    align-items: center;
}

.m-choice-group {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.m-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding-left: 28px;
}

.m-choice-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.m-choice-indicator {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    display: inline-block;
    border: 2px solid #cbd5e1;
    background: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04);
}

.m-checkbox .m-choice-indicator {
    border-radius: 5px;
}

.m-radio .m-choice-indicator {
    border-radius: 999px;
}

.m-checkbox-input:checked + .m-choice-indicator {
    background: #2196F3;
    border-color: #2196F3;
}

.m-checkbox-input:checked + .m-choice-indicator::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -65%) rotate(45deg);
}

.m-radio-input:checked + .m-choice-indicator {
    border-color: #2196F3;
}

.m-radio-input:checked + .m-choice-indicator::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #2196F3;
    border-radius: 999px;
    transform: translate(-50%, -50%);
}

.m-choice-input:focus-visible + .m-choice-indicator {
    outline: 3px solid rgba(33, 150, 243, 0.25);
    outline-offset: 2px;
}

.m-choice-label {
    font-weight: 600;
    color: #2c3e50;
}

.m-choice-input:disabled + .m-choice-indicator,
.m-choice-input:disabled ~ .m-choice-label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==========================================================================
   TABS
   ========================================================================== */
.m-tabs {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* --- Tab Strip --- */
.m-tabs-strip {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.m-tabs-strip::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.m-tabs-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: none;
    background: transparent;
    color: #7f8c8d;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s, background-color 0.15s;
    font-family: inherit;
    white-space: nowrap;
    outline: none;
}

.m-tabs-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: transparent;
    transition: background-color 0.2s;
}

.m-tabs-tab:hover:not(.m-disabled) {
    color: #2c3e50;
    background-color: rgba(0, 0, 0, 0.03);
}

.m-tabs-tab.m-active {
    color: #2196F3;
}

.m-tabs-tab.m-active::after {
    background: #2196F3;
}

.m-tabs-tab.m-disabled {
    color: #bdc3c7;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-tabs-tab:focus-visible {
    outline: 2px solid rgba(33, 150, 243, 0.4);
    outline-offset: -2px;
    border-radius: 4px;
}

/* --- Tab Panels --- */
.m-tabs-body {
    padding-top: 16px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.m-tabs-panel {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Reserve space on remote panels before first load so the spinner is visible */
.m-tabs-panel[data-remote-url] {
    min-height: 180px;
}

.m-tabs-panel[hidden] {
    display: none;
}

.m-tabs-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    min-height: 120px;
}

/* --- Pills Variant --- */
.m-tabs-pills .m-tabs-strip {
    border-bottom: none;
    gap: 6px;
    flex-wrap: wrap;
}

.m-tabs-pills .m-tabs-tab {
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
}

.m-tabs-pills .m-tabs-tab::after {
    display: none;
}

.m-tabs-pills .m-tabs-tab:hover:not(.m-disabled) {
    background-color: #f0f0f0;
}

.m-tabs-pills .m-tabs-tab.m-active {
    background: #2196F3;
    color: #fff;
}

/* --- Underline Variant --- */
.m-tabs-underline .m-tabs-strip {
    border-bottom: 1px solid #e0e0e0;
}

.m-tabs-underline .m-tabs-tab::after {
    height: 3px;
    border-radius: 3px 3px 0 0;
}

/* Ripple effect */
.m-ripple {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    animation: ripple 0.6s;
    pointer-events: none;
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}

/* === TextBox Component === */
.m-textbox-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.m-textbox {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.m-textbox:hover {
    border-color: #2196F3;
}

.m-textbox:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-textbox::placeholder {
    color: #999;
}

.m-textbox:disabled,
.m-textbox.m-disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-textbox.m-error {
    border-color: #e74c3c;
}

.m-textbox.m-error:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

.m-textbox.m-success {
    border-color: #4CAF50;
}

.m-textbox.m-success:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
}

.m-textbox-error {
    display: none;
    margin-top: 4px;
    font-size: 12px;
    color: #e74c3c;
}

/* === TextArea Component === */
.m-textarea-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* === Address Component === */
.m-address {
    width: 100%;
}

.m-address-type {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.m-address-panel {
    width: 100%;
}

.m-address-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 900px) {
    .m-address-grid {
        grid-template-columns: 1fr 1fr;
    }
    .m-address-grid .m-address-field:first-child,
    .m-address-grid .m-address-field:nth-child(2) {
        grid-column: span 2;
    }
}

.m-address-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 6px;
}

.m-address-panel-nz .m-address-field {
    position: relative;
}

.m-address-search-wrapper {
    position: relative;
}

.m-address-search-affix {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(44, 62, 80, 0.55);
    pointer-events: none;
}

.m-address-results {
    position: absolute;
    width: 100%;
    margin-top: 6px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    overflow: auto;
    max-height: 260px;
    z-index: 50;
}

.m-address-result {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    color: #2c3e50;
}

.m-address-result:hover,
.m-address-result-active {
    background: rgba(33, 150, 243, 0.08);
}

.m-address-result-icon {
    margin-top: 1px;
    color: #2196F3;
    width: 18px;
    text-align: center;
}

.m-address-result-text {
    font-size: 14px;
    line-height: 1.35;
}

.m-address-help {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #7f8c8d;
}

.m-address-help-error {
    color: #e74c3c;
}

.m-address-help-info {
    color: #7f8c8d;
}

/* Inline loader shown while fetching address suggestions */
.m-address-loader {
    display: flex;
    padding: 4px 2px;
}

/* Confirmed-address state: green checkmark replaces the search icon */
.m-address-confirmed .m-address-search-affix i {
    color: #4CAF50;
}

/* ============================================================
   Map Component
   ============================================================ */

.m-map {
    position: relative;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    background: #e8e8e8;
    border: 1px solid #ddd;
}

/* Leaflet: ensure tile canvas fills the container */
.m-map .leaflet-container {
    width: 100%;
    height: 100%;
    background: #e8e8e8;
}

/* Ensure Leaflet controls stay below Manhattan modals/windows (z-index 9999) */
.m-map .leaflet-top,
.m-map .leaflet-bottom {
    z-index: 999;
}

.m-map-loading,
.m-map-error {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #666;
    background: #f0f0f0;
}

.m-map-error {
    color: #c0392b;
    background: #fdf2f2;
}

.m-map-loading i,
.m-map-error i {
    font-size: 1.4rem;
}

/* Recenter / reset-view button (->recenterButton()) */
.m-map-recenter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.m-map-recenter-btn:hover,
.m-map-recenter-btn:focus-visible {
    background: #f4f4f4;
    color: #118AB2;
    outline: none;
}

/* Google Maps variant — standalone button, needs its own shadow and sizing */
.m-map-recenter-btn--google {
    width: 40px;
    height: 40px;
    margin: 0 10px 10px 0;
    border-radius: 2px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    font-size: 1rem;
}

.m-map-recenter-btn--google:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.m-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    min-height: 80px;
}

.m-textarea:hover {
    border-color: #2196F3;
}

.m-textarea:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-textarea::placeholder {
    color: #999;
}

.m-textarea:disabled,
.m-textarea.m-disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-textarea.m-error {
    border-color: #e74c3c;
}

.m-textarea.m-error:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1);
}

/* Resize options */
.m-textarea-resize-none {
    resize: none;
}

.m-textarea-resize-vertical {
    resize: vertical;
}

.m-textarea-resize-horizontal {
    resize: horizontal;
}

.m-textarea-resize-both {
    resize: both;
}

.m-textarea-resize-auto {
    resize: none;
    overflow: hidden;
}

/* === Custom DatePicker Component === */
.m-datepicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 250px;
}

.m-datepicker {
    display: none; /* Hide original input */
}

.m-datepicker-input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 35px 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    user-select: none;
}

.m-datepicker-input:hover {
    border-color: #2196F3;
}

.m-datepicker-input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-datepicker-input.m-disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-datepicker-value {
    flex: 1;
    color: #999;
}

.m-datepicker-value.m-has-value {
    color: #333;
    font-weight: 500;
}

.m-datepicker-icon {
    position: absolute;
    right: 10px;
    color: #666;
    pointer-events: none;
    font-size: 14px;
}

.m-datepicker-input:hover .m-datepicker-icon {
    color: #2196F3;
}

/* Custom Calendar */
.m-calendar {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 320px;
    padding: 16px;
    animation: slideDown 0.2s ease;
}

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

/* Open upward when needed */
.m-datepicker-wrapper.m-open-up .m-calendar {
    top: auto;
    bottom: calc(100% + 5px);
    animation: slideUp 0.2s ease;
}

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

/* Align right when near right edge */
.m-datepicker-wrapper.m-align-right .m-calendar {
    left: auto;
    right: 0;
}

.m-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.m-cal-btn {
    background: none;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    border-radius: 4px;
    transition: all 0.2s;
}

.m-cal-btn:hover {
    background-color: #f0f0f0;
    color: #2196F3;
}

/* Invisible spacer — same dimensions as .m-cal-btn, keeps title centred */
.m-cal-btn-spacer {
    display: inline-block;
    padding: 8px 12px;
    visibility: hidden;
    pointer-events: none;
    background: none !important;
    border: none;
}

.m-cal-title {
    font-weight: 600;
    font-size: 15px;
    color: #333;
}

.m-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.m-cal-weekday {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    padding: 8px 4px;
}

.m-cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.m-cal-day {
    text-align: center;
    padding: 10px 8px;
    cursor: pointer;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    color: #333;
}

.m-cal-day:not(.m-cal-other-month):not(.m-cal-disabled):hover {
    background-color: #e3f2fd;
    color: #2196F3;
    transform: scale(1.05);
}

.m-cal-day.m-cal-selected {
    background-color: #2196F3;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
}

.m-cal-day.m-cal-today {
    border: 2px solid #2196F3;
    font-weight: 600;
}

.m-cal-day.m-cal-today.m-cal-selected {
    border-color: #fff;
}

.m-cal-day.m-cal-disabled {
    color: #ccc;
    cursor: not-allowed;
}

.m-cal-day.m-cal-disabled:hover {
    background: none;
    transform: none;
}

.m-cal-day.m-cal-other-month {
    color: #ccc;
    font-weight: normal;
}

.m-calendar-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e0e0e0;
    text-align: center;
}

.m-cal-today-btn {
    background: #fff;
    border: 1px solid #2196F3;
    color: #2196F3;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.m-cal-today-btn:hover {
    background: #2196F3;
    color: #fff;
}

.m-cal-today-btn i {
    font-size: 12px;
}

/* === DateRangePicker Component === */

/* Wrapper */
.m-daterangepicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Trigger button — mirrors .m-datepicker-input / .m-timepicker-input */
.m-drp-trigger {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 35px 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    text-align: left;
    outline: none;
    transition: all 0.3s ease;
    user-select: none;
    font-family: inherit;
}

.m-drp-trigger:hover {
    border-color: #2196F3;
}

.m-drp-trigger:focus,
.m-drp-open > .m-drp-trigger {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-drp-trigger.m-disabled,
.m-drp-trigger:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Calendar icon — absolutely positioned on the right, same as datepicker */
.m-drp-icon {
    position: absolute;
    right: 10px;
    color: #666;
    pointer-events: none;
    font-size: 14px;
    transition: color 0.2s;
}

.m-drp-trigger:hover .m-drp-icon {
    color: #2196F3;
}

/* Value/placeholder span */
.m-drp-label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: normal;
}

.m-drp-label.m-drp-has-value {
    color: #333;
    font-weight: 500;
}

.m-drp-segment { white-space: nowrap; }
.m-drp-ph      { color: #999; font-weight: normal; }

.m-drp-arrow {
    color: #bbb;
    font-size: 11px;
    flex-shrink: 0;
}

/* Drop-down panel */
.m-drp-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 500;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 300px;
}

.m-drp-open-up .m-drp-panel {
    top: auto;
    bottom: calc(100% + 6px);
}

.m-drp-align-right .m-drp-panel {
    left: auto;
    right: 0;
}

.m-drp-panel-inner {
    display: flex;
    flex-direction: row;
    gap: 0;
}

/* Presets sidebar */
.m-drp-presets {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 8px;
    min-width: 130px;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.m-drp-preset {
    display: block;
    width: 100%;
    padding: 7px 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: #444;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.13s, color 0.13s;
    white-space: nowrap;
    font-family: inherit;
}

.m-drp-preset:hover {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.m-drp-preset.m-drp-preset-active {
    background: #2196F3;
    color: #fff;
}

/* Calendars area */
.m-drp-calendars {
    display: flex;
    flex-direction: row;
    flex: 1;
    gap: 0;
    flex-wrap: nowrap;
}

.m-drp-single .m-drp-calendar:last-child {
    display: none;
}

.m-drp-calendar {
    flex: 1;
    min-width: 240px;
    padding: 12px 14px 6px;
}

.m-drp-calendar + .m-drp-calendar {
    border-left: 1px solid rgba(0, 0, 0, 0.06);
}

/* Range highlighting — reuse m-calendar internals */
.m-cal-day.m-cal-in-range {
    background-color: rgba(33, 150, 243, 0.12);
    border-radius: 0;
}

.m-cal-day.m-cal-range-start {
    background-color: #2196F3;
    color: #fff;
    border-radius: 50% 0 0 50%;
}

.m-cal-day.m-cal-range-end {
    background-color: #2196F3;
    color: #fff;
    border-radius: 0 50% 50% 0;
}

/* Single-day selection: both start and end */
.m-cal-day.m-cal-range-start.m-cal-range-end {
    border-radius: 50%;
}

/* Panel inner: column flex — row of [presets | calendars] on top, footer below */
.m-drp-panel-inner {
    display: flex;
    flex-direction: column;
}

/* Row that holds presets + calendars side-by-side */
.m-drp-panel-row {
    display: flex;
    flex-direction: row;
    flex: 1;
}

/* Footer */
.m-drp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    gap: 8px;
}

.m-drp-clear {
    font-size: 13px;
    color: #888;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    font-family: inherit;
    transition: background 0.13s, color 0.13s;
}

.m-drp-clear:hover {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
}

.m-drp-footer-right {
    display: flex;
    align-items: center;
    gap: 6px;
}

.m-drp-cancel {
    font-size: 13px;
    font-weight: 500;
    color: #666;
    background: none;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    padding: 6px 14px;
    font-family: inherit;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.m-drp-cancel:hover {
    border-color: #aaa;
    color: #333;
    background: #f5f5f5;
}

/* Apply button reuses .m-button.m-button-primary styles; just add sizing */
.m-drp-apply {
    font-size: 13px;
    padding: 6px 14px;
    cursor: pointer;
    font-family: inherit;
}

/* Responsive — single-column stack on narrow screens */
@media (max-width: 600px) {
    .m-drp-panel {
        left: 0 !important;
        right: 0 !important;
        min-width: unset;
        width: 100vw;
        max-width: 100vw;
        border-radius: 0 0 10px 10px;
    }

    .m-drp-panel-row {
        flex-direction: column;
    }

    .m-drp-presets {
        flex-direction: row;
        flex-wrap: wrap;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding: 8px;
        min-width: 0;
    }

    .m-drp-preset {
        flex: 0 0 auto;
    }

    .m-drp-calendars {
        flex-direction: column;
    }

    /* Hide right calendar on mobile — always single-month on small screens */
    .m-drp-calendar + .m-drp-calendar {
        display: none;
    }

    .m-drp-calendar {
        min-width: 0;
    }
}

/* === TimePicker Component === */

.m-timepicker-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 200px;
}

/* Hide the original input — JS replaces it with the custom trigger */
.m-timepicker {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* Trigger button — mirrors .m-datepicker-input */
.m-timepicker-input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 35px 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    user-select: none;
}

.m-timepicker-input:hover {
    border-color: #2196F3;
}

.m-timepicker-input:focus {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-timepicker-input.m-disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-timepicker-value {
    flex: 1;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-timepicker-value.m-has-value {
    color: #333;
    font-weight: 500;
}

.m-timepicker-icon {
    position: absolute;
    right: 10px;
    color: #666;
    pointer-events: none;
    font-size: 14px;
}

.m-timepicker-input:hover .m-timepicker-icon {
    color: #2196F3;
}

/* Dropdown panel */
.m-timepicker-panel {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1001;
    animation: slideDown 0.2s ease;
    overflow: hidden;
    min-width: 140px;
}

.m-timepicker-wrapper.m-open-up .m-timepicker-panel {
    top: auto;
    bottom: calc(100% + 5px);
    animation: slideUp 0.2s ease;
}

.m-timepicker-wrapper.m-align-right .m-timepicker-panel {
    left: auto;
    right: 0;
}

/* Two-column layout: hours | separator | minutes [| AM/PM] */
.m-tp-columns {
    display: flex;
    align-items: flex-start;
    padding: 4px 0;
}

.m-tp-col {
    flex: 1;
    max-height: 192px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
    padding: 2px 0;
}

.m-tp-col::-webkit-scrollbar {
    width: 4px;
}

.m-tp-col::-webkit-scrollbar-track {
    background: transparent;
}

.m-tp-col::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 2px;
}

/* AM/PM column is narrower */
.m-tp-ampm {
    flex: 0 0 auto;
    min-width: 48px;
    overflow: visible;
}

.m-tp-sep {
    padding: 10px 3px 10px 3px;
    font-size: 14px;
    font-weight: 700;
    color: #555;
    align-self: flex-start;
    margin-top: 2px;
    line-height: 1.5;
    flex-shrink: 0;
}

.m-tp-item {
    padding: 7px 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-align: center;
    transition: background 0.12s ease, color 0.12s ease;
    border-radius: 4px;
    margin: 1px 4px;
    white-space: nowrap;
    line-height: 1.4;
}

.m-tp-item:hover {
    background-color: #e3f2fd;
    color: #2196F3;
}

.m-tp-item.m-tp-selected {
    background-color: #2196F3;
    color: #fff;
    font-weight: 700;
}

.m-tp-ampm-item {
    min-width: 36px;
}

/* Footer: Now / Clear buttons */
.m-tp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    padding: 6px 10px 8px;
    border-top: 1px solid #f0f0f0;
}

.m-tp-now-btn,
.m-tp-clear-btn {
    background: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #555;
    transition: all 0.15s ease;
    line-height: 1.5;
}

.m-tp-now-btn:hover {
    background: #e3f2fd;
    border-color: #2196F3;
    color: #2196F3;
}

.m-tp-clear-btn:hover {
    background: #ffeee6;
    border-color: #e57373;
    color: #e57373;
}

/* === Custom Dropdown Component === */
.m-dropdown-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

.m-dropdown-loader {
    border-radius: 4px;
}

.m-dropdown {
    display: none; /* Hide original select */
}

.m-dropdown-custom {
    position: relative;
    width: 100%;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.m-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 35px 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    transition: all 0.3s ease;
}

.m-dropdown-custom:hover .m-dropdown-header {
    border-color: #2196F3;
}

.m-dropdown-custom:focus .m-dropdown-header {
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-dropdown-custom.m-open .m-dropdown-header {
    border-color: #2196F3;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.m-dropdown-custom.m-disabled .m-dropdown-header {
    background-color: #f5f5f5;
    cursor: not-allowed;
    opacity: 0.6;
}

.m-dropdown-value {
    flex: 1;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-dropdown-value.m-has-value {
    color: #333;
    font-weight: 500;
}

.m-dropdown-arrow {
    position: absolute;
    right: 12px;
    color: #666;
    pointer-events: none;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.m-dropdown-custom.m-open .m-dropdown-arrow {
    transform: rotate(180deg);
    color: #2196F3;
}

.m-dropdown-custom:hover .m-dropdown-arrow {
    color: #2196F3;
}

/* Dropdown List */
.m-dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #2196F3;
    border-top: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 280px;
    overflow-y: auto;
    animation: slideDown 0.2s ease;
}

/* Open upward when there isn't enough space below */
.m-dropdown-custom.m-open-up .m-dropdown-list {
    top: auto;
    bottom: 100%;
    border-top: 1px solid #2196F3;
    border-bottom: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    animation: slideUp 0.2s ease;
}

/* Align right when near right edge */
.m-dropdown-custom.m-align-right .m-dropdown-list {
    left: auto;
    right: 0;
}

.m-dropdown-custom.m-open .m-dropdown-list {
    display: block;
}

.m-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #333;
}

.m-dropdown-item:hover {
    background-color: #e3f2fd;
    color: #2196F3;
}

.m-dropdown-item.m-selected {
    background-color: #2196F3;
    color: #fff;
    font-weight: 500;
}

.m-dropdown-item:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.m-dropdown-group-label {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #999;
    cursor: default;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
    user-select: none;
}

.m-dropdown-group-label:first-child {
    border-top: none;
}

/* Custom Scrollbar for Dropdown */
.m-dropdown-list::-webkit-scrollbar {
    width: 8px;
}

.m-dropdown-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-bottom-right-radius: 4px;
}

.m-dropdown-list::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.m-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* === Responsive adjustments === */
@media (max-width: 768px) {
    .m-datepicker-wrapper,
    .m-timepicker-wrapper,
    .m-dropdown-wrapper {
        max-width: 100%;
    }
    
    .m-calendar {
        left: 50%;
        transform: translateX(-50%);
        min-width: 280px;
    }
}

/* === Utility classes === */
.m-mb-1 {
    margin-bottom: 1rem;
}

.m-mb-2 {
    margin-bottom: 2rem;
}

.m-mt-1 {
    margin-top: 1rem;
}

.m-mt-2 {
    margin-top: 2rem;
}

.m-mr-1 {
    margin-right: 1rem;
}

/* Image-in-paragraph text wrapping.
 * When an <img> shares a <p> with text, it floats left so text wraps to its right.
 * Float right instead by adding the .m-float-right class to the <img>.
 * To prevent wrapping, place the image in its own <p> (with no surrounding text). */
p img {
    float: left;
    max-width: 50%;
    margin: 0 1rem 0.75rem 0;
}

p img.m-float-right {
    float: right;
    margin: 0 0 0.75rem 1rem;
}

/* Clearfix: contain floated images within their paragraph */
p::after {
    content: '';
    display: table;
    clear: both;
}

/* === Form Group Styling === */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label:not([class*="m-"]) {
    display: block;
    margin-bottom: 0.5rem;
    color: #555;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group .m-datepicker-wrapper,
.form-group .m-timepicker-wrapper,
.form-group .m-dropdown-wrapper {
    max-width: 100%;
}

/* === Window/Modal Component === */
.m-window {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
}

.m-window.m-visible {
    display: flex;
}

/* Modal overlay */
.m-window-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.3s ease;
}

/* Window wrapper */
.m-window-wrapper {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
    width: 600px;
    display: flex;
    flex-direction: column;
    animation: slideDown 0.3s ease;
    z-index: 10001;
}

/* Draggable window */
.m-window.m-draggable .m-window-wrapper {
    /* Removed cursor - now handled by title bar */
}

/* Resizable window */
.m-window.m-resizable .m-window-wrapper {
    resize: both;
    overflow: auto;
}

/* Non-modal windows */
.m-window:not(.m-modal) {
    /* Non-modal windows don't center like modals */
    align-items: flex-start;
    justify-content: flex-start;
    pointer-events: none; /* Allow clicks through the container */
}

.m-window:not(.m-modal) .m-window-wrapper {
    pointer-events: auto; /* Re-enable clicks on the window itself */
    margin: 50px; /* Default position from top-left */
}

/* Title bar */
.m-window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: linear-gradient(180deg, #f8f9fa 0%, #fff 100%);
    border-radius: 8px 8px 0 0;
}

/* Draggable title bar cursor */
.m-window-titlebar.m-draggable {
    cursor: move;
}

.m-window-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
}

.m-window-title i {
    margin-right: 8px;
    color: #2196F3;
}

.m-window-close {
    background: none;
    border: none;
    color: #999;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.m-window-close:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: #333;
}

/* Content area */
.m-window-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.m-window-no-scroll .m-window-content {
    overflow: hidden;
}

/* Actions/Buttons footer */
.m-window-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 20px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 0 0 8px 8px;
}

.m-window-btn {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.m-window-btn:hover {
    background-color: #f0f0f0;
    border-color: #ccc;
}

.m-window-btn-primary {
    background-color: #2196F3;
    border-color: #2196F3;
    color: #fff;
}

.m-window-btn-primary:hover {
    background-color: #1976D2;
    border-color: #1976D2;
}

.m-window-btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.m-window-btn-secondary:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

.m-window-btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

.m-window-btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

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

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

/* Responsive */
@media (max-width: 768px) {
    .m-window-wrapper {
        width: 95vw;
        max-height: 95vh;
    }
    
    .m-window-titlebar {
        padding: 12px 16px;
    }
    
    .m-window-title {
        font-size: 16px;
    }
    
    .m-window-content {
        padding: 16px;
    }
    
    .m-window-actions {
        padding: 12px 16px;
        flex-direction: column;
    }
    
    .m-window-btn {
        width: 100%;
    }
}

/* ============================================
   Dialog Component
   ============================================ */

.m-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.m-dialog-overlay.m-dialog-active {
    opacity: 1;
}

.m-dialog {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 320px;
    max-width: 500px;
    width: 90%;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.m-dialog-overlay.m-dialog-active .m-dialog {
    transform: scale(1);
}

.m-dialog-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.m-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
}

.m-dialog-icon {
    font-size: 24px;
    color: #2196F3;
}

.m-dialog-icon.fa-exclamation-circle,
.m-dialog-icon.fa-exclamation-triangle {
    color: #FF9800;
}

.m-dialog-icon.fa-question-circle {
    color: #2196F3;
}

.m-dialog-icon.fa-info-circle {
    color: #2196F3;
}

.m-dialog-icon.fa-check-circle {
    color: #4CAF50;
}

.m-dialog-icon.fa-times-circle {
    color: #e74c3c;
}

.m-dialog-body {
    padding: 24px;
}

.m-dialog-body p {
    margin: 0 0 16px 0;
    color: #555;
    line-height: 1.5;
}

.m-dialog-body p:last-child {
    margin-bottom: 0;
}

.m-dialog-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    font-family: inherit;
    margin-top: 12px;
    transition: border-color 0.2s ease;
}

.m-dialog-input:focus {
    outline: none;
    border-color: #2196F3;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
}

.m-dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.m-dialog-footer .m-button {
    min-width: 80px;
}

/* ============================================
   Apple-Style Scrollbars
   ============================================ */

/* Apply to window content, textareas, and any scrollable containers */
.m-window-content,
.m-textarea,
.m-dropdown-list,
body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

/* Webkit browsers (Chrome, Safari, Edge) */
.m-window-content::-webkit-scrollbar,
.m-textarea::-webkit-scrollbar,
.m-dropdown-list::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.m-window-content::-webkit-scrollbar-track,
.m-textarea::-webkit-scrollbar-track,
.m-dropdown-list::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}

.m-window-content::-webkit-scrollbar-thumb,
.m-textarea::-webkit-scrollbar-thumb,
.m-dropdown-list::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.m-window-content::-webkit-scrollbar-thumb:hover,
.m-textarea::-webkit-scrollbar-thumb:hover,
.m-dropdown-list::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

/* Ensure scrollbars are overlay (don't take up space) */
.m-window-content,
.m-textarea,
.m-dropdown-list {
    overflow: overlay;
}

/* =====================
   Breadcrumb Component
   ===================== */

.m-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}

.m-breadcrumb-link {
    color: #7f8c8d;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.m-breadcrumb-link:hover {
    color: #2196F3;
}

.m-breadcrumb-sep {
    color: #bdc3c7;
    font-size: 0.625rem;
    display: inline-flex;
    align-items: center;
}

.m-breadcrumb-current {
    color: #2c3e50;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}


/* =====================================================================
   STAT CARD
   ===================================================================== */
.m-stat-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-top: 4px solid #2196F3;
}
.m-stat-card-primary  { border-top-color: #2196F3; }
.m-stat-card-success  { border-top-color: #4CAF50; }
.m-stat-card-warning  { border-top-color: #FF9800; }
.m-stat-card-danger   { border-top-color: #e74c3c; }
.m-stat-card-purple   { border-top-color: #9c27b0; }
.m-stat-card-secondary{ border-top-color: #7f8c8d; }

.m-stat-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #f0f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #2196F3;
    flex-shrink: 0;
}
.m-stat-card-primary  .m-stat-card-icon { background: #e3f2fd; color: #2196F3; }
.m-stat-card-success  .m-stat-card-icon { background: #e8f5e9; color: #4CAF50; }
.m-stat-card-warning  .m-stat-card-icon { background: #fff3e0; color: #FF9800; }
.m-stat-card-danger   .m-stat-card-icon { background: #fdecea; color: #e74c3c; }
.m-stat-card-purple   .m-stat-card-icon { background: #f3e5f5; color: #9c27b0; }
.m-stat-card-secondary.m-stat-card-icon { background: #f5f5f5; color: #7f8c8d; }

.m-stat-card-body { flex: 1; min-width: 0; }
.m-stat-card-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #2c3e50;
    line-height: 1;
    margin-bottom: 0.25rem;
}
.m-stat-card-label {
    font-size: 0.8rem;
    color: #7f8c8d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.m-stat-card-delta {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: #7f8c8d;
}
.m-stat-card-delta-up   { color: #4CAF50; }
.m-stat-card-delta-down { color: #e74c3c; }

/* =====================================================================
   PAGE HEADER
   ===================================================================== */
.m-page-header {
    margin-bottom: 1.5rem;
}
.m-page-header h1 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #2c3e50;
    margin: 0.25rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.m-page-header h1 i {
    color: #2196F3;
    font-size: 1.3rem;
}
.m-page-header-subtitle {
    color: #7f8c8d;
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
}

/* =====================================================================
   EMPTY STATE
   ===================================================================== */
.m-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #95a5a6;
}
.m-empty-state-icon {
    font-size: 3rem;
    color: #bdc3c7;
    margin-bottom: 1rem;
}
.m-empty-state-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #7f8c8d;
    margin-bottom: 0.5rem;
}
.m-empty-state-message {
    font-size: 0.9rem;
    color: #95a5a6;
    margin-bottom: 1.25rem;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.m-empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* Bordered variant — dashed outline + tinted background for panel containers */
.m-empty-state-bordered {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 10px;
}

/* Compact variant — use inside narrow panels / planner columns */
.m-empty-state-compact {
    padding: 1.25rem 0.75rem;
}
.m-empty-state-compact .m-empty-state-icon {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}
.m-empty-state-compact .m-empty-state-title {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.m-empty-state-compact .m-empty-state-message {
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}
.m-empty-state-compact .m-empty-state-action {
    font-size: 0.82rem;
    padding: 0.3rem 0.75rem;
}

/* =====================================================================
   PROGRESS BAR
   ===================================================================== */
.m-progress {
    margin-bottom: 0.5rem;
}
.m-progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.3rem;
}
.m-progress-pct {
    font-weight: 600;
    color: #2c3e50;
    font-size: 0.8rem;
}
.m-progress-track {
    background: #e9ecef;
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}
.m-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: #2196F3;
    transition: width 0.4s ease;
}
.m-progress-fill-primary   { background: #2196F3; }
.m-progress-fill-success   { background: #4CAF50; }
.m-progress-fill-warning   { background: #FF9800; }
.m-progress-fill-danger    { background: #e74c3c; }
.m-progress-fill-purple    { background: #9c27b0; }
.m-progress-fill-secondary { background: #7f8c8d; }

.m-progress-striped .m-progress-fill {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.2) 10px,
        rgba(255,255,255,0.2) 20px
    );
}
@keyframes m-progress-slide {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}
.m-progress-animated .m-progress-fill {
    animation: m-progress-slide 1s linear infinite;
    background-size: 40px 40px;
}

/* =====================================================================
   BUTTON — loading & confirm
   ===================================================================== */
.m-button-loading {
    opacity: 0.75;
    cursor: wait;
    pointer-events: none;
    position: relative;
    padding-left: 2.4rem;
}
.m-button-loading::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: m-btn-spin 0.7s linear infinite;
}
@keyframes m-btn-spin {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* =====================================================================
   CARD — section header
   ===================================================================== */
.m-card-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem 0.5rem;
    border-bottom: 1px solid #f0f0f0;
}
.m-card-section-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #7f8c8d;
}
.m-card-section-link {
    font-size: 0.8rem;
    color: #2196F3;
    text-decoration: none;
}
.m-card-section-link:hover { text-decoration: underline; }

/* =====================================================================
   TABS — badge
   ===================================================================== */
.m-tabs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e74c3c;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    padding: 0 0.3rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* =====================================================================
   CHAR COUNT
   ===================================================================== */
.m-textbox-wrapper {
    display: flex;
    flex-direction: column;
}
.m-char-count {
    font-size: 0.75rem;
    color: #95a5a6;
    text-align: right;
    margin-top: 0.2rem;
    transition: color 0.2s;
}
.m-char-count.m-char-count-warn  { color: #FF9800; }
.m-char-count.m-char-count-limit { color: #e74c3c; font-weight: 600; }

/* =====================================================================
   CHART — goal line
   ===================================================================== */
.m-chart-goal {
    stroke-dasharray: 6 3;
    stroke-width: 2;
}
.m-chart-goal-label {
    font-size: 10px;
    font-family: inherit;
}

/* =====================================================================
   DATA GRID
   ===================================================================== */

/* Container */
.m-datagrid {
    position: relative;
    font-size: 0.875rem;
    color: #2c3e50;
    background: #fff;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    /* Constrain to parent width on any viewport */
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.m-datagrid-bordered {
    border: 1px solid #dce1e7;
}

/* Fixed-height scrollable body */
.m-datagrid-fixed-height .m-datagrid-wrapper {
    overflow-y: auto;
    max-height: var(--m-datagrid-height, 400px);
}

/* Wrapper — scrolls horizontally; frozen columns stay in view */
.m-datagrid-wrapper {
    flex: 1;
    overflow-x: auto;
    overflow-y: visible;
    min-height: 0;
    /* Smooth momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Prevent the wrapper itself from being wider than the grid */
    width: 100%;
    min-width: 0;
}

/* Toolbar */
.m-datagrid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #dce1e7;
    flex-wrap: wrap;
}

/* Group drop zone */
.m-datagrid-group-zone {
    padding: 0.45rem 0.75rem;
    background: #f4f6f9;
    border-bottom: 1px solid #dce1e7;
    color: #7f8c8d;
    font-size: 0.8rem;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s;
}
.m-datagrid-group-zone.m-drag-over {
    background: #e8f4fd;
    border-color: #2196F3;
    color: #2196F3;
}
.m-datagrid-group-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #2196F3;
    color: #fff;
    border-radius: 3px;
    padding: 0.15rem 0.5rem 0.15rem 0.6rem;
    font-size: 0.8rem;
}
.m-datagrid-group-chip-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0 0 0 0.2rem;
    line-height: 1;
    opacity: 0.8;
    font-size: 0.75rem;
}
.m-datagrid-group-chip-remove:hover { opacity: 1; }

/* Table */
.m-datagrid-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Header */
.m-datagrid-th {
    position: relative;
    background: #f4f6f9;
    border-bottom: 2px solid #dce1e7;
    border-right: 1px solid #dce1e7;
    padding: 0;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    user-select: none;
    vertical-align: middle;
}
.m-datagrid-th:last-child { border-right: none; }

.m-datagrid-th-inner {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    padding-right: 1rem;  /* room for resize handle */
    overflow: hidden;
}
.m-datagrid-col-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sortable header */
.m-datagrid-th-sortable {
    cursor: pointer;
}
.m-datagrid-th-sortable:hover .m-datagrid-th-inner { background: #e8edf3; }
.m-datagrid-th-sorted { background: #e8edf3; }
.m-datagrid-sort-icon {
    font-size: 0.8rem;
    color: #2196F3;
    flex-shrink: 0;
    /* Reserve space so header height stays stable when icon appears/disappears */
    min-width: 0.9em;
    text-align: center;
    line-height: 1;
}
/* Sortable hint: subtle chevron on hover so user knows column is clickable */
.m-datagrid-th-sortable:not(.m-datagrid-th-sorted):hover .m-datagrid-sort-icon::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-right: 1.5px solid #aab4be;
    border-bottom: 1.5px solid #aab4be;
    transform: rotate(45deg) translateY(-2px);
    vertical-align: middle;
}
.m-datagrid-th-sorted .m-datagrid-sort-icon { color: #2196F3; }

/* Resize handle */
.m-datagrid-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    transition: background 0.1s;
}
.m-datagrid-resize-handle:hover,
.m-datagrid-resize-handle.m-dragging {
    background: #2196F3;
}

/* Draggable column */
.m-datagrid-th-draggable { cursor: grab; }
.m-datagrid-th-draggable:active { cursor: grabbing; }
.m-col-dragging { opacity: 0.5; }
.m-col-drop-target { border-left: 3px solid #2196F3; }

/* Rows */
.m-datagrid-row {
    border-bottom: 1px solid #ecf0f1;
    transition: background 0.12s;
}
.m-datagrid-row:last-child { border-bottom: none; }
.m-datagrid-row-selectable { cursor: pointer; }
.m-datagrid-row:hover,
.m-datagrid-row-selectable:hover { background: #f0f7ff; }
.m-datagrid-row.m-selected { background: #d6eaf8; }
.m-datagrid-bordered .m-datagrid-row-alt { background: #fafbfd; }
.m-datagrid-bordered .m-datagrid-row-alt:hover { background: #f0f7ff; }

/* Cells */
.m-datagrid-td {
    padding: 0.55rem 0.75rem;
    border-right: 1px solid #ecf0f1;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-datagrid-td:last-child { border-right: none; }

/* Group header row */
.m-datagrid-group-header td {
    padding: 0.4rem 0.75rem;
    background: #e9eef5;
    border-top: 1px solid #d0d8e4;
    border-bottom: 1px solid #d0d8e4;
    font-weight: 600;
    color: #34495e;
}
.m-datagrid-group-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #7f8c8d;
    padding: 0 0.35rem 0 0;
    font-size: 0.75rem;
    line-height: 1;
    vertical-align: middle;
}
.m-datagrid-group-toggle:hover { color: #2196F3; }
.m-datagrid-group-count { color: #7f8c8d; font-weight: 400; font-size: 0.8rem; }

/* Empty / error state */
.m-datagrid-empty {
    text-align: center;
    padding: 3rem 1rem;
}
.m-datagrid-empty-icon {
    font-size: 2.5rem;
    color: #bdc3c7;
    margin-bottom: 0.75rem;
}
.m-datagrid-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: #7f8c8d;
    margin-bottom: 0.35rem;
}
.m-datagrid-empty-message {
    font-size: 0.875rem;
    color: #95a5a6;
    max-width: 360px;
    margin: 0 auto;
}

/* Loading overlay */
.m-datagrid-loading {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 6px;
}
.m-datagrid-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #dce1e7;
    border-top-color: #2196F3;
    border-radius: 50%;
    animation: m-datagrid-spin 0.6s linear infinite;
}
@keyframes m-datagrid-spin {
    to { transform: rotate(360deg); }
}

/* Pager */
.m-datagrid-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid #dce1e7;
    background: #f4f6f9;
    border-radius: 0 0 6px 6px;
    font-size: 0.82rem;
    color: #7f8c8d;
}
.m-datagrid-pager-info { flex-shrink: 0; }
.m-datagrid-pager-buttons {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}
.m-datagrid-pager-btn {
    min-width: 30px;
    height: 28px;
    padding: 0 0.45rem;
    border: 1px solid #dce1e7;
    background: #fff;
    color: #2c3e50;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.m-datagrid-pager-btn:hover:not(.m-disabled):not(.m-active) {
    background: #e8f4fd;
    border-color: #2196F3;
    color: #2196F3;
}
.m-datagrid-pager-btn.m-active {
    background: #2196F3;
    color: #fff;
    border-color: #2196F3;
    pointer-events: none;
}
.m-datagrid-pager-btn.m-disabled {
    opacity: 0.4;
    cursor: default;
}
.m-datagrid-pager-ellipsis {
    padding: 0 0.25rem;
    color: #95a5a6;
    line-height: 28px;
}
.m-datagrid-pager-size {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.m-datagrid-pager-size-select {
    height: 28px;
    padding: 0 0.4rem;
    border: 1px solid #dce1e7;
    border-radius: 4px;
    background: #fff;
    font-size: 0.8rem;
    color: #2c3e50;
    cursor: pointer;
}

/* ── DataGrid: frozen (sticky) columns ──────────────────────────────────────── */

.m-datagrid-th-frozen,
.m-datagrid-td-frozen {
    position: sticky;
    left: var(--m-frozen-left, 0px);
    z-index: 2;
    /* Background must be opaque so scrolling content doesn't bleed through */
}
.m-datagrid-th-frozen {
    background: #f4f6f9;
    z-index: 3; /* above frozen td cells */
}
.m-datagrid-td-frozen {
    background: #fff;
}
.m-datagrid-row-alt .m-datagrid-td-frozen {
    background: #fafbfd;
}
.m-datagrid-row:hover .m-datagrid-td-frozen,
.m-datagrid-row-selectable:hover .m-datagrid-td-frozen {
    background: #f0f7ff;
}
.m-datagrid-row.m-selected .m-datagrid-td-frozen {
    background: #d6eaf8;
}
/* Shadow to visually separate frozen area from scrolling content */
.m-datagrid-th-frozen-last::after,
.m-datagrid-td-frozen-last::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
    pointer-events: none;
}

/* ── DataGrid: wrap cells ────────────────────────────────────────────────────── */
.m-datagrid-td-wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
}

/* ── DataGrid: embedded component cells ──────────────────────────────────────── */

/* Progress bar inside a cell — compact, no outer margin */
.m-datagrid-cell-progress {
    margin: 0;
    min-width: 80px;
}
.m-datagrid-cell-progress .m-progress-track {
    margin-top: 2px;
}
.m-datagrid-cell-progress .m-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    margin-bottom: 1px;
}

/* Checkbox inside a cell */
.m-datagrid-cell-checkbox {
    pointer-events: none; /* read-only by default */
    margin: 0;
    display: inline-flex;
}
.m-datagrid-cell-checkbox-interactive {
    pointer-events: auto; /* re-enable when readonly: false */
    cursor: pointer;
}
.m-datagrid-cell-checkbox .m-choice-wrapper {
    margin: 0;
}

/* Rating inside a cell */
.m-datagrid-cell-rating {
    display: inline-flex;
    align-items: center;
}

/* Filter row */
.m-datagrid-filter-row th.m-datagrid-filter-cell {
    padding: 4px 6px;
    background: var(--m-datagrid-header-bg, #f8f9fa);
    border-bottom: 1px solid var(--m-border-color, #dee2e6);
}

.m-datagrid-filter-input {
    width: 100%;
    padding: 4px 8px;
    font-size: 0.8125rem;
    line-height: 1.4;
    border: 1px solid var(--m-border-color, #ced4da);
    border-radius: 4px;
    background: var(--m-input-bg, #fff);
    color: var(--m-text-color, #333);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s;
}

.m-datagrid-filter-input:focus {
    border-color: var(--m-primary, #118AB2);
    box-shadow: 0 0 0 2px rgba(17, 138, 178, 0.15);
}

.m-datagrid-filter-input::placeholder {
    color: var(--m-text-muted, #adb5bd);
    opacity: 1;
}

/* =====================================================================
   RATING
   ===================================================================== */

.m-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
}
.m-rating-label {
    font-size: 0.875rem;
    color: #34495e;
    font-weight: 500;
}
.m-rating-stars {
    display: inline-flex;
    gap: 0.1em;
    line-height: 1;
}
.m-rating-star {
    color: #c9cfd6;      /* empty star */
    transition: color 0.1s, transform 0.1s;
    /* Override the global Font Awesome reset (pointer-events:none) so each
       star is individually hit-testable for hover/click handlers. Also
       inline-block so the full bounding box (not just the glyph) responds
       to elementFromPoint and pointer events. */
    display: inline-block;
    text-align: center;
    min-width: 1em;
    pointer-events: auto;
}
.m-rating-star-filled {
    color: #f0ad00;      /* filled star */
}
.m-rating-star-interactive {
    cursor: pointer;
    pointer-events: auto;
}
.m-rating-star-interactive:hover,
.m-rating-stars:hover .m-rating-star-interactive ~ .m-rating-star-interactive {
    /* All stars up to hovered one light up — handled via JS re-render */
}
.m-rating:not(.m-rating-readonly) .m-rating-stars:hover .m-rating-star-interactive {
    transform: scale(1.15);
}
.m-rating-value-text {
    font-size: 0.78rem;
    color: #7f8c8d;
    white-space: nowrap;
}

/* ── Size variants ────────────────────────────────────────────────────────── */
.m-rating-sm .m-rating-stars {
    font-size: 0.8rem;
    gap: 0.08em;
}
.m-rating-sm .m-rating-label { font-size: 0.78rem; }
.m-rating-sm .m-rating-value-text { font-size: 0.7rem; }

.m-rating-md .m-rating-stars { font-size: 1rem; }

.m-rating-lg .m-rating-stars {
    font-size: 1.4rem;
    gap: 0.12em;
}
.m-rating-lg .m-rating-label  { font-size: 1rem; }
.m-rating-lg .m-rating-value-text { font-size: 0.875rem; }

/* ── Colour overrides ────────────────────────────────────────────────────── */
.m-rating-color-primary .m-rating-star-filled   { color: #2196F3; }
.m-rating-color-success .m-rating-star-filled   { color: #4CAF50; }
.m-rating-color-danger  .m-rating-star-filled   { color: #e74c3c; }
.m-rating-color-purple  .m-rating-star-filled   { color: #9b59b6; }

/* Focus ring for keyboard navigation only — :focus-visible avoids the blue
   outline appearing on mouse click while preserving keyboard accessibility. */
.m-rating:focus {
    outline: none;
}
.m-rating:focus-visible {
    outline: 2px solid #2196F3;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Aggregate / overlay mode ─────────────────────────────────────────────── */
/* Stars are dimmed when showing a community average (no personal rating set,
   avg > 0). Hovering or selecting removes the dim so the user gets clear
   interactive feedback. No opacity transition — the change is intentionally
   instant to avoid a "slow to respond" feel on hover entry. */
.m-rating.m-rating-showing-avg .m-rating-star {
    opacity: 0.55;
}
.m-rating.m-rating-showing-avg:hover .m-rating-star,
.m-rating.m-rating-showing-avg:focus .m-rating-star {
    opacity: 1;
}


/* === Form Component === */
.m-form {
    width: 100%;
}

/* Form groups */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label:not([class*="m-"]) {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #2c3e50;
    font-size: 0.9375rem;
}

.form-group label:not([class*="m-"]) .required {
    color: #e74c3c;
    margin-left: 0.25rem;
}

/* Field hints */
.field-hint {
    font-size: 0.8125rem;
    color: #7f8c8d;
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* Form actions (button container) */
.form-actions {
    margin-top: 2rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.form-actions .m-button {
    min-width: 120px;
}

/* Form rows (side-by-side fields) */
.form-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-row--halves {
    grid-template-columns: 1fr 1fr;
}

.form-row--thirds {
    grid-template-columns: 1fr 1fr 1fr;
}

.form-row--quarters {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Form group inline (label + field on same line) */
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group-inline label:not([class*="m-"]) {
    margin-bottom: 0;
    flex-shrink: 0;
}

/* Horizontal layout */
.m-form--horizontal .form-group {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    align-items: start;
}

.m-form--horizontal .form-group label:not([class*="m-"]) {
    margin-bottom: 0;
    padding-top: 0.625rem;
    text-align: right;
}

.m-form--horizontal .field-hint {
    grid-column: 2;
}

.m-form--horizontal .form-actions {
    grid-column: 2;
}

/* Inline layout */
.m-form--inline {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.m-form--inline .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 200px;
}

.m-form--inline .form-actions {
    margin-top: 0;
}

/* Loading state */
.m-form--loading {
    opacity: 0.6;
    pointer-events: none;
}

.m-form--loading .m-button--loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: 0.5em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: m-spin 0.6s linear infinite;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .m-form--horizontal .form-group {
        grid-template-columns: 1fr;
    }
    
    .m-form--horizontal .form-group label:not([class*="m-"]) {
        text-align: left;
        padding-top: 0;
    }
    
    .form-row--halves,
    .form-row--thirds,
    .form-row--quarters {
        grid-template-columns: 1fr;
    }
    
    .form-group-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .form-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .form-actions .m-button {
        width: 100%;
    }
}


/* === Accordion Component === */
.m-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.m-accordion-panel {
    border-bottom: 1px solid #e0e0e0;
}

.m-accordion-panel:last-child {
    border-bottom: none;
}

.m-accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: #2c3e50;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.m-accordion-header:hover {
    background: #f8f9fa;
}

.m-accordion-header:focus {
    outline: 2px solid #2196F3;
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

.m-accordion-panel--open .m-accordion-header {
    background: #f8f9fa;
    color: #118AB2;
}

.m-accordion-icon {
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    color: #118AB2;
}

.m-accordion-title {
    flex: 1;
}

.m-accordion-caret {
    flex-shrink: 0;
    color: #607D8B;
    font-size: 0.75rem;
    transition: none; /* Default: no animation */
}

/* Animated accordion */
.m-accordion[data-m-animated="true"] .m-accordion-caret {
    transition: transform 0.3s ease;
}

.m-accordion-panel--open .m-accordion-caret {
    transform: rotate(180deg);
}

.m-accordion-content {
    overflow: hidden;
}

.m-accordion-body {
    padding: 1rem 1.25rem;
    color: #546e7a;
    line-height: 1.6;
}

/* Compact variant */
.m-accordion--compact .m-accordion-header {
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
}

.m-accordion--compact .m-accordion-body {
    padding: 0.75rem 1rem;
}

/* Borderless variant */
.m-accordion--borderless {
    border: none;
}

.m-accordion--borderless .m-accordion-panel {
    border-bottom: 1px solid #f0f0f0;
}

.m-accordion--borderless .m-accordion-panel:last-child {
    border-bottom: none;
}

/* ============================================================
   Wizard Component
   ============================================================ */

.m-wizard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    font-size: 0.9375rem;
}

/* ── Header / step strip ─────────────────────────────────── */

.m-wizard-header {
    padding: 1.75rem 2rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.m-wizard-steps {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0;
}

/* Individual step item */
.m-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    cursor: default;
    user-select: none;
    min-width: 80px;
    max-width: 120px;
    text-align: center;
    outline: none;
}

.m-wizard-step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Step circle */
.m-wizard-step-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid #cbd5e0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: #94a3b8;
    transition: border-color 0.25s, background 0.25s, color 0.25s, box-shadow 0.25s;
    position: relative;
}

.m-wizard-step-circle .m-wizard-step-check-icon {
    display: none;
    color: #ffffff;
    font-size: 0.9rem;
}

.m-wizard-step-circle .m-wizard-step-default-icon {
    color: #94a3b8;
    font-size: 1rem;
    transition: color 0.25s;
}

.m-wizard-step-circle .m-wizard-step-num {
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
}

/* Active step */
.m-wizard-step-active .m-wizard-step-circle {
    border-color: #2196F3;
    background: #2196F3;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.18);
}

.m-wizard-step-active .m-wizard-step-circle .m-wizard-step-default-icon,
.m-wizard-step-active .m-wizard-step-circle .m-wizard-step-num {
    color: #ffffff;
}

/* Completed step */
.m-wizard-step-done .m-wizard-step-circle {
    border-color: #4CAF50;
    background: #4CAF50;
    color: #ffffff;
}

.m-wizard-step-done .m-wizard-step-circle .m-wizard-step-default-icon,
.m-wizard-step-done .m-wizard-step-circle .m-wizard-step-num {
    display: none;
}

.m-wizard-step-done .m-wizard-step-circle .m-wizard-step-check-icon {
    display: inline-block;
    color: #ffffff;
}

/* Skipped step */
.m-wizard-step-skipped .m-wizard-step-circle {
    border-color: #FF9800;
    background: #FFF8E1;
    color: #FF9800;
}

.m-wizard-step-skipped .m-wizard-step-circle .m-wizard-step-default-icon,
.m-wizard-step-skipped .m-wizard-step-circle .m-wizard-step-num {
    color: #FF9800;
}

/* Clickable completed / skipped steps */
.m-wizard-step-done,
.m-wizard-step-skipped {
    cursor: pointer;
}

/* noReturn steps look like done steps but cannot be clicked */
.m-wizard-step-no-return {
    cursor: default;
    pointer-events: none;
}

.m-wizard-step-done:hover .m-wizard-step-circle {
    box-shadow: 0 0 0 4px rgba(76, 175, 80, 0.22);
    transform: scale(1.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

.m-wizard-step-skipped:hover .m-wizard-step-circle {
    box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.22);
    transform: scale(1.06);
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Step label */
.m-wizard-step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.3;
    transition: color 0.25s;
    margin-top: 0.25rem;
    word-break: break-word;
    hyphens: auto;
}

.m-wizard-step-active .m-wizard-step-label {
    color: #1976D2;
    font-weight: 600;
}

.m-wizard-step-done .m-wizard-step-label {
    color: #388E3C;
}

.m-wizard-step-skipped .m-wizard-step-label {
    color: #E65100;
}

/* ── Compressed / overflow mode ──────────────────────────────
   Applied by JS (via ResizeObserver) when there is not enough horizontal
   space to show all step indicators at full size without overlapping.
   Non-active steps shrink and overlap; the active step stays prominent.
   ─────────────────────────────────────────────────────────── */

.m-wizard-steps.m-wizard-compressed {
    justify-content: center;
    overflow: hidden;
}

/* All step items in compressed mode: shrink circles, hide labels */
.m-wizard-steps.m-wizard-compressed .m-wizard-step {
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    transition: margin 0.2s;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step .m-wizard-step-circle {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step .m-wizard-step-circle .m-wizard-step-default-icon,
.m-wizard-steps.m-wizard-compressed .m-wizard-step .m-wizard-step-circle .m-wizard-step-num {
    font-size: 0.75rem;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step .m-wizard-step-circle .m-wizard-step-check-icon {
    font-size: 0.7rem;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step .m-wizard-step-label {
    display: none;
}

/* Steps BEFORE the active step bunch up to the left */
.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-before-active {
    margin-right: -10px;
}

/* Steps AFTER the active step bunch up to the right */
.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-after-active {
    margin-left: -10px;
}

/* Active step in compressed mode: full-size circle, visible label, raised */
.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active {
    z-index: 3;
    margin-left: 6px;
    margin-right: 6px;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-circle {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-circle .m-wizard-step-default-icon,
.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-circle .m-wizard-step-num {
    font-size: 0.9375rem;
}

.m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-label {
    display: block;
}

/* Connectors shrink aggressively in compressed mode */
.m-wizard-steps.m-wizard-compressed .m-wizard-connector {
    flex: 0 0 4px;
    min-width: 4px;
    max-width: 4px;
}

/* Connector alignment for compressed circles */
.m-wizard-steps.m-wizard-compressed .m-wizard-connector {
    margin-top: 15px;
}

/* Connector before/after active step: restore margin for the full-size circle */
.m-wizard-steps.m-wizard-compressed .m-wizard-connector.m-wizard-connector-before-active,
.m-wizard-steps.m-wizard-compressed .m-wizard-connector.m-wizard-connector-after-active {
    margin-top: 21px;
    flex: 0 0 8px;
    min-width: 8px;
    max-width: 8px;
}

/* Connector line between steps */
.m-wizard-connector {
    flex: 1 1 auto;
    min-width: 16px;
    align-self: flex-start;
    /* Push down so the 2px fill is centred on the 44px circle (22px - 1px) */
    margin-top: 21px;
    padding: 0 4px;
}

.m-wizard-connector-fill {
    height: 2px;
    width: 100%;
    background: #e2e8f0;
    border-radius: 2px;
    transition: background 0.3s;
}

.m-wizard-connector-done .m-wizard-connector-fill {
    background: #4CAF50;
}

/* ── Body / panels ───────────────────────────────────────── */

.m-wizard-body {
    padding: 2rem;
    position: relative;
    min-height: 160px;
}

.m-wizard-panel {
    display: none;
}

.m-wizard-panel-active {
    display: block;
}

/* Loading overlay */
.m-wizard-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: 0;
}

.m-wizard-loading-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: #64748b;
}

/* ── Error banner ────────────────────────────────────────── */

.m-wizard-error-banner {
    margin: 0 2rem 0.75rem;
    padding: 0.65rem 1rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    color: #B91C1C;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    animation: m-wizard-shake 0.3s ease-in-out;
}

.m-wizard-error-banner i {
    flex-shrink: 0;
    color: #B91C1C;
}

@keyframes m-wizard-shake {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-4px); }
    75%       { transform: translateX(4px); }
}

/* Invalid field highlight */
.m-wizard-field-error input,
.m-wizard-field-error select,
.m-wizard-field-error textarea,
input.m-wizard-field-error,
select.m-wizard-field-error,
textarea.m-wizard-field-error {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ── Footer / navigation ─────────────────────────────────── */

.m-wizard-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 2rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-wrap: wrap;
}

.m-wizard-footer-left,
.m-wizard-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.m-wizard-footer-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.m-wizard-step-counter {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
    white-space: nowrap;
}

/* Skip — text-only link, no button chrome */
.m-wizard-btn-skip {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s;
    line-height: 1;
}

.m-wizard-btn-skip:hover,
.m-wizard-btn-skip:focus-visible {
    color: #2196F3;
    outline: none;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 640px) {
    .m-wizard-header {
        padding: 1.25rem 1rem 1rem;
    }

    .m-wizard-body {
        padding: 1.25rem 1rem;
    }

    .m-wizard-footer {
        padding: 1rem;
        flex-wrap: wrap;
        row-gap: 0.5rem;
        column-gap: 0.5rem;
    }

    /* Back button (left) and Next button (right) stay on the same row */
    .m-wizard-footer-left {
        flex: 0 0 auto;
        order: 1;
    }

    .m-wizard-footer-right {
        flex: 0 0 auto;
        order: 2;
        margin-left: auto;
    }

    /* Step counter drops to its own full-width row below */
    .m-wizard-footer-center {
        order: 3;
        flex: 1 1 100%;
        justify-content: center;
    }

    .m-wizard-step-label {
        font-size: 0.6875rem;
    }

    .m-wizard-step {
        min-width: 56px;
        max-width: 80px;
    }

    .m-wizard-step-circle {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .m-wizard-error-banner {
        margin: 0 1rem 0.75rem;
    }

    /* Compressed mode on mobile: spread steps evenly, stable alignment */

    /* Force all circles to the same 36px size so the row height never shifts
       as the active step changes (base compressed active rule sets 44px). */
    .m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-circle {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    .m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-circle .m-wizard-step-default-icon,
    .m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active .m-wizard-step-circle .m-wizard-step-num {
        font-size: 0.8125rem;
    }

    .m-wizard-steps.m-wizard-compressed {
        width: 100%;
    }

    /* Remove bunching margins — connectors handle spacing instead */
    .m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-before-active,
    .m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-after-active,
    .m-wizard-steps.m-wizard-compressed .m-wizard-step.m-wizard-step-active {
        margin-left: 0;
        margin-right: 0;
    }

    /* Connectors: grow to fill space when few steps, shrink gracefully when many.
       margin-top: 17px centres the 2px fill on the uniform 36px circles (18px - 1px). */
    .m-wizard-steps.m-wizard-compressed .m-wizard-connector,
    .m-wizard-steps.m-wizard-compressed .m-wizard-connector.m-wizard-connector-before-active,
    .m-wizard-steps.m-wizard-compressed .m-wizard-connector.m-wizard-connector-after-active {
        flex: 1 1 0;
        min-width: 6px;
        max-width: none;
        margin-top: 17px;
    }
}

/* === Button Group Component === */
.m-button-group {
    display: inline-flex;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 6px;
    overflow: hidden;
    gap: 0;
    flex-shrink: 0;
}

.m-button-group-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    background: var(--m-bg, #fff);
    color: var(--m-text-muted, #777);
    border: none;
    border-right: 1px solid var(--m-border, #dde3ec);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-size: 0.8125rem;
    line-height: 1;
    outline: none;
}

.m-button-group-btn:last-child {
    border-right: none;
}

.m-button-group-btn:hover {
    background: var(--m-hover-bg, #f0f4f8);
    color: var(--m-primary, #2196F3);
}

.m-button-group-btn:focus-visible {
    outline: 2px solid var(--m-primary, #2196F3);
    outline-offset: -2px;
    z-index: 1;
}

.m-button-group-btn.m-button-group-active {
    background: var(--m-primary, #2196F3);
    color: #fff;
}

.m-button-group-btn.m-button-group-active:hover {
    background: var(--m-primary-hover, #1976D2);
    color: #fff;
}

/* Labeled button group — icon + text, auto-sized pill buttons */
.m-button-group--labeled .m-button-group-btn {
    width: auto;
    height: auto;
    padding: 0.5rem 0.875rem;
    gap: 0.4rem;
    line-height: 1.5;
}

.m-button-group-label {
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Separator between logical groups in the same toolbar */
.m-button-group-sep {
    width: 1px;
    background: var(--m-border, #dde3ec);
    margin: 4px 6px;
    align-self: stretch;
    flex-shrink: 0;
}

/* Toolbar: wraps multiple m-button-group elements and separators */
.m-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* === FilterBar Component === */

.m-filter-bar {
    margin-bottom: 1rem;
}

/* Search input with inset icon */
.m-filter-bar-search-wrap {
    position: relative;
    flex: 1 1 180px;
    min-width: 0;
    max-width: 320px;
}

.m-filter-bar-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--m-text-muted, #8896a9);
    pointer-events: none;
    font-size: 0.85rem;
}

.m-filter-bar-search {
    display: block;
    width: 100%;
    padding: 6px 10px 6px 32px;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 6px;
    background: var(--m-input-bg, #fff);
    color: var(--m-text, #1a202c);
    font-size: 0.875rem;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.m-filter-bar-search:focus {
    outline: none;
    border-color: var(--m-primary, #118AB2);
    box-shadow: 0 0 0 3px rgba(17, 138, 178, 0.12);
}

.m-filter-bar-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 5.586L11.293 1.293l1.414 1.414L8.414 7l4.293 4.293-1.414 1.414L7 8.414 2.707 12.707 1.293 11.293 5.586 7 1.293 2.707 2.707 1.293z' fill='%238896a9'/%3E%3C/svg%3E") center/contain no-repeat;
    cursor: pointer;
    opacity: 0.7;
    margin-left: 4px;
}

/* === RichTextEditor Component === */
.m-richtexteditor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 8px;
    background: var(--m-bg, #fff);
    overflow: visible;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
}

.m-richtexteditor-focused {
    border-color: var(--m-primary, #2196F3);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12);
}

/* --- Toolbar --- */
.m-rte-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    background: var(--m-bg-alt, #f5f7fa);
    border-bottom: 1px solid var(--m-border, #dde3ec);
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

/* Separator between tool groups */
.m-rte-sep {
    width: 1px;
    height: 20px;
    background: var(--m-border, #dde3ec);
    flex-shrink: 0;
    margin: 0 2px;
    align-self: center;
}

/* Override button-group border-radius inside toolbar */
.m-rte-tool-group {
    flex-shrink: 0;
}

/* --- Custom toolbar dropdowns (replaces native <select>) --- */
.m-rte-dropdown {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.m-rte-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 6px;
    background: var(--m-bg, #fff);
    color: var(--m-text, #23272f);
    font-size: 0.8125rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    min-width: 82px;
    outline: none;
    white-space: nowrap;
}

.m-rte-dropdown-trigger:hover,
.m-rte-dropdown-trigger[aria-expanded="true"] {
    border-color: var(--m-primary, #2196F3);
    background: var(--m-hover-bg, #f0f4f8);
}

.m-rte-dropdown-caret {
    font-size: 0.625rem;
    opacity: 0.6;
    pointer-events: none;
    transition: transform 0.15s ease;
}

.m-rte-dropdown-trigger[aria-expanded="true"] .m-rte-dropdown-caret {
    transform: rotate(180deg);
}

.m-rte-dropdown-label {
    flex: 1;
    text-align: left;
}

.m-rte-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 300;
    min-width: 100%;
    background: var(--m-bg, #fff);
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    white-space: nowrap;
}

.m-rte-dropdown-panel[hidden] {
    display: none;
}

.m-rte-dropdown-item {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--m-text, #23272f);
    font-size: 0.8125rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.1s ease;
    outline: none;
}

.m-rte-dropdown-item:hover,
.m-rte-dropdown-item.m-rte-dropdown-item-focused {
    background: var(--m-hover-bg, #f0f4f8);
}

.m-rte-dropdown-item.m-rte-dropdown-item-active {
    background: rgba(33, 150, 243, 0.1);
    color: var(--m-primary, #2196F3);
    font-weight: 600;
}

/* --- Heading style picker --- */
.m-rte-heading-panel {
    min-width: 200px;
    padding: 6px;
}

.m-rte-heading-item {
    padding: 4px 10px;
    height: auto;
    line-height: 1.2;
}

/* Reset inherited colours so preview elements show naturally */
.m-rte-heading-item .m-rte-heading-preview {
    display: block;
    color: inherit;
    font-weight: inherit;
    line-height: 1.2;
    pointer-events: none;
}

.m-rte-heading-item .m-rte-heading-preview-p {
    font-size: 0.875rem;
    font-weight: 400;
}

.m-rte-heading-item .m-rte-heading-preview-h1,
.m-rte-heading-item h1.m-rte-heading-preview {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.m-rte-heading-item .m-rte-heading-preview-h2,
.m-rte-heading-item h2.m-rte-heading-preview {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.m-rte-heading-item .m-rte-heading-preview-h3,
.m-rte-heading-item h3.m-rte-heading-preview {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.m-rte-heading-item .m-rte-heading-preview-h4,
.m-rte-heading-item h4.m-rte-heading-preview {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* Active heading item — inherit the preview colour from the primary accent */
.m-rte-heading-item.m-rte-dropdown-item-active .m-rte-heading-preview {
    color: var(--m-primary, #2196F3);
}

/* --- Text colour picker --- */
.m-rte-color-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.m-rte-color-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 6px;
    background: var(--m-bg, #fff);
    color: var(--m-text-muted, #777);
    cursor: pointer;
    font-size: 0.8125rem;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    outline: none;
}

.m-rte-color-btn:hover {
    background: var(--m-hover-bg, #f0f4f8);
    color: var(--m-primary, #2196F3);
    border-color: var(--m-primary, #2196F3);
}

.m-rte-color-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #000;
    flex-shrink: 0;
}

/* Auto swatch — shown when "Automatic" is the active colour */
.m-rte-color-swatch.m-rte-color-swatch-auto {
    background: linear-gradient(135deg, #000 50%, #fff 50%) !important;
    border-color: rgba(0, 0, 0, 0.25);
}

.m-rte-color-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 300;
    background: var(--m-bg, #fff);
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    grid-template-columns: repeat(8, 22px);
    gap: 4px;
    align-items: center;
    min-width: 208px;
}

/* Shown state — must be explicit because display:grid would otherwise override [hidden] */
.m-rte-color-panel:not([hidden]) {
    display: grid;
}

/* Ensure [hidden] always wins over any display rule */
.m-rte-color-panel[hidden] {
    display: none;
}

.m-rte-color-swatch-btn {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    outline: none;
}

.m-rte-color-swatch-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.m-rte-color-swatch-btn:focus-visible {
    outline: 2px solid var(--m-primary, #2196F3);
    outline-offset: 1px;
}

/* "Automatic" colour button — full-width row at top of panel */
.m-rte-color-auto-btn {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 5px;
    background: var(--m-bg, #fff);
    color: var(--m-text, #444);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease;
    outline: none;
    margin-bottom: 4px;
}
.m-rte-color-auto-btn:hover {
    background: var(--m-hover-bg, #f0f4f8);
    border-color: var(--m-primary, #2196F3);
    color: var(--m-primary, #2196F3);
}
.m-rte-color-auto-btn:focus-visible {
    outline: 2px solid var(--m-primary, #2196F3);
    outline-offset: 1px;
}

.m-rte-color-custom-wrap {
    grid-column: span 2;
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width: 0;
}

.m-rte-color-custom {
    width: 100%;
    height: 22px;
    padding: 1px 2px;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 4px;
    cursor: pointer;
    background: none;
    outline: none;
}

/* --- Editing body --- */
.m-rte-body {
    flex: 1;
    overflow-y: auto;
    border-radius: 0 0 8px 8px;
    position: relative; /* anchor for the image resizer overlay */
}

/* When footer is present, body border-radius is removed on bottom */
.m-rte-footer ~ .m-rte-body,
.m-richtexteditor:has(.m-rte-footer) .m-rte-body {
    border-radius: 0;
}

.m-rte-content {
    outline: none;
    padding: 12px 16px;
    min-height: inherit;
    box-sizing: border-box;
    color: var(--m-text, #23272f);
    font-size: 1rem;
    line-height: 1.6;
    caret-color: var(--m-primary, #2196F3);
}

/* Placeholder */
.m-rte-content[data-placeholder]:not(:focus)::before {
    content: attr(data-placeholder);
    color: var(--m-text-muted, #a0aab4);
    pointer-events: none;
    display: block;
    position: absolute;
}

/* Hide placeholder when there's real content */
.m-rte-content[data-placeholder]:not(:focus):not(:empty)::before {
    display: none;
}

/* Empty check: p with just br counts as empty */
.m-rte-content p::after {
    content: '';
    display: table;
    clear: both;
}

/* Base list styles for the editable area */
.m-rte-content ul,
.m-rte-content ol {
    margin: 0 0 0.75em;
    padding-left: 1.75em;
}
.m-rte-content ul { list-style-type: disc; }
.m-rte-content ol { list-style-type: decimal; }
.m-rte-content li { margin-bottom: 0.2em; }

.m-rte-content[data-placeholder]:not(:focus) > p:only-child > br:only-child ~ *,
.m-rte-content[data-placeholder]:not(:focus) > p:only-child:only-child::before {
    /* no-op rule to aid specificity */
}

/* --- Footer --- */
.m-rte-footer {
    display: flex;
    justify-content: flex-end;
    padding: 4px 12px;
    border-top: 1px solid var(--m-border, #dde3ec);
    background: var(--m-bg-alt, #f5f7fa);
    border-radius: 0 0 8px 8px;
    flex-shrink: 0;
}

.m-rte-char-count {
    font-size: 0.75rem;
    color: var(--m-text-muted, #a0aab4);
}

/* --- Invalid state (triggered by minChars/maxChars) --- */
.m-richtexteditor-invalid {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.12) !important;
}

/* --- Char count colour states --- */
.m-rte-char-count.m-rte-char-warn {
    color: #F57C00;
    font-weight: 600;
}

.m-rte-char-count.m-rte-char-error {
    color: #e74c3c;
    font-weight: 600;
}

/* --- Link dialog (fixed modal overlay) --- */
.m-rte-link-dialog {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-rte-link-dialog[hidden] {
    display: none;
}

.m-rte-link-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.m-rte-link-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: var(--m-bg, #fff);
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 1rem;
}

.m-rte-link-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--m-border, #dde3ec);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--m-text, #23272f);
    background: var(--m-bg-alt, #f5f7fa);
}

.m-rte-link-header i {
    color: var(--m-primary, #2196F3);
    margin-right: 6px;
}

.m-rte-link-close {
    border: none;
    background: transparent;
    color: var(--m-text-muted, #a0aab4);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    outline: none;
}

.m-rte-link-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--m-text, #23272f);
}

.m-rte-link-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m-rte-link-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--m-text, #23272f);
    margin-bottom: 4px;
}

.m-rte-link-url {
    width: 100%;
    box-sizing: border-box;
}

.m-rte-link-newtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--m-text, #23272f);
    cursor: pointer;
    user-select: none;
}

.m-rte-link-newtab-check {
    accent-color: var(--m-primary, #2196F3);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.m-rte-link-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--m-border, #dde3ec);
    background: var(--m-bg-alt, #f5f7fa);
}

/* --- Image dialog (fixed modal overlay) --- */
.m-rte-image-dialog {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-rte-image-dialog[hidden] {
    display: none;
}

.m-rte-image-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.m-rte-image-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    background: var(--m-bg, #fff);
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 1rem;
}

.m-rte-image-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--m-border, #dde3ec);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--m-text, #23272f);
    background: var(--m-bg-alt, #f5f7fa);
}

.m-rte-image-header i {
    color: var(--m-primary, #2196F3);
    margin-right: 6px;
}

.m-rte-image-close {
    border: none;
    background: transparent;
    color: var(--m-text-muted, #a0aab4);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    outline: none;
}

.m-rte-image-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--m-text, #23272f);
}

.m-rte-image-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m-rte-image-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--m-text, #23272f);
    margin-bottom: 2px;
}

.m-rte-image-optional {
    font-weight: 400;
    color: var(--m-text-muted, #a0aab4);
}

.m-rte-image-url,
.m-rte-image-alt {
    width: 100%;
    box-sizing: border-box;
}

.m-rte-image-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.m-rte-image-or {
    font-size: 0.8125rem;
    color: var(--m-text-muted, #a0aab4);
    white-space: nowrap;
}

.m-rte-image-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--m-text, #23272f);
    background: var(--m-bg-alt, #f5f7fa);
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    user-select: none;
    white-space: nowrap;
}

.m-rte-image-upload-label:hover {
    background: var(--m-bg, #fff);
    border-color: var(--m-primary, #2196F3);
    color: var(--m-primary, #2196F3);
}

.m-rte-image-upload-label:focus-within {
    outline: 2px solid var(--m-primary, #2196F3);
    outline-offset: 2px;
}

.m-rte-image-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.m-rte-image-file-name {
    font-size: 0.8125rem;
    color: var(--m-text-muted, #a0aab4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

.m-rte-image-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--m-border, #dde3ec);
    background: var(--m-bg-alt, #f5f7fa);
}

/* --- YouTube embed dialog --- */
.m-rte-youtube-dialog {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-rte-youtube-dialog[hidden] {
    display: none;
}

.m-rte-youtube-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.m-rte-youtube-panel {
    position: relative;
    background: var(--m-bg, #fff);
    border-radius: var(--m-radius, 8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    width: 420px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    z-index: 1;
}

.m-rte-youtube-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--m-bg-alt, #f5f7fa);
    border-bottom: 1px solid var(--m-border, #dde3ec);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--m-text, #23272f);
}

.m-rte-youtube-header > span i {
    color: #ff0000;
    margin-right: 6px;
}

.m-rte-youtube-close {
    border: none;
    background: transparent;
    color: var(--m-text-muted, #a0aab4);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    outline: none;
    padding: 0;
    flex-shrink: 0;
}

.m-rte-youtube-close:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--m-text, #23272f);
}

.m-rte-youtube-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.m-rte-youtube-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--m-text-muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.m-rte-youtube-url {
    width: 100%;
    box-sizing: border-box;
}

.m-rte-youtube-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--m-text-muted, #6b7280);
}

.m-rte-youtube-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--m-border, #dde3ec);
    background: var(--m-bg-alt, #f5f7fa);
}

/* --- YouTube embed responsive wrapper --- */
.m-rte-youtube-wrapper {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    margin: 0.5em auto;
    background: #000;
}

.m-rte-youtube-wrapper iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* Used in .m-richtext display as well */
.m-richtext .m-rte-youtube-wrapper {
    /* YouTube embeds are always block-centred — never floated or inline */
    display: block;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    margin-left: auto;
    margin-right: auto;
}

/* Click shield — transparent overlay that captures clicks on the iframe
   while editing. Stripped from saved HTML by getValue(). */
.m-rte-yt-click-shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: pointer;
    background: transparent;
}

/* Selected state */
.m-rte-youtube-wrapper.m-rte-yt-selected {
    outline: 2px solid var(--m-primary, #2196F3);
    outline-offset: 1px;
}

/* YouTube video credit line rendered inside the wrapper */
.m-rte-youtube-credit {
    margin: 0;
    padding: 3px 8px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    background: rgba(0, 0, 0, 0.65);
    line-height: 1.3;
}

.m-rte-youtube-credit a {
    color: #ff9090;
    text-decoration: none;
}

.m-rte-youtube-credit a:hover {
    text-decoration: underline;
}

/* Displayed in .m-richtext (read-only) */
.m-richtext .m-rte-youtube-credit {
    pointer-events: all;
}

/* YouTube resizer overlay */
.m-rte-yt-resizer {
    position: absolute;
    pointer-events: none;
    border: 2px solid var(--m-primary, #2196F3);
    border-radius: 4px;
    box-sizing: border-box;
    z-index: 12;
}

.m-rte-yt-resizer[hidden] {
    display: none;
}

/* Left/right drag handles */
.m-rte-yt-resize-handle {
    position: absolute;
    width: 10px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--m-primary, #2196F3);
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    pointer-events: all;
    box-sizing: border-box;
    z-index: 13;
}

.m-rte-yt-resize-handle[data-yt-handle="w"] { left:  -6px; cursor: w-resize; }
.m-rte-yt-resize-handle[data-yt-handle="e"] { right: -6px; cursor: e-resize; }

/* --- Read-only state --- */
.m-richtexteditor-readonly .m-rte-toolbar {
    opacity: 0.45;
    pointer-events: none;
}

.m-richtexteditor-readonly .m-rte-content {
    background: var(--m-bg-alt, #f5f7fa);
    cursor: default;
}

/* --- Image selection indicator --- */
.m-rte-content img {
    cursor: pointer;
    max-width: 100%;
    height: auto;
}

.m-rte-content img.m-rte-img-selected {
    outline: 2px solid var(--m-primary, #2196F3);
    outline-offset: 1px;
}

/* --- Image resizer overlay --- */
.m-rte-body {
    position: relative;
}

.m-rte-image-resizer {
    position: absolute;
    pointer-events: none;
    border: 2px solid var(--m-primary, #2196F3);
    border-radius: 2px;
    box-sizing: border-box;
    z-index: 10;
}

.m-rte-image-resizer[hidden] {
    display: none;
}

/* Alignment mini-toolbar — appears above the resizer box */
.m-rte-image-resizer-bar {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    background: var(--m-bg, #fff);
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 8px;
    padding: 3px 4px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    pointer-events: all;
    white-space: nowrap;
}

.m-rte-imgbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--m-text-muted, #a0aab4);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    font-size: 0.75rem;
}

.m-rte-imgbar-btn:hover {
    background: var(--m-bg-alt, #f5f7fa);
    color: var(--m-text, #23272f);
}

.m-rte-imgbar-btn-active {
    background: var(--m-primary-light, #e3f2fd);
    color: var(--m-primary, #2196F3);
}

/* Vertical separator in image toolbar */
.m-rte-imgbar-sep {
    width: 1px;
    height: 18px;
    background: var(--m-border, #dde3ec);
    margin: 0 3px;
    align-self: center;
    flex-shrink: 0;
}

/* Alt text input inside image toolbar */
.m-rte-imgbar-alt {
    height: 26px;
    padding: 0 7px;
    font-size: 0.75rem;
    border: 1px solid var(--m-border, #dde3ec);
    border-radius: 4px;
    background: var(--m-bg, #fff);
    color: var(--m-text, #23272f);
    width: 120px;
    min-width: 0;
    outline: none;
    box-sizing: border-box;
}

.m-rte-imgbar-alt:focus {
    border-color: var(--m-primary, #2196F3);
    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.15);
}

/* Remove button — danger colour */
.m-rte-imgbar-btn.m-rte-imgbar-btn-remove {
    color: var(--m-danger, #e74c3c);
}

.m-rte-imgbar-btn.m-rte-imgbar-btn-remove:hover {
    background: rgba(231, 76, 60, 0.1);
    color: var(--m-danger, #e74c3c);
}
.m-rte-resize-handle {
    position: absolute;
    width: 9px;
    height: 9px;
    background: var(--m-primary, #2196F3);
    border: 2px solid #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    pointer-events: all;
    box-sizing: border-box;
    z-index: 11;
}

.m-rte-resize-handle[data-handle="nw"] { top: -5px;  left: -5px;  cursor: nw-resize; }
.m-rte-resize-handle[data-handle="n"]  { top: -5px;  left: calc(50% - 4px); cursor: n-resize; }
.m-rte-resize-handle[data-handle="ne"] { top: -5px;  right: -5px; cursor: ne-resize; }
.m-rte-resize-handle[data-handle="e"]  { top: calc(50% - 4px); right: -5px; cursor: e-resize; }
.m-rte-resize-handle[data-handle="se"] { bottom: -5px; right: -5px; cursor: se-resize; }
.m-rte-resize-handle[data-handle="s"]  { bottom: -5px; left: calc(50% - 4px); cursor: s-resize; }
.m-rte-resize-handle[data-handle="sw"] { bottom: -5px; left: -5px;  cursor: sw-resize; }
.m-rte-resize-handle[data-handle="w"]  { top: calc(50% - 4px); left: -5px;  cursor: w-resize; }

/* --- Upload progress overlay --- */
.m-rte-upload-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 12;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 2px;
}

.m-rte-upload-overlay[hidden] {
    display: none;
}

.m-rte-upload-progress-track {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.m-rte-upload-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--m-primary, #118AB2);
    transition: width 0.15s ease;
    position: relative;
    border-radius: 3px;
}

@keyframes m-rte-progress-sweep {
    0%   { left: -40%; width: 40%; }
    50%  { left: 40%;  width: 55%; }
    100% { left: 110%; width: 40%; }
}

.m-rte-upload-progress-bar.m-rte-progress-indeterminate {
    width: 100%;
    background: transparent;
}

.m-rte-upload-progress-bar.m-rte-progress-indeterminate::before {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--m-primary, #118AB2);
    border-radius: 3px;
    animation: m-rte-progress-sweep 1.4s ease-in-out infinite;
}

/* Uploading images — desaturated + dimmed until the server URL arrives */
.m-rte-content img[data-rte-uploading] {
    filter: grayscale(1) brightness(0.75);
    pointer-events: none;
    user-select: none;
}

/* ── Mobile: larger resize handles, corners only, bigger toolbar ───────── */
@media (max-width: 768px) {
    /* Grow handles to 22×22 px — large enough for a thumb */
    .m-rte-resize-handle {
        width: 22px;
        height: 22px;
    }

    /* Reposition corners (offset = -11px to centre the larger handle on the edge) */
    .m-rte-resize-handle[data-handle="nw"] { top: -11px; left: -11px; }
    .m-rte-resize-handle[data-handle="ne"] { top: -11px; right: -11px; }
    .m-rte-resize-handle[data-handle="se"] { bottom: -11px; right: -11px; }
    .m-rte-resize-handle[data-handle="sw"] { bottom: -11px; left: -11px; }

    /* Hide mid-edge handles — corners are sufficient and less crowded on touch */
    .m-rte-resize-handle[data-handle="n"],
    .m-rte-resize-handle[data-handle="s"],
    .m-rte-resize-handle[data-handle="e"],
    .m-rte-resize-handle[data-handle="w"] {
        display: none;
    }

    /* Larger toolbar buttons and alt input for touch targets */
    .m-rte-imgbar-btn {
        width: 36px;
        height: 34px;
        font-size: 0.9rem;
    }
    .m-rte-imgbar-alt {
        height: 34px;
        font-size: 0.85rem;
        width: 100px;
    }
    .m-rte-image-resizer-bar {
        gap: 4px;
        padding: 4px 6px;
    }
}

/* =========================================================
   .m-richtext — consistent content display
   Apply to any wrapper that displays saved rich-text HTML,
   both inside the editor and when rendering stored content.
   ========================================================= */
.m-richtext {
    line-height: 1.6;
    color: inherit;
    word-break: break-word;
}

.m-richtext p {
    margin: 0 0 0.75em;
    /* Contain floated images within their paragraph */
    overflow: hidden;
}

.m-richtext p:last-child {
    margin-bottom: 0;
}

.m-richtext h1,
.m-richtext h2,
.m-richtext h3,
.m-richtext h4,
.m-richtext h5,
.m-richtext h6 {
    margin: 1em 0 0.4em;
    font-weight: 600;
    line-height: 1.3;
}

.m-richtext h1:first-child,
.m-richtext h2:first-child,
.m-richtext h3:first-child {
    margin-top: 0;
}

.m-richtext h1 { font-size: 2em; }
.m-richtext h2 { font-size: 1.5em; }
.m-richtext h3 { font-size: 1.25em; }
.m-richtext h4 { font-size: 1.1em; }
.m-richtext h5 { font-size: 1em; font-weight: 700; }
.m-richtext h6 { font-size: 0.875em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

.m-richtext strong,
.m-richtext b { font-weight: 700; }

.m-richtext em,
.m-richtext i { font-style: italic; }

.m-richtext u { text-decoration: underline; }

.m-richtext s,
.m-richtext del { text-decoration: line-through; }

.m-richtext a {
    color: var(--m-primary, #2196F3);
    text-decoration: underline;
}

.m-richtext a:hover {
    color: var(--m-primary-hover, #1976D2);
}

.m-richtext ul,
.m-richtext ol {
    margin: 0 0 0.75em;
    padding-left: 1.75em;
}

.m-richtext ul { list-style-type: disc; }
.m-richtext ol { list-style-type: decimal; }

/* Nested list styles — applied in both the editor and rendered content */
.m-richtext ul ul,
.m-rte-content ul ul { list-style-type: circle; }
.m-richtext ul ul ul,
.m-rte-content ul ul ul { list-style-type: square; }
.m-richtext ol ol,
.m-rte-content ol ol { list-style-type: lower-alpha; }
.m-richtext ol ol ol,
.m-rte-content ol ol ol { list-style-type: lower-roman; }
.m-richtext ol ul,
.m-rte-content ol ul { list-style-type: circle; }
.m-richtext ul ol,
.m-rte-content ul ol { list-style-type: lower-alpha; }

/* Ensure nested lists have consistent indentation */
.m-richtext ul ul,
.m-richtext ul ol,
.m-richtext ol ul,
.m-richtext ol ol,
.m-rte-content ul ul,
.m-rte-content ul ol,
.m-rte-content ol ul,
.m-rte-content ol ol {
    margin: 0.2em 0 0.2em;
    padding-left: 1.75em;
}

.m-richtext li {
    margin-bottom: 0.2em;
}

.m-richtext blockquote {
    margin: 0.75em 0;
    padding-left: 1em;
    border-left: 3px solid var(--m-primary, #2196F3);
    color: var(--m-text-muted, #6b7280);
    font-style: italic;
}

.m-richtext code {
    font-family: 'Courier New', Courier, monospace;
    background: var(--m-bg-alt, #f5f7fa);
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

.m-richtext pre {
    background: var(--m-bg-alt, #f5f7fa);
    border-radius: 6px;
    padding: 1em;
    overflow-x: auto;
    margin: 0 0 0.75em;
}

.m-richtext pre code {
    background: none;
    padding: 0;
}

.m-richtext hr {
    border: none;
    border-top: 1px solid var(--m-border, #dde3ec);
    margin: 1em 0;
}

.m-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: inline-block;
    vertical-align: middle;
}

/* Centred images carry display:block;margin:auto inline styles from the editor.
   The parent also receives text-align:center as a belt-and-suspenders fallback
   for images constrained to full-width by max-width:100%. */
.m-richtext p[style*="text-align: center"] > img,
.m-richtext p[style*="text-align:center"] > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Floated image margin safety-net (inline styles set by the editor take
   precedence, but these ensure correct spacing if styles are stripped) */
.m-richtext img[style*="float: left"],
.m-richtext img[style*="float:left"] {
    margin-right: 1em;
    margin-bottom: 0.5em;
}

.m-richtext img[style*="float: right"],
.m-richtext img[style*="float:right"] {
    margin-left: 1em;
    margin-bottom: 0.5em;
}

@media (max-width: 640px) {
    .m-rte-toolbar {
        gap: 3px;
        padding: 5px 6px;
    }

    .m-rte-color-panel {
        grid-template-columns: repeat(4, 22px);
        min-width: 112px;
    }
}

/* =====================================================================
   ICON PICKER
   ===================================================================== */

.m-iconpicker {
    position: relative;
    display: inline-block;
    width: 100%;
}

.m-iconpicker-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--m-border-color, #dde1e7);
    border-radius: var(--m-radius, 6px);
    background: var(--m-input-bg, #fff);
    color: var(--m-text, #222);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.m-iconpicker-trigger:hover {
    border-color: var(--m-primary, #118AB2);
}

.m-iconpicker-trigger[aria-expanded="true"] {
    border-color: var(--m-primary, #118AB2);
    box-shadow: 0 0 0 3px rgba(17, 138, 178, 0.12);
}

.m-iconpicker-trigger:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.m-iconpicker-trigger-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
    color: var(--m-text, #222);
}

.m-iconpicker-placeholder-icon {
    color: var(--m-text-muted, #aaa);
}

.m-iconpicker-trigger-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-iconpicker-caret {
    font-size: 0.65rem;
    color: var(--m-text-muted, #aaa);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.m-iconpicker-trigger[aria-expanded="true"] .m-iconpicker-caret {
    transform: rotate(180deg);
}

/* Panel */
.m-iconpicker-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 9990;
    background: var(--m-surface, #fff);
    border: 1px solid var(--m-border-color, #dde1e7);
    border-radius: var(--m-radius, 6px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 0.5rem;
    min-width: 220px;
}

/* Grid of icon buttons */
.m-iconpicker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 2px;
}

.m-iconpicker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--m-text, #333);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
}

.m-iconpicker-btn:hover {
    background: var(--m-bg-hover, rgba(0, 0, 0, 0.05));
    color: var(--m-primary, #118AB2);
}

.m-iconpicker-btn.m-iconpicker-selected {
    background: var(--m-primary, #118AB2);
    color: #fff;
    border-color: var(--m-primary, #118AB2);
}

/* ══════════════════════════════════════════════════════════════════════════════
   SplitPane
   ══════════════════════════════════════════════════════════════════════════════ */

.m-split-pane {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* Orientation variants */
.m-split-pane--horizontal { flex-direction: row; }
.m-split-pane--vertical   { flex-direction: column; }

/* ── Panes ─────────────────────────────────────────────────────────────────── */
.m-split-pane__first {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
}

.m-split-pane__second {
    flex: 1 1 0;
    overflow: hidden;
    position: relative;
    min-width: 0;
    min-height: 0;
}

/* ── Divider ───────────────────────────────────────────────────────────────── */
.m-split-pane__divider {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--m-border, #e2e6ea);
    transition: background 0.15s;
    position: relative;
    z-index: 1;
    outline: none;
}

.m-split-pane--horizontal .m-split-pane__divider {
    width: 5px;
    cursor: col-resize;
}

.m-split-pane--vertical .m-split-pane__divider {
    height: 5px;
    cursor: row-resize;
}

.m-split-pane__divider:hover,
.m-split-pane__divider:focus,
.m-split-pane--dragging .m-split-pane__divider {
    background: var(--m-primary, #118AB2);
}

/* Invisible wider hit area */
.m-split-pane__divider::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -4px; right: -4px;
}
.m-split-pane--vertical .m-split-pane__divider::before {
    left: 0; right: 0; top: -4px; bottom: -4px;
}

/* Visual grip dots */
.m-split-pane__divider-handle {
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: none;
    opacity: 0.45;
    transition: opacity 0.15s;
}

.m-split-pane--horizontal .m-split-pane__divider-handle {
    flex-direction: column;
}
.m-split-pane--vertical .m-split-pane__divider-handle {
    flex-direction: row;
}

.m-split-pane__divider-handle::before,
.m-split-pane__divider-handle::after {
    content: '';
    display: block;
    border-radius: 50%;
    background: currentColor;
    width: 3px;
    height: 3px;
}

.m-split-pane__divider:hover .m-split-pane__divider-handle,
.m-split-pane__divider:focus .m-split-pane__divider-handle,
.m-split-pane--dragging .m-split-pane__divider-handle {
    opacity: 0.9;
}

/* Prevent text selection while dragging */
.m-split-pane--dragging {
    user-select: none;
    -webkit-user-select: none;
}

/* ── Mobile: stack panes vertically, hide divider ─────────────────────────── */
@media (max-width: 768px) {
    .m-split-pane {
        flex-direction: column;
    }
    .m-split-pane__first {
        width: 100% !important;
        height: auto !important;
        flex-shrink: 1;
    }
    .m-split-pane__divider {
        display: none;
    }
}

/* ==========================================================================
   ImageViewer
   ========================================================================== */

/*
 * CSS variables (set via PHP ->thumbSize() / ->height()):
 *   --m-iv-thumb-w   Thumbnail width  (default 80px)
 *   --m-iv-thumb-h   Thumbnail height (default 60px)
 *   --m-iv-height    Stage height     (default 380px)
 */

.m-imageviewer {
    display: flex;           /* block-level, fills parent width */
    flex-direction: column;
    box-sizing: border-box;
    container-type: inline-size; /* enables @container queries on this element */
    width: 100%;
    max-width: 100%;
    background: var(--m-surface, #fff);
    border: 1px solid var(--m-border, #e2e6ea);
    border-radius: 6px;
    overflow: hidden;
}

/* ── Body wrapper ─────────────────────────────────────────────────────────── */

.m-imageviewer-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* Side layout: thumbstrip left, stage right */
.m-imageviewer--side .m-imageviewer-body {
    flex-direction: row;
}

/* Below layout: stage above, thumbstrip below */
.m-imageviewer--below .m-imageviewer-body {
    flex-direction: column;
}

/* ── Thumbnail strip ──────────────────────────────────────────────────────── */

.m-imageviewer-thumbstrip {
    display: flex;
    gap: 6px;
    padding: 8px;
    background: var(--m-surface, #fff);
    flex-shrink: 0;
}

/* Side: vertical scrolling column — height matches the stage */
.m-imageviewer--side .m-imageviewer-thumbstrip {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: var(--m-iv-height, 380px);
    width: calc(var(--m-iv-thumb-w, 80px) + 20px);
    border-right: 1px solid var(--m-border, #e2e6ea);
}

/* Below: horizontal scrolling row above the stage */
.m-imageviewer--below .m-imageviewer-thumbstrip {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-top: 1px solid var(--m-border, #e2e6ea);
}

/* Bottom layout: stage above, thumbstrip below */
.m-imageviewer--bottom .m-imageviewer-body {
    flex-direction: column-reverse;
}

/* Bottom: horizontal scrolling row below the stage */
.m-imageviewer--bottom .m-imageviewer-thumbstrip {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--m-border, #e2e6ea);
}

/* ── Apple-style thin overlay scrollbars ─────────────────────────────────── */
/*    Utility class .m-thin-scroll can be applied to any scrollable element.   */
/*    Also used by the image viewer thumbstrip and the RTE scrollable body.     */

.m-thin-scroll,
.m-imageviewer-thumbstrip,
.m-rte-body.m-rte-scrollable {
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0) transparent;
    transition: scrollbar-color 0.2s;
}

.m-thin-scroll:hover,
.m-imageviewer-thumbstrip:hover,
.m-rte-body.m-rte-scrollable:hover {
    scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

/* WebKit / Blink */
.m-thin-scroll::-webkit-scrollbar,
.m-imageviewer-thumbstrip::-webkit-scrollbar,
.m-rte-body.m-rte-scrollable::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.m-thin-scroll::-webkit-scrollbar-track,
.m-imageviewer-thumbstrip::-webkit-scrollbar-track,
.m-rte-body.m-rte-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.m-thin-scroll::-webkit-scrollbar-thumb,
.m-imageviewer-thumbstrip::-webkit-scrollbar-thumb,
.m-rte-body.m-rte-scrollable::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 2px;
    transition: background 0.2s;
}
.m-thin-scroll:hover::-webkit-scrollbar-thumb,
.m-imageviewer-thumbstrip:hover::-webkit-scrollbar-thumb,
.m-rte-body.m-rte-scrollable:hover::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
}
.m-thin-scroll::-webkit-scrollbar-thumb:hover,
.m-imageviewer-thumbstrip::-webkit-scrollbar-thumb:hover,
.m-rte-body.m-rte-scrollable::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.42);
}

/* ── Individual thumbnail ─────────────────────────────────────────────────── */

.m-imageviewer-thumb {
    flex-shrink: 0;
    width: var(--m-iv-thumb-w, 80px);
    height: var(--m-iv-thumb-h, 60px);
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s, opacity 0.15s;
    background: var(--m-border, #e2e6ea);
    outline: none;
}

.m-imageviewer-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    transition: transform 0.15s;
}

.m-imageviewer-thumb:hover img {
    transform: scale(1.04);
}

.m-imageviewer-thumb:hover,
.m-imageviewer-thumb:focus-visible {
    border-color: var(--m-primary, #118AB2);
}

.m-imageviewer-thumb:focus-visible {
    outline: 2px solid var(--m-primary, #118AB2);
    outline-offset: 1px;
}

.m-imageviewer-thumb.m-active {
    border-color: var(--m-primary, #118AB2);
}

/* Video thumbnail: play icon overlay */
.m-imageviewer-thumb--video .m-imageviewer-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 13px;
    pointer-events: none;
}

/* Placeholder when no thumbnail image is available */
.m-imageviewer-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #aaa;
    font-size: 20px;
}

/* ── Main stage ───────────────────────────────────────────────────────────── */

/*
 * Stage has a fixed height (via CSS var) so the component doesn't jump
 * as images load. Items use position:absolute so they fill the stage exactly.
 */
.m-imageviewer-stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    background: #f5f6f7;
    height: var(--m-iv-height, 380px);
    min-height: 160px;
}

/* ── Items (image / video / iframe) ──────────────────────────────────────── */

.m-imageviewer-item {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.m-imageviewer-item.m-active {
    display: flex;
    animation: m-iv-fade 0.25s ease;
}

@keyframes m-iv-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.m-imageviewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

.m-imageviewer-iframe,
.m-imageviewer-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Navigation arrows ───────────────────────────────────────────────────── */

.m-imageviewer-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(0, 0, 0, 0.38);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;             /* hidden until hover */
}

/* Show arrows when hovering the stage area */
.m-imageviewer-stage:hover .m-imageviewer-nav {
    opacity: 1;
}

.m-imageviewer-nav:hover {
    background: rgba(0, 0, 0, 0.68);
}

.m-imageviewer-nav:focus-visible {
    opacity: 1;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.m-imageviewer-nav:disabled {
    opacity: 0;
    cursor: default;
    pointer-events: none;
}

.m-imageviewer-nav--prev { left: 10px; }
.m-imageviewer-nav--next { right: 10px; }

/* ── Caption & Counter overlays ─────────────────────────────────────────── */

.m-imageviewer-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 54px;  /* side padding clears arrows */
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.58));
    color: #fff;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
    pointer-events: none;
    z-index: 2;
}

/* Enable interaction for the Video Credit link inside captions */
.m-imageviewer-caption a {
    pointer-events: all;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.m-imageviewer-caption a:hover {
    opacity: 0.8;
}

.m-imageviewer-credit {
    display: inline;
    font-size: 11px;
    opacity: 0.9;
}

.m-imageviewer-caption[hidden] {
    display: none;
}

.m-imageviewer-counter {
    position: absolute;
    top: 8px;
    right: 10px;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    pointer-events: none;
    z-index: 2;
    line-height: 1.6;
}

/* ── Responsive: stack side layout on narrow component widths ────────────── */
/*
 * Uses a CSS Container Query so the breakpoint is based on the imageviewer's
 * own rendered width, not the viewport. This correctly handles cases where the
 * component is embedded in a narrow column that is itself narrower than the
 * 600 px viewport threshold (e.g. showcase at 700 px tablet viewport).
 * The @media fallback below preserves the behaviour on browsers without CQ
 * support (pre-Chrome 105, pre-Firefox 110).
 */
@container (max-width: 480px) {
    .m-imageviewer--side .m-imageviewer-body {
        flex-direction: column;
    }
    .m-imageviewer--side .m-imageviewer-thumbstrip {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        width: auto;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--m-border, #e2e6ea);
        order: 1; /* thumbs go below on narrow */
    }
    .m-imageviewer--side .m-imageviewer-stage {
        order: 0;
    }
}

/* Fallback for browsers without CSS Container Query support */
@media (max-width: 480px) {
    .m-imageviewer--side .m-imageviewer-body {
        flex-direction: column;
    }
    .m-imageviewer--side .m-imageviewer-thumbstrip {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        width: auto;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--m-border, #e2e6ea);
        order: 1;
    }
    .m-imageviewer--side .m-imageviewer-stage {
        order: 0;
    }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.m-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-lightbox[hidden] {
    display: none;
}

/* Semi-transparent backdrop */
.m-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
}

/* Centred container */
.m-lightbox-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(95vw, 1200px);
    max-height: 96vh;
    pointer-events: none; /* children re-enable as needed */
}

/* ── Main image stage ────────────────────────────────────────────────────── */

.m-lightbox-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    position: relative;
    pointer-events: auto;
}

/* Loading spinner — hidden by default, visible when .m-lightbox-loading is set */
.m-lightbox-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.18);
    border-top-color: rgba(255, 255, 255, 0.9);
    animation: m-spin 0.7s linear infinite;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
    z-index: 1;
}

.m-lightbox-stage.m-lightbox-loading .m-lightbox-spinner {
    opacity: 1;
}

.m-lightbox-img {
    max-width: 100%;
    max-height: calc(95vh - 70px);
    object-fit: contain;
    display: block;
    border-radius: 2px;
    animation: m-lb-enter 0.2s ease;
    transition: opacity 0.2s ease;
    user-select: none;
    -webkit-user-drag: none;
}

/* Fade out the current image while the next one is loading */
.m-lightbox-stage.m-lightbox-loading .m-lightbox-img {
    opacity: 0;
}

@keyframes m-lb-enter {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.m-lightbox-footer {
    pointer-events: auto;
    padding: 8px 16px;
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.82);
    min-height: 36px;
    text-align: center;
    flex-wrap: wrap;
}

.m-lightbox-caption {
    font-size: 14px;
    line-height: 1.4;
}

.m-lightbox-caption[style*="display: none"],
.m-lightbox-caption:empty {
    display: none;
}

.m-lightbox-counter {
    font-size: 12px;
    opacity: 0.65;
    white-space: nowrap;
}

/* ── Close button ────────────────────────────────────────────────────────── */

.m-lightbox-close {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9501;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    pointer-events: auto;
}

.m-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.m-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Prev / Next navigation ──────────────────────────────────────────────── */

.m-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9501;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    pointer-events: auto;
}

.m-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.28);
}

.m-lightbox-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.m-lightbox-nav--prev { left: 12px; }
.m-lightbox-nav--next { right: 12px; }

@media (max-width: 480px) {
    .m-lightbox-nav--prev { left: 4px; }
    .m-lightbox-nav--next { right: 4px; }
}


/* =============================================================================
   Carousel
   ============================================================================= */

.m-carousel {
    width: 100%;
}

/* Grid row: prev-button | scrollable viewport | next-button */
.m-carousel-nav {
    display: grid;
    grid-template-areas: 'prev viewport next';
    grid-template-columns: 30px 1fr 30px;
    gap: 0.45rem 0.4rem;
    align-items: center;
}

/* ── Viewport ─────────────────────────────────────────────────────────────── */

.m-carousel-viewport {
    grid-area: viewport;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    outline: none;
}

.m-carousel-viewport::-webkit-scrollbar {
    display: none;                      /* Chrome / Safari */
}

/* ── Track (flex row of tiles) ───────────────────────────────────────────── */

.m-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--m-carousel-gap, 12px);
    padding: 0.25rem 0.1rem;
}

/* ── Individual tile ─────────────────────────────────────────────────────── */

.m-carousel-tile {
    flex-shrink: 0;
    width: var(--m-carousel-tile-width, 160px);
    scroll-snap-align: start;
}

.m-carousel-tile-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--m-border-color, #dde1e7);
    background: var(--m-card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
    height: 100%;
}

.m-carousel-tile-link:hover {
    border-color: var(--m-primary, #118AB2);
    box-shadow: 0 4px 14px rgba(17, 138, 178, 0.15);
    transform: translateY(-2px);
}

.m-carousel-tile-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--m-surface-2, #f0f4f8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-carousel-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.m-carousel-tile-link:hover .m-carousel-tile-img img {
    transform: scale(1.04);
}

.m-carousel-tile-img--empty {
    color: var(--m-text-muted, #aaa);
    font-size: 1.75rem;
}

.m-carousel-tile-caption {
    padding: 0.5rem 0.6rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.m-carousel-tile-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--m-text, #333);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-carousel-tile-link:hover .m-carousel-tile-title {
    color: var(--m-primary, #118AB2);
}

.m-carousel-tile-sub {
    font-size: 0.72rem;
    color: var(--m-text-muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Navigation buttons ──────────────────────────────────────────────────── */

.m-carousel-btn {
    flex-shrink: 0;
    background: var(--m-card-bg, #fff);
    border: 1px solid var(--m-border-color, #dde1e7);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--m-text-muted, #888);
    padding: 0;
    font-size: 0.72rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.m-carousel-btn:hover:not(:disabled):not([disabled]) {
    background: var(--m-primary, #118AB2);
    color: #fff;
    border-color: var(--m-primary, #118AB2);
}

.m-carousel-btn:disabled,
.m-carousel-btn[disabled] {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

.m-carousel-prev { grid-area: prev; }
.m-carousel-next { grid-area: next; }

/* ── Dot indicators ──────────────────────────────────────────────────────── */

.m-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    min-height: 10px;
    margin-top: 0.45rem;
}

.m-carousel-dots--above {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

.m-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m-border-color, #dde1e7);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.m-carousel-dot.m-active {
    background: var(--m-primary, #118AB2);
    transform: scale(1.35);
}

/* ── Loading state ───────────────────────────────────────────────────────── */

.m-carousel--loading .m-carousel-track {
    opacity: 0.45;
    pointer-events: none;
}

.m-carousel--loading .m-carousel-btn {
    pointer-events: none;
    opacity: 0.3;
}


/* =============================================================================
   Carousel
   ============================================================================= */

.m-carousel {
    width: 100%;
}

/* Grid row: prev-button | scrollable viewport | next-button */
.m-carousel-nav {
    display: grid;
    grid-template-areas: 'prev viewport next';
    grid-template-columns: 30px 1fr 30px;
    gap: 0.45rem 0.4rem;
    align-items: center;
}

/* ── Viewport ─────────────────────────────────────────────────────────────── */

.m-carousel-viewport {
    grid-area: viewport;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    outline: none;
}

.m-carousel-viewport::-webkit-scrollbar {
    display: none;                      /* Chrome / Safari */
}

/* ── Track (flex row of tiles) ───────────────────────────────────────────── */

.m-carousel-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--m-carousel-gap, 12px);
    padding: 0.25rem 0.1rem;
}

/* ── Individual tile ─────────────────────────────────────────────────────── */

.m-carousel-tile {
    flex-shrink: 0;
    width: var(--m-carousel-tile-width, 160px);
    scroll-snap-align: start;
}

.m-carousel-tile-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--m-border-color, #dde1e7);
    background: var(--m-card-bg, #fff);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
    height: 100%;
}

.m-carousel-tile-link:hover {
    border-color: var(--m-primary, #118AB2);
    box-shadow: 0 4px 14px rgba(17, 138, 178, 0.15);
    transform: translateY(-2px);
}

.m-carousel-tile-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--m-surface-2, #f0f4f8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-carousel-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s;
}

.m-carousel-tile-link:hover .m-carousel-tile-img img {
    transform: scale(1.04);
}

.m-carousel-tile-img--empty {
    color: var(--m-text-muted, #aaa);
    font-size: 1.75rem;
}

.m-carousel-tile-caption {
    padding: 0.5rem 0.6rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.m-carousel-tile-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--m-text, #333);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.m-carousel-tile-link:hover .m-carousel-tile-title {
    color: var(--m-primary, #118AB2);
}

.m-carousel-tile-sub {
    font-size: 0.72rem;
    color: var(--m-text-muted, #888);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Navigation buttons ──────────────────────────────────────────────────── */

.m-carousel-btn {
    flex-shrink: 0;
    background: var(--m-card-bg, #fff);
    border: 1px solid var(--m-border-color, #dde1e7);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--m-text-muted, #888);
    padding: 0;
    font-size: 0.72rem;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.m-carousel-btn:hover:not(:disabled):not([disabled]) {
    background: var(--m-primary, #118AB2);
    color: #fff;
    border-color: var(--m-primary, #118AB2);
}

.m-carousel-btn:disabled,
.m-carousel-btn[disabled] {
    opacity: 0.28;
    cursor: default;
    pointer-events: none;
}

.m-carousel-prev { grid-area: prev; }
.m-carousel-next { grid-area: next; }

/* ── Dot indicators ──────────────────────────────────────────────────────── */

.m-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    min-height: 10px;
    margin-top: 0.45rem;
}

.m-carousel-dots--above {
    margin-top: 0;
    margin-bottom: 0.45rem;
}

.m-carousel-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--m-border-color, #dde1e7);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.m-carousel-dot.m-active {
    background: var(--m-primary, #118AB2);
    transform: scale(1.35);
}

/* ── Loading state ───────────────────────────────────────────────────────── */

.m-carousel--loading .m-carousel-track {
    opacity: 0.45;
    pointer-events: none;
}

.m-carousel--loading .m-carousel-btn {
    pointer-events: none;
    opacity: 0.3;
}

/* === Calendar Component === */

.m-cal-widget {
    font-family: inherit;
    border: 1px solid var(--m-border, #e0e0e0);
    border-radius: 10px;
    overflow: hidden;
    background: var(--m-bg, #fff);
    -webkit-user-select: none;
    user-select: none;
    /* Hide until JS has built the DOM — prevents layout-height jump + content flash */
    opacity: 0;
    min-height: 420px;
}

.m-cal-widget.m-cal-ready {
    opacity: 1;
    transition: opacity 0.15s ease;
    min-height: 0;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

/* Outer header shell: stacks title row then nav row vertically */
.m-cal-header {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.65rem 0.9rem 0.55rem;
    border-bottom: 1px solid var(--m-border, #e0e0e0);
    background: var(--m-surface, #fafafa);
}

/* Title: full-width, centred */
.m-cal-title {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--m-text, #333);
    text-align: center;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Nav row: prev/today/next on the left, view switcher on the right */
.m-cal-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}

.m-cal-nav {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.m-cal-nav-btn {
    background: transparent;
    border: 1px solid var(--m-border, #dde1e7);
    border-radius: 6px;
    padding: 0.28rem 0.5rem;
    cursor: pointer;
    color: var(--m-text-muted, #666);
    font-size: 0.78rem;
    font-family: inherit;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.m-cal-nav-btn:hover {
    background: var(--m-surface-hover, #f0f2f5);
    border-color: var(--m-primary, #118AB2);
    color: var(--m-primary, #118AB2);
}

.m-cal-today-btn {
    padding: 0.28rem 0.65rem;
    font-size: 0.74rem;
    font-weight: 500;
}

/* View switcher (Month / Week) */
.m-cal-view-switcher {
    display: flex;
    border: 1px solid var(--m-border, #dde1e7);
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.m-cal-view-btn {
    background: transparent;
    border: none;
    border-left: 1px solid var(--m-border, #dde1e7);
    padding: 0.28rem 0.7rem;
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--m-text-muted, #777);
    transition: background 0.15s, color 0.15s;
}

.m-cal-view-btn:first-child {
    border-left: none;
}

.m-cal-view-btn:hover {
    background: var(--m-surface-hover, #f0f2f5);
    color: var(--m-text, #333);
}

.m-cal-view-btn.m-active {
    background: var(--m-primary, #118AB2);
    color: #fff;
}

/* ── Day-name header row ─────────────────────────────────────────────────── */

.m-cal-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--m-border, #e8eaed);
    background: var(--m-surface, #fafafa);
}

.m-cal-day-headers.m-cal-has-week-nums {
    grid-template-columns: 2rem repeat(7, 1fr);
}

.m-cal-day-hdr {
    padding: 0.4rem 0.2rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--m-text-muted, #999);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Week view: day headers contain name + date number */
.m-cal-day-hdr-name {
    display: block;
    font-size: 0.65rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.m-cal-day-hdr-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--m-text, #444);
    border-radius: 50%;
    margin-top: 0.08rem;
    line-height: 1;
}

/* Today — filled primary circle on the header date number */
.m-cal-day-hdr--today .m-cal-day-hdr-num {
    background: var(--m-primary, #118AB2);
    color: #fff;
    font-weight: 700;
}

/* Week view: the date already appears in the header — hide redundant cell day num */
.m-cal-grid--week .m-cal-cell .m-cal-day-num {
    display: none;
}

.m-cal-week-num-hdr {
    padding: 0.4rem 0.2rem;
    text-align: center;
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--m-text-muted, #bbb);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Grid body ───────────────────────────────────────────────────────────── */

.m-cal-body {
    display: flex;
    flex-direction: column;
}

.m-cal-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--m-border, #f0f0f0);
}

.m-cal-row:last-child {
    border-bottom: none;
}

.m-cal-row.m-cal-has-week-nums {
    grid-template-columns: 2rem repeat(7, 1fr);
}

.m-cal-row--week {
    min-height: var(--m-calendar-height, 120px);
}

.m-cal-week-num {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0.45rem 0.1rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--m-text-muted, #ccc);
    border-right: 1px solid var(--m-border, #f0f0f0);
}

/* ── Day cells ───────────────────────────────────────────────────────────── */

.m-cal-cell {
    min-height: 58px;
    padding: 0.25rem 0.25rem 0.15rem;
    border-right: 1px solid var(--m-border, #f0f0f0);
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    transition: background 0.1s;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.m-cal-cell:last-child {
    border-right: none;
}

.m-cal-cell--other-month {
    background: var(--m-surface-alt, #f8f9fb);
    opacity: 0.5;
}

.m-cal-cell--disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--m-surface-alt, #f8f9fb);
}

.m-cal-cell--selectable {
    cursor: pointer;
}

.m-cal-cell--selectable:hover {
    background: rgba(17, 138, 178, 0.04);
}

.m-cal-cell--selected {
    background: rgba(17, 138, 178, 0.07);
}

/* Day number */
.m-cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--m-text, #444);
    line-height: 1;
    flex-shrink: 0;
    border-radius: 50%;
    transition: background 0.1s, color 0.1s;
}

/* Today highlight — filled primary circle */
.m-cal-cell--today .m-cal-day-num {
    background: var(--m-primary, #118AB2);
    color: #fff;
    font-weight: 700;
}

/* Selected date — outlined number */
.m-cal-cell--selected:not(.m-cal-cell--today) .m-cal-day-num {
    color: var(--m-primary, #118AB2);
    font-weight: 700;
}

/* ── Event chips ─────────────────────────────────────────────────────────── */

.m-cal-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.m-cal-event {
    font-size: 0.62rem;
    font-weight: 500;
    padding: 0.06rem 0.22rem;
    border-radius: 3px;
    background: var(--m-cal-event-color, var(--m-primary, #118AB2));
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: pointer;
    line-height: 1.4;
    transition: opacity 0.12s, transform 0.1s;
}

.m-cal-event:hover {
    opacity: 0.82;
    transform: translateX(1px);
}

.m-cal-event-more {
    font-size: 0.66rem;
    color: var(--m-text-muted, #999);
    padding: 0 0.3rem;
    cursor: pointer;
    line-height: 1.4;
}

/* ── Event-detail popover ────────────────────────────────────────────────── */

.m-cal-popover {
    position: absolute;
    z-index: 9100;
    background: var(--m-bg, #fff);
    border: 1px solid var(--m-border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
    width: 230px;
    overflow: hidden;
    animation: m-cal-pop-in 0.12s ease-out;
}

@keyframes m-cal-pop-in {
    from { opacity: 0; transform: translateY(5px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.m-cal-pop-header {
    padding: 0.65rem 0.85rem 0.5rem;
    border-left: 3px solid var(--m-primary, #118AB2);
    background: var(--m-surface, #fafafa);
    border-bottom: 1px solid var(--m-border, #f0f0f0);
    position: relative;
}

.m-cal-pop-title {
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--m-text, #333);
    padding-right: 1.4rem;
    line-height: 1.3;
}

.m-cal-pop-date {
    font-size: 0.73rem;
    color: var(--m-text-muted, #999);
    margin-top: 0.22rem;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.m-cal-pop-body {
    padding: 0.5rem 0.85rem;
    font-size: 0.81rem;
    color: var(--m-text, #444);
    line-height: 1.55;
    border-bottom: 1px solid var(--m-border, #f0f0f0);
}

.m-cal-pop-meta {
    padding: 0.35rem 0.85rem 0.3rem;
}

.m-cal-pop-type {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.12rem 0.45rem;
    border-radius: 10px;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.m-cal-pop-footer {
    padding: 0.38rem 0.85rem 0.5rem;
    border-top: 1px solid var(--m-border, #f0f0f0);
}

.m-cal-pop-link {
    font-size: 0.77rem;
    color: var(--m-primary, #118AB2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.m-cal-pop-link:hover {
    text-decoration: underline;
}

.m-cal-pop-close {
    position: absolute;
    top: 0.38rem;
    right: 0.38rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--m-text-muted, #bbb);
    font-size: 0.72rem;
    padding: 0.18rem;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.13s, background 0.13s;
}

.m-cal-pop-close:hover {
    color: var(--m-text, #555);
    background: var(--m-surface-hover, #f0f2f5);
}