/* SafeAlert CSS */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--primary:#1a73e8;
--primary-dark:#1557b0;
--danger:#dc3545;
--success:#28a745;
--warning:#ffc107;
--info:#17a2b8;
--light:#f8f9fa;
--dark:#212529;
--gray:#6c757d;
--bg-main:#f0f2f5;
--bg-card:#fff;
--text-primary:#212529;
--text-secondary:#6c757d;
--shadow:0 2px 10px rgba(0,0,0,.1);
--shadow-lg:0 4px 20px rgba(0,0,0,.15);
--radius:12px;
--focus-outline:0 0 0 3px rgba(26,115,232,.25);
}
/* Dark mode variables */
@media (prefers-color-scheme: dark) {
:root{
--bg-main:#121212;
--bg-card:#1e1e1e;
--text-primary:#e0e0e0;
--text-secondary:#b0b0b0;
--light:#2a2a2a;
--border:#3a3a3a;
}
}
body{
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
background:var(--bg-main);
color:var(--text-primary);
line-height:1.6;
}
#splash-screen{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,#0f0f23,#16213e,#0f3460);
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}
#splash-screen.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .5s;
}
.splash-content{
text-align:center;
color:#fff;
}
.splash-logo{
font-size:64px;
color:#4fc3f7;
margin-bottom:20px;
animation:pulse 2s infinite;
}
@keyframes pulse{
0%{transform:scale(1)}
50%{transform:scale(1.1)}
100%{transform:scale(1)}
}
.splash-content h1{
font-size:36px;
font-weight:700;
margin-bottom:10px;
}
.splash-loader{
width:200px;
height:3px;
background:rgba(255,255,255,.2);
border-radius:2px;
margin-top:30px;
overflow:hidden;
}
.splash-loader::after{
content:'';
display:block;
width:50%;
height:100%;
background:linear-gradient(90deg,transparent,#4fc3f7,transparent);
animation:load 1.5s infinite;
}
@keyframes load{
0%{transform:translateX(-100%)}
100%{transform:translateX(300%)}
}
.screen{
display:none;
min-height:100vh;
padding-bottom:80px;
}
.screen.active{
display:block;
animation:fadeIn .3s;
}
@keyframes fadeIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.top-nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 16px;
background:var(--bg-card);
box-shadow:var(--shadow);
position:sticky;
top:0;
z-index:100;
}
.nav-left{
display:flex;
align-items:center;
gap:12px;
}
.nav-left h2{
font-size:18px;
}
.nav-right{
display:flex;
align-items:center;
gap:12px;
}
.btn-back{
background:none;
border:none;
font-size:20px;
cursor:pointer;
padding:8px;
border-radius:50%;
}
.icon-btn{
background:none;
border:none;
font-size:20px;
cursor:pointer;
padding:8px;
position:relative;
}
.badge{
position:absolute;
top:2px;
right:2px;
background:var(--danger);
color:#fff;
font-size:10px;
width:18px;
height:18px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:12px 24px;
border:none;
border-radius:var(--radius);
font-size:16px;
font-weight:600;
cursor:pointer;
transition:all .3s;
text-decoration:none;
}
.btn-primary{
background:var(--primary);
color:#fff;
}
.btn-primary:hover{
background:var(--primary-dark);
transform:translateY(-1px);
}
.btn-primary:focus-visible{
box-shadow:var(--focus-outline);
}
.btn-secondary{
background:var(--light);
color:var(--text-primary);
border:1px solid #ddd;
}
.btn-secondary:focus-visible{
box-shadow:var(--focus-outline);
}
.btn-danger{
background:var(--danger);
color:#fff;
}
.btn-danger:focus-visible{
box-shadow:var(--focus-outline);
}
.btn-full{
width:100%;
}
.btn-large{
padding:16px 32px;
font-size:18px;
}
.btn-sm{
padding:6px 12px;
font-size:13px;
}
.btn-link{
background:none;
border:none;
color:var(--primary);
font-size:14px;
cursor:pointer;
}
.welcome-header{
text-align:center;
padding:40px 20px 20px;
}
.logo-container{
font-size:64px;
color:var(--primary);
margin-bottom:16px;
}
.welcome-header h1{
font-size:32px;
margin-bottom:8px;
}
.tagline{
color:var(--text-secondary);
font-size:16px;
}
.welcome-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
padding:20px;
}
.feature-card{
background:var(--bg-card);
border-radius:var(--radius);
padding:20px;
text-align:center;
box-shadow:var(--shadow);
transition:all .3s;
}
.feature-card:hover{
transform:translateY(-2px);
box-shadow:var(--shadow-lg);
}
.feature-card i{
font-size:32px;
color:var(--primary);
margin-bottom:12px;
}
.feature-card h3{
font-size:14px;
margin-bottom:6px;
}
.feature-card p{
font-size:12px;
color:var(--text-secondary);
}
.welcome-actions{
padding:20px;
display:flex;
flex-direction:column;
gap:12px;
}
.auth-container{
max-width:400px;
margin:0 auto;
padding:20px;
}
.auth-header{
text-align:center;
padding:20px 0;
}
.auth-header .logo-small{
font-size:40px;
color:var(--primary);
margin-bottom:8px;
}
.auth-header h2{
font-size:24px;
margin-bottom:4px;
}
.auth-header p{
color:var(--text-secondary);
font-size:14px;
}
.auth-form{
margin-top:20px;
}
.form-group{
margin-bottom:16px;
}
.form-group label{
display:block;
font-weight:600;
margin-bottom:6px;
font-size:14px;
}
.form-group label i{
color:var(--primary);
margin-right:4px;
}
.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:12px;
border:2px solid #e9ecef;
border-radius:var(--radius);
font-size:16px;
background:var(--bg-card);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
outline:none;
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(26,115,232,.1);
}
.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible{
box-shadow:var(--focus-outline);
}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.checkbox-group{
display:flex;
align-items:center;
gap:8px;
}
.checkbox-group input[type="checkbox"]{
width:auto;
accent-color:var(--primary);
}
.auth-link{
text-align:center;
margin-top:12px;
font-size:14px;
}
.auth-link a{
color:var(--primary);
text-decoration:none;
font-weight:600;
}
.dashboard-content{
padding:16px;
}
.emergency-status-bar{
padding:10px 16px;
background:rgba(40,167,69,.1);
border-bottom:2px solid var(--success);
transition:all .3s;
}
.emergency-status-bar.warning{
background:rgba(255,193,7,.1);
border-color:var(--warning);
}
.emergency-status-bar.danger{
background:rgba(220,53,69,.1);
border-color:var(--danger);
}
.status-indicator{
display:flex;
align-items:center;
gap:8px;
font-weight:600;
}
.sos-section{
display:flex;
justify-content:center;
padding:20px 0;
}
.sos-button-container{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
}
.sos-button{
width:120px;
height:120px;
border-radius:50%;
background:linear-gradient(135deg,#dc3545,#c82333);
border:none;
color:#fff;
font-size:18px;
font-weight:700;
cursor:pointer;
position:relative;
z-index:2;
box-shadow:0 4px 20px rgba(220,53,69,.4);
transition:all .3s;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}
.sos-button:hover{
transform:scale(1.05);
box-shadow:0 6px 30px rgba(220,53,69,.5);
}
.sos-button:active{
transform:scale(.95);
}
.sos-button:focus-visible{
box-shadow:0 0 0 3px rgba(220,53,69,.5);
}
.sos-label{
font-size:24px;
font-weight:900;
letter-spacing:2px;
}
.sos-ring{
position:absolute;
width:100%;
height:100%;
border-radius:50%;
border:2px solid rgba(220,53,69,.3);
}
.sos-timer{
margin-top:10px;
font-size:24px;
font-weight:700;
color:var(--danger);
}
.sos-instruction{
margin-top:8px;
font-size:13px;
color:var(--text-secondary);
}
.quick-actions{
margin-bottom:20px;
}
.quick-actions h3{
font-size:16px;
font-weight:600;
margin-bottom:12px;
color:var(--text-secondary);
}
.action-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}
.action-card{
background:var(--bg-card);
border:2px solid #e9ecef;
border-radius:var(--radius);
padding:20px;
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
cursor:pointer;
transition:all .3s;
font-size:14px;
color:var(--text-primary);
}
.action-card:hover{
border-color:var(--primary);
transform:translateY(-2px);
box-shadow:var(--shadow);
}
.action-card i{
font-size:28px;
color:var(--primary);
}
.action-card span{
font-weight:600;
text-align:center;
}
.stats-section{
margin-bottom:20px;
}
.stats-section h3{
font-size:16px;
font-weight:600;
margin-bottom:12px;
color:var(--text-secondary);
}
.stats-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
}
.stat-card{
background:var(--bg-card);
border-radius:var(--radius);
padding:16px;
text-align:center;
box-shadow:var(--shadow);
}
.stat-number{
font-size:28px;
font-weight:700;
}
.stat-active{
color:var(--primary);
}
.stat-resolved{
color:var(--success);
}
.stat-false{
color:var(--warning);
}
.stat-label{
font-size:12px;
color:var(--text-secondary);
margin-top:4px;
}
.section-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:12px;
}
.section-header h3{
font-size:16px;
font-weight:600;
}
.incidents-list{
background:var(--bg-card);
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow);
}
.incident-item{
padding:16px;
border-bottom:1px solid #e9ecef;
display:flex;
align-items:center;
gap:12px;
}
.incident-item:last-child{
border-bottom:none;
}
.incident-icon{
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
flex-shrink:0;
}
.incident-icon.accident{
background:#e3f2fd;
color:#1976d2;
}
.incident-icon.agression{
background:#fce4ec;
color:#c62828;
}
.incident-icon.medical{
background:#e8f5e9;
color:#2e7d32;
}
.incident-icon.fire{
background:#fff3e0;
color:#e65100;
}
.incident-icon.sos{
background:#fce4ec;
color:#dc3545;
}
.incident-info{
flex:1;
}
.incident-title{
font-weight:600;
font-size:14px;
margin-bottom:2px;
}
.incident-meta{
font-size:12px;
color:var(--text-secondary);
}
.incident-status{
padding:4px 12px;
border-radius:20px;
font-size:11px;
font-weight:600;
text-transform:uppercase;
flex-shrink:0;
}
.status-pending{
background:#fff3e0;
color:#e65100;
}
.status-resolved{
background:#e8f5e9;
color:#2e7d32;
}
.status-false-alert{
background:#fce4ec;
color:#c62828;
}
.empty-state{
padding:40px 20px;
text-align:center;
color:var(--text-secondary);
}
.empty-state i{
font-size:48px;
margin-bottom:12px;
opacity:.5;
}
.stats-summary{
display:flex;
justify-content:space-around;
background:var(--bg-card);
border-radius:var(--radius);
padding:16px;
margin-bottom:16px;
box-shadow:var(--shadow);
}
.stat-item{
text-align:center;
}
.stat-value{
font-size:24px;
font-weight:700;
color:var(--primary);
}
.stat-label{
font-size:12px;
color:var(--text-secondary);
}
.location-card{
background:var(--bg-card);
border-radius:var(--radius);
padding:16px;
display:flex;
align-items:center;
gap:12px;
box-shadow:var(--shadow);
margin-bottom:12px;
}
.location-card i{
font-size:28px;
color:var(--danger);
}
.location-card h4{
font-size:14px;
margin-bottom:4px;
}
.location-coords{
font-size:11px;
color:var(--primary);
font-family:monospace;
}
.severity-selector{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:8px;
}
.severity-btn{
padding:10px;
border:2px solid #e9ecef;
border-radius:var(--radius);
background:var(--bg-card);
cursor:pointer;
font-size:13px;
font-weight:600;
text-align:center;
transition:all .3s;
}
.severity-btn i{
display:block;
font-size:20px;
margin-bottom:4px;
}
.severity-btn.low{
border-color:#28a745;
color:#28a745;
}
.severity-btn.low.active{
background:#28a745;
color:#fff;
}
.severity-btn.medium{
border-color:#ffc107;
color:#ffc107;
}
.severity-btn.medium.active{
background:#ffc107;
color:#333;
}
.severity-btn.high{
border-color:#fd7e14;
color:#fd7e14;
}
.severity-btn.high.active{
background:#fd7e14;
color:#fff;
}
.severity-btn.critical{
border-color:#dc3545;
color:#dc3545;
}
.severity-btn.critical.active{
background:#dc3545;
color:#fff;
}
.severity-btn:focus-visible{
box-shadow:var(--focus-outline);
}
.media-upload-zone{
border:2px dashed #ccc;
border-radius:var(--radius);
padding:30px;
text-align:center;
cursor:pointer;
background:var(--bg-card);
}
.media-upload-zone:hover{
border-color:var(--primary);
background:#f0f7ff;
}
.media-upload-zone i{
font-size:32px;
color:var(--primary);
margin-bottom:8px;
}
.media-preview{
display:flex;
gap:8px;
flex-wrap:wrap;
margin-top:8px;
}
.media-preview img{
width:80px;
height:80px;
object-fit:cover;
border-radius:8px;
border:2px solid #ddd;
}
.report-form{
background:var(--bg-card);
border-radius:var(--radius);
padding:20px;
box-shadow:var(--shadow);
}
.notification-item{
background:var(--bg-card);
border-radius:var(--radius);
padding:16px;
margin-bottom:8px;
box-shadow:var(--shadow);
display:flex;
gap:12px;
align-items:flex-start;
cursor:pointer;
}
.notification-item.unread{
border-left:4px solid var(--primary);
}
.notification-icon{
width:40px;
height:40px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.notification-icon.alert{
background:#fff3e0;
color:#e65100;
}
.notification-icon.resolved{
background:#e8f5e9;
color:#2e7d32;
}
.notification-icon.info{
background:#e3f2fd;
color:#1976d2;
}
.notification-body h4{
font-size:14px;
margin-bottom:4px;
}
.notification-body p{
font-size:12px;
color:var(--text-secondary);
}
.notification-time{
font-size:11px;
color:var(--gray);
margin-top:4px;
}
.settings-section{
background:var(--bg-card);
border-radius:var(--radius);
padding:16px;
margin-bottom:16px;
box-shadow:var(--shadow);
}
.settings-section h3{
font-size:14px;
font-weight:600;
margin-bottom:12px;
color:var(--text-secondary);
border-bottom:1px solid #eee;
padding-bottom:8px;
}
.settings-item{
display:flex;
justify-content:space-between;
align-items:center;
padding:12px 0;
border-bottom:1px solid #f5f5f5;
cursor:pointer;
}
.settings-item span{
font-size:14px;
}
.toggle-switch{
position:relative;
display:inline-block;
width:48px;
height:26px;
}
.toggle-switch input{
opacity:0;
width:0;
height:0;
}
.toggle-slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:#ccc;
border-radius:26px;
transition:all .3s;
}
.toggle-slider::before{
content:'';
position:absolute;
height:20px;
width:20px;
left:3px;
bottom:3px;
background:#fff;
border-radius:50%;
transition:all .3s;
}
.toggle-switch input:checked+.toggle-slider{
background:var(--primary);
}
.toggle-switch input:checked+.toggle-slider::before{
transform:translateX(22px);
}
.danger-zone{
border:2px solid var(--danger);
}
.danger-zone h3{
color:var(--danger);
}
.terms-link{
color:var(--primary);
font-size:14px;
}
.about-content{
padding:16px;
text-align:center;
}
.about-logo{
font-size:64px;
color:var(--primary);
margin-bottom:16px;
}
.about-content h2{
font-size:24px;
}
.sidebar{
position:fixed;
left:-280px;
top:0;
width:280px;
height:100%;
background:var(--bg-card);
box-shadow:var(--shadow-lg);
z-index:200;
transition:left .3s;
overflow-y:auto;
}
.sidebar.open{
left:0;
}
.sidebar-header{
display:flex;
align-items:center;
gap:12px;
padding:20px;
border-bottom:1px solid #eee;
font-size:20px;
font-weight:700;
}
.sidebar-header i{
color:var(--primary);
font-size:24px;
}
.sidebar-nav{
padding:8px 0;
}
.sidebar-link{
display:flex;
align-items:center;
gap:12px;
padding:12px 20px;
color:var(--text-primary);
text-decoration:none;
font-size:14px;
}
.sidebar-link:hover,
.sidebar-link.active{
background:#e3f2fd;
color:var(--primary);
border-right:3px solid var(--primary);
}
.sidebar-link i{
width:20px;
text-align:center;
}
.sidebar-divider{
height:1px;
background:#eee;
margin:8px 0;
}
.sidebar-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
z-index:199;
opacity:0;
visibility:hidden;
}
.sidebar-overlay.active{
opacity:1;
visibility:visible;
}
.modal-overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.5);
z-index:300;
display:none;
justify-content:center;
align-items:center;
}
.modal-overlay.active{
display:flex;
}
.modal{
background:var(--bg-card);
border-radius:var(--radius);
width:90%;
max-width:400px;
overflow:hidden;
}
.modal-content{
padding:24px;
}
.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:16px;
}
.modal-close{
background:none;
border:none;
font-size:24px;
cursor:pointer;
color:var(--gray);
}
.sos-modal{
text-align:center;
}
.sos-modal-icon{
font-size:48px;
color:var(--danger);
margin-bottom:16px;
}
.sos-modal-info{
text-align:left;
background:var(--bg-main);
border-radius:var(--radius);
padding:12px;
margin-bottom:16px;
}
.sos-modal-info p{
font-size:14px;
margin-bottom:4px;
}
.modal-buttons{
display:flex;
gap:12px;
justify-content:flex-end;
}
#toast-container{
position:fixed;
top:20px;
right:20px;
z-index:9999;
display:flex;
flex-direction:column;
gap:8px;
}
.toast{
background:var(--dark);
color:#fff;
padding:12px 20px;
border-radius:var(--radius);
font-size:14px;
box-shadow:var(--shadow-lg);
display:flex;
align-items:center;
gap:8px;
min-width:280px;
animation:toastIn .3s;
}
.toast.success{
border-left:4px solid var(--success);
}
.toast.error{
border-left:4px solid var(--danger);
}
@keyframes toastIn{
from{transform:translateX(100%);opacity:0}
to{transform:translateX(0);opacity:1}
}
#map-canvas{
width:100%;
height:200px;
display:block;
}
/* Photo upload container styles */
.media-upload-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
}

#take-photo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--primary);
    color: white;
    border: none;
    padding: 12px;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s;
    text-decoration: none;
}

#take-photo-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

#take-photo-btn:active {
    transform: scale(.95);
}

#take-photo-btn:focus-visible {
    box-shadow: var(--focus-outline);
}

/* Text muted style */
.text-muted {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Dark mode adjustments for specific components */
@media (prefers-color-scheme: dark) {
#splash-screen{
background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
}
.splash-logo{
color:#4fc3f7;
}
.feature-card{
background:var(--bg-card);
box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.feature-card:hover{
box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.action-card{
background:var(--bg-card);
border-color:#3a3a3a;
}
.action-card:hover{
border-color:var(--primary);
transform:translateY(-2px);
box-shadow:0 4px 20px rgba(0,0,0,.3);
}
.stat-card{
background:var(--bg-card);
box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.location-card{
background:var(--bg-card);
box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.media-upload-zone{
background:var(--bg-card);
border-color:#555;
}
.media-upload-zone:hover{
background:#1a1a1a;
border-color:var(--primary);
}
.media-preview img{
border-color:#444;
}
.notification-item{
background:var(--bg-card);
box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.notification-item.unread{
border-left:4px solid var(--primary);
}
.settings-item{
border-bottom:1px solid #3a3a3a;
}
.sidebar{
background:var(--bg-card);
box-shadow:var(--shadow-lg);
}
.sidebar-link:hover,
.sidebar-link.active{
background:#1a1a1a;
color:var(--primary);
border-right:3px solid var(--primary);
}
.modal{
background:var(--bg-card);
}
}

/* Photo upload container dark mode */
@media (prefers-color-scheme: dark) {
#take-photo-btn {
    background: var(--primary);
}
#take-photo-btn:hover {
    background: var(--primary-dark);
}
}

@media(max-width:480px){
.welcome-features,
.action-grid{
grid-template-columns:1fr;
}
.sos-button{
width:100px;
height:100px;
}
.media-upload-container {
    gap: 8px;
}
#take-photo-btn {
    padding: 10px;
    font-size: 13px;
}
}
/* ============================================================
   SafeAlert — additions PWA (install, push, contacts, offline)
   ============================================================ */

/* SOS long-press progress ring (3s) */
.sos-button .sos-progress{
position:absolute;
inset:-6px;
border-radius:50%;
pointer-events:none;
}
.sos-progress circle{
fill:none;
stroke:rgba(255,255,255,.9);
stroke-width:5;
stroke-linecap:round;
transform:rotate(-90deg);
transform-origin:50% 50%;
transition:stroke-dashoffset .1s linear;
}
.sos-button.pressing{
transform:scale(.97);
box-shadow:0 0 40px rgba(220,53,69,.7);
}

/* Install banner / button */
.install-banner{
display:none;
align-items:center;
gap:12px;
background:linear-gradient(135deg,#1a73e8,#1557b0);
color:#fff;
padding:14px 16px;
border-radius:var(--radius);
margin:16px;
box-shadow:var(--shadow-lg);
}
.install-banner.show{display:flex;}
.install-banner i.lead{font-size:28px;flex-shrink:0;}
.install-banner .install-text{flex:1;}
.install-banner .install-text h4{font-size:15px;margin-bottom:2px;}
.install-banner .install-text p{font-size:12px;opacity:.9;}
.install-banner button{
background:#fff;
color:var(--primary);
border:none;
padding:10px 16px;
border-radius:var(--radius);
font-weight:700;
cursor:pointer;
white-space:nowrap;
}
.install-banner .install-dismiss{
background:transparent;
color:#fff;
font-size:20px;
padding:4px 8px;
}

/* Install help (iOS) */
.install-help{
padding:16px;
}
.install-help-card{
background:var(--bg-card);
border-radius:var(--radius);
padding:16px;
box-shadow:var(--shadow);
margin-bottom:16px;
}
.install-help-card h3{font-size:15px;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.install-help-card ol{margin-left:18px;font-size:14px;color:var(--text-secondary);}
.install-help-card ol li{margin-bottom:6px;}

/* Offline indicator */
#offline-bar{
display:none;
position:fixed;
bottom:0;left:0;right:0;
background:var(--dark);
color:#fff;
text-align:center;
padding:8px;
font-size:13px;
z-index:9000;
}
#offline-bar.show{display:block;}

/* Push permission prompt card */
.push-cta{
background:rgba(26,115,232,.08);
border:1px solid rgba(26,115,232,.3);
border-radius:var(--radius);
padding:14px;
margin-bottom:16px;
display:flex;
gap:12px;
align-items:center;
}
.push-cta i{font-size:24px;color:var(--primary);}
.push-cta .push-text{flex:1;}
.push-cta .push-text h4{font-size:14px;}
.push-cta .push-text p{font-size:12px;color:var(--text-secondary);}

/* Contacts */
.contacts-content{padding:16px;}
.contact-card{
background:var(--bg-card);
border-radius:var(--radius);
padding:14px 16px;
margin-bottom:10px;
box-shadow:var(--shadow);
display:flex;
align-items:center;
gap:12px;
}
.contact-avatar{
width:44px;height:44px;border-radius:50%;
background:#e3f2fd;color:var(--primary);
display:flex;align-items:center;justify-content:center;
font-size:18px;flex-shrink:0;font-weight:700;
}
.contact-info{flex:1;}
.contact-info h4{font-size:15px;}
.contact-info p{font-size:13px;color:var(--text-secondary);}
.contact-actions{display:flex;gap:6px;}
.contact-actions button{
background:none;border:none;cursor:pointer;
font-size:16px;padding:8px;border-radius:8px;color:var(--gray);
}
.contact-actions button.edit:hover{color:var(--primary);}
.contact-actions button.delete:hover{color:var(--danger);}

/* Severity selector full width (4 cols on wide) */
@media(min-width:520px){
.severity-selector{grid-template-columns:repeat(4,1fr);}
}

/* generic loading spinner */
.loading-row{
padding:24px;text-align:center;color:var(--text-secondary);
}
.spinner{
display:inline-block;width:22px;height:22px;
border:3px solid rgba(26,115,232,.25);
border-top-color:var(--primary);
border-radius:50%;
animation:spin .8s linear infinite;
vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* media preview remove */
.media-preview .media-thumb{position:relative;}
.media-preview .media-thumb button{
position:absolute;top:-6px;right:-6px;
width:20px;height:20px;border-radius:50%;
background:var(--danger);color:#fff;border:none;
font-size:11px;cursor:pointer;line-height:1;
display:flex;align-items:center;justify-content:center;
}

/* status in_progress badge */
.status-in_progress{background:#e3f2fd;color:#1565c0;}
.status-in-progress{background:#e3f2fd;color:#1565c0;}

.toast.info{border-left:4px solid var(--info);}
.toast.warning{border-left:4px solid var(--warning);}

/* incident detail modal body */
.detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #eee;font-size:14px;}
.detail-row .lbl{color:var(--text-secondary);}
.detail-media{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.detail-media img{width:80px;height:80px;object-fit:cover;border-radius:8px;}

/* SOS active card on dashboard */
.sos-active-banner{
display:none;
background:rgba(220,53,69,.1);
border:1px solid var(--danger);
border-radius:var(--radius);
padding:12px 16px;
margin:0 16px 16px;
align-items:center;
gap:10px;
}
.sos-active-banner.show{display:flex;}
.sos-active-banner i{color:var(--danger);font-size:20px;}
.sos-active-banner .btn{margin-left:auto;}

/* ============================================================
   SafeAlert — Présentation tablette & ordinateur (responsive)
   Le mobile-first est conservé ; améliorations progressives ≥768 / ≥1024.
   ============================================================ */
@media (min-width:768px){
  /* — Écran d'accueil : hero centré, cartes en rangée — */
  .welcome-header{padding:56px 24px 12px;}
  .welcome-header .logo-container{font-size:84px;}
  .welcome-header h1{font-size:44px;}
  .welcome-header .tagline{font-size:18px;}
  .welcome-features{
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
    max-width:960px;margin:12px auto;
  }
  .feature-card h3{font-size:15px;}
  .feature-card p{font-size:13px;}
  .welcome-actions{
    max-width:520px;margin:8px auto 48px;
    flex-direction:row;justify-content:center;
  }
  .welcome-actions .btn{flex:1;}

  /* — Cartes d'authentification posées sur une carte centrée — */
  .auth-container{
    max-width:460px;margin:48px auto;
    background:var(--bg-card);border-radius:18px;
    box-shadow:var(--shadow-lg);padding:36px;
  }

  /* — Contenu centré et largeur de lecture confortable — */
  .dashboard-content{max-width:1040px;margin:0 auto;padding:24px;}
  .report-content{max-width:780px;margin:0 auto;padding:24px;}
  .history-content,
  .notifications-content,
  .settings-content,
  .about-content,
  .contacts-content,
  .install-help{max-width:780px;margin:0 auto;width:100%;}

  /* — Grilles fluides (s'adaptent à la largeur) — */
  .action-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));}

  /* — Bouton SOS plus présent — */
  .sos-button{width:148px;height:148px;}
  .sos-label{font-size:26px;}

  /* — Bannières alignées à la largeur du contenu — */
  .install-banner,
  .sos-active-banner{max-width:1040px;margin-left:auto;margin-right:auto;}

  /* — Barre de navigation plus aérée — */
  .top-nav{padding:14px 24px;}
  .nav-left h2{font-size:20px;}

  /* — Modales un peu plus larges — */
  .modal{max-width:480px;}
}

/* Desktop : barre latérale persistante + tableau de bord en 2 colonnes */
@media (min-width:1024px){
  /* Barre latérale fixe et permanente sur les écrans applicatifs */
  body.app-view .sidebar{left:0;box-shadow:1px 0 0 rgba(0,0,0,.06);}
  body.app-view .menu-btn{display:none;}
  body.app-view .sidebar-overlay{display:none !important;}
  body.app-view .screen{margin-left:280px;}

  /* Tableau de bord : SOS pleine largeur, actions + stats côte à côte */
  .dashboard-content{
    max-width:1120px;
    display:grid;gap:24px;align-items:start;
    grid-template-columns:1.05fr .95fr;
  }
  .dashboard-content .push-cta{grid-column:1 / -1;}
  .dashboard-content .sos-section{grid-column:1 / -1;}
  .dashboard-content .recent-incidents{grid-column:1 / -1;}
  .quick-actions,.stats-section{margin-bottom:0;}

  /* Contenu décalé recentré dans l'espace restant */
  body.app-view .report-content,
  body.app-view .history-content,
  body.app-view .notifications-content,
  body.app-view .settings-content,
  body.app-view .about-content,
  body.app-view .contacts-content,
  body.app-view .install-help{max-width:820px;}
}

/* Très grands écrans : largeur de lecture maîtrisée */
@media (min-width:1440px){
  .dashboard-content{max-width:1200px;}
}