/*
 * SRMS UI — shared design system for global toasts and modals
 * ===========================================================
 *
 * Replaces the ~340 lines of toast CSS that used to live inline in
 * views/includes/head.php, and adds the first shared modal design in the
 * codebase (previously every view styled .modal-* on its own — 105 distinct
 * declaration bodies across 130 views).
 *
 * SPECIFICITY CONTRACT — important.
 * Modal rules here deliberately stay at single-class specificity with no
 * !important. Views carry their own <style> blocks that appear later in the
 * document, so any view that already styles its modals keeps winning and keeps
 * its current look. This sheet upgrades the ~175 views that never styled theirs,
 * and gives new work something to build on. Nothing existing breaks.
 *
 * Tokens are --srms-* prefixed on purpose: ~190 views define their own bare
 * --primary / --border / --surface-2 in local :root blocks, and we must not
 * collide with those.
 *
 * ACCENT CONTRACT.
 * Every themed surface (toast, dialog, modal accent bar) resolves its colour
 * from four locally-scoped variables rather than from a per-type rule for each
 * part: --srms-accent (the saturated colour), --srms-accent-strong (its pressed
 * state), --srms-accent-tint (the chip fill) and --srms-accent-line (a low-alpha
 * hairline/track). One `.success` / `.error` / `.warning` / `.info` block sets
 * all four; everything downstream is type-agnostic. Adding a fifth type means
 * adding one block, not eight.
 */

:root {
    /* ---- palette: matches the values ~93% of views already copy-paste ---- */
    --srms-blue-50: #eff6ff;
    --srms-blue-100: #dbeafe;
    --srms-blue-600: #2563eb;
    --srms-blue-700: #1d4ed8;

    --srms-green-50: #ecfdf5;
    --srms-green-100: #d1fae5;
    --srms-green-600: #059669;
    --srms-green-700: #047857;

    --srms-amber-50: #fffbeb;
    --srms-amber-100: #fef3c7;
    --srms-amber-600: #d97706;
    --srms-amber-700: #b45309;

    --srms-red-50: #fef2f2;
    --srms-red-100: #fee2e2;
    --srms-red-600: #dc2626;
    --srms-red-700: #b91c1c;

    --srms-ink: #0f172a;
    --srms-ink-2: #475569;
    --srms-ink-3: #94a3b8;

    --srms-surface: #ffffff;
    --srms-surface-2: #f8fafc;
    --srms-line: #e2e8f0;

    /* ---- shape ---- */
    --srms-radius-sm: 8px;
    --srms-radius: 12px;
    --srms-radius-lg: 16px;

    /* ---- elevation: layered, low-alpha; one soft ambient + one tight contact ---- */
    --srms-shadow-toast:
        0 12px 32px -12px rgba(15, 23, 42, 0.28),
        0 4px 10px -6px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(15, 23, 42, 0.04);
    --srms-shadow-toast-hover:
        0 18px 44px -14px rgba(15, 23, 42, 0.34),
        0 6px 14px -8px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(15, 23, 42, 0.06);
    --srms-shadow-modal:
        0 32px 64px -20px rgba(15, 23, 42, 0.38),
        0 12px 24px -12px rgba(15, 23, 42, 0.22);
    /* Pressed/raised state for the one filled button in a dialog footer. */
    --srms-shadow-btn: 0 1px 2px rgba(15, 23, 42, 0.12);

    --srms-font: "Geist", "Instrument Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif;

    --srms-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* Sits below the 70px topbar. Anchored right, so unlike the old centred
       container it never depends on the sidebar width. */
    --srms-toast-top: 86px;
    --srms-toast-right: 20px;
    --srms-toast-width: 380px;

    /* Width of the coloured rail down the leading edge of a toast. */
    --srms-rail: 3px;

    --srms-z-toast: 1080;
    /* above Bootstrap's .modal (1050) so toasts are visible over dialogs */
    --srms-z-dialog: 1090;
}


/* ================================================== ACCENT SETS ========= */
/* Applies to toasts and to the confirm dialog alike — both use the same type
   class names, so one selector list covers both. `danger` is the dialog's name
   for `error`. */

.srms-toast.success,
.srms-dialog.success {
    --srms-accent: var(--srms-green-600);
    --srms-accent-strong: var(--srms-green-700);
    --srms-accent-tint: var(--srms-green-50);
    --srms-accent-line: rgba(5, 150, 105, 0.18);
}

.srms-toast.error,
.srms-dialog.danger {
    --srms-accent: var(--srms-red-600);
    --srms-accent-strong: var(--srms-red-700);
    --srms-accent-tint: var(--srms-red-50);
    --srms-accent-line: rgba(220, 38, 38, 0.18);
}

.srms-toast.warning,
.srms-dialog.warning {
    --srms-accent: var(--srms-amber-600);
    --srms-accent-strong: var(--srms-amber-700);
    --srms-accent-tint: var(--srms-amber-50);
    --srms-accent-line: rgba(217, 119, 6, 0.18);
}

.srms-toast.info,
.srms-dialog.info {
    --srms-accent: var(--srms-blue-600);
    --srms-accent-strong: var(--srms-blue-700);
    --srms-accent-tint: var(--srms-blue-50);
    --srms-accent-line: rgba(37, 99, 235, 0.18);
}


/* ============================================================ TOASTS ==== */

#srms-toast-container {
    position: fixed;
    top: var(--srms-toast-top);
    right: var(--srms-toast-right);
    z-index: var(--srms-z-toast);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    width: var(--srms-toast-width);
    max-width: calc(100vw - 32px);

    /* Container ignores clicks; individual toasts opt back in. */
    pointer-events: none;
    font-family: var(--srms-font);
}

/* Pages with no app topbar (login / landing). Set by srms-ui.js when no
   .navbar-custom is present, so the stack does not float below an empty gap. */
#srms-toast-container.bare {
    top: 20px;
}

#srms-toast-container .srms-toast {
    pointer-events: auto;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 26px;
    align-items: start;
    column-gap: 12px;

    /* Extra leading padding leaves the rail its own margin instead of running
       under the icon chip. */
    padding: 14px 14px 15px 16px;

    /* A generous upper bound, not a real size — max-height must have a starting
       value for the .hide collapse below to animate rather than snap. */
    max-height: 400px;

    /* Swipe-to-dismiss owns the horizontal axis; the browser keeps vertical
       scrolling, so a toast over a long page never traps the scroll. */
    touch-action: pan-y;

    background: var(--srms-surface);
    border: 1px solid var(--srms-line);
    border-radius: var(--srms-radius);

    /* The rail is an inset shadow rather than a border-left or a pseudo-element:
       a border would shift the grid, and a pseudo-element inside a grid
       container becomes a grid item. */
    box-shadow:
        inset var(--srms-rail) 0 0 var(--srms-accent, transparent),
        var(--srms-shadow-toast);

    /* Entrance/exit are driven by these two properties only, so the collapse
       transition below can own height/margin without fighting them. */
    opacity: 0;
    transform: translateX(calc(100% + var(--srms-toast-right)));
    transition:
        opacity 0.22s ease,
        transform 0.42s var(--srms-ease-spring),
        box-shadow 0.2s ease;
}

#srms-toast-container .srms-toast.show {
    opacity: 1;
    transform: translateX(0);
}

#srms-toast-container .srms-toast:hover {
    box-shadow:
        inset var(--srms-rail) 0 0 var(--srms-accent, transparent),
        var(--srms-shadow-toast-hover);
}

/* Exit: slide out, then collapse the row so the stack closes the gap smoothly
   instead of snapping. max-height is a generous upper bound, not a real size. */
#srms-toast-container .srms-toast.hide {
    opacity: 0;
    transform: translateX(calc(100% + var(--srms-toast-right)));
    max-height: 0;
    margin-bottom: -10px;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
    transition:
        opacity 0.18s ease,
        transform 0.32s ease,
        max-height 0.32s ease 0.06s,
        margin 0.32s ease 0.06s,
        padding 0.32s ease 0.06s,
        border-width 0.32s ease 0.06s;
}

/* Swipe-to-dismiss (srms-ui.js). While a finger/pointer is down the transform
   is written frame by frame, so it must not be transitioned; the fade tracks
   the drag distance via the inline --srms-drag-fade the script sets. */
#srms-toast-container .srms-toast.dragging {
    transition: none;
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
    opacity: var(--srms-drag-fade, 1);
}

/* --- icon chip --- */

#srms-toast-container .srms-toast-icon {
    grid-row: 1 / span 2;
    width: 34px;
    height: 34px;
    border-radius: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;
    line-height: 1;

    /* Tint fill plus a hairline of the same hue: the ring keeps the chip
       legible on the pale tints (amber-50 is barely off-white). */
    background: var(--srms-accent-tint, var(--srms-surface-2));
    color: var(--srms-accent, var(--srms-ink-2));
    box-shadow: inset 0 0 0 1px var(--srms-accent-line, transparent);
}

#srms-toast-container .srms-toast-content {
    min-width: 0;
    padding-top: 1px;
}

#srms-toast-container .srms-toast-title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--srms-ink);
    letter-spacing: -0.01em;
}

#srms-toast-container .srms-toast-message {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--srms-ink-2);
    margin-top: 3px;

    /* Long server messages must not grow the toast without bound. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

#srms-toast-container .srms-toast-title + .srms-toast-message:empty {
    display: none;
}

/* --- repeat counter: shown instead of stacking an identical toast --- */

#srms-toast-container .srms-toast-count {
    display: none;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    vertical-align: middle;

    /* Tinted to the toast type so the counter reads as part of the same object
       rather than as a neutral chip that happens to sit there. */
    background: var(--srms-accent-tint, var(--srms-surface-2));
    color: var(--srms-accent-strong, var(--srms-ink-2));
    border: 1px solid var(--srms-accent-line, var(--srms-line));
}

#srms-toast-container .srms-toast[data-count]:not([data-count="1"]) .srms-toast-count {
    display: inline-block;
    animation: srms-count-pop 0.32s var(--srms-ease-spring);
}

@keyframes srms-count-pop {
    0%   { transform: scale(0.6); }
    60%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* --- close --- */

#srms-toast-container .srms-toast-close {
    grid-column: 3;
    grid-row: 1;

    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--srms-ink-3);

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#srms-toast-container .srms-toast-close:hover {
    background: var(--srms-surface-2);
    color: var(--srms-ink);
}

#srms-toast-container .srms-toast-close:focus-visible {
    outline: 2px solid var(--srms-accent, var(--srms-blue-600));
    outline-offset: 1px;
}

/* --- action link --- */

#srms-toast-container .srms-toast-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 10px;
    padding: 5px 11px;

    /* The action is the point of the toast when there is one, so it carries the
       type colour instead of the neutral outline it used to have. */
    border: 1px solid var(--srms-accent-line, var(--srms-line));
    border-radius: var(--srms-radius-sm);
    background: var(--srms-accent-tint, var(--srms-surface));
    color: var(--srms-accent-strong, var(--srms-ink));

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#srms-toast-container .srms-toast-action:hover {
    background: var(--srms-accent, var(--srms-surface-2));
    border-color: var(--srms-accent, var(--srms-ink-3));
    color: #fff;
}

#srms-toast-container .srms-toast-action:focus-visible {
    outline: 2px solid var(--srms-accent, var(--srms-blue-600));
    outline-offset: 2px;
}

/* --- timer bar --- */
/* The track (::after) is the full-width hairline the bar drains along; without
   it a half-drained bar just looks like a short stray line. Absolutely
   positioned, so it stays out of the grid. */

#srms-toast-container .srms-toast::after {
    content: '';
    position: absolute;
    /* Starts after the rail so the two do not stack into a thick corner blob. */
    left: var(--srms-rail);
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--srms-accent-line, transparent);
    opacity: 0.55;
}

#srms-toast-container .srms-toast.no-timer::after {
    display: none;
}

#srms-toast-container .srms-toast-progress {
    position: absolute;
    left: var(--srms-rail);
    bottom: 0;
    height: 3px;
    width: calc(100% - var(--srms-rail));
    z-index: 1;

    background: var(--srms-accent, var(--srms-ink-3));
    border-radius: 0 2px 2px 0;

    transform-origin: left center;
    transform: scaleX(1);
    opacity: 0.9;
}

#srms-toast-container .srms-toast-progress.run {
    animation: srms-toast-drain linear forwards;
}

/* Hovering holds the toast open — you cannot read a message that is busy
   expiring while you reach for it. */
#srms-toast-container .srms-toast:hover .srms-toast-progress.run {
    animation-play-state: paused;
}

@keyframes srms-toast-drain {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* --- clear-all pill: added by srms-ui.js once 3+ toasts are live --- */
/* order:-1 puts it above the stack on desktop; the mobile container is
   column-reverse, so the same value drops it to the bottom, within thumb
   reach and below the messages. */

#srms-toast-container .srms-toast-clearall {
    order: -1;
    pointer-events: auto;
    flex: 0 0 auto;

    padding: 5px 12px;
    border: 1px solid var(--srms-line);
    border-radius: 999px;
    background: var(--srms-surface);
    color: var(--srms-ink-2);
    box-shadow: var(--srms-shadow-toast);

    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;

    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.28s var(--srms-ease-spring),
        background-color 0.15s ease, color 0.15s ease;
}

#srms-toast-container .srms-toast-clearall.show {
    opacity: 1;
    transform: none;
}

#srms-toast-container .srms-toast-clearall:hover {
    background: var(--srms-ink);
    border-color: var(--srms-ink);
    color: #fff;
}

#srms-toast-container .srms-toast-clearall:focus-visible {
    outline: 2px solid var(--srms-blue-600);
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    #srms-toast-container {
        top: auto;
        bottom: 16px;
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        align-items: stretch;
        flex-direction: column-reverse;
    }

    /* Bottom-anchored on phones, so it slides up rather than in from the side. */
    #srms-toast-container .srms-toast {
        transform: translateY(calc(100% + 16px));
    }

    #srms-toast-container .srms-toast.show { transform: translateY(0); }

    #srms-toast-container .srms-toast.hide {
        transform: translateY(calc(100% + 16px));
        margin-bottom: 0;
        margin-top: -10px;
    }

    #srms-toast-container .srms-toast-clearall {
        align-self: center;
        transform: translateY(4px);
    }
}


/* ============================================================= MODALS ==== */

.modal-backdrop.show {
    background-color: #0f172a;
    opacity: 0.6;
}

/* backdrop-filter: blur() was here and was the single biggest cause of modal
   lag across the app. It forces the compositor to re-rasterize everything
   behind the backdrop on every frame during the modal fade-in, which on
   DOM-heavy pages (SOA, enrollment, etc.) added a visible delay between
   clicking a trigger and the dialog becoming interactive. The backdrop is
   still a dark semi-transparent fill, so the visual difference is minimal. */

.modal-content {
    border: 0;
    border-radius: 20px;
    /* Hairline ring inside the shadow keeps the white dialog defined against a
       light page, where the ambient shadow alone is nearly invisible. */
    box-shadow: var(--srms-shadow-modal), 0 0 0 1px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    font-family: var(--srms-font);
    color: var(--srms-ink-2);
}

/* Bootstrap 4 animates .modal.fade .modal-dialog with translate(0,-50px).
   Scale+fade reads as the dialog belonging to the page rather than dropping
   onto it.

   Duration is deliberately short. --srms-ease-spring is an ease-out-quint: it
   covers most of the distance early and then has a long, slow tail. Bootstrap
   does not fire shown.bs.modal — and so does not move focus or let the dialog
   be interacted with — until the transition ENDS, so a 0.28s curve left the
   modal looking settled but feeling unresponsive for another ~150ms. That gap
   is what reads as "the modal lags". 0.16s keeps the same motion, minus the
   dead tail. Raise it here if the motion needs to be softer again. */
.modal.fade .modal-dialog {
    transform: scale(0.96) translateY(-6px);
    transition: transform 0.16s var(--srms-ease-spring), opacity 0.12s ease;
    opacity: 0;
}

.modal.show .modal-dialog {
    transform: none;
    opacity: 1;
}

/* --- header ---------------------------------------------------------------
   No divider rule. The body carries the separation via whitespace instead,
   which is what makes the dialog read as one surface rather than three
   stacked bands. */
.modal-header {
    align-items: flex-start;
    padding: 24px 26px 14px;
    background: var(--srms-surface);
    border-bottom: 0;
}

.modal-title {
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
    color: var(--srms-ink);
    letter-spacing: -0.02em;
}

/* Optional supporting line: <p class="modal-subtitle"> inside .modal-header */
.modal-subtitle {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--srms-ink-3);
    font-weight: 400;
}

/* Optional leading chip: <div class="modal-icon"><i class="ph ph-x"></i></div>
   as the first child of .modal-header. Inherits the accent set by
   .modal-content.modal-accent.<type>, and falls back to neutral without one. */
.modal-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: 14px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;

    background: var(--srms-accent-tint, var(--srms-surface-2));
    color: var(--srms-accent, var(--srms-ink-2));
    box-shadow: inset 0 0 0 1px var(--srms-accent-line, var(--srms-line));
}

.modal-header .close {
    width: 34px;
    height: 34px;
    padding: 0;
    margin: -4px -6px 0 auto;
    flex: 0 0 auto;

    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--srms-ink-3);

    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    text-shadow: none;
    opacity: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.modal-header .close:hover {
    background: var(--srms-surface-2);
    color: var(--srms-ink);
    opacity: 1;
}

.modal-header .close:focus-visible {
    outline: 2px solid var(--srms-blue-600);
    outline-offset: 1px;
}

.modal-body {
    padding: 4px 26px 24px;
    font-size: 14px;
    line-height: 1.65;
}

/* A modal with no header still needs breathing room at the top. */
.modal-content > .modal-body:first-child {
    padding-top: 26px;
}

/* --- footer ---------------------------------------------------------------
   Tinted and hairlined so the action row reads as a distinct commit zone. */
.modal-footer {
    padding: 16px 26px;
    gap: 10px;
    background: var(--srms-surface-2);
    border-top: 1px solid var(--srms-line);
}

/* Bootstrap 4 spaces footer buttons with margins on every child; the gap above
   handles it, so drop the margins to avoid doubling the space. */
.modal-footer > * {
    margin: 0;
}

/* Give footer actions real presence. Kept to .modal-footer .btn (0,2,0) with no
   !important, so a view's own button styling still wins. */
.modal-footer .btn {
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    box-shadow: none;
    transition: transform 0.12s ease, filter 0.15s ease, background-color 0.15s ease;
}

/* A 1px dip on press — the whole reason a button feels like a button. */
.modal-footer .btn:active {
    transform: translateY(1px);
}

.modal-footer .btn:focus-visible {
    outline: 2px solid var(--srms-blue-600);
    outline-offset: 2px;
    box-shadow: none;
}

/* Keep chrome pinned while only the body scrolls. */
.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
    flex-shrink: 0;
}

/* When the body scrolls, the flat header needs a divider back — otherwise the
   scrolled content collides with the title. */
.modal-dialog-scrollable .modal-header {
    border-bottom: 1px solid var(--srms-line);
    padding-bottom: 18px;
}

.modal-dialog-scrollable .modal-body {
    padding-top: 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--srms-ink-3) transparent;
}

/* The default WebKit scrollbar is a wide grey slab against a 20px-radius
   dialog; slim it to match. */
.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
    width: 10px;
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background-clip: content-box;
    background-color: var(--srms-line);
}

.modal-dialog-scrollable .modal-body:hover::-webkit-scrollbar-thumb {
    background-color: var(--srms-ink-3);
}

/* --- accent variants (opt-in) ---------------------------------------------
   Add .modal-accent + a type to .modal-content for a coloured top edge, e.g.
   <div class="modal-content modal-accent danger">. The type also feeds
   .modal-icon, so header chip and edge always agree. */
.modal-content.modal-accent {
    --srms-accent: var(--srms-blue-600);
    --srms-accent-strong: var(--srms-blue-700);
    --srms-accent-tint: var(--srms-blue-50);
    --srms-accent-line: rgba(37, 99, 235, 0.18);
}

.modal-content.modal-accent.danger {
    --srms-accent: var(--srms-red-600);
    --srms-accent-strong: var(--srms-red-700);
    --srms-accent-tint: var(--srms-red-50);
    --srms-accent-line: rgba(220, 38, 38, 0.18);
}

.modal-content.modal-accent.success {
    --srms-accent: var(--srms-green-600);
    --srms-accent-strong: var(--srms-green-700);
    --srms-accent-tint: var(--srms-green-50);
    --srms-accent-line: rgba(5, 150, 105, 0.18);
}

.modal-content.modal-accent.warning {
    --srms-accent: var(--srms-amber-600);
    --srms-accent-strong: var(--srms-amber-700);
    --srms-accent-tint: var(--srms-amber-50);
    --srms-accent-line: rgba(217, 119, 6, 0.18);
}

/* Fades out toward the right rather than terminating flat at the corner. */
.modal-content.modal-accent::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--srms-accent) 0%,
        var(--srms-accent) 55%,
        var(--srms-accent-line) 100%
    );
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 12px;
    }

    .modal-header {
        padding: 20px 18px 12px;
    }

    .modal-body {
        padding: 4px 18px 20px;
    }

    .modal-footer {
        padding: 14px 18px;
    }

    .modal-icon {
        width: 36px;
        height: 36px;
        font-size: 18px;
        margin-right: 12px;
    }
}


/* ================================================== CONFIRM DIALOG ====== */
/* Self-contained (no Bootstrap JS dependency) so SrmsNotify.confirm() works on
   any page. Shares the modal tokens above. */

.srms-dialog-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--srms-z-dialog);

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    background: rgba(15, 23, 42, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
    font-family: var(--srms-font);
}

.srms-dialog-backdrop {
    background: rgba(15, 23, 42, 0.5);
}

.srms-dialog-backdrop.show {
    opacity: 1;
}

.srms-dialog {
    /* Neutral-blue default so an unrecognised type still renders a complete
       dialog rather than a colourless one. The .danger/.warning/... sets above
       are (0,2,0) and win wherever they apply. */
    --srms-accent: var(--srms-blue-600);
    --srms-accent-strong: var(--srms-blue-700);
    --srms-accent-tint: var(--srms-blue-50);
    --srms-accent-line: rgba(37, 99, 235, 0.18);

    width: 100%;
    max-width: 420px;

    background: var(--srms-surface);
    border-radius: var(--srms-radius-lg);
    box-shadow: var(--srms-shadow-modal), 0 0 0 1px rgba(15, 23, 42, 0.06);
    overflow: hidden;

    transform: scale(0.96) translateY(-4px);
    transition: transform 0.26s var(--srms-ease-spring);
}

.srms-dialog-backdrop.show .srms-dialog {
    transform: none;
}

/* Same coloured top edge as .modal-accent, so a confirm and a Bootstrap modal
   of the same severity read as the same family. */
.srms-dialog::before {
    content: '';
    display: block;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--srms-accent) 0%,
        var(--srms-accent) 55%,
        var(--srms-accent-line) 100%
    );
}

.srms-dialog-body {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 22px 20px;
}

.srms-dialog-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;

    background: var(--srms-accent-tint, var(--srms-surface-2));
    color: var(--srms-accent, var(--srms-ink-2));
    box-shadow: inset 0 0 0 1px var(--srms-accent-line, transparent);
}

.srms-dialog-title {
    font-size: 16px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--srms-ink);
    letter-spacing: -0.015em;
}

.srms-dialog-message {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--srms-ink-2);
    overflow-wrap: anywhere;
}

.srms-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px;
    background: var(--srms-surface-2);
    border-top: 1px solid var(--srms-line);
}

.srms-dialog-btn {
    padding: 8px 16px;
    border-radius: var(--srms-radius-sm);
    border: 1px solid transparent;

    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease,
        color 0.15s ease, transform 0.12s ease;
}

.srms-dialog-btn:active {
    transform: translateY(1px);
}

/* The confirm button is focused on open, so this ring is the one users see.
   It tracks the dialog variant — a blue ring around a red destructive button
   reads as a mismatch. */
.srms-dialog-btn:focus-visible {
    outline: 2px solid var(--srms-accent, var(--srms-blue-600));
    outline-offset: 2px;
}

.srms-dialog-btn.cancel {
    background: var(--srms-surface);
    border-color: var(--srms-line);
    color: var(--srms-ink-2);
}

.srms-dialog-btn.cancel:hover {
    background: var(--srms-surface-2);
    border-color: var(--srms-ink-3);
    color: var(--srms-ink);
}

.srms-dialog-btn.confirm {
    background: var(--srms-accent, var(--srms-blue-600));
    color: #fff;
    box-shadow: var(--srms-shadow-btn);
}

.srms-dialog-btn.confirm:hover {
    background: var(--srms-accent-strong, var(--srms-blue-700));
}

/* Busy state: set by srms-ui.js when onConfirm returns a promise, so a slow
   delete cannot be double-fired and the dialog does not sit there looking
   unresponsive. */
.srms-dialog-btn[disabled] {
    cursor: default;
    opacity: 0.75;
    transform: none;
}

.srms-dialog-btn.is-busy {
    position: relative;
    color: transparent;
}

.srms-dialog-btn.is-busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;

    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: srms-spin 0.6s linear infinite;
}

@keyframes srms-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
    .srms-dialog-body {
        padding: 20px 18px 18px;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 12px;
    }

    .srms-dialog-icon {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }

    .srms-dialog-footer {
        padding: 12px 18px;
    }

    /* Thumb-sized targets, and the destructive action stays on the right where
       it was on desktop. */
    .srms-dialog-btn {
        flex: 1 1 0;
        padding: 11px 16px;
    }
}


/* ================================================ REDUCED MOTION ======== */

@media (prefers-reduced-motion: reduce) {

    .srms-toast,
    .srms-toast.hide,
    .srms-toast-clearall,
    .modal.fade .modal-dialog,
    .srms-dialog,
    .srms-dialog-backdrop {
        transition-duration: 0.01ms !important;
    }

    .srms-toast,
    .srms-toast.show,
    .srms-toast-clearall.show {
        transform: none !important;
    }

    .srms-toast-count,
    .srms-dialog-btn.is-busy::after {
        animation: none !important;
    }

    /* Dismissal is driven by a JS timer, not this animation, so hiding the
       draining bar removes the motion without affecting behaviour. */
    .srms-toast-progress,
    .srms-toast::after {
        display: none;
    }
}


/* ========================================================== PRINT ======= */
/* This portal prints a lot — TOR, SPR, SAR, COR, ledgers. A toast or a confirm
   left on screen would otherwise land in the middle of an official document. */

@media print {

    #srms-toast-container,
    .srms-dialog-backdrop,
    .modal-backdrop {
        display: none !important;
    }
}