* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background: #f4f6f9;
  color: #222;
}

header {
  background: #243447;
  color: white;
  padding: 20px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.header-title h1 {
  margin: 0 0 8px;
}

.header-title p {
  margin: 0;
  color: #dce3eb;
}

main {
  max-width: 1200px;
  margin: 25px auto;
  padding: 0 15px;
}

section {
  background: white;
  padding: 22px;
  margin-bottom: 22px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[hidden] {
  display: none !important;
}

h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

h3 {
  margin-top: 0;
}

button {
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  background: #2878d0;
  color: white;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background: #1d63ad;
}

button:disabled {
  background: #aab4bf;
  cursor: not-allowed;
}

input,
select {
  padding: 11px;
  border: 1px solid #ccd3dc;
  border-radius: 6px;
  font-size: 14px;
  min-width: 0;
}

input:focus,
select:focus {
  outline: none;
  border-color: #2878d0;
}

/* Шапка */

.admin-login-button {
  background: #ffffff;
  color: #243447;
  border: 1px solid #dce3eb;
}

.admin-login-button:hover {
  background: #eaf0f6;
}

/* Формы */

#login-form,
#checkout-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 450px;
}

#login-form label,
#checkout-form label {
  font-weight: bold;
  margin-top: 5px;
}

#login-form button,
#checkout-form button {
  margin-top: 8px;
}

#login-message,
#checkout-message,
#orders-message {
  margin-bottom: 0;
}

/* Поиск товаров */

#product-search {
  width: 100%;
  margin-bottom: 18px;
}

/* Каталог товаров */

.products-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.product-list-header,
.product-row {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(130px, 1fr) minmax(100px, 0.8fr) 130px;
  align-items: center;
  gap: 15px;
  padding: 12px;
}

.product-list-header {
  background: #edf1f5;
  font-weight: bold;
  border-radius: 6px;
}

.product-row {
  border-bottom: 1px solid #e5e9ee;
}

.product-name {
  font-weight: bold;
}

.product-price,
.product-stock {
  white-space: nowrap;
}

.product-action {
  text-align: right;
}

.product-action button {
  white-space: nowrap;
}

/* Корзина */

#cart-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-list-header,
.cart-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 90px 120px 120px 90px;
  align-items: center;
  gap: 12px;
  padding: 12px;
}

.cart-list-header {
  background: #edf1f5;
  font-weight: bold;
  border-radius: 6px;
}

.cart-row {
  border-bottom: 1px solid #e5e9ee;
}

.cart-product {
  font-weight: bold;
}

.cart-quantity,
.cart-unit-price,
.cart-line-total {
  white-space: nowrap;
}

.cart-remove {
  text-align: right;
}

.cart-remove button {
  background: #dc3545;
}

.cart-remove button:hover {
  background: #bd2534;
}

.empty-cart {
  color: #777;
}

#cart-summary {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e5e9ee;
}

#cart-summary p {
  margin: 8px 0;
}

#checkout-button {
  margin-top: 10px;
}

/* Административная панель */

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.admin-header p {
  margin: 0;
}

.admin-header button {
  background: #dc3545;
}

.admin-header button:hover {
  background: #bd2534;
}

.admin-orders {
  margin-top: 25px;
}

.admin-orders-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

#orders-search {
  flex: 1;
  width: 100%;
}

#refresh-orders {
  white-space: nowrap;
}

#orders-list {
  width: 100%;
  overflow-x: auto;
}

.orders-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
  font-size: 14px;
}

.orders-table th,
.orders-table td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e9ee;
  text-align: left;
  vertical-align: middle;
}

.orders-table th {
  background: #edf1f5;
  font-weight: bold;
  white-space: nowrap;
}

.orders-table tr:hover td {
  background: #f8fafc;
}

.orders-table select {
  width: 145px;
  padding: 8px;
}

.order-details-button {
  background: #edf1f5;
  color: #243447;
  border: 1px solid #d5dce4;
  padding: 7px 10px;
}

.order-details-button:hover {
  background: #dce5ef;
}

.order-details {
  padding: 12px;
  background: #f7f9fb;
  border-radius: 6px;
  margin-top: 8px;
}

.order-details table {
  width: 100%;
  border-collapse: collapse;
}

.order-details th,
.order-details td {
  padding: 8px;
  border-bottom: 1px solid #e5e9ee;
  text-align: left;
}

.order-details th {
  background: #edf1f5;
}

/* Адаптация для телефонов */

@media (max-width: 650px) {
  header {
    padding: 15px;
  }

  .header-content {
    align-items: flex-start;
  }

  .header-title h1 {
    font-size: 21px;
  }

  .header-title p {
    font-size: 13px;
  }

  main {
    margin-top: 15px;
    padding: 0 10px;
  }

  section {
    padding: 15px;
  }

  .product-list-header {
    display: none;
  }

  .product-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 5px;
  }

  .product-name {
    grid-column: 1 / -1;
  }

  .product-action {
    text-align: right;
  }

  .cart-list-header {
    display: none;
  }

  .cart-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px 5px;
  }

  .cart-product {
    grid-column: 1 / -1;
  }

  .cart-remove {
    text-align: right;
  }

  .admin-orders-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  #refresh-orders {
    width: 100%;
  }

  .admin-header {
    align-items: flex-start;
  }

  .orders-table {
    min-width: 850px;
  }
}