/* General Layout & Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

:root {
--whatsapp-green: #1c6f28;
--whatsapp-dark-green: #1c6f28;
--facebook-blue: #4267B2;
--soft-gray: #f0f2f5;
--light-gray: #e9ecef;
--dark-gray: #1c1e21;
--card-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

html, body {
  height: 100%;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size:15px;
  color: #000000;
  
  /* Background Settings */
  background-color: #1C6F28;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('../bg2.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  

}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@media (min-width: 992px) {
  /* 1. RESTORE SCROLLING on the main window */
  html, body {
    overflow-y: auto; 
  }

  /* 2. Flexible Box Container */
  .dashboard-container {
    width: 95%;
    max-width: 1200px;
    
    /* CRITICAL CHANGE: Use min-height instead of height */
    min-height: 85vh; /* Starts at 85% of screen height */
    height: auto;     /* Allows it to GROW if content is long */
    
    margin: 5vh auto; /* Center it */
    
    border-radius: 20px;
    overflow: hidden; /* Keeps the rounded corners perfect */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }

  /* 3. Sidebar stretches to match the taller box */
  .dashboard-sidebar {
    min-height: 100%; /* Ensures it stretches all the way down */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }

  /* 4. Content sits naturally (No internal scrollbar) */
  .dashboard-main-content {
    height: auto;
    overflow: visible; 
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

body {
min-height: 100vh;
box-sizing: border-box;
}

/* --- Login Page --- */
.login-page-wrapper {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}

.login-container {
width: 90%;
max-width: 400px;
background-color: #fff;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}

.login-logo {
width: 100px;
}

.social-login-text {
color: #666;
margin: 20px 0;
}

.facebook-login-btn {
align-items: center;
justify-content: center;
background-color: var(--facebook-blue);
color: white;
padding: 12px 20px;
border-radius: 4px;
text-decoration: none;
font-weight: bold;
font-size: 16px;
transition: background-color 0.3s ease;
width: 100%;
box-sizing: border-box;
}

.facebook-login-btn i {
margin-right: 10px;
margin-top: 10px;


}

.facebook-login-btn:hover {
background-color: #365899;
}

/* --- Main Site Layout (Dashboard) --- */
.dashboard-container {
display: flex;
width: 100%;
background-color: #fff;
box-shadow: var(--card-shadow);
min-height: 100vh;
}

.dashboard-sidebar {
  /* Narrower desktop width */
  width: 15%;
  min-width: 15%;
  padding: 30px 20px;
  background-color: #000000;
  color: white;
  transition: transform 0.3s ease, width 0.3s ease, min-width 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sidebar-header {
  text-align: center;
  margin-bottom: 40px;
}

.sidebar-logo {
  width: 70px;
  height: auto;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-grow: 1;
}

.nav-list li {
  margin-bottom: 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  text-decoration: none;
  color: #aeb9c7;
  font-weight: 500;
  border-radius: 10px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.nav-link i {
  margin-right: 15px;
  font-size: 16px;
  width: 20px;
  text-align: center;
}

.nav-link:hover,
.nav-link.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: white;
}

/* The logout button now has consistent styling with nav links */
.logout-btn {
  background-color: #FF9800;
  color: white;
  width: 80px; /* Fixed width makes centering visible */
  border-radius: 4px;
  border: none;
  text-align: center;
  padding: 5px 8px;
  
  /* --- CENTER THE BUTTON --- */
  margin: 20px auto; /* 30px Top/Bottom, Auto Left/Right (Centers it) */
  /* ------------------------- */
  
  cursor: pointer;
  transition: background-color 0.3s ease;
  
  /* Flex ensures the ICON inside the button is centered */
  display: flex; 
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.logout-btn:hover {
  background-color: #1C6F28;
  color: white;
}

/*
  NEW: The mobile menu toggle has been moved to the header in the HTML, so this
  CSS block is now for a toggle button that is NOT in the sidebar. We've adjusted
  its properties to be hidden on desktop and visible on mobile.
*/
.mobile-menu-toggle {
  display: none; /* Hidden on desktop by default */
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: var(--dark-gray);
  padding: 5px;
}

.dashboard-main-content {
  flex-grow: 1;
  padding: 40px;
  background-color: #fff;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
}

/*
  NEW: We are now using flexbox to lay out the header contents (menu, logo, user info)
  on a single line, with space between them.
*/
.dashboard-header {
    display: flex;
    align-items: center;
    /* Remove 'justify-content: space-between' if you have it */
    
    margin-bottom: 35px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--light-gray);
}

.dashboard-header h2 {
  color: var(--whatsapp-dark-green);
  margin: 0;
  font-size: 32px;
  display: flex;
  align-items: center;
}

.dashboard-header h2 i {
  margin-right: 15px;
  font-size: 32px;
}

.dashboard-header #user-info {
  color: #000000;
  text-align: right;
  margin-left: auto; 
  text-align: right; /* Optional: Aligns the text inside the box to the right */
}

/*
  This rule is no longer necessary as the logo is now part of the flexbox header
  and does not need a separate container to be centered.
*/
.logo-container {
  text-align: center;
  margin-bottom: 1px;
  
}

/* Adjust the logo size to better fit the new header layout */
.main-logo {
  width: 80px;
  max-width: 100%;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.card {
  background-color: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--light-gray);
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card h3,h4 {
  margin-top: 0;
  padding-bottom: 5px;
  border-bottom: 2px solid var(--light-gray);
  color: #000000;
  display: flex;
  align-items: center;
}

.card h3 i {
  margin-right: 15px;
  font-size: 16px;
}

.card-description {
  color: #666;
  margin-bottom: 15px;
}

/* Form and Buttons */
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  font-weight: 500;
  color: #444;
}

input[type="text"], input[type="password"], textarea, select, input[type="url"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 14px;
  background-color: var(--soft-gray);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus, input[type="url"]:focus {
  outline: none;
  border-color: var(--whatsapp-dark-green);
  box-shadow: 0 0 8px rgba(18, 140, 126, 0.2);
  background-color: #fff;
}


#phone-number-input {
  width: 200px;
  position: left;
  padding: 14px; /* New: Updated padding */
  border: 1px solid #ddd; /* New: Updated border */
  border-radius: 4px; /* New: Updated border-radius */
  box-sizing: border-box;
  font-size: 14px; /* New: Updated font size */
  background-color: #f0f2f5; /* Using a similar soft gray color */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state for the input field */
#phone-number-input:focus {
  outline: none;
  border-color: #000000; /* Using a solid color similar to var(--whatsapp-dark-green) */
  box-shadow: 0 0 8px rgba(18, 140, 126, 0.2);
  background-color: #fff;
}

/* Placeholder text style */
#phone-number-input::placeholder {
  color: #9ca3af;
}

/* *** MODIFIED SECTION: .form-actions *** */
.form-actions {
 display: flex;
 gap: 15px;
 flex-wrap: wrap;
 margin-top: 10px;
 align-items: flex-start; /* Ensures buttons don't stretch vertically in a row */
}

/* *** MODIFIED SECTION: button *** */
button {
  background-color: var(--whatsapp-green);
  color: white;
  border: #000000;
  padding: 10px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  
  /* ** FIX FOR STRETCHING ** */
  width: auto; /* Ensures the button width is based on content */
  align-self: flex-start; /* Stops stretching in the column-flex form */
}

button i {
  margin-right: 10px;
}

button:hover {
  background-color: var(--whatsapp-dark-green);
  transform: translateY(-2px);
}

#show-hide-token {
  background-color: #6c757d;
}

#show-hide-token:hover {
  background-color: #5a6268;
}

.cred-value {
  word-break: break-all;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  background-color: var(--soft-gray);
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-block;
}

.history-list {
  list-style-type: none;
  padding: 0;
}

.history-list li {
  background-color: var(--light-gray);
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.history-list li:hover {
  background-color: #dde1e5;
}

/* Table styles for campaigns */
.table-container {
  overflow-x: auto;
}

#campaigns-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#campaigns-table th, #campaigns-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

#campaigns-table th {
  background-color: var(--whatsapp-dark-green);
  color: white;
  font-weight: bold;
}

#campaigns-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

#campaigns-table tr:hover {
  background-color: #ddd;
}


/* Footer */
footer {
  text-align: center;
  padding: 20px;
  color: #666;
  font-size: 12px;
}

/* Chat Styles */
/* ================= REPLACED CHAT STYLES ================= */

/* The main card container */
.chat-container {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  /* Removes old styles that might conflict */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* NEW: Wrapper to hold the 2 columns side-by-side */
.chat-wrapper {
  display: flex;
  height: 600px; /* Fixed height is required for internal scrolling */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden; /* Keeps corners rounded */
  margin-top: 15px;
  background-color: #fff;
}

/* --- LEFT COLUMN (25%) --- */
.chat-sidebar {
  width: 25%;
  min-width: 220px; /* Prevents it from getting too thin */
  border-right: 1px solid #eee;
  background-color: #f8f9fa;
  overflow-y: auto; /* Allows the list of numbers to scroll */
  height: 100%;
}

.chat-sidebar .conversation-item {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  border-bottom: 1px solid #f1f1f1;
  transition: background-color 0.2s ease;
}

.chat-sidebar .conversation-item:hover {
  background-color: #e2e6ea;
}

/* Green highlight when a user is selected */
.chat-sidebar .conversation-item.active {
  background-color: #d1e7dd;
  border-left: 4px solid var(--whatsapp-green);
}

.chat-sidebar .user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--whatsapp-green);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 14px;
  margin-right: 10px;
  flex-shrink: 0; /* Prevents avatar from squishing */
}

.chat-sidebar .conversation-info {
  overflow: hidden; /* Hides text if it gets too long */
}

.chat-sidebar .conversation-name {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

/* --- RIGHT COLUMN (75%) --- */
.chat-main {
  width: 75%;
  display: flex;
  flex-direction: column; /* Stacks messages on top of input */
  background-color: #efeae2; /* WhatsApp beige background */
  height: 100%;
}

/* The area where messages scroll */
#chat-window {
  flex-grow: 1; /* Takes up all available space */
  padding: 20px;
  overflow-y: auto; /* Enables scrolling for messages only */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Message Bubbles */
.chat-message {
  padding: 10px 15px;
  border-radius: 8px;
  max-width: 70%;
  font-size: 13px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
}

.sent-message {
  background-color: #d9fdd3; /* WhatsApp sent green */
  color: #111;
  align-self: flex-end; /* Pushes to right */
  border-top-right-radius: 0;
}

.received-message {
  background-color: #ffffff;
  color: #111;
  align-self: flex-start; /* Pushes to left */
  border-top-left-radius: 0;
  box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

/* Input Area Fixed at Bottom */
.chat-input-area {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #f0f0f0;
  border-top: 1px solid #ddd;
}

#reply-text {
  flex-grow: 1;
  margin-right: 10px;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #fff;
  background-color: #fff;
  height: 35px;
  resize: none; /* Prevents user from dragging resize */
  font-family: inherit;
}

#send-reply-btn {
  width: 70px;
  height: 35px;
  border-radius: 4px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: unset; /* Overrides generic button styles */
}

/* Empty State */
.no-chat-selected {
  text-align: center;
  margin-top: 150px;
  color: #888;
}

/* ================= END CHAT STYLES ================= */

#support-btn {
  background-color: #000000;
  width:90px;
  font-size:13px;
  margin-left: auto;
  color: white;
  border-radius: 4px;
  border: none;
  text-align: center;
  padding: 5px 8px;
  margin-top: 5px;
  margin-left: 15px;
  
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none; /* Added to make it look like a link */
}

/* Responsive Design */
@media (max-width: 768px) {
  .dashboard-container {
    flex-direction: column;
  }

  /*
    NEW: Position the sidebar correctly to slide in from the left and
    give it a set width on mobile.
  */
  .dashboard-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 200px; /* Fixed width for mobile view */
    transform: translateX(-100%);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    z-index: 99;
    transition: transform 0.3s ease;
    padding: 30px 20px;
  }

  /* This class is added by the JavaScript to show the sidebar */
  .dashboard-sidebar.active {
    transform: translateX(0);
  }

  .sidebar-header {
    margin-bottom: 20px;
  }

  /* Make the logo fit the new width */
  .sidebar-logo {
    width: 40px;
  }

  /* Make menu items vertical and hide text */
  .nav-list {
    display: flex;
    flex-direction: column;
    align-items: left;
  }
  .nav-link {
    padding: 15px 5px;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .nav-link span, .logout-btn span {
    display: none; /* Hide the text */
  }

  .nav-link i, .logout-btn i {
    margin: 0;
    font-size: 24px;
  }

  /*
    NEW: The mobile menu toggle is now always block on mobile and is
    controlled by the main header's flexbox layout.
  */
  .mobile-menu-toggle {
    display: block;
    padding: 10px;
    float: left; /* Make it float left as requested */
  }

  /* NEW: Style the three lines of the hamburger icon */
  .mobile-menu-toggle .icon-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
  }

  .dashboard-main-content {
    padding: 20px;
    margin-left: 0; /* Ensures main content takes full width */
  }

  /* Hide the chat sidebar on mobile by default */
 

  .chat-main {
    width: 100%;
  }

  /* When sidebar is active, show text and adjust main content margin */
  .dashboard-sidebar.active .nav-link span,
  .dashboard-sidebar.active .logout-btn span {
    display: inline;
    margin-left: 15px;
  }

  .dashboard-sidebar.active .nav-link,
  .dashboard-sidebar.active .logout-btn {
    flex-direction: row;
    justify-content: flex-start;
  }

  .dashboard-sidebar.active .nav-link i,
  .dashboard-sidebar.active .logout-btn i {
    font-size: 18px;
    margin-right: 15px;
  }
}

@media (max-width: 576px) {
  .login-container, .card {
    padding: 20px;
  }
  .dashboard-header {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  
  .form-actions {
  flex-direction: column;
  align-items: stretch; /* Makes buttons same width (optional) */
  gap: 5px;             /* <--- Reduces the space from 15px to 5px */
}
  input[type="text"] {
    width: 100%;
    min-width: unset;
  }
 
  /* *** MODIFIED SECTION: button on mobile *** */
  button {
    width: auto;
        align-self: flex-start;
  }
   
  .chat-main-grid {
    grid-template-columns: 1fr;
  }
}

.status-approved {
  color: green;
  font-weight: bold;
}
.status-pending, .status-rejected {
  color: orange;
  font-weight: bold;
}
.status-disabled {
  color: red;
  font-weight: bold;
}

/* General form styling for the checkout section */
.checkout-container {
  display: flex; /* Make the container a flexbox */
  flex-direction: column; /* Stack items vertically */
  align-items: left; /* Center items horizontally */
  padding: 25px;
  background-image:url('../bg2.webp');
  background-color: #E0E0E0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: 20px auto;
  text-align: left;
  color:black;
}

/* Style for the labels */
.checkout-container label {
  display: block;
  margin-bottom: 1px;
  color: #333;
  font-size: 15px;
  width: 100%; /* Ensure labels take up full width for alignment */
  text-align: left; /* Center the text of the labels */
}

/* Style for the input field */
.checkout-container input[type="tel"] {
  width: 97%;
  padding: 10px;
  margin-bottom: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  transition: border-color 0.3s;
}

.checkout-container input[type="tel"]:focus {
  outline: none;
  border-radius: 4px;
  border-color: #007bff;
}

/* Base styles for all buttons in the checkout section */
/* 1. Added '#' to paystack-button (it is an ID) */
#pay-button, #paystack-button, #paystack-button2, #pay-button2 {
  /* 2. Makes the button shrink to the size of the text */
  width: fit-content; 
  
  background-color: #000000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  color: #fff;
  margin-top: 10px;
  transition: transform 0.2s, box-shadow 0.2s;
  
  /* 3. Flexbox Setup */
  display: flex;
  
  /* 4. Corrected 'left' to 'center' for vertical alignment */
  align-items: center; 
  
  /* 5. Corrected 'left' to 'flex-start' for horizontal alignment */
  justify-content: flex-start; 
  
  /* 6. Added padding so the text isn't crushed against the edges */
  padding: 10px 20px; 
}

.checkout-container button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}



/* Icon styling */
.checkout-button-icon {
  width: 20px;
  height: auto;
  margin-right: 10px;
}

/* Add this CSS to your stylesheet (e.g., styles.css) */

.status-msg {
  position: fixed; /* Fixes the element in the viewport */
  top: 50%; /* Centers it vertically */
  left: 50%; /* Centers it horizontally */
  transform: translate(-50%, -50%); /* Precisely centers the element */
  padding: 15px 30px;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  text-align: center;
  z-index: 1000; /* Ensures it's on top of other content */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out; /* Smooth fade-in/out */
  pointer-events: none; /* Prevents it from blocking clicks */
}

.status-msg.visible {
  opacity: 1; /* Make it visible */
}

/* To ensure all status messages are green as requested, use this. */
.status-msg-success, .status-msg-warn {
  background-color: #28a745; /* Unifies to a single green color */
}

/* Table styles for payments */
.table-container {
  overflow-x: auto;
}

small {
    font-size: 0.85em; /* 80% of the parent element's font size */
}

#payments-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

#payments-table th, #payments-table td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}

#payments-table th {
  background-color: var(--whatsapp-dark-green);
  color: white;
  font-weight: bold;
}

#payments-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

#payments-table tr:hover {
  background-color: #ddd;
}

/* AI Toggle Switch */
.toggle-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.toggle-container label {
  font-weight: 500;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--whatsapp-dark-green);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--whatsapp-dark-green);
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
/* --- FULL POPUP CSS (Fixed Height Version) --- */

/* Full screen overlay */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* The actual popup box */
.popup-content {
  background: #fff;
  padding: 20px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  max-width: 450px;
  width: 90%;
  position: relative;
  text-align: left;
}

/* Close Button (X) */
.close-popup-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: auto;
  height: auto;
  box-shadow: none;
}
.close-popup-btn:hover {
  color: #333;
}

/* --- COMPACT CONTENT STYLES --- */

/* Tighten Heading */
.popup-content h3 {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 1.3rem;
  color: #333;
}

/* Tighten Paragraph */
.popup-content p {
  margin-top: 0;
  margin-bottom: 15px;
  line-height: 1.4;
  color: #666;
  font-size: 0.95rem;
}

/* --- COMPACT FORM ELEMENTS --- */

/* Labels */
.checkout-container label {
  display: block;
  margin-top: 10px;
  margin-bottom: 3px;
  font-weight: bold;
  font-size: 0.85rem;
  color: #000;
}
.checkout-container label:first-of-type {
  margin-top: 0;
}

/* Inputs & Buttons - General Sizing */
.checkout-container input, 
.checkout-container button {
  width: 50%;
  box-sizing: border-box; /* Crucial for height calculation */
  border-radius: 4px;
  font-size: 0.9rem;
  
  /* ⭐ FORCE EXACT HEIGHT MATCH ⭐ */
  height: 34px; 
  margin-top: 2px;
}

/* Button Specifics */
.checkout-container button {
  /* Remove top/bottom padding so fixed height works */
  padding: 0 10px; 
  cursor: pointer;
  
  /* Center text vertically */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  /* Invisible border to match input's border width */
  border: 1px solid transparent; 
}

/* Input Specifics */
.checkout-container input {
  /* Remove top/bottom padding */
  padding: 0 10px; 
  border: 1px solid #ccc;
  color: #333;
}

/* Special fix for the side-by-side M-Pesa section */
.checkout-container div[style*="display: flex"] {
  gap: 8px !important;
  align-items: center; /* Ensures they align perfectly */


} background-color: var(--whatsapp-dark-green); /* Use your defined WhatsApp color */
  /* The transition property is set dynamically by JS to 3000ms */
}

/* 1. Ensure the parent link aligns everything nicely */
.nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between; /* Pushes badge to the right if you want, or remove to keep it near text */
}

/* 2. Fix the text wrapper to hold the badge properly */
.nav-link > span {
    display: flex;
    align-items: center;
    width: 100%;
}

/* 3. The Green Badge Styling */
.nav-badge {
    background-color: #25D366 !important; /* WhatsApp Green */
    color: #ffffff !important;
    font-size: 10px;
    font-weight: bold;
    
    /* Perfect Circle/Pill Shape */
    min-width: 18px;
    height: 18px;
    border-radius: 10px; /* Rounded pill */
    padding: 0 5px;      /* Padding for wider numbers like '100' */
    
    /* Flexbox to center the number exactly in the middle */
    display: inline-flex !important; 
    align-items: center;
    justify-content: center;
    
    /* Positioning */
    margin-left: 10px;
    vertical-align: middle;
    line-height: normal; /* Resets any inherited line-height issues */
}

/* --- FOR TESTING ONLY: Force the badge to show even if 0 --- */
/* Remove this block after you confirm it looks good */
.nav-badge {
    display: inline-flex !important;
}


/* Mobile adjustments for Chat */
@media (max-width: 768px) {
    .chat-wrapper {
        flex-direction: column; /* Stack them on mobile */
        height: auto; /* Let it grow naturally */
    }
    
    .chat-sidebar {
        width: 100%;
        height: auto; /* Short list on top */
        border-right: none;
        border-bottom: 1px solid #ddd;
    }
    
    .chat-main {
        width: 100%;
        height: 400px; /* Chat window below */
    }
}

.btn-green {
    background-color: #28a745; /* Green */
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

/* You must target the 'a' tag inside to change the text color */
.btn-green a {
    color: white;          /* Sets font to white */
    text-decoration: none; /* Removes the underline */
    display: block;        /* Makes the whole button clickable */
}

.btn-green:hover {
    background-color: #218838; /* Slightly darker green on hover */
}


/* Toggle Switch CSS */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}
.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .slider {
  background-color: #4CAF50; /* Green when on */
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
/* 1. Make the container a reference point */
.checkout-container {
    position: relative; 
    /* existing styles... */
}

/* 2. Position the logo wrapper absolutely */
.checkout-logo {
    position: absolute;
    top: 10px;   /* Adjust distance from top */
    right: 15px; /* Adjust distance from right */
    margin: 0;   /* Remove default paragraph margins */
}


/* =========================================
   Stats Section & Reports
/* Stats Grid Layout - Forces 5 columns in one line */
.stats-grid {
    display: grid;
    /* This forces exactly 5 equal columns */
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; /* Reduced gap to save space */
    margin-top: 15px;
}

/* Individual Card Style - Compact Version */
.stat-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 5px; /* Smaller padding */
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    
    /* Optional: Ensure they don't get too tall */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.stat-card:hover {
    transform: translateY(-2px);
}

/* Reduce font sizes slightly to fit better */
.stat-number {
    font-size: 1.5rem; /* Smaller number font */
    font-weight: bold;
    color: #128C7E;
    margin: 5px 0;
}

.stat-label {
    color: #666;
    font-size: 0.75rem; /* Smaller label font */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 5px;
}

/* Make Pie Chart Smaller to fit the new compact card */
.pie-chart {
    width: 80px;  /* Reduced from 120px */
    height: 80px; /* Reduced from 120px */
    border-radius: 50%;
    background: conic-gradient(#ececec 100%, #ececec 0); 
    margin: 0 auto 5px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pie-chart::after {
    content: "";
    width: 60px;  /* Reduced from 90px */
    height: 60px; /* Reduced from 90px */
    background: #fff;
    border-radius: 50%;
    position: absolute;
}

.pie-text {
    position: relative;
    z-index: 1;
    font-weight: bold;
    font-size: 0.9rem; /* Smaller text inside pie */
    color: #333;
}

/* Mobile Responsiveness: Stack them on small screens */
@media (max-width: 900px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }
}

/* Pie Chart Visualization */
.pie-chart {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    /* Gradient is set dynamically via JS */
    background: conic-gradient(#ececec 100%, #ececec 0); 
    margin: 0 auto 10px auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Donut hole effect */
.pie-chart::after {
    content: "";
    width: 90px;
    height: 90px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
}

.pie-text {
    position: relative;
    z-index: 1;
    font-weight: bold;
    font-size: 1.2rem;
    color: #333;
}

/* Usage Level Badges */
.usage-badge { 
    padding: 4px 12px; 
    border-radius: 20px; 
    color: white; 
    font-size: 0.85rem; 
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.5px;
}

.usage-Standard { background-color: #607d8b; } /* Blue Grey */
.usage-Average  { background-color: #17a2b8; } /* Info Cyan */
.usage-Medium   { background-color: #ffc107; color: #333; } /* Warning Yellow */
.usage-High     { background-color: #dc3545; } /* Danger Red */


/* Mobile: Hide the second image */
@media (max-width: 768px) {
    .form-actions img:nth-of-type(2) {
        display: none !important;
    }

    /* Optional: Make the single remaining image bigger on mobile */
    .form-actions img:first-of-type {
        width: 80% !important; 
    }
}