/* ════════════════════════════════════════════════════════════════════════
   ILMS Enterprise — Global UI element styles
   Loaded by EVERY layout (app / blank / landing) BEFORE the layout-specific
   stylesheet. app.js injects these elements (toasts, loader bar, loader
   overlay, confirm modal) into the DOM on every page — without this file
   they render unstyled and break the page layout (login-card shift bug).
   Self-contained: every design token has a literal fallback so this file
   works even when app.css is not loaded (blank/landing layouts).
   ════════════════════════════════════════════════════════════════════════ */

/* ── Global toast notifications (app-wide error/success UI, replaces alert()) ── */
.ilms-toasts { position: fixed; top: 16px; right: 16px; z-index: 10090; display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px); width: 380px; pointer-events: none; }
.ilms-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); box-shadow: 0 10px 30px rgba(15, 23, 42, .18); font-size: 14px; line-height: 1.45; color: #1e293b; opacity: 0; transform: translateX(20px); transition: opacity .25s ease, transform .25s ease; }
.ilms-toast.ilms-toast-show { opacity: 1; transform: translateX(0); }
.ilms-toast-icon { flex: 0 0 auto; margin-top: 1px; }
.ilms-toast-msg { flex: 1 1 auto; word-break: break-word; }
.ilms-toast-close { flex: 0 0 auto; background: none; border: none; color: #94a3b8; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.ilms-toast-close:hover { color: #475569; }
.ilms-toast-success .ilms-toast-icon { color: #16a34a; }
.ilms-toast-success { border-left: 4px solid #16a34a; }
.ilms-toast-error .ilms-toast-icon { color: #dc2626; }
.ilms-toast-error { border-left: 4px solid #dc2626; }
.ilms-toast-warning .ilms-toast-icon { color: #d97706; }
.ilms-toast-warning { border-left: 4px solid #d97706; }
.ilms-toast-info .ilms-toast-icon { color: #2563eb; }
.ilms-toast-info { border-left: 4px solid #2563eb; }
@media (max-width: 480px) { .ilms-toasts { left: 12px; right: 12px; top: 12px; width: auto; } .ilms-toast { padding: 10px 12px; font-size: 13px; } }
@media print { .ilms-toasts { display: none; } }

/* ── Global loading indicators ── */
/* Slim indeterminate progress bar pinned to the very top of the viewport —
   runs while any AJAX request is in flight (search lookups, uploads, etc.). */
.ilms-loader-bar {
    position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 10150;
    overflow: hidden; background: rgba(29, 78, 216, .12);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ilms-loader-bar.is-active { opacity: 1; }
.ilms-loader-bar.is-done { opacity: 0; transition: opacity .3s ease .1s; }
.ilms-loader-bar::after {
    content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
    background: linear-gradient(90deg, var(--primary, #1d4ed8), var(--primary-light, #3b82f6));
    border-radius: 0 3px 3px 0;
    animation: ilms-loader-slide 1.1s ease-in-out infinite;
}
@keyframes ilms-loader-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Full-viewport overlay for form submissions that wait on the server/API. */
.ilms-loader-overlay {
    position: fixed; inset: 0; z-index: 10160;
    display: flex; align-items: center; justify-content: center;
    background: rgba(248, 250, 252, .72);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease;
}
.ilms-loader-overlay.show { opacity: 1; }
.ilms-loader-overlay[hidden] { display: none; }
.ilms-loader-box {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    background: var(--surface, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: 16px;
    padding: 26px 38px; box-shadow: var(--shadow-md, 0 4px 14px rgba(15, 23, 42, .12));
    max-width: calc(100vw - 48px); text-align: center;
    transform: translateY(6px) scale(.98); transition: transform .18s ease;
}
.ilms-loader-overlay.show .ilms-loader-box { transform: translateY(0) scale(1); }
.ilms-spinner {
    width: 42px; height: 42px; border-radius: 50%;
    border: 4px solid #dbeafe; border-top-color: var(--primary, #1d4ed8);
    animation: ilms-spin .8s linear infinite;
}
@keyframes ilms-spin { to { transform: rotate(360deg); } }
.ilms-loader-text { font-size: .95rem; font-weight: 700; color: #0f172a; }
.ilms-loader-sub { font-size: .8rem; color: var(--muted, #64748b); }
@media (max-width: 480px) {
    .ilms-loader-box { padding: 20px 24px; border-radius: 14px; }
    .ilms-spinner { width: 36px; height: 36px; border-width: 3px; }
}
@media print { .ilms-loader-bar, .ilms-loader-overlay { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
    .ilms-loader-bar::after { animation-duration: 2s; }
    .ilms-spinner { animation-duration: 1.6s; }
}

/* ── Professional confirmation modal (replaces native window.confirm) ── */
.ilms-modal-overlay {
    position: fixed; inset: 0; z-index: 10100;
    display: flex; align-items: center; justify-content: center;
    padding: 16px; background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.ilms-modal-overlay[hidden] { display: none; }
.ilms-modal {
    width: 100%; background: var(--surface, #fff); border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .3);
    overflow: hidden; max-height: calc(100vh - 32px); display: flex; flex-direction: column;
    animation: ilmsModalIn .22s ease;
}
.ilms-modal-sm { max-width: 440px; }
@keyframes ilmsModalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ilms-modal-header { display: flex; align-items: center; gap: 12px; padding: 18px 22px 8px; }
.ilms-modal-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: #fef2f2; color: #dc2626; }
.ilms-modal-title { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 600; color: #0f172a; }
.ilms-modal-body { padding: 4px 22px 20px; overflow-y: auto; }
.ilms-modal-message { margin: 0; font-size: 14px; line-height: 1.55; color: #334155; word-break: break-word; }
.ilms-modal-actions { display: flex; gap: 10px; justify-content: flex-end; padding: 0 22px 20px; }
.ilms-modal-actions .btn { min-height: 42px; min-width: 92px; }
@media (max-width: 480px) {
    .ilms-modal-actions { flex-direction: column-reverse; }
    .ilms-modal-actions .btn { width: 100%; }
}
@media print { .ilms-modal-overlay { display: none; } }