/*
 * 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.
 */

: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-amber-50: #fffbeb;
    --srms-amber-100: #fef3c7;
    --srms-amber-600: #d97706;

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

    --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);

    --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;

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


/* ============================================================ 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;

    padding: 14px 14px 15px;

    /* 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;

    background: var(--srms-surface);
    border: 1px solid var(--srms-line);
    border-radius: var(--srms-radius);
    box-shadow: 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: 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;
}

/* --- 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;
}

#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: 2px;

    /* 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;
    background: var(--srms-surface-2);
    color: var(--srms-ink-2);
    border: 1px solid var(--srms-line);
}

#srms-toast-container .srms-toast[data-count]:not([data-count="1"]) .srms-toast-count {
    display: inline-block;
}

/* --- close --- */

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

    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    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-2);
}

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

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

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

    border: 1px solid var(--srms-line);
    border-radius: var(--srms-radius-sm);
    background: var(--srms-surface);
    color: 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;
}

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

/* --- timer bar --- */

#srms-toast-container .srms-toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;

    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); }
}

/* --- per-type accents --- */

#srms-toast-container .srms-toast.success .srms-toast-icon { background: var(--srms-green-50);  color: var(--srms-green-600); }
#srms-toast-container .srms-toast.error   .srms-toast-icon { background: var(--srms-red-50);    color: var(--srms-red-600); }
#srms-toast-container .srms-toast.warning .srms-toast-icon { background: var(--srms-amber-50);  color: var(--srms-amber-600); }
#srms-toast-container .srms-toast.info    .srms-toast-icon { background: var(--srms-blue-50);   color: var(--srms-blue-600); }

#srms-toast-container .srms-toast.success .srms-toast-progress { background: var(--srms-green-600); }
#srms-toast-container .srms-toast.error   .srms-toast-progress { background: var(--srms-red-600); }
#srms-toast-container .srms-toast.warning .srms-toast-progress { background: var(--srms-amber-600); }
#srms-toast-container .srms-toast.info    .srms-toast-progress { background: var(--srms-blue-600); }

@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;
    }
}


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

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

/* Blur the page behind the dialog. Applied to the backdrop rather than the
   page so no wrapper element is required. */
@supports (backdrop-filter: blur(2px)) {
    .modal-backdrop.show {
        opacity: 0.55;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

.modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: var(--srms-shadow-modal);
    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. */
.modal.fade .modal-dialog {
    transform: scale(0.96) translateY(-6px);
    transition: transform 0.28s var(--srms-ease-spring), opacity 0.2s 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;
}

.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;
}

/* 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;
}

/* --- 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">. */
.modal-content.modal-accent::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--srms-blue-600);
}

.modal-content.modal-accent.danger::before  { background: var(--srms-red-600); }
.modal-content.modal-accent.success::before { background: var(--srms-green-600); }
.modal-content.modal-accent.warning::before { background: var(--srms-amber-600); }

@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;
    }
}


/* ================================================== 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.show {
    opacity: 1;
}

.srms-dialog {
    width: 100%;
    max-width: 420px;

    background: var(--srms-surface);
    border-radius: var(--srms-radius-lg);
    box-shadow: var(--srms-shadow-modal);
    overflow: hidden;

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

.srms-dialog-backdrop.show .srms-dialog {
    transform: scale(1);
}

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

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

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

.srms-dialog-title {
    font-size: 15.5px;
    font-weight: 600;
    color: var(--srms-ink);
    letter-spacing: -0.01em;
}

.srms-dialog-message {
    margin-top: 5px;
    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;
}

/* 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-ring, var(--srms-blue-600));
    outline-offset: 2px;
}

.srms-dialog.danger  { --srms-ring: var(--srms-red-600); }
.srms-dialog.warning { --srms-ring: var(--srms-amber-600); }
.srms-dialog.success { --srms-ring: var(--srms-green-600); }

.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-blue-600);
    color: #fff;
}

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

.srms-dialog.danger  .srms-dialog-icon { background: var(--srms-red-50);   color: var(--srms-red-600); }
.srms-dialog.warning .srms-dialog-icon { background: var(--srms-amber-50); color: var(--srms-amber-600); }
.srms-dialog.info    .srms-dialog-icon { background: var(--srms-blue-50);  color: var(--srms-blue-600); }
.srms-dialog.success .srms-dialog-icon { background: var(--srms-green-50); color: var(--srms-green-600); }

.srms-dialog.danger  .srms-dialog-btn.confirm { background: var(--srms-red-600); }
.srms-dialog.danger  .srms-dialog-btn.confirm:hover { background: #b91c1c; }
.srms-dialog.warning .srms-dialog-btn.confirm { background: var(--srms-amber-600); }
.srms-dialog.warning .srms-dialog-btn.confirm:hover { background: #b45309; }


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

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

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

    .srms-toast,
    .srms-toast.show {
        transform: 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 {
        display: none;
    }
}