/* ===== Orders page styles ===== */
.orders-page { padding: 16px; }
.orders-toolbar { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.orders-toolbar input[type="search"], .orders-toolbar input[type="date"], .orders-toolbar select {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #fff; border-radius: 10px; padding: 8px 10px;
}
.orders-toolbar .btn { border-radius: 10px; padding: 8px 12px; }

.orders-table { width:100%; border-collapse: collapse; }
.orders-table th, .orders-table td { padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; }
.orders-table th { text-align:left; opacity:.8; font-weight: 600; }
.orders-table tr:hover { background: rgba(255,255,255,.03); }

.badge { display:inline-block; padding:4px 8px; border-radius: 999px; font-size:12px; line-height:1; }
.badge.NEW        { background:#1f6feb22; border:1px solid #1f6feb66; }
.badge.PAID       { background:#2ea04322; border:1px solid #2ea04366; }
.badge.PROCESSING { background:#bf870022; border:1px solid #bf870066; }
.badge.SHIPPED    { background:#b780ff22; border:1px solid #b780ff66; }
.badge.DELIVERED  { background:#2ea04322; border:1px solid #2ea04366; }
.badge.CANCELLED  { background:#f8514922; border:1px solid #f8514966; }

.orders-pagination { display:flex; gap:8px; align-items:center; margin-top:12px; }
.orders-pagination button { border-radius: 10px; padding:6px 10px; }

.modal, [role="dialog"] { /* если своей модалки нет – минимальная стилизация */
  backdrop-filter: blur(3px);
}
.order-modal { min-width: 680px; max-width: 860px; }
.order-modal h3 { margin: 0 0 10px 0; }
.order-fields { display:grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.order-fields .field { background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:10px; padding:8px 10px; }
.order-actions { display:flex; justify-content:flex-end; gap: 10px; margin-top: 12px; }
.order-actions .btn { border-radius: 10px; padding: 8px 12px; }

@media (max-width: 900px){
  .order-modal { min-width: auto; width: 100%; max-width: 96vw; }
  .order-fields { grid-template-columns: 1fr; }
}

.order-items{
  --order-grid: minmax(220px, 3fr) 140px 120px 140px 80px;
  display: grid;
  gap: 12px;
}
.order-items .it-row{
  display: grid;
  grid-template-columns: var(--order-grid);
  gap: 12px;
  align-items: center;
}
.order-items .it-row.head{
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.order-items .it-body table{
  width: 100%;
  border-collapse: collapse;
}
.order-items .it-body tr{
  display: grid;
  grid-template-columns: var(--order-grid);
  gap: 12px;
  align-items: center;
}
.order-items .it-body td{
  border: none;
  padding: 6px 0;
}
.order-items .it-body td.prod{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.order-items .it-body td.prod select{
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 8px;
  color: inherit;
}
.order-items .it-body td input[type="number"]{
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 8px;
  color: inherit;
}
.order-items .it-body td .line-total,
.order-items .it-body td.line-total{
  justify-self: end;
  font-weight: 600;
  text-align: right;
}
.order-items .it-body td:last-child{
  justify-self: end;
}
.order-items .it-actions{
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 720px){
  .orders-page{padding:12px;}
  .orders-toolbar{gap:10px}
  .orders-table{display:block; overflow-x:auto;}
  .order-items{
    --order-grid: minmax(0,1fr);
    gap:8px;
  }
  .order-items .it-row.head{display:none;}
  .order-items .it-row,
  .order-items .it-body tr{
    grid-template-columns:1fr;
    gap:8px;
  }
  .order-items .it-body td,
  .order-items .it-row > *{
    justify-self:flex-start;
    text-align:left;
  }
  .order-items .it-body td:last-child{
    justify-self:flex-start;
  }
}

@media (max-width: 520px){
  .orders-toolbar{flex-direction:column; align-items:stretch;}
  .orders-toolbar .btn{width:100%;}
  .order-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .order-actions .btn{
    width:100%;
  }
}