/* ============================================================================
   feedback.css — User-feedback surfaces (alerts, toasts, role/status badges)
   ----------------------------------------------------------------------------
   Extracted from certopact.css so notification + status styling lives in one
   place. Loaded after certopact.css and theme.css by _Layout / _LoginLayout,
   so it inherits the CSS variables declared in certopact.css :root
   (--topnav-h, --paper, --ink, --mid, --line, --gold) and the .btn / .form-*
   theming from theme.css if needed.

   What lives here:
     • Alerts — .alert-danger Bootstrap override.
     • Toasts — fixed top-right TempData stack (.cp-toast-wrap, .cp-toast,
       .cp-toast-icon, .cp-toast-body, .cp-toast-close, success/error/info/
       warning variant border-left colours).
     • Badges — .cp-badge plus role/status colour variants (owner, admin,
       plant, user, active, inactive).
   ============================================================================ */

/* Alerts ---------------------------------------------------------------- */

.alert-danger {
    background-color: #FBECEC;
    border-color: #E4A2A2;
    color: #7A2323;
}

/* Toasts (TempData notifications, centralised in _Layout) --------------- */
/* Fixed top-right stack. SVG icon explicitly sized so it cannot fill the
   viewport when the parent has no width set. Hidden until JS adds
   `.cp-toast-visible` for the slide-in transition. */

.cp-toast-wrap {
    position: fixed;
    top: calc(var(--topnav-h) + 1rem);
    right: 1rem;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(92vw, 380px);
    pointer-events: none;
}

.cp-toast {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background-color: var(--paper);
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(11, 18, 32, 0.08);
    font-size: 0.875rem;
    color: var(--ink);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.cp-toast.cp-toast-visible {
    opacity: 1;
    transform: translateX(0);
}

.cp-toast-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.cp-toast-body {
    flex: 1 1 auto;
    line-height: 1.45;
}

.cp-toast-close {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 0.25rem;
    border: none;
    background: transparent;
    color: var(--mid);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

.cp-toast-close:hover,
.cp-toast-close:focus {
    color: var(--ink);
    background-color: rgba(11, 18, 32, 0.05);
}

.cp-toast--success { border-left-color: #2D7D46; }
.cp-toast--error   { border-left-color: #B04040; }
.cp-toast--info    { border-left-color: #B08840; }
.cp-toast--warning { border-left-color: #D4B271; }

/* Role + status badges -------------------------------------------------- */

.cp-badge {
    display: inline-block;
    padding: 0.2em 0.6em;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 4px;
    font-weight: 500;
}

.cp-badge-owner   { background: #E8F0FF; color: #1B3A8A; }
.cp-badge-admin   { background: #EDF5E8; color: #275218; }
.cp-badge-plant   { background: #F5F0E8; color: #5C4010; }
.cp-badge-user    { background: #F0F0F0; color: #444;    }
.cp-badge-viewer  { background: #EEF2FF; color: #3730A3; }
.cp-badge-active  { background: #E8F5EC; color: #1A6632; }
.cp-badge-inactive{ background: #FCE8E8; color: #7A2323; }

/* "You" / self-marker badge — sits next to the current user's name in lists. */
.cp-badge-self    { background: #F0F0F0; color: #444; margin-left: 4px; }

/* Large badge — used on the Verification Summary page where the status
   needs to read at-a-glance. Use alongside a colour variant, e.g.
   <span class="cp-badge cp-badge-active cp-badge-lg">Verified</span> */
.cp-badge-lg {
    font-size: 1rem;
    padding: 0.55em 1.25em;
    letter-spacing: 0.08em;
}