/* pwa/static/pwa/css/app.css */
body { 
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; 
    margin: 0; 
    background: #f5f7fb; 
}
.wrap { 
    min-height: 100vh; 
    display: grid; 
    place-items: center; 
    padding: 20px; 
}
.card { 
    width: 100%; 
    max-width: 420px; 
    background: #fff; 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,.08); 
    padding: 22px; 
    box-sizing: border-box;
}
h1 { 
    font-size: 1.25rem; 
    margin: 0 0 14px; 
    color: #1d3557; 
}
.muted { 
    color: #667085; 
    font-size: .9rem; 
    margin-bottom: 16px; 
}
label { 
    display: block; 
    font-weight: 600; 
    margin: 10px 0 6px; 
    color: #344054; 
}
input { 
    width: 100%; 
    box-sizing: border-box; 
    border: 1px solid #d0d5dd; 
    border-radius: 8px; 
    padding: 10px 12px; 
    font-size: .95rem; 
}
button { 
    margin-top: 14px; 
    width: 100%; 
    border: 0; 
    border-radius: 8px; 
    padding: 11px 14px; 
    background: #1565c0; 
    color: #fff; 
    font-weight: 700; 
    cursor: pointer; 
    transition: background 0.2s;
}
button:hover {
    background: #0d47a1;
}
button:disabled {
    background: #90caf9;
    cursor: not-allowed;
}
.error { 
    margin: 0 0 10px; 
    padding: 10px 12px; 
    border-radius: 8px; 
    background: #fef3f2; 
    color: #b42318; 
    font-size: .9rem; 
    display: none;
}
.dashboard-header {
    background: #1565c0;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.user-info h2 {
    margin: 0;
    font-size: 1.2rem;
}
.user-info p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    opacity: 0.8;
}
.btn-logout {
    background: rgba(255,255,255,0.2);
    width: auto;
    padding: 8px 16px;
    margin-top: 0;
}
.btn-logout:hover {
    background: rgba(255,255,255,0.3);
}

.text-center{
    text-align:center;
}

.text-end{
    text-align:right;
}

/* Status Badges */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.badge-online {
    background: #dcfce7;
    color: #166534;
}
.badge-offline {
    background: #dbeafe;
    color: #1e40af;
}