/**
 * Necudah Dialog Styles
 *
 * Modern dialogs matching the lavivme confirmation-modal design.
 * Supports both confirm and prompt modes.
 *
 * Colours come from the V3 tokens (frontend-v3.css). The dialog is appended
 * to <body>, which is where those tokens are defined, so it inherits them and
 * the [data-theme="dark"] values with them. wp-admin loads no V3 tokens, so
 * every var() carries a light value as its fallback and the dialog looks the
 * same there.
 *
 * Neutrals with no token of their own (the input's fill and border, the
 * Cancel border, the icon tile) are mixed from a token into --v3-surface,
 * which keeps them at the old light grey/pastel and makes them follow the
 * surface in dark. Those mixes sit in the @supports block at the end; the
 * plain token values before it are what a browser without color-mix() shows.
 */

/* Dialog Container */
.necudah-dialog {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    /* Named properties, never `all` (design rule: `all` on a modal makes it
       jump). The whole dialog fades; its content no longer scales or slides. */
    transition: opacity 0.25s ease, visibility 0.25s ease;

    /* One palette for the icon tile and the confirm button, keyed by the
       iconColor / confirmClass names the callers pass. */
    --necudah-dialog-danger:  var(--v3-danger, #dc2626);
    --necudah-dialog-warning: var(--v3-warning, #d97706);
    --necudah-dialog-success: var(--v3-success, #16a34a);
    /* No info token exists; the lesson blue is the platform's blue and is the
       exact blue this dialog always used for info. */
    --necudah-dialog-info:    var(--v3-c-lesson, #3b82f6);
    --necudah-dialog-primary: var(--v3-accent, #6366f1);
}

.necudah-dialog.active {
    opacity: 1;
    visibility: visible;
}

/* Overlay */
.necudah-dialog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Content Box. No transform and no backdrop-filter (design rules for modal
   cards); it appears with the container's opacity fade. */
.necudah-dialog-content {
    position: relative;
    background: var(--v3-surface, #ffffff);
    border-radius: 16px;
    width: 90%;
    max-width: 420px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 1000000;
}

[data-theme="dark"] .necudah-dialog-content {
    border: 1px solid var(--v3-border, rgba(165, 180, 252, 0.18));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* Close Button. Logical inset, so it sits on the end side in Hebrew and
   Arabic without an RTL override. */
.necudah-dialog-close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--v3-muted, #9ca3af);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    z-index: 1;
}

.necudah-dialog-close:hover {
    color: var(--v3-fg, #374151);
}

/* Body */
.necudah-dialog-body {
    padding: 32px 28px 24px;
    text-align: center;
}

/* Icon. The tone comes from a --{name} modifier the script sets. A rounded
   square, not a circle (design rule: icons sit on 12px-radius tinted tiles). */
.necudah-dialog-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    color: var(--necudah-dialog-tone, var(--necudah-dialog-info));
    background: var(--v3-icon-tint, #e0e7ff);
}

.necudah-dialog-icon--danger  { --necudah-dialog-tone: var(--necudah-dialog-danger); }
.necudah-dialog-icon--warning { --necudah-dialog-tone: var(--necudah-dialog-warning); }
.necudah-dialog-icon--success { --necudah-dialog-tone: var(--necudah-dialog-success); }
.necudah-dialog-icon--info    { --necudah-dialog-tone: var(--necudah-dialog-info); }
.necudah-dialog-icon--primary { --necudah-dialog-tone: var(--necudah-dialog-primary); }

/* The sprite icon (window.necudahIcon) ... */
.necudah-dialog-icon .necudah-icon {
    display: block;
    width: 32px;
    height: 32px;
}

/* ... and the dashicon it falls back to where the sprite is absent. */
.necudah-dialog-icon .dashicons {
    font-size: 32px;
    width: 32px;
    height: 32px;
}

/* Title */
.necudah-dialog-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--v3-fg, #111827);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* Message */
.necudah-dialog-message {
    font-size: 15px;
    color: var(--v3-muted, #6b7280);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.necudah-dialog-message strong {
    font-weight: 700;
    color: var(--v3-fg, #111827);
}

/* Input (prompt mode) */
.necudah-dialog-input-wrap {
    margin: 0 0 24px 0;
    text-align: start;
}

.necudah-dialog-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--v3-border, #d1d5db);
    border-radius: 10px;
    font-size: 15px;
    color: var(--v3-fg, #111827);
    background: var(--v3-surface, #f9fafb);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
    font-family: inherit;
}

.necudah-dialog-input:focus {
    outline: none;
    border-color: var(--v3-accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    background: var(--v3-surface, #ffffff);
}

.necudah-dialog-input::placeholder {
    color: var(--v3-muted, #9ca3af);
}

/* Buttons */
.necudah-dialog-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.necudah-dialog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, filter 0.2s;
    border: none;
    text-decoration: none;
    font-family: inherit;
}

.necudah-dialog-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

/* Cancel */
.necudah-dialog-btn-cancel {
    background: var(--v3-surface, #ffffff);
    border: 1px solid var(--v3-border, #d1d5db);
    color: var(--v3-fg, #374151);
}

/* Extra (optional third choice). Hidden unless a caller passes extraText;
   see the unsaved-changes guard on Site Settings. Reads as a quieter sibling of
   Cancel so the primary action still carries the weight. */
.necudah-dialog-btn-extra {
    background: transparent;
    border: 1px solid var(--v3-border, rgba(0, 0, 0, 0.08));
    color: var(--v3-muted, #6b7280);
}

.necudah-dialog-btn-extra:hover {
    color: var(--v3-fg, #374151);
}

/* Confirm. The fill is the confirmClass tone; the text is --v3-on-accent,
   white in light and dark ink in dark, where every tone is pale and white on
   it would not be readable. */
.necudah-dialog-btn-confirm {
    background: var(--necudah-dialog-tone, var(--necudah-dialog-primary));
    color: var(--v3-on-accent, #ffffff);
}

.necudah-dialog-btn-confirm--danger  { --necudah-dialog-tone: var(--necudah-dialog-danger); }
.necudah-dialog-btn-confirm--warning { --necudah-dialog-tone: var(--necudah-dialog-warning); }
.necudah-dialog-btn-confirm--success { --necudah-dialog-tone: var(--necudah-dialog-success); }
.necudah-dialog-btn-confirm--info    { --necudah-dialog-tone: var(--necudah-dialog-info); }
.necudah-dialog-btn-confirm--primary { --necudah-dialog-tone: var(--necudah-dialog-primary); }

.necudah-dialog-btn-confirm:hover {
    filter: brightness(0.9);
}

/* Mixed neutrals and tints. Inside @supports on purpose: a declaration that
   holds var() is never dropped at parse time, so an unsupported color-mix()
   would blank the property rather than fall back to the line above it. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .necudah-dialog-icon {
        background: color-mix(in srgb, var(--necudah-dialog-tone, var(--necudah-dialog-info)) 14%, var(--v3-surface, #ffffff));
    }

    /* A pastel tile on a dark card reads as a light patch; in dark the tint
       is laid over the card instead. */
    [data-theme="dark"] .necudah-dialog-icon {
        background: color-mix(in srgb, var(--necudah-dialog-tone, var(--necudah-dialog-info)) 18%, transparent);
    }

    .necudah-dialog-input {
        border-color: color-mix(in srgb, var(--v3-fg, #111827) 18%, var(--v3-surface, #ffffff));
        background: color-mix(in srgb, var(--v3-fg, #111827) 3%, var(--v3-surface, #ffffff));
    }

    .necudah-dialog-input:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-accent, #6366f1) 15%, transparent);
    }

    .necudah-dialog-btn:focus {
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--v3-accent, #6366f1) 30%, transparent);
    }

    .necudah-dialog-btn-cancel {
        border-color: color-mix(in srgb, var(--v3-fg, #111827) 18%, var(--v3-surface, #ffffff));
    }

    .necudah-dialog-btn-cancel:hover {
        background: color-mix(in srgb, var(--v3-fg, #111827) 3%, var(--v3-surface, #ffffff));
        border-color: color-mix(in srgb, var(--v3-fg, #111827) 38%, var(--v3-surface, #ffffff));
    }

    .necudah-dialog-btn-extra {
        border-color: color-mix(in srgb, var(--v3-fg, #000000) 8%, transparent);
    }

    .necudah-dialog-btn-extra:hover {
        background: color-mix(in srgb, var(--v3-fg, #000000) 3%, transparent);
    }
}

/* Responsive */
@media (max-width: 480px) {
    .necudah-dialog-content {
        width: 95%;
        max-width: none;
        margin: 16px;
    }

    .necudah-dialog-body {
        padding: 28px 20px 20px;
    }

    .necudah-dialog-buttons {
        grid-template-columns: 1fr;
    }

    .necudah-dialog-btn {
        padding: 14px 20px;
    }
}