/* ========================
   Global Reset & Typography
======================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background-color: #000000; /* Dark background from screenshot */
  color: #ffffff;            /* White text for contrast */
  line-height: 1.6;
  min-height: 100vh;
}

/* ========================
   Navbar
======================== */
.navbar {
  background-color: rgba(0, 0, 0, 0.9);
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #333;
}

.navbar h1 {
  color: #00E600; /* Neon Green from logo */
  font-size: 1.8rem;
  letter-spacing: -1px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-links li a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  color: #00E600;
}

/* ========================
   Containers & Cards
======================== */
.container, .form-section, .profile-card, .login-box, #scanResult {
  max-width: 600px;
  margin: 3rem auto;
  background-color: #111111; /* Slightly lighter black for cards */
  padding: 2.5rem;
  border-radius: 0;          /* Sharp professional edges like the screenshot */
  border: 1px solid #222;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

h2, h3, .profile-title {
  color: #ffffff;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

/* ========================
   Form Styling
======================== */
.form-group label, .field-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #888;
  font-size: 0.85rem;
  text-transform: uppercase;
}

.form-group input, .form-group select, .field-input {
  width: 100%;
  padding: 0.9rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
}

.form-group input:focus, .field-input:focus {
  border-color: #00E600;
  outline: none;
}

/* ========================
   Buttons (Neon Green Style)
======================== */
button, .edit-btn, .save-btn, #verifyBtn, #logoutBtn {
  background-color: #00E600; /* Vibrant Green from "DEVIS GRATUIT" button */
  color: #000;               /* Black text on green button */
  border: none;
  padding: 1rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

button:hover, .edit-btn:hover, .save-btn:hover {
  background-color: #ffffff;
  color: #000;
  transform: translateY(-2px);
}

#rejectBtn {
  background-color: transparent;
  border: 1px solid #ff4444;
  color: #ff4444;
}

/* ========================
   Tables (History Page)
======================== */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  color: #ccc;
}

th {
  text-align: left;
  padding: 1rem;
  border-bottom: 2px solid #00E600;
  color: #00E600;
  font-size: 0.8rem;
  text-transform: uppercase;
}

td {
  padding: 1rem;
  border-bottom: 1px solid #222;
}

tr:hover {
  background-color: #1a1a1a;
}

/* ========================
   Special Elements (QR & Cards)
======================== */
.center-card, .reward-card, .drive-card {
  background-color: #111111;
  border-left: 4px solid #00E600;
  padding: 1.5rem;
  margin-bottom: 1rem;
  transition: 0.3s;
}

.center-card:hover {
  background-color: #1a1a1a;
  border-left-width: 8px;
}

#qrcode img, .qr-image-inline {
  border: 5px solid #fff; /* QR needs white background to be scannable */
  padding: 5px;
  background: white;
}

/* ========================
   Responsive Design
======================== */
@media (max-width: 768px) {
  .nav-links {
    background-color: #111;
    top: 70px;
  }
  
  .profile-wrapper {
    flex-direction: column;
    padding: 1rem;
  }
}



/* ========================
   Grid Layout for Cards
======================== */
/* Wrapper for the dynamic content */
#cleanupDrivesResult, #centerResults,#rewardsList {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  gap: 20px;
  max-width: 1200px;
  margin: 2rem auto;
  padding: 20px;
}

/* Base Card Style (Used for both Drives and Centers) */
.small-box-card {
  background-color: #111111; /* Dark card background */
  border: 1px solid #222;
  border-top: 4px solid #00E600; /* Neon green top accent */
  padding: 1.5rem;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, background-color 0.3s ease;
  min-height: 220px; /* Keeps cards uniform */
}

.small-box-card:hover {
  transform: translateY(-5px);
  background-color: #1a1a1a;
  border-color: #00E600;
}

/* Card Content Styling */
.small-box-card h3 {
  color: #00E600;
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
  text-align: left;
}

.small-box-card p {
  color: #ccc;
  font-size: 0.85rem;
  margin: 0.3rem 0;
  line-height: 1.4;
}

.small-box-card strong {
  color: #ffffff;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 5px;
}

/* ========================
   Responsive Fixes
======================== */
@media (max-width: 1024px) {
  #cleanupDrivesResult, #centerResults {
    grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
  }
}

@media (max-width: 700px) {
  #cleanupDrivesResult, #centerResults {
    grid-template-columns: 1fr; /* 1 column for mobile */
  }
}


/* ========================
   Waste History Table Container
======================== */
.container {
  max-width: 1200px; /* Wider for history data */
  margin: 3rem auto;
  padding: 2rem;
  background-color: #111111; /* Dark card background */
  border-radius: 8px;
  border: 1px solid #222;
  overflow: hidden; /* Clips children to rounded corners */
}

.container h1 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}

/* 1. Responsive Wrapper: Essential for Mobile */
#historyTableWrapper {
  width: 100%;
  overflow-x: auto; /* Adds horizontal scroll only if needed */
  border-radius: 4px;
}

/* 2. Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px; /* Prevents columns from squishing too much */
  color: #ffffff;
}

/* 3. Headers: Spinat Neon Green */
th {
  background-color: #000000;
  color: #00E600; /* Neon Green accent */
  text-align: left;
  padding: 1.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 2px solid #00E600; /* Matches line in screenshot */
}

/* 4. Table Rows & Data */
td {
  padding: 1.2rem;
  border-bottom: 1px solid #222;
  font-size: 0.95rem;
  color: #cccccc;
}

tr:hover {
  background-color: #1a1a1a; /* Subtle highlight */
}

/* Status Colors */
td:nth-child(4) {
  font-weight: bold;
  text-transform: capitalize;
}

/* Success/Error Icon Styling */
td:nth-child(5), td:nth-child(6) {
  font-size: 1.2rem;
  text-align: center;
}



/* ========================
   Profile Card (Spinat Dark Theme)
======================== */
.profile-card {
  background-color: #111111; /* Dark grey from screenshots */
  padding: 2.5rem;
  margin: 3rem auto;
  border-radius: 4px; /* Professional sharp edges */
  border: 1px solid #222;
  max-width: 500px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.profile-title {
  color: #ffffff;
  font-size: 1.8rem;
  margin-bottom: 2rem;
  text-align: center;
}

/* Inline Fields (Name: sayali) */
.inline-field {
  display: flex;
  align-items: center;
  gap: 10px; /* Space between Name: and sayali */
  margin-bottom: 1rem;
}

.field-label {
  color: #888;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.field-value {
  color: #00E600; /* Neon Green for the actual data */
  font-weight: bold;
  font-size: 1rem;
}

/* Input Group Styling */
.field-group {
  margin-bottom: 1.5rem;
}

.field-group label {
  display: block;
  color: #888;
  font-size: 0.8rem;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: bold;
}

.field-input {
  width: 100%;
  padding: 0.75rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.field-input[readonly] {
  border-color: #222;
  color: #666;
}

/* ========================
   Buttons (Small & Professional)
======================== */
.edit-btn, .save-btn {
  background-color: #00E600; /* Neon Green from Spinat */
  color: #000;               /* Black text on neon background */
  border: none;
  padding: 0.6rem 1.2rem;    /* Reduced padding for smaller size */
  font-size: 0.8rem;         /* Smaller font */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  width: auto;               /* Buttons only as wide as their text */
  display: inline-block;
}

.edit-btn:hover, .save-btn:hover {
  background-color: #ffffff;
  color: #000;
  transform: translateY(-2px);
}

.save-btn {
  margin-top: 1rem;
  width: 100%; /* Save button remains full width for importance */
}

/* QR Code scannability */
#qrcode {
  background: white; /* Required for scannability */
  padding: 10px;
  display: inline-block;
  border-radius: 4px;
  margin-top: 10px;
}


/* Hide hamburger by default (Desktop) */
.hamburger {
  display: none;
  cursor: pointer;
  color: #00E600;
  font-size: 2rem;
}

/* Only show on Mobile */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .nav-links {
    display: none; /* Logic for your JS toggle */
  }
}

@media (max-width: 768px) {
  /* 1. Positioning the Container */
  .nav-links {
    display: none; /* Controlled by JS .active */
    flex-direction: column;
    position: absolute;
    top: 60px;       /* Directly under the black navbar */
    right: 10px;     /* Small gap from the edge */
    width: 200px;    /* FIXED SMALL WIDTH instead of 100% */
    background-color: #111111; /* Dark grey card theme */
    border: 1px solid #00E600; /* Neon Green border */
    border-radius: 8px;
    padding: 10px 0;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
  }

  /* 2. Showing the Menu */
  .nav-links.active {
    display: flex; /* Triggered by your hamburger click */
  }

  /* 3. Small List Items */
  .nav-links li {
    width: 100%;
    text-align: left; /* Professional left-alignment */
  }

  .nav-links li a {
    display: block;
    padding: 10px 20px;
    font-size: 0.85rem; /* Smaller font size */
    color: #ffffff;
    text-decoration: none;
    transition: background 0.3s;
  }

  /* 4. Hover Effect */
  .nav-links li a:hover {
    background-color: #1a1a1a;
    color: #00E600;
  }

  /* 5. Adjust the Logout Button inside the menu */
  #logoutBtn {
    margin: 10px 20px;
    width: calc(100% - 40px);
    padding: 8px;
    font-size: 0.75rem;
  }
}


/* ========================
   Professional Auth Styles
======================== */
.container {

  border: none !important;      /* Removes the outer line */
    box-shadow: none !important;   /* Removes any outer glow */
    
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000000; /* Full black background from Spinat */
}

.login-box {
  background-color: #111111; /* Sleek dark card */
  padding: 3rem;
  width: 100%;
  max-width: 400px;
  border-radius: 8px;
  border: 1px solid #222;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.login-box h2 {
  color: #ffffff;
  font-size: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  font-weight: 600;
  letter-spacing: -0.5px;
}

/* Input Styling */
.login-box input {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1.2rem;
  background-color: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: #ffffff;
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.login-box input:focus {
  border-color: #00E600; /* Neon Green focus border */
  outline: none;
}

/* Professional Neon Button */
.login-box button {
  width: 100%;
  padding: 1rem;
  background-color: #00E600; /* Spinat Neon Green */
  color: #000000;            /* Black text for high contrast */
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
}

.login-box button:hover {
  background-color: #ffffff;
  color: #000000;
  transform: translateY(-2px);
}

/* Footer text */
.login-box p {
  text-align: center;
  margin-top: 1.5rem;
  color: #888;
  font-size: 0.9rem;
}

.login-box a {
  color: #00E600;
  text-decoration: none;
  font-weight: 600;
}

.login-box a:hover {
  text-decoration: underline;
}



/* Landing Page Specific Styles */
.landing-page {
    background-color: #000000;
    color: #ffffff;
}

.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rem 9%;
    min-height: 80vh;
}

.hero-content h1 {
    font-size: 4.4rem;
    line-height: 1.1;
    margin-bottom: 2rem;
}

.hero-content h1 span {
    color: #00E600; /* Neon Green accent */
}

.hero-btns {
    display: flex;
    gap: 2rem;
    margin-top: 3rem;
}

.btn-primary, .btn-outline {
    padding: 0.8rem 1.6rem; /* Decreased from 1.5rem 3rem */
    font-size: 1.4rem;      /* Decreased from 1.8rem */
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
    transition: 0.3s;
}

.btn-primary {
    background-color: #00E600;
    color: #000;
}

.btn-outline {
    border: 2px solid #00E600;
    color: #00E600;
}


/* Right-side Link Group */
.auth-nav {
    display: flex;
    list-style: none; /* Removes bullet points */
    gap: 3rem;        /* Spacing between links */
}

/* Individual Link Styling */
.auth-nav li {
    list-style: none;
}

.auth-nav li a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    transition: 0.3s ease;
}

/* Hover Effect: Neon Green */
.auth-nav li a:hover {
    color: #00E600; 
    text-shadow: 0 0 8px rgba(0, 230, 0, 0.6);
}


/* ========================
   Hamburger & Mobile Nav Fixes
======================== */

/* 1. Hide Hamburger on Desktop */
.hamburger {
  display: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  z-index: 1001;
}

/* 2. Hamburger Bars Style */
.hamburger span {
  width: 25px;
  height: 3px;
  background-color: #00E600; /* Matches your Neon Green theme */
  border-radius: 2px;
  transition: 0.3s ease;
}

/* 3. Mobile Responsive View (Vertical Menu) */
@media (max-width: 768px) {
  /* Show hamburger on mobile */
  .hamburger {
    display: flex;
  }

  /* Transform auth-nav into a vertical side menu */
  .auth-nav {
    display: none; /* Hidden until .active is toggled via JS */
    flex-direction: column;
    position: absolute;
    top: 70px;     /* Positioned under navbar */
    right: 0;
    width: 200px;  /* Small professional width */
    background-color: #111111; /* Matches your card theme */
    padding: 2rem;
    gap: 1.5rem;
    border-left: 1px solid #00E600; /* Neon accent border */
    border-bottom: 1px solid #00E600;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  }

  /* The class triggered by your JavaScript click */
  .auth-nav.active {
    display: flex;
  }

  /* Adjust link sizes for mobile touch */
  .auth-nav li a {
    font-size: 1.2rem;
    text-align: right;
    display: block;
    width: 100%;
  }

  /* Smaller button inside the mobile menu */
  .btn-small {
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}



/* ========================
   Mobile Responsive Fixes
   ======================== */

@media (max-width: 768px) {
  /* 1. Scale down the Hero Typography */
  .hero-content h1 {
    font-size: 2.5rem; /* Reduced from 4.4rem to fit mobile screens */
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .hero-content p {
    font-size: 1rem;
    text-align: center;
    padding: 0 5%;
  }

  /* 2. Adjust Hero Layout */
  .hero {
    flex-direction: column; /* Stacks text and image vertically */
    padding: 5rem 5% 2rem;
    min-height: auto;
    text-align: center;
  }

  /* 3. Scale down Buttons */
  .hero-btns {
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .logo {
    
  color: #00E600;            /* Neon Green from your theme */
  font-size: 2.5rem;        /* Professional heading size */
  font-weight: 900;         /* Bold for branding */
  letter-spacing: -1px;     /* Sleek, modern spacing */
  text-transform: uppercase; /* Match professional utility style */
  cursor: pointer;          /* Indicates it is clickable */
  }

  .btn-primary, .btn-outline {
    padding: 0.7rem 1.4rem; /* Smaller padding for mobile */
    font-size: 1.1rem;      /* Smaller text size */
    width: auto;            /* Keeps buttons side-by-side if they fit */
  }

  /* 4. Handle Hero Image */
  .hero-image {
    width: 100%;
    margin-top: 3rem;
  }

  .hero-image img {
    max-width: 80%;
    height: auto;
  }

  /* 5. Mobile Navbar Adjustments */
  .navbar {
    padding: 1rem 5%;
  }

  .logo {
    
  color: #00E600;            /* Neon Green from your theme */
  font-size: 1.8rem;        /* Professional heading size */
  font-weight: 700;         /* Bold for branding */
  letter-spacing: -1px;     /* Sleek, modern spacing */
  text-transform: uppercase; /* Match professional utility style */
  cursor: pointer;          /* Indicates it is clickable */
  }
}

/* Extra small screens (Phones under 480px) */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 2rem;
  }

  .hero-btns {
    flex-direction: column; /* Stack buttons on very narrow screens */
    width: 100%;
    align-items: center;
  }

  .btn-primary, .btn-outline {
    width: 80%; /* Make buttons prominent on small phones */
    text-align: center;
  }
}



/* ========================
   Big Screen (Desktop) Styles
/* ========================
   Big Screen (Desktop) Styles
======================== */
/* ========================
   Big Screen (Desktop) Styles
======================== */
@media (min-width: 769px) {
  /* 1. Side-by-Side Hero Layout */
  .hero {
    display: flex;
    flex-direction: row;     /* Text left, Image right */
    justify-content: space-between;
    align-items: center;
    padding: 8rem 9%;
    min-height: 85vh;
    text-align: left;
    gap: 4rem;              /* Added gap to prevent text/image touching */
  }

  /* 2. Text Content - Takes up more space */
  .hero-content {
    flex: 2;                /* Takes up 2 parts of space */
    max-width: 700px;
  }

  .hero-content h1 {
    font-size: 4.4rem;
    line-height: 1.1;
    margin-bottom: 2rem;
  }

  /* 3. Hero Image Positioning - "Very Small" */
  .hero-image {
    flex: 1;                /* Takes up only 1 part of space */
    display: flex;
    justify-content: center; 
    margin-top: 0;
  }

  .hero-image img {
    width: 300px;           /* Reduced width significantly for "very small" look */
    height: auto;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 0 0 30px rgba(0, 230, 0, 0.15);
    object-fit: contain;    /* Ensures image doesn't distort */
  }

  /* 4. Desktop Navbar & Buttons */
  .navbar {
    padding: 1.5rem 9%;
  }

  .logo {
    color: #00E600;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -1px;
  }

  .hero-btns {
    justify-content: flex-start;
    gap: 2rem;
  }

  .btn-primary, .btn-outline {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
  }
}


/* ========================
   History Page Layout Fixes
======================== */
@media (min-width: 769px) {
  /* 1. Prevent scrolling on the entire page */
  html, body {
    height: 100vh;
    overflow: hidden; 
  }

  /* 2. Container takes full height minus navbar */
  .container:has(#historyTableWrapper) {
    display: flex;
    flex-direction: column;  /* Keeps table BELOW heading */
    height: calc(100vh - 80px); /* Adjust 80px based on navbar height */
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 9%;
    background: transparent;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;        /* Prevents container from stretching */
  }

  /* 3. Heading remains unchanged as per your style */
  .container:has(#historyTableWrapper) h1 {
    font-size: 2.8rem;
    color: #ffffff;
    text-align: left;
    margin-top: 0;
    margin-bottom: 1.5rem;   /* Fixed space between heading and table */
    flex-shrink: 0;          /* Prevents heading from shrinking */
  }

  /* 4. Table Wrapper grows to fill space, but hides overflow */
  #historyTableWrapper {
    flex: 1;
    width: 100%;
   
    margin-top: 0;
  }

  /* 5. Neon Green Table Accents */
  #historyTable {
    width: 100%;
    border-collapse: collapse;
  }

  #historyTable th {
    color: #00E600;          /* Neon Green */
    border-bottom: 2px solid #00E600; /* Green divider like Rewards */
    padding-bottom: 1rem;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-align: left;
  }

  #historyTable td {
    padding: 1.2rem 0.5rem;  /* Slightly reduced padding to fit more rows */
    border-bottom: 1px solid #222;
    color: #cccccc;
  }
}



/* --- History Page Mobile Fixes --- */
@media (max-width: 768px) {
    /* Allow the body to scroll on mobile so content isn't cut off */
    html, body {
        height: auto;
        overflow: auto;
    }

    .container:has(#historyTableWrapper) {
        height: auto;
        padding: 2rem 5%;
        display: block; /* Stack heading and table vertically */
    }

    .container:has(#historyTableWrapper) h1 {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 2rem;
    }

    /* Make the table scrollable horizontally so it doesn't squash */
    #historyTableWrapper {
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
    }

    #historyTable {
        min-width: 600px; /* Forces enough width for data to be readable */
    }
}

/* --- Rewards Mobile Fix (Strictly 2 Cards) --- */
@media (max-width: 768px) {
    #rewardsList {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem 5%;
    }

    /* Target the reward container generated by your JS */
    #rewardsList > div:nth-child(n+3) {
        display: none !important;
    }

    #rewardsList > div:nth-child(-n+2) {
        display: block !important;
        width: 100%;
        max-width: 350px;
    }
}

body { overflow-y: auto; }