/* ═══════════════════════════════════════════════════════
   SafeHaven – heat-monitoring.css
   Heat / Disaster Monitoring module
   ═══════════════════════════════════════════════════════ */

.heat-page { min-height:100vh; padding-top:64px; display:flex; flex-direction:column; }
.heat-main { flex:1; padding:28px 24px 56px; }
.heat-container { max-width:1000px; margin:0 auto; }

/* ─── Page header ──────────────────────────────────── */
.heat-page-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.heat-page-head-left { display:flex; align-items:center; gap:14px; }
.heat-page-head-icon {
    width:44px; height:44px; background:var(--orange-pale);
    border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
}
.heat-page-head-icon svg { width:24px; height:24px; color:var(--orange); }
.heat-page-head h2 { color:var(--white); font-size:1.15rem; font-weight:600; }
.heat-page-head p { color:var(--text-muted); font-size:0.8rem; margin-top:1px; }
.heat-live-badge {
    display:flex; align-items:center; gap:6px;
    background:var(--red-pale); border:1px solid rgba(231,76,60,0.3);
    border-radius:20px; padding:5px 12px;
    color:var(--red-light); font-size:0.76rem; font-weight:700;
}
.heat-live-dot { width:7px; height:7px; background:var(--red); border-radius:50%; box-shadow:0 0 6px var(--red); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ─── Alert Priority Section ──────────────────────── */
.alert-priority-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.priority-box {
    background: var(--navy-800);
    border: 1px solid rgba(52,152,219,0.14);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform var(--transition), border-color var(--transition);
    cursor: pointer;
}

.priority-box:hover {
    transform: translateX(4px);
    border-color: rgba(52,152,219,0.3);
}

.priority-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    min-width: 50px;
}

.priority-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.priority-box.priority-critical {
    border-left: 4px solid var(--red);
}

.priority-box.priority-critical .priority-number {
    color: var(--red-light);
}

.priority-box.priority-warning {
    border-left: 4px solid var(--orange);
}

.priority-box.priority-warning .priority-number {
    color: var(--orange);
}

.priority-box.priority-unread {
    border-left: 4px solid var(--accent);
}

.priority-box.priority-unread .priority-number {
    color: var(--accent-light);
}

.create-alert-btn {
    width: 100%;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.create-alert-btn:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.create-alert-btn:active {
    transform: translateY(0);
}

/* ─── Sensor grid ──────────────────────────────────── */
.sensor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:28px; }
.sensor-card {
    background:var(--navy-800); border:1px solid rgba(52,152,219,0.13);
    border-radius:var(--radius-lg); padding:18px;
    transition:transform var(--transition), border-color var(--transition);
}
.sensor-card:hover { transform:translateY(-2px); border-color:rgba(52,152,219,0.3); }
.sensor-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sensor-card-head span { color:var(--text-secondary); font-size:0.82rem; font-weight:600; }
.sensor-val { color:var(--white); font-size:1.6rem; font-weight:700; }
.sensor-val .unit { font-size:0.88rem; color:var(--text-muted); font-weight:500; margin-left:3px; }
.sensor-sub { color:var(--text-muted); font-size:0.76rem; margin-top:3px; }
/* Coloured top border per status */
.sensor-card.status-critical { border-top:3px solid var(--red); }
.sensor-card.status-warn     { border-top:3px solid var(--orange); }
.sensor-card.status-ok       { border-top:3px solid var(--green); }

/* ─── Alerts table ─────────────────────────────────── */
.alerts-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.alerts-section-head h3 { color:var(--white); font-size:1rem; font-weight:600; }
.alerts-section-head a { color:var(--accent-light); font-size:0.81rem; }
.alerts-section-head a:hover { color:var(--accent); }

.alerts-list { display:flex; flex-direction:column; gap:10px; }
.alert-item {
    background:var(--navy-800); border:1px solid rgba(52,152,219,0.12);
    border-radius:var(--radius-lg); padding:14px 18px;
    display:flex; align-items:flex-start; gap:14px;
}
.alert-item-icon {
    width:36px; height:36px; border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.alert-item-icon svg { width:18px; height:18px; }
.ai-red    { background:var(--red-pale); }    .ai-red    svg { color:var(--red-light); }
.ai-orange { background:var(--orange-pale); } .ai-orange svg { color:var(--orange); }
.ai-blue   { background:var(--accent-pale); } .ai-blue   svg { color:var(--accent-light); }

.alert-item-body { flex:1; }
.alert-item-body h4 { color:var(--white); font-size:0.88rem; font-weight:600; margin-bottom:2px; }
.alert-item-body p { color:var(--text-muted); font-size:0.8rem; line-height:1.45; }
.alert-item-meta { display:flex; align-items:center; gap:10px; margin-top:5px; }
.alert-item-meta .badge { font-size:0.71rem; }
.alert-item-meta .ai-time { color:var(--text-muted); font-size:0.76rem; }

/* ─── Responsive ───────────────────────────────────── */
@media(max-width:600px){
    .heat-page-head { flex-direction:column; align-items:flex-start; }
    .sensor-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:380px){
    .sensor-grid { grid-template-columns:1fr; }
}/* ═══════════════════════════════════════════════════════
   SafeHaven – heat-monitoring.css
   Heat / Disaster Monitoring module
   ═══════════════════════════════════════════════════════ */

.heat-page { min-height:100vh; padding-top:64px; display:flex; flex-direction:column; }
.heat-main { flex:1; padding:28px 24px 56px; }
.heat-container { max-width:1000px; margin:0 auto; }

/* ─── Page header ──────────────────────────────────── */
.heat-page-head {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:24px; flex-wrap:wrap; gap:12px;
}
.heat-page-head-left { display:flex; align-items:center; gap:14px; }
.heat-page-head-icon {
    width:44px; height:44px; background:var(--orange-pale);
    border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center;
}
.heat-page-head-icon svg { width:24px; height:24px; color:var(--orange); }
.heat-page-head h2 { color:var(--white); font-size:1.15rem; font-weight:600; }
.heat-page-head p { color:var(--text-muted); font-size:0.8rem; margin-top:1px; }
.heat-live-badge {
    display:flex; align-items:center; gap:6px;
    background:var(--red-pale); border:1px solid rgba(231,76,60,0.3);
    border-radius:20px; padding:5px 12px;
    color:var(--red-light); font-size:0.76rem; font-weight:700;
}
.heat-live-dot { width:7px; height:7px; background:var(--red); border-radius:50%; box-shadow:0 0 6px var(--red); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* ─── Alert Priority Section ──────────────────────── */
.alert-priority-section {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px;
}

.priority-box {
    background: var(--navy-800);
    border: 1px solid rgba(52,152,219,0.14);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: transform var(--transition), border-color var(--transition);
    cursor: pointer;
}

.priority-box:hover {
    transform: translateX(4px);
    border-color: rgba(52,152,219,0.3);
}

.priority-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    min-width: 50px;
}

.priority-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.priority-box.priority-critical {
    border-left: 4px solid var(--red);
}

.priority-box.priority-critical .priority-number {
    color: var(--red-light);
}

.priority-box.priority-warning {
    border-left: 4px solid var(--orange);
}

.priority-box.priority-warning .priority-number {
    color: var(--orange);
}

.priority-box.priority-unread {
    border-left: 4px solid var(--accent);
}

.priority-box.priority-unread .priority-number {
    color: var(--accent-light);
}

.create-alert-btn {
    width: 100%;
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    padding: 16px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.create-alert-btn:hover {
    background: var(--accent-light);
    transform: translateY(-2px);
}

.create-alert-btn:active {
    transform: translateY(0);
}

/* ─── Sensor grid ──────────────────────────────────── */
.sensor-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:28px; }
.sensor-card {
    background:var(--navy-800); border:1px solid rgba(52,152,219,0.13);
    border-radius:var(--radius-lg); padding:18px;
    transition:transform var(--transition), border-color var(--transition);
}
.sensor-card:hover { transform:translateY(-2px); border-color:rgba(52,152,219,0.3); }
.sensor-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sensor-card-head span { color:var(--text-secondary); font-size:0.82rem; font-weight:600; }
.sensor-val { color:var(--white); font-size:1.6rem; font-weight:700; }
.sensor-val .unit { font-size:0.88rem; color:var(--text-muted); font-weight:500; margin-left:3px; }
.sensor-sub { color:var(--text-muted); font-size:0.76rem; margin-top:3px; }
/* Coloured top border per status */
.sensor-card.status-critical { border-top:3px solid var(--red); }
.sensor-card.status-warn     { border-top:3px solid var(--orange); }
.sensor-card.status-ok       { border-top:3px solid var(--green); }

/* ─── Alerts table ─────────────────────────────────── */
.alerts-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.alerts-section-head h3 { color:var(--white); font-size:1rem; font-weight:600; }
.alerts-section-head a { color:var(--accent-light); font-size:0.81rem; }
.alerts-section-head a:hover { color:var(--accent); }

.alerts-list { display:flex; flex-direction:column; gap:10px; }
.alert-item {
    background:var(--navy-800); border:1px solid rgba(52,152,219,0.12);
    border-radius:var(--radius-lg); padding:14px 18px;
    display:flex; align-items:flex-start; gap:14px;
}
.alert-item-icon {
    width:36px; height:36px; border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.alert-item-icon svg { width:18px; height:18px; }
.ai-red    { background:var(--red-pale); }    .ai-red    svg { color:var(--red-light); }
.ai-orange { background:var(--orange-pale); } .ai-orange svg { color:var(--orange); }
.ai-blue   { background:var(--accent-pale); } .ai-blue   svg { color:var(--accent-light); }

.alert-item-body { flex:1; }
.alert-item-body h4 { color:var(--white); font-size:0.88rem; font-weight:600; margin-bottom:2px; }
.alert-item-body p { color:var(--text-muted); font-size:0.8rem; line-height:1.45; }
.alert-item-meta { display:flex; align-items:center; gap:10px; margin-top:5px; }
.alert-item-meta .badge { font-size:0.71rem; }
.alert-item-meta .ai-time { color:var(--text-muted); font-size:0.76rem; }

/* ─── Responsive ───────────────────────────────────── */
@media(max-width:600px){
    .heat-page-head { flex-direction:column; align-items:flex-start; }
    .sensor-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:380px){
    .sensor-grid { grid-template-columns:1fr; }
}