/* css/style.css */
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #f4f6f9; color: #333; line-height: 1.6; padding-bottom: 60px; }
h1, h2, h3 { color: #002244; margin-bottom: 10px; }
a { color: #0056b3; text-decoration: none; }
a:hover { text-decoration: underline; }

nav { background-color: #0056b3; color: white; display: flex; justify-content: flex-end; padding: 1rem 5%; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: relative;}
nav .logo { position: absolute; left: 50%; transform: translateX(-50%);font-size: 1.5rem; font-weight: bold; letter-spacing: 1px; }
nav .logo img {
    height: 60px;
    width: auto;
    vertical-align: middle;
	padding: 1px 0;
    transition: opacity 0.3s ease;
}

nav .logo img:hover {
    opacity: 0.8;
}
nav .welcome-text {
    position: absolute;
    left: 5%; /* Keeps it aligned perfectly with the edge padding */
    color: #e2e8f0; /* A soft, elegant light gray/blue */
    font-size: 0.95rem;
}
nav .nav-links a, nav .nav-links span { color: white; margin-left: 20px; font-weight: 500; transition: opacity 0.3s ease; }
nav .nav-links a:hover { opacity: 0.8; text-decoration: none; }

header { text-align: center; padding: 4rem 1rem; background: linear-gradient(135deg, #e0e7ff 0%, #f4f6f9 100%); border-bottom: 1px solid #d1d5db; }
main { padding: 2rem; max-width: 900px; margin: 0 auto; }

.form-container { background: white; padding: 25px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; max-width: 400px; margin: 20px auto; }
.form-container.wide { max-width: 100%; }
.form-group { margin-bottom: 15px; }
label { font-weight: 600; color: #4b5563; display: inline-block; margin-bottom: 5px; }
input[type="text"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #0056b3; box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2); }

.btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: bold; text-align: center; }
.btn-primary { background-color: #0056b3; color: white; width: 100%; }
.btn-primary:hover { background-color: #004494; color: white; text-decoration: none; }
.btn-success { background-color: #28a745; color: white; }
.btn-warning { background-color: #ffc107; color: #333; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-info { background-color: #17a2b8; color: white; }
.btn-small { padding: 5px 10px; font-size: 0.9rem; }

.card { background: white; border: 1px solid #e5e7eb; border-radius: 8px; padding: 25px; margin-top: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.admin-box { background-color: #f8f9fa; border: 1px solid #ced4da; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.alert-success { color: green; background: #e6ffed; padding: 10px; border: 1px solid #28a745; border-radius: 4px; margin-bottom: 15px; }
.alert-error { color: red; margin-bottom: 15px; font-weight: bold; }

table { width: 100%; border-collapse: collapse; margin-top: 20px; background-color: white; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-radius: 8px; overflow: hidden; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #e5e7eb; }
th { background-color: #002244; color: white; }
footer { text-align: center; padding: 1.5rem; background-color: #002244; color: #e2e8f0; position: fixed; width: 100%; bottom: 0; }

/* --- SLIDESHOW STYLES --- */
.slideshow-container {
    max-width: 800px;
    position: relative;
    margin: auto;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.slide {
    display: none; /* Hidden by default */
    padding: 20px;
    text-align: center;
    animation: fade 0.5s;
}

.slide img {
    max-width: 100%;
    border-radius: 4px;
    margin-bottom: 20px;
}

.slide p {
    font-size: 1.1rem;
    color: #4b5563;
}

/* Next & previous buttons */
.prev-btn, .next-btn {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.3s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 86, 179, 0.8);
    border: none;
}

.next-btn {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev-btn:hover, .next-btn:hover {
    background-color: #002244;
}

/* Slide Progress Indicator */
.slide-counter {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
    background: rgba(0,0,0,0.5);
    border-radius: 0 0 4px 0;
}

@keyframes fade {
    from {opacity: .4} 
    to {opacity: 1}
}
/* =========================================
   📱 MOBILE RESPONSIVE DESIGN
   ========================================= */
@media (max-width: 768px) {
    
    /* 1. Stack the Navigation Bar */
    nav {
        flex-direction: column;
        justify-content: center;
        padding: 1rem;
    }
    
    nav .logo {
        position: relative; /* Turns off the absolute desktop centering */
        left: auto;
        transform: none;
        margin-bottom: 15px; /* Adds breathing room below the logo */
    }

    nav .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    nav .nav-links a, nav .nav-links span {
        margin-left: 0; /* Resets the wide desktop spacing */
        font-size: 0.9rem;
    }

    /* 2. Maximize Screen Real Estate for Cards and Forms */
    .form-container, .form-container.wide, .card {
        width: 95%;
        padding: 15px;
        margin: 15px auto;
    }

    /* 3. Stack Action Buttons */
    /* This clever trick overrides the inline flexbox styles we put on the buttons */
    .card div[style*="display: flex"], 
    .admin-box div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .card .btn, .admin-box .btn {
        width: 100% !important;
        flex: none !important; /* Stops them from trying to sit side-by-side */
    }

    /* 4. Resize Analytics Charts for Mobile Screens */
    canvas {
        max-height: 250px !important;
    }
	nav .welcome-text {
        position: relative;
        left: auto;
        margin-bottom: 10px;
        text-align: center;
    }
}