/*

Global styles for BizTrack.xrp redesign.

  We adopt a simple design system with the following palette:
    – Primary: Royal Blue (#003366) for headers, navigation and call‑to‑action
    – Secondary: White (#ffffff) for backgrounds and surfaces
    – Accent: Gold (#FFD700) used sparingly for interactive elements such as
      toggles, highlights and icons.

  These styles enlarge form inputs and buttons for easier interaction, set
  consistent typography, and ensure the login button remains visible on
  every page. The stylesheet can be extended across all pages of the site.
*/

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #ffffff;
  color: #003366;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Navigation bar */
.navbar {
  background-color: #003366;
  color: #ffffff;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Restore logo text size and hide logo image */
.navbar .logo img {
  display: none;
}
.navbar .logo {
  font-size: 1.8rem;
  font-weight: 700;
}


.navbar a {
  color: #ffffff;
  text-decoration: none;
  margin-right: 1.5rem;
  font-weight: 500;
}

.navbar a:hover {
  text-decoration: underline;
}

.navbar .logo {
  font-size: 1.8rem;
  font-weight: 700;
}

/* Form containers */
.auth-container,
.settings-container {
  max-width: 400px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auth-container h2,
.settings-container h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  text-align: center;
}

/* Labels and inputs */
.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.form-group label {
  margin-bottom: 0.3rem;
}

.form-group input {
  padding: 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background-color: #003366;
  color: #ffffff;
  margin-top: 0.5rem;
}

.btn:hover {
  background-color: #00264d;
}

.btn-secondary {
  background-color: #ffffff;
  color: #003366;
  border: 1px solid #003366;
}

.btn-secondary:hover {
  background-color: #f2f2f2;
}

/* Toggle switch for 2FA */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.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;
  border-radius: 24px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.toggle-switch input:checked + .slider {
  background-color: #FFD700;
}

.toggle-switch input:checked + .slider:before {
  transform: translateX(26px);
}

/* QR code display */
.qr-code {
  text-align: center;
  margin-top: 1rem;
}

.qr-code img {
  max-width: 180px;
  margin-bottom: 0.5rem;
}

/* Responsive layout */
@media (max-width: 500px) {
  .auth-container,
  .settings-container {
    margin: 1rem;
    padding: 1rem;
  }
}

/* Dashboard-specific styles */
.dashboard-container {
    
    max-width: 960px;
    
    margin: 2rem auto;
  padding: 2rem;
}


.dashboard-container h2 {
  font-size: 2rem;
  margin-top: 0;
}

.dashboard-container h3 {
  font-size: 1.4rem;
  margin-top: 0;
}

.dashboard-container p,
.dashboard-container li {
  font-size: 1.1rem;
  line-height: 1.5;
}

.batch-form,
.history-box {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #f9f9f9;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

#batchList li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

/* Responsive navigation for mobile */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .navbar .logo {
    margin-bottom: 0.5rem;
  }
  .navbar div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .navbar div a {
    margin: 0.5rem 0;
  }
}
/* Increase logo size and hide BizTrack text in navbar */
.navbar .logo img {
  height: 3em;
  vertical-align: middle;
}

.navbar .logo {
  font-size: 0;
}



/* Begin custom vertical navigation styles */

/* Hide the hamburger icon by default */
.navbar .icon {
  display: none;
}

/* Place nav links container styling */
.nav-links {
  display: flex;
  flex-direction: column;
}

/* Style for active nav link */
.nav-links a.active {
  font-weight: bold;
  text-decoration: underline;
}

/* Desktop layout (min-width 769px) */
@media (min-width: 769px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
    width: 220px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    padding: 2rem 1rem;
    background-color: #003366;
    color: #ffffff;
  }
  .navbar .logo {
    margin-bottom: 2rem;
  }
  .navbar .logo img {
    width: 100%;
    max-width: 180px;
    height: auto;
  }
  .navbar .nav-links {
    width: 100%;
  }
  .navbar .nav-links a {
    color: #ffffff;
    padding: 0.5rem 0;
    display: block;
  }
  .navbar .nav-links a.active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }
  body {
/*
    margin-left: 240px; width: 100%;
    height: auto;
    position: relative;
    padding: 1rem;
  }
  .navbar .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #003366;
    padding: 1rem;
  }
  .navbar.open .nav-links {
    display: flex;
  }
  .navbar .nav-links a {
    color: #ffffff;
    padding: 0.5rem 0;
  }
  .navbar .icon {
    display: block;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
  }

    */
 
  
/* Responsive vertical navigation styles */
@media (min-width: 769px) {
  .navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    left: 0;
    top: 0;
    width: 220px;
    height: 100vh;
    padding: 1rem;
  }

  .navbar .logo {
    margin-bottom: 2rem;
  }

  .navbar .nav-links {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .navbar .nav-links a {
    color: #ffffff;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
  }

  .navbar .nav-links a.active {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
  }

  .navbar .icon {
    display: none;
  }

  body {
    margin-left: 220px;
  }
}

@media (max-width: 768px) {
  .navbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
  }

  .navbar .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #003366;
    padding: 1rem;
  }

  .navbar.open .nav-links {
    display: flex;
  }

  .navbar .nav-links a {
    color: #ffffff;
    padding: 0.5rem 0;
  }

  .navbar .icon {
    display: block;
    color: #ffffff;
    font-size: 1.5rem;
    cursor: pointer;
  }

  body {
    margin-left: 0;
  }
}

/* End custom vertical navigation styles */

  
/* Sidebar navigation styles for redesigned layout */
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 1rem;
  margin-top: 1rem;
  width: 260px;
  background-color: transparent;
}

.sidebar-logo img {
  width: 200px;
  height: auto;
}

/* Style the sidebar navigation list as a white card */
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: -20px;
}

.sidebar-nav li + li {
  margin-top: 0.5rem;
}

.sidebar-nav a {
  color: #1e2a61;
  text-decoration: none;
  font-weight: 600;
}

.sidebar-nav a:hover {
  text-decoration: underline;
}

.sidebar-nav a.active {
  text-decoration: underline;
}

/* Offset main content when sidebar is present */
.main-with-sidebar {
  margin-left: 280px;
}

/* Hide the old top navbar */
.navbar {
  display: none !important;
}

/* Adjust layout to condense page */
.sidebar {
  width: 200px;
  padding: 1rem 0.75rem;
}

.sidebar-logo img {
  width: 160px;
}

.main-with-sidebar {
  margin-left: 200px;
}
/* Adjust hero section to align with sidebar and reduce whitespace */
.m/* Adjust hero section to align with sidebar and reduce whitespace */
.main-with-sidebar > section:first-of-type {
  padding-top: 0 !important;
  margin-top: -6rem !important;
  text-align: left !important;
}
.main-with-sidebar > section:first-of-type h1 {
  margin-top: 0 !important;
}

/* Design enhancements: updated color palette, typography, button styles, layout grids, and footer */
:root {
  --primary-color: #003366;
  --secondary-color: #ffffff;
  --accent-color: #f57c00;
  --accent-green: #0db14b;
  --text-color: #1e2a61;
  --bg-color: #e7f3ff;
  
}

body {-
  color: var(--text-color);
  background-color: #e7f3ff !important;
}

/* Sidebar nav links with icons */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}ortant;
  /* Design enhancements: updated color palette, typography, button styles, layout grids, and footer */
:root {
  --primary-color: #003366;
  --secondary-color: #ffffff;
  --accent-color: #f57c00;
  --accent-green: #0db14b;
  --text-color: #1e2a61;
  --bg-color:#e7f3ff##e7f3ff;
}
  --bg-color: #e7f3ff;body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);
}

/* Sidebar nav links with icons */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
}

/* Base button styles */
.btn {
  display: inline-block;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.btn-primary {
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
}

.btn-primary:hover {
  background-color: #e06b00;
}

.btn-secondary {
  background-color: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.btn-secondary:hover {
  background-color: var(--accent-color);
  color: #ffffff;
}

/* Hero section styling */
.hero {
  padding: 1rem 0;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.hero p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
}

/* Features grid */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Footer styling */
.site-footer {
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 2rem 1rem;
  font-size: 0.875rem;
}

.site-footer a {
  color: var(--accent-color);
  margin-right: 1rem;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.social-icons a {
  margin-right: 1rem;
  font-size: 1.5rem;
  color: var(--secondary-color);
}
/* Further adjust hero spacing */
.hero {
  margin-top: -4rem;
}



}