/* ===================================================================
   SYS_ALERTS.CSS — G1 Udaan notification layer
   Inline alert banners, corner toasts and SweetAlert2 skinning.
   Paired with SYS_alerts.php and js/sys_alerts.js.
   =================================================================== */

:root {
    --g1a-ink: #0A192F;
    --g1a-muted: #5B6B84;
    --g1a-surface: rgba(255, 255, 255, .96);
    --g1a-ease: cubic-bezier(.4, 0, .2, 1);

    --g1a-success: #10B981;
    --g1a-success-ink: #065F46;
    --g1a-danger: #EF4444;
    --g1a-danger-ink: #991B1B;
    --g1a-warning: #F59E0B;
    --g1a-warning-ink: #92400E;
    --g1a-info: #059669;
    --g1a-info-ink: #059669;
}

[data-theme=dark] {
    --g1a-ink: #E8EEF7;
    --g1a-muted: #93A3BC;
    --g1a-surface: rgba(20, 27, 40, .97);
    --g1a-success-ink: #6EE7B7;
    --g1a-danger-ink: #FCA5A5;
    --g1a-warning-ink: #FCD34D;
    --g1a-info-ink: #93C5FD;
}

/* ===================================================================
   1. INLINE ALERT BANNERS
   =================================================================== */
.g1-alert {
    display: flex;
    align-items: center !important;
    gap: .75rem;
    padding: .75rem 1rem;
    margin: 0 0 .75rem;
    border-radius: 14px;
    border: 1px solid transparent;
    border-left-width: 4px;
    font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 6px 20px rgba(10, 25, 47, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    animation: g1a-in .35s var(--g1a-ease) both;
}

@keyframes g1a-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.g1-alert__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 1.1rem;
    line-height: 1;
}

.g1-alert__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.g1-alert__body > :last-child {
    margin-bottom: 0;
}

/* the app frequently passes <center> / headings inside alert bodies */
.g1-alert__body h1,
.g1-alert__body h2,
.g1-alert__body h3,
.g1-alert__body h4,
.g1-alert__body h5 {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 .2rem;
    color: inherit;
}

.g1-alert__body p {
    color: inherit;
}

.g1-alert__close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    font-size: .7rem;
    line-height: 1;
    color: inherit;
    background: transparent;
    opacity: .5;
    cursor: pointer;
    transition: all .2s var(--g1a-ease);
}

.g1-alert__close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, .07);
}

[data-theme=dark] .g1-alert__close:hover {
    background: rgba(255, 255, 255, .12);
}

/* --- variants --- */
.g1-alert--success {
    background: rgba(16, 185, 129, .10);
    border-color: rgba(16, 185, 129, .28);
    border-left-color: var(--g1a-success);
    color: var(--g1a-success-ink);
}

.g1-alert--success .g1-alert__icon { color: var(--g1a-success); }

.g1-alert--danger {
    background: rgba(239, 68, 68, .10);
    border-color: rgba(239, 68, 68, .28);
    border-left-color: var(--g1a-danger);
    color: var(--g1a-danger-ink);
}

.g1-alert--danger .g1-alert__icon { color: var(--g1a-danger); }

.g1-alert--warning {
    background: rgba(245, 158, 11, .10);
    border-color: rgba(245, 158, 11, .28);
    border-left-color: var(--g1a-warning);
    color: var(--g1a-warning-ink);
}

.g1-alert--warning .g1-alert__icon { color: var(--g1a-warning); }

.g1-alert--info,
.g1-alert--primary,
.g1-alert--secondary,
.g1-alert--light,
.g1-alert--dark {
    background: rgba(5, 150, 105, .08);
    border-color: rgba(5, 150, 105, .24);
    border-left-color: var(--g1a-info);
    color: var(--g1a-info-ink);
}

.g1-alert--info .g1-alert__icon,
.g1-alert--primary .g1-alert__icon,
.g1-alert--secondary .g1-alert__icon,
.g1-alert--light .g1-alert__icon,
.g1-alert--dark .g1-alert__icon { color: var(--g1a-info); }

/* ===================================================================
   2. TOASTS
   =================================================================== */
.g1-toasts {
    position: fixed;
    z-index: 20000;
    top: max(14px, env(safe-area-inset-top));
    right: 14px;
    left: auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: min(360px, calc(100vw - 28px));
    pointer-events: none;
}

.g1-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem .9rem;
    border-radius: 16px;
    overflow: hidden;
    background: var(--g1a-surface);
    border: 1px solid rgba(5, 150, 105, .12);
    box-shadow: 0 12px 34px rgba(10, 25, 47, .18);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif;
    color: var(--g1a-ink);
    pointer-events: auto;
    transform: translateX(120%);
    opacity: 0;
    transition: transform .4s var(--g1a-ease), opacity .3s var(--g1a-ease), margin .3s var(--g1a-ease);
}

.g1-toast.is-in {
    transform: none;
    opacity: 1;
}

.g1-toast.is-out {
    transform: translateX(120%);
    opacity: 0;
    margin-bottom: -3.6rem;
}

.g1-toast__ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 1rem;
    color: #fff;
}

.g1-toast__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: .1rem;
}

.g1-toast__title {
    display: block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    margin-bottom: .1rem;
}

.g1-toast__msg {
    display: block;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--g1a-muted);
    overflow-wrap: anywhere;
}

.g1-toast__msg br + br { display: none; }

.g1-toast__close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--g1a-muted);
    font-size: .65rem;
    cursor: pointer;
    opacity: .6;
    transition: opacity .2s var(--g1a-ease);
}

.g1-toast__close:hover { opacity: 1; }

/* auto-dismiss progress rail */
.g1-toast__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left;
    opacity: .85;
}

.g1-toast--success .g1-toast__ico { background: linear-gradient(135deg, #10B981, #059669); }
.g1-toast--success .g1-toast__bar { background: #10B981; }
.g1-toast--danger  .g1-toast__ico { background: linear-gradient(135deg, #EF4444, #DC2626); }
.g1-toast--danger  .g1-toast__bar { background: #EF4444; }
.g1-toast--warning .g1-toast__ico { background: linear-gradient(135deg, #F59E0B, #D97706); }
.g1-toast--warning .g1-toast__bar { background: #F59E0B; }
.g1-toast--info    .g1-toast__ico { background: linear-gradient(135deg, #059669, #2F6FD8); }
.g1-toast--info    .g1-toast__bar { background: #059669; }

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

@media (max-width: 575.98px) {
    .g1-toasts {
        top: auto;
        bottom: max(14px, env(safe-area-inset-bottom));
        right: 10px;
        left: 10px;
        width: auto;
    }

    .g1-toast,
    .g1-toast.is-out {
        transform: translateY(120%);
    }

    .g1-toast.is-in {
        transform: none;
    }
}

/* ===================================================================
   3. SWEETALERT2 SKIN
   =================================================================== */
.g1-swal {
    font-family: 'Plus Jakarta Sans', 'Outfit', system-ui, sans-serif !important;
    border-radius: 24px !important;
    padding: 1.75rem 1.5rem !important;
    background: var(--g1a-surface) !important;
    border: 1px solid rgba(212, 175, 55, .30) !important;
    box-shadow: 0 30px 70px rgba(10, 25, 47, .35) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.g1-swal__title {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1.22rem !important;
    font-weight: 800 !important;
    letter-spacing: -.01em !important;
    color: var(--g1a-ink) !important;
    margin-top: .75rem !important;
}

.g1-swal__text {
    font-size: .88rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    color: var(--g1a-muted) !important;
    margin-top: .6rem !important;
}

.g1-swal__btn {
    font-family: 'Outfit', sans-serif !important;
    font-size: .8rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .06em !important;
    padding: .7rem 1.9rem !important;
    margin-top: 1.1rem !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    cursor: pointer !important;
    outline: none !important;
    transition: transform .2s var(--g1a-ease), box-shadow .2s var(--g1a-ease) !important;
    background: linear-gradient(135deg, #059669 0%, #0D3E8C 100%) !important;
    box-shadow: 0 6px 18px rgba(5, 150, 105, .35) !important;
}

.g1-swal__btn:hover { transform: translateY(-2px) !important; }
.g1-swal__btn:active { transform: translateY(0) !important; }

.g1-swal__btn:focus,
.g1-swal__btn:focus-visible,
.swal2-styled:focus {
    outline: none !important;
    box-shadow: 0 6px 18px rgba(5, 150, 105, .35) !important;
}

.g1-swal__btn--success {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
    box-shadow: 0 6px 18px rgba(16, 185, 129, .35) !important;
}

.g1-swal__btn--danger {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%) !important;
    box-shadow: 0 6px 18px rgba(239, 68, 68, .35) !important;
}

.g1-swal__btn--warning {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%) !important;
    box-shadow: 0 6px 18px rgba(245, 158, 11, .35) !important;
}

.g1-swal__btn--info {
    background: linear-gradient(135deg, #D4AF37 0%, #B45309 100%) !important;
    box-shadow: 0 6px 18px rgba(212, 175, 55, .35) !important;
}

/* SweetAlert2 draws its success tick with mask shapes coloured to the old
   default background; hide them so they do not show as grey wedges. */
.swal2-popup .swal2-success-circular-line-left,
.swal2-popup .swal2-success-circular-line-right,
.swal2-popup .swal2-success-fix,
.swal2-popup [class^='swal2-success-circular-line'] {
    display: none !important;
    background: transparent !important;
}

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

    .g1-alert,
    .g1-toast,
    .g1-toast__bar {
        animation: none !important;
        transition: opacity .01ms !important;
    }
}