/* Global styling */
body {
  font-family: "Lato", "Roboto", "Helvetica", "Arial", sans-serif, serif; /* Modern, professional, and readable font */
  background-color: #ffffff; /* Soft off-white for a calm background */
  color: #2d3748; /* Dark slate gray for text, professional yet not harsh */
  margin: 0;
  padding: 0;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Content styling */
#content {
  width: 70%; /* Sets the content div to x% of its parent's width */
  margin: 0 auto; /* Centers the content div horizontally */
  padding: 20px; /* Inner padding for comfort */
  background-color: #ffffff; /* White background for content clarity */
  height: calc(
    90vh - 120px
  ); /* Almost full viewport height, adjusted for header/nav */
  display: flex; /* Use flex to manage internal layout */
  flex-direction: column; /* Stack children vertically */
  overflow: hidden;
}

/* Header styling */
header {
  text-align: center; /* Centers the text horizontally */
  font-size: 2em; /* Slightly larger for prominence */
  padding: 20px; /* More padding for breathing room */
  color: #2d3748; /* Deep teal for a sophisticated, comfortable tone */
  font-weight: 500; /* Medium weight for balance */
}

/* Placeholder styling */
input::placeholder,
textarea::placeholder {
  color: #a0aec0; /* Light gray for placeholders, subtle and professional */
}

/* Navbar styling */
nav {
  display: flex; /* Flexbox for layout */
  justify-content: space-between; /* Pushes brand/links to left, auth to right */
  align-items: center; /* Vertically center items */
  padding: 10px 5%; /* 10px top/bottom, 5% left/right */
  background-color: #f5f6f5; /* Light gray navbar */
  position: relative; /* For pseudo-element borders */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Brand Section (App Name and Logo) */
.nav-brand {
  width: 20%; /* Fixed at 20% of nav width */
  display: flex;
  align-items: center; /* Vertically align logo and title */
}

.nav-logo {
  width: 40px; /* Placeholder size, adjust as needed */
  height: 40px;
  margin-right: 10px; /* Space between logo and title */
}

.nav-title {
  margin: 0; /* Remove default h1 margins */
  font-size: 2em; /* Larger for prominence, matches original header */
  color: #2d3748; /* Matches original header color */
  font-weight: 500; /* Matches original header weight */
}

/* Links Section (Expenses and Charts) */
.nav-links {
  width: 50%; /* Fixed at 50% of nav width */
  display: flex;
  justify-content: flex-start; /* Left-align content */
  gap: 50px; /* Space between Expenses and Charts */
  font-size: 1.5em;
}

/* Auth Section (Login and Sign Up) */
.nav-auth {
  width: 30%; /* Fixed at 30% of nav width */
  display: flex;
  justify-content: flex-end; /* Right-align content */
  align-items: center;
}

#auth-links {
  display: flex;
  gap: 50px; /* Fixed gap between Login and Sign Up */
  font-size: 1.5em; /* Matches original nav size */
}

/* Pseudo-elements for borders */
nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: #333;
  transform: translateX(-50%);
}

nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  background: #333;
  transform: translateX(-50%);
}

/* Links styling */
a {
  text-decoration: none;
  color: #4a5568; /* Muted slate for links, professional yet calm */
  font-weight: 500; /* Medium weight for emphasis */
  transition: color 0.2s ease; /* Smooth hover transition */
}

a:hover {
  color: #2b6cb0; /* Soft blue for hover */
}

/* Form input styling */
input,
textarea,
select {
  width: 125px; /* Full width for consistency */
  padding: 6px; /* Comfortable padding */
  margin-bottom: 2%; /* Space between inputs */
  margin-right: 10px;
  border: 1px solid #e2e8f0; /* Light gray border, soft and professional */
  border-radius: 6px; /* Slightly rounded corners */
  background-color: #fafafa; /* Very light gray background for comfort */
  font-family: inherit; /* Matches body font */
  font-size: 1em; /* Readable size */
  color: #2d3748; /* Matches body text color */
  box-sizing: border-box; /* Ensures padding doesn’t affect width */
  transition: border-color 0.2s ease; /* Smooth border color transition */
}

/* Focus state for all inputs */
input:focus,
textarea:focus,
select:focus {
  outline: none; /* Removes default outline */
  border-color: #2b6cb0; /* Soft blue on focus, matching link hover */
  background-color: #ffffff; /* White background when focused */
}

/* Specific style for select input */
select {
  appearance: none; /* Removes default dropdown arrow for custom styling */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%234a5568" stroke-width="2"><polyline points="6 9 12 15 18 9"></polyline></svg>'); /* Custom arrow */
  background-repeat: no-repeat;
  background-position: right 12px center; /* Positions arrow on the right */
  padding-right: 30px; /* Space for the arrow */
}