/* Culori și stiluri */
.bg-sky-pale { background-color: rgba(230, 247, 255, 0.8); }
.bg-sky-soft { background-color: rgba(179, 229, 252, 0.85); }
.text-slate-gray { color: #4A4A4A; }
.bg-sky-medium { background-color: #4FC3F7; }
.bg-sky-dark { background-color: #0288D1; }
.bg-warm-red { background-color: #DC3545; }
.text-warm-red { color: #DC3545; }
.bg-pale-lavender { background-color: #D6D6F2; }
.bg-fresh-green { background-color: #28A745; }
.text-fresh-green { color: #28A745; }
.bg-orange-danger { background-color: rgba(251, 146, 60, 0.2); }
.bg-orange-400 { background-color: #FB923C; }
.bg-yellow-400 { background-color: #FBBF24; }
.bg-yellow-500 { background-color: #D97706; }

/* Stiluri specifice pentru mini-joc AFK */
.afk-btn-green { background-color: #28A745; }
.afk-btn-red { background-color: #DC3545; }
.afk-btn-yellow { background-color: #FBBF24; }

body { font-family: 'Inter', sans-serif; }
#emailModal { z-index: 1000; }
#profileModal { z-index: 1000; }
#statusModal { z-index: 1000; }
#errorModal { z-index: 1100; }
#afkModal { z-index: 1200; }

.profile-container {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
}
.profile-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.select-image.border-sky-medium {
    border-color: #4FC3F7 !important;
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}
.select-image.border-transparent { border-color: transparent; }

.notes-textarea {
    min-height: 80px;
    max-height: 200px;
    overflow-y: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.notes-column {
    max-width: 320px;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow: hidden;
}

/* Stiluri pentru tabel */
.grid.grid-cols-5 {
    margin-bottom: 12px; /* Spațiu între rânduri */
}

/* Asigură z-index corect pentru tabel */
section.animate-fade-in-up {
    position: relative;
    z-index: 10;
}

/* Stiluri pentru ceas */
#liveClock {
    font-family: monospace;
    font-size: 16px;
    color: #4b5e6f;
}

/* Stiluri pentru validare formular */
.input-error {
    border-color: #DC3545 !important;
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.5);
}
.error-message {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* Efect chakra-pulse pentru banner */
@keyframes chakra-pulse {
    0% { box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.7); }
    50% { box-shadow: 0 0 10px 5px rgba(79, 195, 247, 0.3); }
    100% { box-shadow: 0 0 0 0 rgba(79, 195, 247, 0.7); }
}
.animate-chakra-pulse {
    animation: chakra-pulse 2s infinite ease-in-out;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fade-in 0.5s ease-in; }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-up { animation: fade-in-up 0.5s ease-in; }
@keyframes vibrate { 
    0% { transform: translateX(0); }
    20% { transform: translateX(-2px); }
    40% { transform: translateX(2px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
.animate-vibrate { animation: vibrate 0.5s infinite; }
.shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.hover\:shadow-lg:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
.hover\:-translate-y-1:hover { transform: translateY(-4px); }
.hover\:scale-105:hover { transform: scale(1.05); }