body { font-family: Arial, sans-serif; background: #f0f2f5; margin: 0; padding: 20px; }
.container { max-width: 400px; margin: auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.hidden { display: none; }
input[type="text"] { width: calc(100% - 22px); padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; }
button { width: 100%; padding: 12px; border: none; border-radius: 4px; color: #fff; background: #007bff; font-size: 16px; cursor: pointer; }
button:hover { background: #0056b3; }

/* Kontrol Paneli Butonları */
.alarm-btn { margin-top: 10px; }
#sari-alarm { background: #ffc107; color: #000; }
#turuncu-alarm { background: #fd7e14; }
#kirmizi-alarm { background: #dc3545; }
#alarm-yok { background: #6c757d; }

/* Dashboard */
.dashboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.user-box { background: #fff; border: 2px solid #ddd; padding: 15px; border-radius: 8px; box-shadow: 0 1px 5px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.user-box h3 { margin-top: 0; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.user-box p { margin: 5px 0; font-size: 14px; }
.alarm-status { font-weight: bold; }

/* Alarm Durumları */
.user-box.alarm-sari { background: #fff3cd; border-color: #ffc107; }
.user-box.alarm-turuncu { background: #ffe5d0; border-color: #fd7e14; }
.user-box.alarm-kirmizi { background: #f8d7da; border-color: #dc3545; }

.flashing {
    animation: flash 1s infinite;
}
@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Kırmızı Alarm Modalı */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(220, 53, 69, 0.9); z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-content { background: #fff; padding: 30px; border-radius: 8px; text-align: center; box-shadow: 0 5px 20px rgba(0,0,0,0.5); }
.modal-content h2 { color: #dc3545; margin-top: 0; }
.modal-content input { width: 250px; }
.modal-content button { width: auto; padding: 10px 20px; background: #28a745; }


/* --- YENİ EKLENEN STİLLER --- */

/* "Müdahale Edildi" durumu için yeşil kutu */
.user-box.alarm-yesil {
    background: #d4edda;
    border-color: #28a745;
}

/* Sarı/Turuncu alarm çözme butonu */
.resolve-btn-yellow {
    width: auto;
    font-size: 12px;
    padding: 5px 10px;
    margin-top: 10px;
    background: #28a745; /* Yeşil - "Bu işi bitir" */
    border-radius: 4px;
}
.resolve-btn-yellow:hover {
    background: #218838;
}

/* Kullanıcı Silme (X) Butonu */
.delete-btn {
    float: right;
    color: #dc3545; /* Kırmızı */
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 5px;
}
.delete-btn:hover {
    color: #a71d2a;
}