/* TopGrade shared UI — network status, skeletons (MOBILE_STANDARDS §12) */

.network-status{
    position:fixed;
    left:16px;
    right:16px;
    bottom:16px;
    z-index:10001;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border-radius:14px;
    border:1px solid rgba(248,113,113,.45);
    background:rgba(15,23,42,.96);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:#fecaca;
    font-size:0.875rem;
    line-height:1.45;
    box-shadow:0 12px 40px rgba(0,0,0,.45);
    max-width:calc(100vw - 2rem);
    margin:0 auto;
}

.network-status[hidden]{
    display:none !important;
}

.network-status.is-online{
    border-color:rgba(52,211,153,.45);
    color:#a7f3d0;
}

.network-status i{
    flex-shrink:0;
    font-size:1rem;
}

.network-status-message{
    flex:1;
    min-width:0;
}

.network-status-retry{
    flex:0 0 auto;
    min-width:44px;
    min-height:44px;
    padding:8px 14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:0.8125rem;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
}

.network-status-retry:hover{
    background:rgba(255,255,255,.14);
}

.network-status-retry:focus-visible{
    outline:2px solid var(--primary,#2563eb);
    outline-offset:2px;
}

@media (max-width: 640px){
.network-status{
    left:12px;
    right:12px;
    bottom:12px;
}
}

/* Skeleton loaders */
@keyframes skeleton-shimmer{
    0%{
        background-position:200% 0;
    }
    100%{
        background-position:-200% 0;
    }
}

.skeleton{
    border-radius:8px;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.06) 0%,
        rgba(255,255,255,.14) 50%,
        rgba(255,255,255,.06) 100%
    );
    background-size:200% 100%;
    animation:skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-stack{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:4px 0;
}

.skeleton-line{
    height:12px;
    border-radius:6px;
}

.skeleton-line.md{
    height:16px;
}

.skeleton-line.lg{
    height:44px;
    border-radius:12px;
}

.skeleton-line.w-75{
    width:75%;
}

.skeleton-line.w-50{
    width:50%;
}

.nav-bell-skeleton{
    padding:8px 4px;
}

@media (prefers-reduced-motion: reduce){
.skeleton{
    animation:none;
    background:rgba(255,255,255,.1);
}
}

/* Sprint 9 — shared badges & alerts (see docs/COMPONENT_LIBRARY.md) */

.tg-badge{
    display:inline-flex;
    align-items:center;
    padding:4px 10px;
    border-radius:50px;
    font-size:0.75rem;
    font-weight:600;
    line-height:1.4;
    white-space:nowrap;
    border:1px solid var(--border,rgba(255,255,255,.15));
    background:rgba(255,255,255,.06);
    color:var(--text-light,#cbd5e1);
}

.tg-badge-primary{
    color:var(--accent,#06b6d4);
    border-color:rgba(var(--primary-rgb,37,99,235),.35);
    background:rgba(var(--primary-rgb,37,99,235),.12);
}

.tg-badge-success{
    color:#34d399;
    border-color:rgba(52,211,153,.35);
    background:rgba(52,211,153,.12);
}

.tg-badge-warning{
    color:#fbbf24;
    border-color:rgba(251,191,36,.35);
    background:rgba(251,191,36,.12);
}

.tg-badge-danger{
    color:#f87171;
    border-color:rgba(248,113,113,.35);
    background:rgba(248,113,113,.12);
}

.alert-warning{
    padding:14px 16px;
    border-radius:12px;
    border:1px solid rgba(251,191,36,.35);
    background:rgba(251,191,36,.1);
    color:#fde68a;
    font-size:0.9rem;
    line-height:1.5;
}