/*
   Toast styling, lifted out of the inline <style> block in Views/Shared/_Layout.cshtml when the
   presence toast stopped being the only toast. The original "Online now" rules are unchanged; the
   .at-warn / .at-block variants below are new.

   Selectors moved from "#presence-toast ..." to ".app-toast ..." because there is now more than one
   toast on screen at a time. The presence toast keeps its id so anything that looked for it still
   finds it.
*/

#app-toasts {
    position: fixed;
    top: 55px;
    left: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* The stack itself must not swallow clicks on the page behind it; the toasts re-enable them. */
    pointer-events: none;
    max-width: 360px;
}

.app-toast {
    pointer-events: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-left: 4px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    padding: 10px 32px 10px 14px;
    min-width: 140px;
    font-size: 13px;
    position: relative;
}

.app-toast .pt-header {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 6px;
    letter-spacing: .5px;
}

.app-toast .pt-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    font-size: 16px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.app-toast .pt-close:hover { color: #333; }

.app-toast .pt-user {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 2px 0;
    color: #333;
}

.app-toast .pt-dot {
    width: 8px;
    height: 8px;
    background: #28a745;
    border-radius: 50%;
    flex-shrink: 0;
}

.app-toast .pt-line {
    color: #333;
    padding: 2px 0;
    line-height: 1.45;
}

/* The instruction line. Rendered in a different weight because it is the part the reader is
   supposed to act on - a toast that only reports a state leaves them stuck. */
.app-toast .pt-todo {
    color: #444;
    padding: 6px 0 2px;
    line-height: 1.45;
    border-top: 1px solid #eee;
    margin-top: 6px;
}

.app-toast .pt-todo strong { color: #222; }

.app-toast .pt-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.app-toast .pt-action {
    background: #f6f6f6;
    border: 1px solid #d5d5d5;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
    color: #333;
}

.app-toast .pt-action:hover { background: #ececec; }

/* Amber: something is happening that limits what you can do, but nothing has gone wrong. */
.app-toast.at-warn {
    border-left-color: #f0ad4e;
    background: #fffaf2;
}

.app-toast.at-warn .pt-header { color: #a06612; }

/* Red: you tried to do something and were refused. */
.app-toast.at-block {
    border-left-color: #d9534f;
    background: #fdf6f6;
}

.app-toast.at-block .pt-header { color: #a94442; }

/* Blue: you are the one holding the lock - informational, so nobody reads "busy" as someone
   else's fault. */
.app-toast.at-info {
    border-left-color: #5bc0de;
    background: #f6fbfd;
}

.app-toast.at-info .pt-header { color: #31708f; }