/* AIKYATHA - Premium Dark Theme (Final) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --bg-dark: #0b1120;
    --bg-card: #151e32;
    --bg-header: rgba(11, 17, 32, 0.95);
    --accent-cyan: #38bdf8;
    --accent-gold: #fbbf24;
    --accent-danger: #ef4444;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
a { text-decoration: none; color: inherit; transition: 0.3s ease; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 4rem 0; }
.text-gold { color: var(--accent-gold); }
.text-cyan { color: var(--accent-cyan); }
.text-muted { color: var(--text-muted); }
.text-main { color: var(--text-main); }

/* Navigation */
nav { position: sticky; top: 0; background: var(--bg-header); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); z-index: 1000; padding: 1rem 0; }
.nav-container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 1.5rem; font-weight: 700; color: var(--accent-cyan); }
.nav-links { display: flex; gap: 2rem; }
.nav-links a { font-weight: 500; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
.nav-links a:hover { color: var(--accent-cyan); }
.nav-links .active { color: var(--accent-cyan); border-bottom: 2px solid var(--accent-cyan); }

/* Marquee */
.marquee-wrapper { overflow: hidden; white-space: nowrap; padding: 2rem 0; background: linear-gradient(to right, var(--bg-dark), transparent 10%, transparent 90%, var(--bg-dark)); position: relative; }
.marquee-content { display: inline-flex; animation: scroll 20s linear infinite; gap: 1rem; }
.marquee-content img { height: 180px; width: 280px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); opacity: 0.8; transition: 0.3s; }
.marquee-content img:hover { opacity: 1; transform: scale(1.05); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* Team Layout */
.team-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem; }
.team-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; width: 280px; text-align: center; transition: 0.3s; }
.team-card:hover { transform: translateY(-5px); border-color: var(--accent-cyan); }
.team-card img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; margin: 0 auto 1.5rem; border: 3px solid var(--accent-gold); }

/* General Cards */
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: 0.3s; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }

/* Buttons */
.btn { padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: 600; cursor: pointer; border: none; display: inline-block; }
.btn-primary { background: var(--accent-cyan); color: #000; }
.btn-outline { border: 1px solid var(--border); color: var(--text-main); background: transparent; }
.btn-drive { background: #1FA463; color: white; display: inline-flex; align-items: center; gap: 8px; }

/* Inputs & Forms */
/* Special handling for Date Input Dark Mode */
input[type="date"] {
    color-scheme: dark; /* Ensures calendar popup is dark */
}
input, textarea, select { width: 100%; padding: 0.8rem; background: #0f172a; border: 1px solid var(--border); color: white; margin-bottom: 1rem; border-radius: 6px; font-family: inherit; }
input[type="file"] { padding: 0.5rem; background: var(--bg-card); cursor: pointer; }

/* Admin Panel */
.admin-layout { display: flex; min-height: 100vh; }
.sidebar { width: 250px; background: #0f172a; border-right: 1px solid var(--border); padding: 2rem; flex-shrink: 0; }
.admin-content { flex-grow: 1; padding: 2rem; overflow-y: auto; }
.sidebar li { padding: 0.8rem; cursor: pointer; color: var(--text-muted); margin-bottom: 0.5rem; border-radius: 4px; }
.sidebar li.active, .sidebar li:hover { background: var(--bg-card); color: var(--accent-cyan); }
.data-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.data-table th, .data-table td { padding: 1rem; border-bottom: 1px solid var(--border); text-align: left; }

footer { background: var(--bg-card); padding: 2rem 0; margin-top: auto; text-align: center; border-top: 1px solid var(--border); }
/*@media (max-width: 768px) { .nav-links { display: none; } .admin-layout { flex-direction: column; } .sidebar { width: 100%; } }*/

/* css/style.css - APPEND THIS TO THE BOTTOM */

/* --- MOBILE RESPONSIVENESS START --- */

/* 1. Hamburger Icon Styles */
.hamburger {
    display: none; /* Hidden on Desktop */
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    /* FIX: Use your defined variable so lines are visible */
    background-color: var(--accent-cyan); 
    transition: 0.3s;
}

/* 2. Media Query for Mobile Devices */
/* --- MOBILE RESPONSIVENESS (Big Logo + Gap + Menu) --- */
/* --- MOBILE RESPONSIVENESS (Side-by-Side Layout) --- */
@media screen and (max-width: 768px) {
    
    /* 1. NAVBAR: Logo Left, Hamburger Right (SAME LINE) */
    .navbar {
        display: flex !important;
        flex-direction: row !important; /* Force Horizontal */
        justify-content: space-between; /* Push items to edges */
        align-items: center; /* Vertically Center */
        padding: 1rem 5%; /* Add side padding */
        min-height: 70px; /* Standard height */
    }

    .logo {
        font-size: 1.5rem; /* Readable size */
        padding: 0;
        border: none;
        width: auto; /* Allow it to shrink/grow */
        text-align: left;
    }

    .hamburger {
        display: flex;
        margin: 0; /* Remove old margins */
        align-self: center; /* Center with Logo */
    }

    /* 2. MENU DROPDOWN (Slides down) */
    .nav-links {
        display: flex !important; 
        position: absolute;
        top: 100%; /* Push below navbar */
        right: 0;
        width: 100%;
        background-color: var(--bg-card); 
        flex-direction: column;
        text-align: center;
        transform: translateY(-200%);
        transition: transform 0.4s ease-in-out;
        z-index: 998;
    }

    .nav-links.active {
        transform: translateY(0%);
    }

    /* 3. BODY HEADER: DU Logo + Title (SAME LINE) */
    /* Assuming you have a container like <header class="hero-header"> */
    .hero-header, .header-container {
        display: flex !important;
        flex-direction: row !important; /* Force Horizontal */
        justify-content: center; /* Center them together */
        align-items: center;
        gap: 10px; /* Space between Logo and Text */
        flex-wrap: nowrap; /* Do NOT let them stack */
        padding: 1rem 0;
    }

    /* Resize them to fit on one line */
    .hero-header img, .header-container img {
        width: 50px !important; /* Smaller logo for mobile */
        height: 50px !important;
        margin: 0 !important; /* Remove huge margins */
    }

    .hero-header h1, .header-container h1 {
        font-size: 1.5rem !important; /* Scale down text */
        margin: 0 !important;
        line-height: 1;
        text-align: left;
    }

    /* 4. GENERAL ZOOM OUT FEEL */
    .container {
        width: 95%; /* Use full width */
        padding: 0 10px;
    }

    /* Keep grids scrollable or smaller instead of stacking vertically if you prefer */
    .grid-3 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Make items smaller to fit side-by-side */
        gap: 10px;
    }
}
/* --- WELCOME SECTION MOBILE FIX --- */
@media screen and (max-width: 768px) {
    
    /* 1. Target the Welcome/Hero Container */
    /* Adjust '.hero-content' to whatever class your text is in */
    .hero-content, .welcome-section {
        width: 100% !important; /* Force full width */
        max-width: 100% !important;
        padding: 0 1rem !important; /* Small side padding */
        text-align: left; /* Keep it left-aligned or center if you prefer */
    }

    /* 2. Style the "Welcome" Heading */
    .hero-content h2, .welcome-section h2 {
        font-size: 2rem; /* Big Headline */
        margin-bottom: 1rem;
        border-bottom: 2px solid var(--accent-cyan); /* Cool Underline */
        display: inline-block; /* Make underline only as wide as text */
        padding-bottom: 5px;
    }

    /* 3. Style the Paragraph Text */
    .hero-content p, .welcome-section p {
        font-size: 1.1rem; /* Readable text size */
        line-height: 1.6; /* Breathing room between lines */
        word-wrap: break-word; /* Prevent word breaking issues */
        width: 95%; /* Use almost full screen width */
        margin: 0 auto; /* Center the block if needed */
    }
}