/* ============================================================
   the platform — Shared Overlay UI (ui.css)
   ============================================================
   SINGLE SOURCE OF TRUTH for OVERLAY components:
     - Toasts        (.mx-toast / APP.toast)
     - Modal shell   (.mx-modal-* / APP.modal, .confirm, .prompt)
     - Export modal  (.mx-export-* / APP.exportModal)
     - Lightbox      (.mx-lightbox-* / APP.lightbox)

   What does NOT live here:
     - Form inputs, labels, rows, checklists, feedback
       → components.css (.form-*)
     - Buttons, cards, badges, tables, stat cards, skeleton, code display
       → components.css
     - Layout (app-layout, main-area, topbar, page-header, content)
       → components.css
     - Sidebar (user/admin nav)
       → layout.css per area

   Modal bodies built by APP.modal({ body }) use the same .form-*
   classes as page forms (one naming scheme). Overlay-specific concerns
   (scroll, sticky head/footer, z-index, focus trap) stay here.

   Page-specific CSS MUST NOT redefine any .mx-* primitive.
   ============================================================ */

/* ---- Toast ----
 * v1.40.1.1 — All toasts go through the .mx-toast-stack wrapper (created
 * by APP.toast on first call), so the individual toast no longer needs
 * its own `position: fixed` / `top` / `right`. The stack wrapper handles
 * positioning; nested toasts get `position: static` (see .mx-toast-stack
 * > .mx-toast below).
 */
.mx-toast {
    z-index: var(--z-toast, 9999);
    min-width: 260px;
    max-width: 420px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-lg);
    opacity: 1;
    transition: opacity .3s ease, transform .3s ease;
    transform: translateY(0);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.mx-toast.fade-out {
    opacity: 0;
    transform: translateY(-8px);
}

.mx-toast .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.mx-toast-success { background-color: var(--color-success); }
.mx-toast-error,
.mx-toast-danger  { background-color: var(--color-danger); }
.mx-toast-warning { background-color: var(--color-warning); }
.mx-toast-info    { background-color: var(--color-info); }

/* v1.40.1: sticky + close + cursor */
.mx-toast--sticky { cursor: default; }
.mx-toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    line-height: 1;
    padding: 0 0 0 var(--space-2);
    margin-left: auto;
    cursor: pointer;
    opacity: .75;
    flex-shrink: 0;
}
.mx-toast-close:hover { opacity: 1; }

/* Toast stack wrapper */
.mx-toast-stack {
    position: fixed;
    top: calc(var(--topbar-height, 64px) + var(--space-4));
    right: var(--space-6);
    z-index: var(--z-toast, 9999);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 420px;
    pointer-events: none;
}
.mx-toast-stack > .mx-toast {
    position: static;
    pointer-events: auto;
}

/* Mobile: bottom + full-width, max 2 visible */
@media (max-width: 600px) {
    .mx-toast-stack {
        top: auto;
        bottom: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
        max-width: none;
    }
}

/* ---- Spinner (v1.40.1) ---- */
@keyframes mx-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.mx-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: mx-spin .7s linear infinite;
}
.mx-spinner--large {
    width: 56px;
    height: 56px;
    border-width: 4px;
}

/* Inline spinner ring for badges */
.mx-spinner-ring {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mx-spin .6s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}

/* ---- Canonical form primitives (v1.40.1.1) ----
 * Used by APP.modal bodies and any caller building inline forms with the
 * mx-* primitive vocabulary. Mirror the admin/i18n local definitions so
 * surfaces that mix admin + dashboard contexts don't drift visually.
 */
.mx-form-group {
    margin-bottom: var(--space-4, 16px);
}
.mx-form-group:last-child {
    margin-bottom: 0;
}

.mx-checkbox {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    cursor: pointer;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary);
    line-height: 1.4;
    user-select: none;
}
.mx-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}
.mx-checkbox > span {
    flex: 1;
}

.mx-muted {
    color: var(--color-text-tertiary);
    font-size: var(--text-sm, 0.875rem);
    margin: 0;
}

.mx-error {
    color: var(--color-danger);
    font-size: var(--text-sm, 0.875rem);
    margin: 0;
}

/* ---- Modal Overlay ---- */
.mx-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: var(--z-modal, 9998);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.mx-modal-overlay[hidden] {
    display: none !important;
}

/* ---- Modal Box ---- */
.mx-modal {
    background-color: var(--color-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 95%;
    max-width: 440px;
    /* Cap height so the modal never spills off the viewport.
       The body inside scrolls; head/footer stay sticky. */
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: mx-modal-in .15s ease;
}

/* Size variants */
.mx-modal-sm { max-width: 380px; }
.mx-modal-md { max-width: 480px; }
.mx-modal-lg { max-width: 640px; }
.mx-modal-xl { max-width: 800px; }

@keyframes mx-modal-in {
    from { opacity: 0; transform: scale(.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.mx-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mx-modal-title {
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.mx-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--space-1);
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    transition: background-color .15s;
}

.mx-modal-close:hover {
    background-color: var(--color-surface-sunken);
}

.mx-modal-close .material-symbols-outlined {
    font-size: 20px;
}
/* Iconos Lucide emitidos por ui.js (mxIcon) — dimensión base para el chrome legacy
   (en el rediseño M2 los refina overlays.css/components.css). */
.mx-modal-close .icon,
.mx-lightbox-btn .icon,
.mx-drawer-overlay .icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.mx-modal-body {
    /* Scrollable inner area. Flex allows it to take all remaining height
       while head/footer stay fixed. min-height:0 lets flex shrink it. */
    padding: var(--space-5) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.mx-modal-input {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}

.mx-modal-input:focus {
    border-color: var(--color-primary);
}

/* v1.49.0 — step-up reveal modal building blocks. Used by the API key
 * reveal flow on /profile, /admin/profile and api-docs. Kept generic
 * so other step-up flows (e.g. future re-auth dialogs) can reuse. */
.mx-modal-help {
    margin: 0 0 var(--space-3) 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.mx-modal-label {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.mx-modal-error {
    margin-top: var(--space-2);
    color: var(--color-danger);
    font-size: var(--text-sm);
    line-height: 1.4;
}

.mx-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-sunken);
    flex-shrink: 0;
}

/* Confirm body variant — centered icon + title + text */
.mx-modal-confirm-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-6) var(--space-4);
}

.mx-modal-confirm-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

.mx-modal-confirm-icon.is-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.mx-modal-confirm-icon.is-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
}

.mx-modal-confirm-icon .material-symbols-outlined {
    font-size: 28px;
}

.mx-modal-confirm-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.mx-modal-confirm-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 320px;
}

/* ---- Buttons inside modal ---- */
.mx-modal-btn {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color .15s, border-color .15s, opacity .15s;
    font-family: inherit;
}

.mx-modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mx-modal-btn-secondary {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
}

.mx-modal-btn-secondary:hover:not(:disabled) {
    background-color: var(--color-surface-sunken);
}

.mx-modal-btn-ghost {
    background-color: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.mx-modal-btn-ghost:hover:not(:disabled) {
    background-color: var(--color-surface-sunken);
}

.mx-modal-btn-danger {
    background-color: var(--color-danger);
    color: var(--color-text-inverse);
    border-color: transparent;
}

.mx-modal-btn-danger:hover:not(:disabled) {
    opacity: .9;
}

.mx-modal-btn-warning {
    background-color: var(--color-warning);
    color: var(--color-text-inverse);
    border-color: transparent;
}

.mx-modal-btn-warning:hover:not(:disabled) {
    opacity: .9;
}

.mx-modal-btn-primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: transparent;
}

.mx-modal-btn-primary:hover:not(:disabled) {
    opacity: .9;
}

/* ============================================================
   Drawer — APP.drawer (side-panel detail view)
   ============================================================
   Canonical replacement for per-panel custom drawers (.bill-drawer,
   .rl-drawer, .sec-drawer). Slide-in from `data-side`, full viewport
   height, scrollable body, optional pinned actionbar (top) + footer
   actions (bottom). Buttons reuse .mx-modal-btn-* primitives.
   ============================================================ */

.mx-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal, 9998);
    display: flex;
    pointer-events: auto;
}

.mx-drawer-overlay[data-side="right"] { justify-content: flex-end; }
.mx-drawer-overlay[data-side="left"]  { justify-content: flex-start; }

.mx-drawer-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.mx-drawer-panel {
    position: relative;
    height: 100vh;
    background-color: var(--color-surface);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    outline: none;
    overflow: hidden;
}

.mx-drawer-overlay[data-side="right"] .mx-drawer-panel {
    animation: mx-drawer-in-right 180ms ease-out;
}
.mx-drawer-overlay[data-side="left"] .mx-drawer-panel {
    animation: mx-drawer-in-left 180ms ease-out;
}

@keyframes mx-drawer-in-right {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

@keyframes mx-drawer-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

.mx-drawer-panel[data-size="sm"] { width: 360px; max-width: 100vw; }
.mx-drawer-panel[data-size="md"] { width: 480px; max-width: 100vw; }
.mx-drawer-panel[data-size="lg"] { width: 640px; max-width: 100vw; }
.mx-drawer-panel[data-size="xl"] { width: 800px; max-width: 100vw; }

@media (max-width: 768px) {
    .mx-drawer-panel[data-size="lg"],
    .mx-drawer-panel[data-size="xl"] { width: 100vw; }
}

.mx-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mx-drawer-head-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.mx-drawer-eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

.mx-drawer-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-drawer-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-family: var(--font-family-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mx-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: var(--space-1);
    display: flex;
    align-items: center;
    border-radius: var(--radius-md);
    transition: background-color .15s;
    flex-shrink: 0;
}

.mx-drawer-close:hover {
    background-color: var(--color-surface-sunken);
}

.mx-drawer-close .material-symbols-outlined {
    font-size: 20px;
}

.mx-drawer-actionbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background-color: var(--color-surface-sunken);
    flex-shrink: 0;
}

.mx-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--space-5) var(--space-6);
    min-height: 0;
}

.mx-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
    background-color: var(--color-surface-sunken);
    flex-shrink: 0;
}

/* ---- Export Modal Filters ---- */
.mx-export-filters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3) var(--space-4);
}

.mx-export-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mx-export-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
}

.mx-export-input {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-sunken);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    outline: none;
    transition: border-color .15s;
}

.mx-export-input:focus {
    border-color: var(--color-primary);
}

.mx-export-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

.mx-export-hint {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0 0 var(--space-4) 0;
}

/* ---- Format Selector (inside export modal) ---- */
.mx-export-format-section {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.mx-export-format-options {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.mx-export-format-option {
    position: relative;
    cursor: pointer;
}

.mx-export-format-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mx-export-format-chip {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-secondary);
    background-color: var(--color-surface-sunken);
    transition: all .15s;
    user-select: none;
}

.mx-export-format-option input[type="radio"]:checked + .mx-export-format-chip {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-surface-sunken);
    background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-sunken));
}

.mx-export-format-option input[type="radio"]:focus-visible + .mx-export-format-chip {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Rows limit input (inside export modal) ---- */
.mx-export-limit {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.mx-export-limit-input {
    width: 90px;
    text-align: center;
}

/* Form primitives (.form-*) and code display (.code-display) live in
   components.css — modal bodies use the same classes as page forms. */

/* ============================================================
   Lightbox — centralized image viewer (APP.lightbox)
   ============================================================
   Replaces per-page .vdet-lightbox / .vimg-* implementations.
   ============================================================ */

.mx-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-modal, 9998) + 1);
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    animation: mx-modal-in .15s ease;
}

.mx-lightbox-img {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center center;
    transition: transform 0.12s ease;
}

/* Zoom-enabled variant: image lives inside a scrollable viewport so zoom can overflow */
.mx-lightbox-viewport {
    width: 90vw;
    height: 80vh;
    max-width: 90vw;
    max-height: 80vh;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xl);
    background: rgba(0, 0, 0, 0.3);
}
.mx-lightbox-viewport:active { cursor: grabbing; }
.mx-lightbox-viewport .mx-lightbox-img {
    max-width: none;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
    flex-shrink: 0;
}

.mx-lightbox-toolbar {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    gap: var(--space-2);
    z-index: 1;
    align-items: center;
}

.mx-lightbox-zoom-level {
    color: var(--color-text-inverse);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0 var(--space-3);
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    min-width: 52px;
    justify-content: center;
}

.mx-lightbox-sep {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 var(--space-1);
}

.mx-lightbox-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-text-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s, transform .15s;
    text-decoration: none;
}
.mx-lightbox-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}
.mx-lightbox-btn .material-symbols-outlined { font-size: 22px; }

/* ============================================================
   Popover / Dropdown menu — APP.dropdown primitive
   ============================================================
   Teleported to <body> with position:fixed so it escapes any
   overflow:hidden ancestor (tables, cards, sections). The JS
   helper computes top/left based on viewport space so the
   popover never gets clipped.

   Visibility is controlled by .is-open (opacity + visibility +
   transform) — NOT by the [hidden] attribute, because some
   legacy page CSS sets display:flex which would override the
   default display:none. Using opacity+visibility also gives
   free animation.
   ============================================================ */

.mx-popover {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 200px;
    max-width: 320px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1);
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: var(--z-popover, 9997);

    /* Hidden by default */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .12s ease, visibility .12s ease, transform .12s ease;
}

.mx-popover.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Open above the trigger — invert the initial transform so the enter
   animation slides DOWN into place instead of up */
.mx-popover.placement-top {
    transform: translateY(4px);
}
.mx-popover.placement-top.is-open {
    transform: translateY(0);
}

.mx-popover-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    text-align: left;
    border-radius: var(--radius-md);
    transition: background-color .12s ease;
    white-space: nowrap;
    width: 100%;
}

.mx-popover-item:hover {
    background-color: var(--color-surface-sunken);
}

.mx-popover-item:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: -2px;
}

.mx-popover-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
    flex-shrink: 0;
}

.mx-popover-item:hover .material-symbols-outlined {
    color: var(--color-text-secondary);
}

.mx-popover-item.is-danger {
    color: var(--color-danger);
}
.mx-popover-item.is-danger .material-symbols-outlined {
    color: var(--color-danger);
}
.mx-popover-item.is-danger:hover {
    background-color: var(--color-danger-light);
}

.mx-popover-item.is-success {
    color: var(--color-success);
}
.mx-popover-item.is-success .material-symbols-outlined {
    color: var(--color-success);
}
.mx-popover-item.is-success:hover {
    background-color: var(--color-success-light);
}

.mx-popover-item[disabled],
.mx-popover-item.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.mx-popover-divider {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--space-1) 0;
    flex-shrink: 0;
}

/* ---- Mobile responsive ---- */
@media (max-width: 640px) {
    .mx-toast {
        top: calc(var(--topbar-height, 64px) + var(--space-2));
        right: var(--space-3);
        left: var(--space-3);
        max-width: none;
    }

    .mx-modal {
        max-width: none;
        max-height: 85vh;
    }

    .mx-modal-overlay {
        padding: 0;
    }

    .mx-export-filters {
        grid-template-columns: 1fr;
    }
}