/* Cheese — shared dialog/modal system (blocking alert/confirm/prompt
   replacements). Linked from pages/analysis/index.html and
   pages/training/index.html — see assets/js/cheese-dialogs.js's file
   header — but kept in assets/ rather than a page directory so it can be
   linked from other pages later without moving anything.

   Visual language matches the Import PGN / Game Over modals: dark-neutral
   (NOT the old dark-blue) glassmorphism — translucent background, backdrop
   blur, rounded corners. Deliberately NOT shared with the toast, which
   keeps its own sharp/opaque/high-contrast look on purpose (see each
   page's .ap-toast) since toasts are meant to read as more urgent/attention-
   grabbing than a considered dialog. Not literally sharing CSS classes with
   the PGN/Game Over modals (this file is standalone) so this system can be
   reused elsewhere without dragging in anything Analysis-specific, and so
   those already-working modals are never at risk of being touched by
   changes here — they're kept visually consistent by hand instead. */

.cheese-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 24px;
    /* Every page that loads this file also has the fixed left-nav sidebar
       (assets/css/nav.css) permanently occupying --cheese-sidebar-w on the
       left, offset via each page's own .app-container padding — so the
       board+panel content those pages show is actually centered in the
       viewport MINUS the sidebar, not the full viewport. Centering the
       backdrop's flex content on the full 100vw (as inset:0 alone would)
       put the dialog about half the sidebar's width left of where that
       content visually sits. This reproduces the exact same offset via the
       same variable, so the dialog aligns with the workspace the user is
       actually looking at instead of the raw viewport. The backdrop itself
       still covers the full viewport (inset:0 is untouched) so it keeps
       dimming/blocking the sidebar too — only the centering reference for
       the dialog BOX shifts. */
    padding-left: calc(var(--cheese-sidebar-w, 220px) + 24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.cheese-dialog-overlay.cheese-dialog-open {
    opacity: 1;
    pointer-events: auto;
}

.cheese-dialog {
    width: 100%;
    max-width: 380px;
    /* .cheese-dialog-overlay has padding:24px on every side, so this keeps
       the dialog from ever growing past the viewport on a short window —
       it shrinks and scrolls internally instead of clipping off-screen. */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* Lines the dialog up with the board behind it rather than with the
       whole board+panel group. justify-content:center centres this box's
       MARGIN box, so a right margin moves the visible box left by half the
       margin — see --cheese-dialog-board-shift in assets/css/board-layout.css
       for the derivation. Defaults to 0 on pages without that stylesheet. */
    margin-right: var(--cheese-dialog-board-shift, 0px);
    background: rgba(20, 20, 22, 0.82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    padding: 20px 22px 22px 22px;
    color: rgba(255,255,255,0.92);
    transform: translateY(6px);
    transition: transform 0.15s ease;
}

.cheese-dialog-open .cheese-dialog {
    transform: translateY(0);
}

.cheese-dialog-title {
    font-size: 16px;
    font-weight: 700;
    font-family: Arial, sans-serif;
    letter-spacing: 0.2px;
    margin-bottom: 8px;
}

.cheese-dialog-message {
    font-size: 13.5px;
    font-family: Arial, sans-serif;
    line-height: 1.55;
    color: rgba(255,255,255,0.72);
    margin-bottom: 16px;
    white-space: pre-line;
}

.cheese-dialog-input {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-size: 13.5px;
    font-family: Arial, sans-serif;
    color: #fff;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    outline: none;
    margin-bottom: 18px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cheese-dialog-input:focus {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.09);
}

.cheese-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.cheese-dialog-btn {
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    font-family: Arial, sans-serif;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.cheese-dialog-btn-ghost {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.75);
}
.cheese-dialog-btn-ghost:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.cheese-dialog-btn-primary {
    background: rgba(255,255,255,0.92);
    color: #0b0f1a;
}
.cheese-dialog-btn-primary:hover {
    background: #fff;
}

/* Reuses the same red already established for destructive actions
   elsewhere in Analysis (see .ap-action-btn-danger in pages/analysis/style.css)
   rather than inventing a new danger color. */
.cheese-dialog-btn-danger {
    background: rgba(180,40,40,0.18);
    border-color: rgba(255,120,120,0.35);
    color: rgba(255,140,140,1);
}
.cheese-dialog-btn-danger:hover {
    background: rgba(180,40,40,0.32);
    color: #fff;
}

.cheese-dialog-btn:focus-visible,
.cheese-dialog-input:focus-visible {
    outline: 2px solid rgba(255,255,255,0.5);
    outline-offset: 2px;
}