/* ============================================================ Koto dialog — modal/dialog primitive (no Bootstrap). Mirrors the legacy Bootstrap modal lifecycle so callers can replace `new bootstrap.Modal(...)` / `.show()` / `.hide()` with the KotoDialog API. Markup contract: Lifecycle: - KotoDialog.open(elOrId) — adds `is-open`, dispatches `koto:dialog:show` then `koto:dialog:shown`. - KotoDialog.close(elOrId) — removes `is-open`, dispatches `koto:dialog:hide` then `koto:dialog:hidden`. - data-koto-dialog-close — any element with this attribute inside a dialog closes it on click. - data-koto-dialog-open="id"— opens the matching dialog. - data-koto-dialog-static — backdrop click + ESC do not close. ============================================================ */ .koto-dialog { position: fixed; inset: 0; z-index: 9999; display: none; align-items: flex-start; justify-content: center; padding: var(--space-4, 1rem); pointer-events: none; } .koto-dialog.is-open { display: flex; pointer-events: auto; } .koto-dialog-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.18s ease; cursor: pointer; } .koto-dialog.is-open .koto-dialog-backdrop { opacity: 1; } .koto-dialog-panel { position: relative; z-index: 1; width: 100%; max-width: 600px; max-height: calc(100vh - 2 * var(--space-4, 1rem)); margin: var(--space-6, 1.5rem) auto; background: var(--bg-elevated, #ffffff); border-radius: var(--radius-3, 16px); box-shadow: 0 24px 48px rgba(15, 23, 42, 0.18); overflow: hidden; display: flex; flex-direction: column; transform: translateY(-8px) scale(0.98); opacity: 0; transition: transform 0.18s ease, opacity 0.18s ease; } .koto-dialog.is-open .koto-dialog-panel { transform: none; opacity: 1; } /* Variant: large dialog (used by tabletUpdateResponseModal). */ .koto-dialog-panel.koto-dialog-lg { max-width: 800px; } /* Compact dialogs — short forms, help text (e.g. onboarding step 6). */ .koto-dialog-panel.koto-dialog-sm { max-width: 26rem; } /* Variant: centered vertically (default behaviour for short panels). */ .koto-dialog.is-centered { align-items: center; } /* Lock body scroll while a dialog is open. Set on by JS. */ body.koto-dialog-open { overflow: hidden; } /* Allow long modal bodies to scroll within the panel. */ .koto-dialog-panel .modal-body, .koto-dialog-panel > .koto-dialog-body { overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 575.98px) { .koto-dialog { padding: var(--space-2, 0.5rem); } .koto-dialog-panel { margin: 0 auto; max-height: calc(100vh - 2 * var(--space-2, 0.5rem)); } } /* ============================================================ Global reception bits (toast region + refresh notification). Markup lives in templates/_koto_global_reception.html. ============================================================ */ .koto-toast-region { position: fixed; top: 0; right: 0; padding: var(--space-3, 0.75rem); z-index: 9990; pointer-events: none; } .koto-toast-region .toast-container { pointer-events: auto; } .koto-refresh-toast { position: fixed; top: 70px; right: 20px; z-index: 9991; background: rgba(15, 23, 42, 0.78); color: #ffffff; padding: 0.55rem 1rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); } @keyframes koto-spin { to { transform: rotate(360deg); } } .koto-spin { animation: koto-spin 1s linear infinite; } /* ============================================================ Koto toast — used by globalHkAlertsAPI.showGlobalNotification when Bootstrap is not present on the page. ============================================================ */ .koto-toast { pointer-events: auto; display: flex; align-items: center; gap: 0.5rem; min-width: 280px; max-width: 360px; margin-top: var(--space-2, 0.5rem); padding: 0.65rem 0.85rem; border-radius: var(--radius-2, 12px); background: var(--bg-elevated, #ffffff); color: var(--text-primary, #0f172a); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18); border-left: 4px solid var(--accent-info, #2563eb); transition: opacity 0.18s ease, transform 0.18s ease; } .koto-toast--success { border-left-color: var(--accent-success, #16a34a); } .koto-toast--warning { border-left-color: var(--accent-warning, #d97706); } .koto-toast--danger { border-left-color: var(--accent-danger, #dc2626); } .koto-toast--info { border-left-color: var(--accent-info, #2563eb); } .koto-toast--leaving { opacity: 0; transform: translateY(-4px); } .koto-toast__body { flex: 1; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; line-height: 1.3; } .koto-toast__close { background: none; border: 0; color: var(--text-secondary, #475569); font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; } .koto-toast__close:hover { color: var(--text-primary, #0f172a); }