/* SchoolSec - Stiluri personalizate pentru interfața de securitate */

/* =====================================================================
   Variabile și Baza
   ===================================================================== */
:root {
    --color-bg: #1a1f2e;
    --color-card: #1e2535;
    --color-border: #3d4a5c;
    --color-success: #2ea043;
    --color-danger: #f85149;
    --color-warning: #e3b341;
    --color-info: #388bfd;
    --color-text: #e8edf5;
    --color-muted: #a8b3c1;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* =====================================================================
   Îmbunătățire text-muted — mai vizibil pe fundal întunecat
   ===================================================================== */
.text-muted {
    color: #b8c5d4 !important;  /* era ~#6c757d Bootstrap — mult mai vizibil */
}

/* Etichete mici din carduri (p.small, small.text-muted) */
.card-body p.text-muted,
.card-body small.text-muted,
.card-body .small.text-muted {
    color: #c8d4e0 !important;
    font-size: 0.85rem !important;
}

/* =====================================================================
   Carduri
   ===================================================================== */
.card {
    border-radius: 8px;
}

.card-header {
    font-size: 0.95rem;
    padding: 0.6rem 1rem;
}

/* =====================================================================
   Badge-uri de severitate (pentru alerte)
   ===================================================================== */
.severity-critical {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}

.severity-high {
    background-color: #78350f !important;
    color: #fde68a !important;
}

.severity-medium {
    background-color: #1e3a8a !important;
    color: #bfdbfe !important;
}

.severity-low {
    background-color: #065f46 !important;
    color: #a7f3d0 !important;
}

.severity-info {
    background-color: #1f2937 !important;
    color: #d1d5db !important;
}

.severity-warning {
    background-color: #92400e !important;
    color: #fde68a !important;
}

/* =====================================================================
   Navbar
   ===================================================================== */
.navbar-brand {
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.nav-link {
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: #3fb950 !important;
}

.nav-link.active {
    color: #3fb950 !important;
    border-bottom: 2px solid #3fb950;
}

/* =====================================================================
   Tabele
   ===================================================================== */
.table {
    font-size: 0.9rem;
}

.table-dark {
    --bs-table-bg: #1a1f2e;
    --bs-table-striped-bg: #1e2535;
    --bs-table-hover-bg: #222b3d;
    --bs-table-color: #e8edf5;
    --bs-table-border-color: #3d4a5c;
}

.table thead th {
    background-color: #1e2535;
    color: #a8b3c1;
    font-weight: 600;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #3d4a5c !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* =====================================================================
   Forme și Inputuri
   ===================================================================== */
.form-control:focus,
.form-select:focus {
    border-color: #238636;
    box-shadow: 0 0 0 0.2rem rgba(35, 134, 54, 0.25);
}

/* =====================================================================
   Butoane
   ===================================================================== */
.btn-success {
    background-color: #238636;
    border-color: #238636;
}

.btn-success:hover {
    background-color: #2ea043;
    border-color: #2ea043;
}

/* =====================================================================
   Animații și efecte speciale
   ===================================================================== */

/* Efect pulsație pentru badge-ul Live */
#statusBadge {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* Culoarea codului IP */
code {
    font-size: 0.8rem;
}

/* =====================================================================
   Scroll personalizat
   ===================================================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #1a1f2e;
}

::-webkit-scrollbar-thumb {
    background: #3d4a5c;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #5a6a7e;
}

/* =====================================================================
   Footer
   ===================================================================== */
footer {
    font-size: 0.8rem;
    background-color: #1a1f2e;
}

/* =====================================================================
   Progress bar animat
   ===================================================================== */
.progress {
    background-color: #1e2535;
}

/* =====================================================================
   Alert flash messages
   ===================================================================== */
.alert {
    font-size: 0.9rem;
    border-radius: 6px;
}

/* =====================================================================
   Clase personalizate pentru carduri și inputuri (înlocuiesc bg-black/bg-dark Bootstrap)
   ===================================================================== */
.schoolsec-card {
    background-color: #1e2535 !important;
    color: var(--color-text);
}

.schoolsec-input {
    background-color: #1e2535 !important;
    color: var(--color-text) !important;
    border-color: #3d4a5c !important;
}

.schoolsec-input:focus {
    background-color: #252d40 !important;
    color: var(--color-text) !important;
}

/* =====================================================================
   Responsivitate
   ===================================================================== */
@media (max-width: 768px) {
    .navbar-brand {
        font-size: 1rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .card {
        margin-bottom: 1rem;
    }
}