/* Основные стили */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  background-color: #f2f2f7;
}

header {
background: #003366;
color: white;
padding: 1px 10px;
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: left;
font-size: 1.0em;
justify-content: space-between;
}

.top-bar h1 {
padding: 15px;
font-size: 1.4em;
margin: 0;
font-weight: 200;
}

h1{
  font-size: 1.0em;
}

h2{
  margin: auto;
  font-size: 1.0em;
}

h3{
  font-size: 1.0em;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 0.9em;
  padding: 10px;
  color: white;
  background: #003366;
}

#group-filter select{
  width: 200px;
  height: 40px;
  font-size: 1.em;
}

#hamburger {
position: absolute;
top: -5px;
right: 0px;
font-size: 40px;
background: none;
border: none;
cursor: pointer;
z-index: 1000;
color: white;
}

.menu-button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 5px;
  background: #114981;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
}

.menu-button:hover {
  background: #e0e0e0;
}

.wrapper {
  width: 280px;
  margin: 12% auto;
    --background: white;
  --border: rgba(0, 0, 0, 0.125);
  --borderDark: rgba(0, 0, 0, 0.25);
  --borderDarker: rgba(0, 0, 0, 0.5);
  --bgColorH: 0;
  --bgColorS: 0%;
  --bgColorL: 98%;
  --fgColorH: 210;
  --fgColorS: 50%;
  --fgColorL: 38%;
  --shadeDark: 0.3;
  --shadeLight: 0.7;
  --shadeNormal: 0.5;
  --borderRadius: 0.125rem;
  --highlight: #306090;
  background: rgb(255, 255, 255);
  border: 1px solid var(--border);
  border-radius:10px;
  box-shadow: 0 1rem 1rem -0.75rem var(--border);
  display: flex;
  flex-direction: column;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.photo-preview img {
  display: block;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 20px;
  justify-content: flex-start;
}

.recipes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.recipe-card {
  background: white;
  border-radius: 1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 240px;
  border: 1px solid #ccc;
  padding: 12px;
}

.recipe-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  transition: all 0.2s ease;
}

.recipe-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 1rem;
  border: 1px solid #ccc;
}

.recipe-body {
  padding: 1rem;
}

.recipe-body h3 {
  margin: 0 0 0.5rem 0;
}

.recipe-body p {
  margin: 0 0 1rem 0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 4px solid #ccc;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 10px auto;
}

.sign-in {
margin: auto;
font-size: 0.9em;
}

button#btnlogin {
    display: flex;
    background-color: #025615;
    color: white;
    padding: 10px;
    cursor: pointer;
    margin: 15px auto;
}
  
button#btnlogin:primary {
  background:#025615;
  color:white;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
  border-radius: 2px;
  padding: 12px 36px;
}

button#btnlogin:hover {
  background: darken($button-bg-color, 4%);
}
    
button#btnlogin:active {
  background:#025415;
  box-shadow: inset 0 0 10px 2px rgba(0, 0, 0, .2);
}

input#email, input#password {
width: 270px;
padding: 0.4em;
height: 2em;
border-radius:5px;
margin: 5px 0;
outline: none;
font-size: 1.0em;
border:none;
background: transparent;
border: 1px solid #043300;
}

input {
outline: none;
font-size: 1.0em;
background: transparent;
}

/* Меню */
.nav-menu {
  display: none;
  flex-direction: column;
  background-color: #f2f2f2;
  position: fixed;
  top: 60px;
  right: 20px;
  width: 220px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 10px;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.nav-menu.active {
  display: flex;
  opacity: 1;
}

.nav-menu ul { 
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
padding-inline-start: 1px;
}

.nav-menu li {
  list-style: none;
  margin-bottom: 6px;
}

.nav-menu a {
  display: block;
  color: #031a01;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.95em;
  transition: background-color 0.2s ease;
}

.nav-menu a:hover {
  background-color: #abaeb1;
  font-weight: 500;
}

.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Font Awesome 6 Free"
    font-weight: 900;
    color: black;
    padding-right: 10px;
}

#logout-link {
  color: #ff4d4d;
}

/* Стиль текста приветствия */
.nav-menu li strong {
  color: #000000;
  font-weight: bold;
  font-size: 0.9em;
}

#logout-link {
  color: #205304;
  font-size: 0.95em;
  font-weight: bold;
}

#logout-link:hover {
  background-color: rgba(73, 248, 131, 0.328);
  font-weight: bold;
  font-size: 1.1em;
}

/* Контент */
main {
  padding: 1em;
  max-width: 1000px;
  margin: auto;
}

/* Минималистичная таблица ингредиентов */

#ingredients-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin-top: 20px;
  font-size: 1.05em;
  color: #333;
}

#ingredients-table thead {
  background: transparent;
}

#ingredients-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.9em;
  padding: 5px 16px;
  color: #555;
  letter-spacing: 0.02em;
}

#ingredients-table tbody tr {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#ingredients-table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background: #f9f9f9;
}

#ingredients-table td {
  padding: 14px 16px;
  text-align: left;
  border-top: 1px solid #eee;
}

#ingredients-table td:first-child {
  font-weight: 500;
  color: #003366;
}

#ingredients-table td:last-child {
  text-align: center;
}

#ingredients-table td:last-child button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 1.1em;
  transition: color 0.2s ease;
}

#ingredients-table td:last-child button.edit-btn {
  color: #007bff;
}

#ingredients-table td:last-child button.delete-btn {
  color: #ff4d4f;
}

#ingredients-table td:last-child button:hover {
  transform: scale(1.1);
}

#ingredients-table tr:nth-child(even) {
  background: #fafafa;
}

#ingredients-table tr:nth-child(even):hover {
  background: #f0f0f0;
}

#ingredients-table .icon {
  font-size: 1.1em;
  vertical-align: middle;
}

/* Минималистичная таблица рецептов */

#recipes-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin-top: 20px;
  font-size: 1.05em;
  color: #333;
}

#recipes-table thead {
  background: transparent;
}

#recipes-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.9em;
  padding: 6px 16px;
  color: #555;
  letter-spacing: 0.02em;
}

#recipes-table tbody tr {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#recipes-table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background: #f9f9f9;
}

#recipes-table td {
  padding: 14px 16px;
  text-align: left;
  border-top: 1px solid #eee;
}

#recipes-table td:first-child {
  font-weight: 500;
  color: #003366;
}

#recipes-table td:last-child {
  text-align: center;
}

#recipes-table td:last-child button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 1.1em;
  transition: color 0.2s ease;
}

#recipes-table td:last-child button.edit-btn {
  color: #007bff;
}

#recipes-table td:last-child button.delete-btn {
  color: #ff4d4f;
}

#recipes-table td:last-child button:hover {
  transform: scale(1.1);
}

#recipes-table tr:nth-child(even) {
  background: #fafafa;
}

#recipes-table  tr:nth-child(even):hover {
  background: #f0f0f0;
}

#recipes-table  .icon {
  font-size: 1.1em;
  vertical-align: middle;
}


/* Минималистичная таблица ингредиентов */

#suppliers-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
  margin-top: 20px;
  font-size: 1.0em;
  color: #333;
}

#suppliers-table thead {
  background: transparent;
}

#suppliers-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.9em;
  padding: 5px 16px;
  color: #555;
  letter-spacing: 0.02em;
}

#suppliers-table tbody tr {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#suppliers-table tbody tr:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  background: #f9f9f9;
}

#suppliers-table td {
  padding: 14px 16px;
  text-align: left;
  border-top: 1px solid #eee;
}

#suppliers-table td:first-child {
  font-weight: 500;
  color: #003366;
}

#suppliers-table td:last-child {
  text-align: center;
}

#suppliers-table td:last-child button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 1.1em;
  transition: color 0.2s ease;
}

#suppliers-table td:last-child button.edit-btn {
  color: #007bff;
}

#suppliers-table td:last-child button.delete-btn {
  color: #ff4d4f;
}

#suppliers-table td:last-child button:hover {
  transform: scale(1.1);
}

#suppliers-table tr:nth-child(even) {
  background: #fafafa;
}

#suppliers-table tr:nth-child(even):hover {
  background: #f0f0f0;
}

#suppliers-table .icon {
  font-size: 1.1em;
  vertical-align: middle;
}
  
/* Кнопки */
button,
.btn-primary,
.btn-secondary {
  cursor: pointer;
  padding: 8px 10px;
  border: none;
  font-size: 1em;
  color: white;
  background-color: #056735;
  margin-top: 10px;
}

.btn-primary {
  background-color: #056735;
  color: white;
}

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

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

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

.action-btn {
  font-size: 1.2em;
  margin: 0 5px;
  border: none;
  background: none;
  cursor: pointer;
}

.action-btn.edit {
  color: #007bff;
}

.action-btn.delete {
  color: #dc3545;
}

/* Модалка */
.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal.hidden {
  display: none;
}

.modal.active {
  display: block; 
}

.modal-content {
background-color: white;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 650px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.modal-content label {
  display: block;
  margin-top: 10px;
}
.form-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 5px 0;
}

.form-group {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}

.form-group input {
  padding: 10px 14px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus {
  border-color: #007aff;
  box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.modal-content input,
.modal-content select {
  width: 200px;
  border: 1px solid #ffffff;
  font-size: 1em;
}

/* CSS для таблицы, чтобы ингредиенты */

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

#ingredients-table button {
background-color: white;
color: black;
width: 40px;
}

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

#ingredients-table th {
  background-color: #f2f2f2;
}

#ingredients-table input[type="number"],
#ingredients-table select {
  width: 200px;
  margin: auto;
  font-size: 0.9em;
}
/* CSS для таблицы, чтобы рецепты */
#recipes-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
#recipes-table button {
background-color: white;
color: black;
width: 40px;
}

#recipes-table th,#recipes-table td {
  border: 1px solid #ddd;
  padding: 5px 0px 5px 10px;
  text-align: left;
}

#recipes-table th {
  background-color: #f2f2f2;
}

#recipes-table input[type="number"],
#recipes-table select {
  width: 100%;
  box-sizing: border-box;
}

#ordersTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
/* CSS для таблицы, чтобы заказы */
#ordersTable button {
background-color: white;
color: black;
width: 40px;
}

#ordersTable th, 
#ordersTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#ordersTable th {
  background-color: #f2f2f2;
}

#ordersTable input[type="number"],
#ordersTable select {
  width: 100%;
  box-sizing: border-box;
}
/* CSS для таблицы, чтобы доступ к рецептам */
#access-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#access-table button {
background-color: white;
color: black;
width: 40px;
}

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

#access-table th {
  background-color: #f2f2f2;
}

#access-table input[type="number"],
#access-table select {
  width: 100%;
  box-sizing: border-box;
}

/* CSS для таблицы, чтобы доступ к пользователи */
#usersTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#usersTable button {
background-color: white;
color: black;
width: 40px;
}

#usersTable th, 
#usersTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#usersTable th {
  background-color: #f2f2f2;
}

#usersTable input[type="number"],
#usersTable select {
  width: 100%;
  box-sizing: border-box;
}

/* CSS для таблицы, чтобы доступ к history-table*/
#history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#history-table button {
background-color: white;
color: black;
width: 40px;
}

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

#history-table th {
  background-color: #f2f2f2;
}

#history-table input[type="number"],
#history-table select {
  width: 100%;
  box-sizing: border-box;
}


replenishments-table


/* CSS для таблицы, чтобы доступ к replenishments-table */
#replenishments-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#replenishments-table button {
background-color: white;
color: black;
width: 40px;
}

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

#replenishments-table th {
  background-color: #f2f2f2;
}

#replenishments-table input[type="number"],
#replenishments-table select {
  width: 100%;
  box-sizing: border-box;
}

/* CSS для таблицы, чтобы доступ к orderItemsTable */
#orderItemsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#orderItemsTable button {
background-color: white;
color: black;
width: 40px;
}

#orderItemsTable th, 
#orderItemsTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#orderItemsTable th {
  background-color: #f2f2f2;
}

#orderItemsTable input[type="number"],
#orderItemsTable select {
  width: 100%;
  box-sizing: border-box;
}
/* фильтр */

.filters {
  margin-top: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.filters label {
  font-weight: 500;
  font-size: 14px;
}
.filters select {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 1em;
}

/* статусы заказов */

.status-new {
  color: #0a3d62;
  font-weight: 500;
}
.status-processing {
  color: #e1a400;
  font-weight: 600;
}
.status-done {
  color: #27ae60;
  font-weight: 600;
}
.status-delivering {
  color: #2980b9;
  font-weight: 600;
}

/* Модалка для страница - пользователей */
.modal-user {
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1000;
}

.modal-content-user {
  background: #fff;
  padding: 24px;
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  font-family: 'SF UI', Inter, sans-serif;
}

.modal-content-user h3 {
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
}

.modal-content-user label {
  display: block;
  margin: 12px 0 6px;
  font-weight: 500;
}

.modal-content-user input,
.modal-content-user select {
  width: 300px;
  border: 1px solid #white;
  font-size: 15px;
}

/* Кнопки для пользователей */
.btn-user {
  display: inline-block;
  background: #007aff;
  color: white;
  padding: 10px 18px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s ease;
}

.btn-user:hover {
  background: #005fcc;
}

.close-btn-user {
  float: right;
  font-size: 22px;
  cursor: pointer;
}

.group-filter select {
  display: flex;
  justify-content: space-between;
  min-width: 300px;
  align-items: center;
  color: black;
  padding-block: 10px;
  padding-inline: 10px 30px;
  border-radius: 5px;
  border: 1px solid plum;
  cursor: pointer;
  font-weight: 700;
  content: "";
  width: 20px;
  height: 20px; 
}

.recipe-description textarea {
width: 650px;
font-size: 1em;
height: 120px;
border-inline-style: none;
padding-top: 10px;
border-top: none;
border-bottom: none;
}

/* Адаптив */
@media screen and (max-width: 600px) {
  .nav-menu {
    width: 100%;
    right: 0;
    top: 60px;
    border-radius: 0;
  }

  .nav-menu .menu-button {
    text-align: center;
  }

  main {
    padding: 1em;
  }


.user-greeting h2 {
  text-align: center;
  margin: 10px 0;
  color: #003366;
  font-weight: 500;
}