/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.notice-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(5, 10, 20, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.notice-modal.hidden { display: none; }
.notice-modal-open { overflow: hidden; }
.notice-modal-dialog { width: min(100%, 440px); padding: 24px; }
.notice-modal-level { margin-bottom: 10px; color: #60a5fa; font: 11px ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }
.notice-modal-level[data-level="warning"] { color: #fbbf24; }
.notice-modal-level[data-level="maintenance"] { color: #a78bfa; }
.notice-modal-level[data-level="critical"] { color: #f87171; }
.notice-modal-title { color: #f9fafb; font-size: 20px; font-weight: 600; line-height: 1.35; }
.notice-modal-body { margin-top: 14px; color: #98a2b3; white-space: pre-wrap; font-size: 14px; line-height: 1.7; }
.notice-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.notice-modal-count { color: #667085; font: 11px ui-monospace, monospace; }
.notice-modal-confirm { padding: 9px 18px; border: 1px solid rgba(0, 122, 255, .45); border-radius: 8px; background: #007aff; color: #fff; font-size: 13px; cursor: pointer; }
.notice-modal-confirm:hover { filter: brightness(1.1); }
.notice-modal-confirm:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.participant-panel { display: none; padding: 9px 20px; border-bottom: 1px solid rgba(255,255,255,.08); color: #98a2b3; font: 11px ui-monospace, monospace; }
.participant-panel.is-visible { display: block; }
.participant-label { margin-right: 10px; color: #667085; }
.participant-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.participant-dot { width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; }
.participant-dot.is-ready { background: #10b981; }
.participant-id { color: #f9fafb; }
.participant-state { margin-left: auto; color: #667085; }