/* UI states shared by the admin pages (login, dashboard, users,
   reset-password): loading spinners, busy buttons and toast notifications.
   Linked as /static/admin_ui.css; the behaviour is in admin_ui.js. */

/* ── Spinners and busy buttons ─────────────────────────────────────────── */

/* Ring spinner. Default: 40px in the OCHS blues, for a loading card. */
.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #d8ebf7;
    border-top-color: #223268;
    border-radius: 50%;
    animation: spinner-turn 0.8s linear infinite;
    flex-shrink: 0;
    box-sizing: border-box;
}

.spinner-sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
    vertical-align: -3px;
}

/* A button in flight: spinner + label, no clicks, no hover lift. */
.is-busy,
button.is-busy:disabled,
a.is-busy {
    cursor: progress;
    opacity: 0.85;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* Inside a button the ring is drawn from the text colour, so it works on
   the blue gradient buttons and on the white outline buttons alike. */
.is-busy .spinner {
    border-color: currentColor;
    border-top-color: transparent;
    margin-right: 8px;
}

/* Centered card for a longer wait (the dashboard analysis). */
.loading-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: #223268;
}

.loading-card .spinner {
    display: block;
    margin: 0 auto 16px;
}

.loading-card h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
}

.loading-card p {
    margin: 0;
    color: #666;
    font-size: 14px;
}

/* Small spinner + text beside a control ("Loading branches..."). */
.inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #555;
}

.inline-loading[hidden] {
    display: none;
}

/* Placeholder row while a table's rows are being fetched. */
tr.loading-row td {
    text-align: center;
    padding: 24px 8px;
}

@keyframes spinner-turn {
    to { transform: rotate(360deg); }
}

@keyframes spinner-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ── Toast notifications ───────────────────────────────────────────────── */

/* Fixed stack in the bottom-right corner; newest toast on top. */
.toast-stack {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    width: min(380px, calc(100vw - 24px));
    pointer-events: none;   /* the gaps let clicks through */
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 5px solid #223268;
    background: #ffffff;
    color: #223268;
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    animation: toast-in 0.25s ease-out;
}

.toast-success { border-left-color: #2e8b57; }
.toast-error   { border-left-color: #dc3545; }

.toast-message {
    flex: 1;
    overflow-wrap: anywhere;
}

.toast-close {
    flex-shrink: 0;
    border: 0;
    background: none;
    color: #666;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    margin: -3px -4px 0 0;
}

.toast-close:hover {
    color: #223268;
}

.toast.toast-leaving {
    animation: toast-out 0.2s ease-in forwards;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateX(24px); }
}

/* Narrow screens: span the width and sit above the fixed footer. */
@media (max-width: 600px) {
    .toast-stack {
        left: 12px;
        right: 12px;
        bottom: 64px;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: spinner-pulse 1.2s ease-in-out infinite;
    }

    .toast,
    .toast.toast-leaving {
        animation: none;
    }
}