/* ==============================
   SHARED MODAL STYLES
   For older-style modals (examples-modal, delete-all-modal, etc.)
   ============================== */

/* Base modal overlay - full screen backdrop */
.modal {
    position: fixed;
    top: 0;
    left: var(--app-container-gutter-inline);
    right: var(--app-container-gutter-inline);
    width: auto;
    height: 100%;
    background-color: var(--color-modal-backdrop);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transition-normal), visibility var(--transition-normal);
    overflow: hidden;
}

/* Hidden state */
.modal.modal-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Modal content container */
.modal > .modal-content {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-standard);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Small modal variant */
.modal > .modal-content.small-modal {
    max-width: 400px;
}

/* Close button (X icon) */
.modal-close-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    width: calc(var(--space-xl) + var(--space-sm));
    height: calc(var(--space-xl) + var(--space-sm));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-base);
    color: var(--text-muted);
    transition: color var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--text-primary);
}

/* Close icon styling (two lines forming an X) */
.close-icon {
    position: relative;
    width: var(--text-xl);
    height: var(--text-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-line {
    position: absolute;
    width: var(--text-xl);
    height: 2px;
    background-color: currentColor;
    border-radius: var(--radius-standard);
}

.close-line:nth-child(1) {
    transform: rotate(45deg);
}

.close-line:nth-child(2) {
    transform: rotate(-45deg);
}

/* Modal header (title area) */
.modal > .modal-content > .modal-header {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    box-sizing: border-box;
}

.modal > .modal-content > .modal-header .modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--space-xl) + var(--space-sm));
    height: calc(var(--space-xl) + var(--space-sm));
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.modal > .modal-content > .modal-header .modal-close:hover {
    color: var(--text-primary);
}

.modal > .modal-content h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    padding: var(--space-lg) var(--space-lg) var(--space-md) var(--space-lg);
    text-align: center;
}

/* Modal body (main content) */
.modal .modal-body {
    flex-grow: 1;
    padding: 0 var(--space-lg);
    overflow-y: auto;
    color: var(--text-primary);
}

.modal .modal-body p {
    margin: var(--space-md-dense) 0;
    font-size: var(--text-base);
    line-height: var(--line-height-normal);
}

/* Modal actions (buttons footer) */
.modal .modal-actions {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md-dense);
    border-top: 1px solid var(--bg-tertiary);
}


/* Responsive design */
@media (max-width: 768px) {
    .modal > .modal-content {
        width: 95%;
        max-height: 85vh;
    }

    .modal > .modal-content h2 {
        font-size: var(--text-base);
        padding: var(--text-xl) var(--text-xl) var(--space-md-dense);
    }

    .modal .modal-body {
        padding: 0 var(--text-xl);
    }

    .modal .modal-actions {
        padding: var(--space-md-dense) var(--text-xl) var(--text-xl);
        flex-direction: column-reverse;
    }

    .modal .modal-actions .btn {
        width: 100%;
    }
}

/* Scrollbar styling for modal content */
.modal .modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal .modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.modal .modal-body::-webkit-scrollbar-thumb {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-standard);
}

.modal .modal-body::-webkit-scrollbar-thumb:hover {
    background-color: var(--bg-tertiary);
}

/* Shared bridge rules for standardized custom modals */
#manual-break-timer-modal-overlay {
    background: var(--color-modal-backdrop-strong);
}

#manual-break-timer-modal {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
}

/* Standard modal hardening: additive shell/topbar contracts for JavaScript-moved controls. */
.standard-modal-overlay {
    overflow: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.standard-modal {
    max-height: min(92vh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - var(--space-lg)));
    overflow: hidden;
    overscroll-behavior: contain;
}

.standard-modal.standard-modal-fullscreen {
    max-height: 100dvh;
}

.standard-modal-body,
.modal .modal-body {
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.standard-modal-body--scroll,
.standard-modal-body--overflow-auto,
.standard-modal-fullscreen > .standard-modal-body,
.modal .modal-body {
    overflow-y: auto;
}

.modal-topbar-shell {
    flex: 0 0 auto;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    z-index: var(--z-base);
}

.modal-topbar-shell .modal-header-actions,
.modal-topbar-shell .app-actions {
    position: static;
    inset: auto;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0;
    transform: none;
    width: auto;
    max-width: 100%;
}

.modal-topbar-shell .modal-header-actions {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-topbar-source-hidden {
    display: none !important;
}

.modal-close-btn:focus-visible,
.modal > .modal-content > .modal-header .modal-close:focus-visible,
.modal-topbar-shell .modal-topbar-dismiss:focus-visible,
.modal-topbar-shell .modal-header-actions :focus-visible,
.modal-topbar-shell .app-actions :focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, var(--text-primary));
    outline-offset: var(--focus-ring-offset, 2px);
}

@media (prefers-reduced-motion: reduce) {
    .modal,
    .modal-close-btn,
    .modal > .modal-content > .modal-header .modal-close,
    .standard-modal-overlay,
    .standard-modal,
    .standard-modal.closing,
    .modal-topbar-shell .modal-topbar-dismiss,
    .modal-topbar-shell .modal-header-actions *,
    .modal-topbar-shell .app-actions * {
        animation: none !important;
        transition: none !important;
    }
}