/*
 * In-page replacement for window.alert() / confirm() / prompt().
 * Paired with /_api/files/js/dialog.js (window.EurekaDialog).
 *
 * DELIBERATELY NOT A BOOTSTRAP MODAL. Bootstrap 4 does not support stacked
 * modals: opening one over an already-open .modal wedges the page (the shared
 * _isTransitioning flag is left set, every later hide() early-returns, and the
 * backdrop swallows every click until a reload). That has bitten dashboard 101
 * in production. A confirm can fire from ANY context on this platform —
 * including from inside #editModal, #resultsModal or a DataTables Editor form —
 * so the replacement must not touch Bootstrap's modal lifecycle at all.
 * This is plain fixed-position markup with its own z-index and no JS dependency.
 *
 * z-index sits above Bootstrap's modal (1050), its backdrop (1040), the
 * platform's stacked confirms (1065) and gptsim's own dialog (1060), so this is
 * always the topmost layer and is never covered by whatever it was opened over.
 */

.eureka-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.eureka-dialog-panel {
    background: var(--cp-surface, #fff);
    color: var(--cp-text, #263a5b);
    width: 100%;
    max-width: 30rem;
    padding: 1.25rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    /* Own the box model: this renders inside 40+ simulations whose stylesheets
       set wildly different defaults on generic children. */
    box-sizing: border-box;
    text-align: left;
    margin: auto;
}

.eureka-dialog-title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Variant accent — a coloured rule on the panel edge rather than a filled
   header bar, so the dialog stays legible against both themes without a
   second set of foreground colours to maintain. */
.eureka-dialog-panel { border-top: 4px solid var(--cp-accent, #0080ff); }
.eureka-dialog-info    { border-top-color: #17a2b8; }
.eureka-dialog-success { border-top-color: #28a745; }
.eureka-dialog-warning { border-top-color: #ffc107; }
.eureka-dialog-danger  { border-top-color: #dc3545; }

.eureka-dialog-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
}

.eureka-dialog-info    .eureka-dialog-icon { background: #d1ecf1; color: #0c5460; }
.eureka-dialog-success .eureka-dialog-icon { background: #d4edda; color: #155724; }
.eureka-dialog-warning .eureka-dialog-icon { background: #fff3cd; color: #856404; }
.eureka-dialog-danger  .eureka-dialog-icon { background: #f8d7da; color: #721c24; }

.eureka-dialog-message {
    margin: 0 0 1rem;
    /* A migrated message may carry its own "\n\n" from the native dialog it
       replaced — preserve those breaks instead of collapsing them. */
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.45;
}

.eureka-dialog-input {
    display: block;
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--cp-text, #495057);
    background: var(--cp-surface-2, #fff);
    border: 1px solid var(--cp-border, #ced4da);
    border-radius: 0.25rem;
    box-sizing: border-box;
}

.eureka-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Bootstrap's .btn is always present on authenticated pages, but these rules
   make the dialog self-sufficient if it is ever shown somewhere it is not. */
.eureka-dialog-actions button {
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
    border: 1px solid transparent;
}

.eureka-dialog-actions button:focus {
    outline: 2px solid #0080ff;
    outline-offset: 2px;
}

/* Dark theme. The platform stamps .cyberpunk-dark on <html> (never <body> —
   index.php owns the body class and is never-modify), so scope from html. */
html.cyberpunk-dark .eureka-dialog-panel {
    background: var(--cp-surface, #16181d);
    color: var(--cp-text, #e6e6e6);
}

html.cyberpunk-dark .eureka-dialog-input {
    background: var(--cp-surface-2, #1f2229);
    color: var(--cp-text, #e6e6e6);
    border-color: var(--cp-border, #3a3f4b);
}

@media (max-width: 576px) {
    .eureka-dialog-panel { max-width: none; }
    .eureka-dialog-actions button { flex: 1 1 auto; }
}

/* Respect reduced-motion: there is no entry animation to disable today, but
   declaring it keeps a future one from being added without the guard. */
@media (prefers-reduced-motion: reduce) {
    .eureka-dialog-overlay, .eureka-dialog-panel { transition: none !important; animation: none !important; }
}