/* === Globalny system komunikatow CRM TN2 ===
   Trzy poziomy: critical (modal blokujacy), important (banner sticky), subtle (maly toast).
   Marcin 2026-05-04: srodek ekranu, wyrazne, duze, banner B nie znika sam.
   Lustrzane CRM <-> Zamowienia: te same klasy w obu modulach. */

/* === A. CRITICAL — modal centered z overlay, wymaga OK === */
.tn2-flash-overlay {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(15, 23, 42, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: tn2FlashFadeIn 180ms ease-out;
}
.tn2-flash-modal {
    background: #fff; border-radius: 12px; padding: 32px 40px;
    min-width: 360px; max-width: 560px; max-height: 80vh; overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
    text-align: center;
    animation: tn2FlashScaleIn 220ms ease-out;
    box-sizing: border-box;
}
.tn2-flash-modal--error    { border-top: 6px solid #e11d48; }
.tn2-flash-modal--warning  { border-top: 6px solid #d97706; }
.tn2-flash-modal--info     { border-top: 6px solid #0284c7; }
.tn2-flash-modal--success  { border-top: 6px solid #059669; }
.tn2-flash-modal__icon { font-size: 48px; margin-bottom: 16px; line-height: 1; }
.tn2-flash-modal__message {
    font-size: 18px; line-height: 1.5; color: #1e293b; margin-bottom: 24px;
    word-wrap: break-word; overflow-wrap: anywhere;
}
.tn2-flash-modal__ok {
    background: #0284c7; color: #fff; padding: 12px 36px;
    border-radius: 8px; font-size: 16px; font-weight: 600; border: 0;
    cursor: pointer; transition: background 150ms;
    min-width: 120px;
}
.tn2-flash-modal__ok:hover { background: #0369a1; }
.tn2-flash-modal__ok:focus { outline: 2px solid #0284c7; outline-offset: 2px; }

/* === B. IMPORTANT — banner centered-top, sticky, NIE znika sam (tylko klik X) === */
.tn2-flash-banner {
    position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
    z-index: 9998; min-width: 380px; max-width: 720px;
    padding: 14px 48px 14px 56px; border-radius: 10px;
    font-size: 16px; font-weight: 500; line-height: 1.4;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
    animation: tn2FlashSlideDown 280ms ease-out;
    box-sizing: border-box;
    word-wrap: break-word; overflow-wrap: anywhere;
}
.tn2-flash-banner--success { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.tn2-flash-banner--error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.tn2-flash-banner--warning { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.tn2-flash-banner--info    { background: #e0f2fe; color: #075985; border: 1px solid #7dd3fc; }
.tn2-flash-banner__icon {
    font-size: 20px; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
}
.tn2-flash-banner__close {
    background: transparent; border: 0; font-size: 24px; cursor: pointer;
    color: inherit; opacity: 0.55; padding: 0 4px; line-height: 1;
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
}
.tn2-flash-banner__close:hover { opacity: 1; }

/* Stack — drugi i kolejny banner pod sobą */
.tn2-flash-banner + .tn2-flash-banner { margin-top: 8px; top: auto; }

/* === C. SUBTLE — maly pasek pod topbarem na srodku, znika po 2s === */
/* Marcin 2026-05-04: "nie w prawym dolnym rogu — w widocznym miejscu, na srodku ekranu". */
.tn2-flash-subtle {
    position: fixed; top: 56px; left: 50%; transform: translateX(-50%);
    z-index: 9997;
    background: #166534; color: #fff; padding: 6px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    animation: tn2FlashSlideDown 220ms ease-out;
    max-width: 480px;
    word-wrap: break-word; overflow-wrap: anywhere;
    text-align: center;
}
.tn2-flash-subtle--error   { background: #991b1b; }
.tn2-flash-subtle--warning { background: #92400e; }
.tn2-flash-subtle--info    { background: #075985; }

/* === Animacje === */
@keyframes tn2FlashFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tn2FlashScaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes tn2FlashSlideDown {
    from { transform: translate(-50%, -20px); opacity: 0; }
    to   { transform: translate(-50%, 0); opacity: 1; }
}
.tn2-flash--fading { opacity: 0 !important; transition: opacity 300ms ease-out; }

/* Mobile */
@media (max-width: 640px) {
    .tn2-flash-modal { min-width: 0; width: 100%; padding: 24px 20px; }
    .tn2-flash-banner { left: 8px; right: 8px; transform: none; min-width: 0; max-width: none; }
    .tn2-flash-subtle { left: 8px; right: 8px; transform: none; max-width: none; }
}