/* Header */
.header {
  /* Dark Green Background */
  background-color: #004d00;
  padding: 20px 0;
}

/* Container keeps content centered */
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation Menu */
.header nav ul {
  list-style: none;
  display: flex;
  margin: 0;
}

.header nav ul li {
  margin-left: 15px;
}

/* Lighter Green Buttons */
.header nav ul li a {
  background-color: #66cc66; /* lighter green */
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

/* Hover Effect for Buttons */
.header nav ul li a:hover {
  background-color: #55aa55;
  text-decoration: none;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
}

/* Container to centralize content */
.department-container {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}


/* Form styles */
.department-form {
  margin-bottom: 20px;
}

.department-input {
  padding: 10px;
  font-size: 16px;
  width: 60%;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Button base styles */
.btn {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* Specific button styles */
.btn-add {
  background-color: #66cc66; /* lighter green */
  color: #fff;
  margin-right: 10px;
}

.btn-cancel {
  background-color: #999;
  color: #fff;
}

.btn-edit {
  background-color: #66cc66;
  color: #fff;
  margin-right: 5px;
}

.btn-delete {
  background-color: #e74c3c; /* red for delete */
  color: #fff;
}

/* Table styles */
.department-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.department-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.department-form {
  margin-bottom: 20px;
}

.department-input {
  padding: 10px;
  font-size: 16px;
  width: 60%;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.btn {
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-add {
  background-color: #66cc66; /* lighter green */
  color: #fff;
  margin-right: 10px;
}

.btn-cancel {
  background-color: #999;
  color: #fff;
}

.btn-edit {
  background-color: #66cc66;
  color: #fff;
  margin-right: 5px;
}

.btn-delete {
  background-color: #e74c3c;
  color: #fff;
}

/* Header Styles */
.header {
  background-color: #004d00; /* Dark green */
  padding: 20px 0;
  color: #fff;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo img {
  max-height: 60px;
}

/* Navigation Styles */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  position: relative;
  margin-left: 20px;
}

.nav-item > span {
  cursor: pointer;
  padding: 10px 15px;
  display: block;
}

/* Dropdown Menu */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #004d00;
  padding: 10px 0;
  list-style: none;
  min-width: 150px;
  z-index: 1000;
}

.dropdown li {
  margin: 0;
}

.dropdown li a {
  color: #fff;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}

/* Show dropdown on hover */
.nav-item:hover .dropdown {
  display: block;
}

/* Optional: Hover effect on links */
.nav-item > span:hover,
.dropdown li a:hover {
  background-color: #005500;
}
/* Header Styles */
.header {
  background-color: #004d00; /* Dark green */
  padding: 20px 0;
  color: #fff;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo img {
  max-height: 60px;
}

/* Navigation Styles */
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-item {
  position: relative;
  margin-left: 20px;
}

/* Top-level menu button */
.nav-button {
  background: none;
  border: none;
  color: #fff;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
}

.nav-button:hover {
  background-color: #005500;
}

/* Dropdown (submenu) */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #004d00;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  min-width: 150px;
  z-index: 1000;
}

.dropdown li {
  margin: 0;
}

.dropdown li a {
  display: block;
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
}

.dropdown li a:hover {
  background-color: #005500;
}
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #004d00;
  margin: 0;
  padding: 10px 0;
  min-width: 150px;
  z-index: 1000;
  display: flex;          /* Use flex layout */
  flex-direction: column; /* Force vertical stacking */
}

.dropdown li {
  margin: 0;
}

.dropdown li a {
  display: block;         /* Ensure each link takes full width */
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
}

.dropdown li a:hover {
  background-color: #005500;
}

.order-description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ...and so on for each column as needed */

.types-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
}

/* centraliza título e mensagem de erro */
.types-wrapper h2,
.types-wrapper p {
  text-align: center;
}

/* centraliza o formulário do Types */
.types-wrapper .department-form {
  text-align: center;
}

/* centraliza os inputs e botões dentro do formulário */
.types-wrapper .department-input {
  display: inline-block;
}

.types-wrapper .btn {
  display: inline-block;
}