:root{
  --gray:var(--text-2);
}

.section{
  max-width:1120px;
  margin:0 auto;
  padding:0 0 1rem;
}

.section-alt{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:1.25rem;
  padding:1.5rem;
  margin-top:1.5rem;
}

.page-hero{
  max-width:1120px;
  margin:0 auto;
  padding:0.25rem 0 1.25rem;
}

.page-hero-content h1{
  font-size:1.6rem;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1.2;
}

.page-hero-content p{
  margin-top:0.4rem;
  color:var(--text-2);
  font-size:0.95rem;
}

.section-header{
  margin-bottom:1.25rem;
}

.section-header h2{
  font-size:1.25rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.01em;
}

.section-header p{
  margin-top:0.25rem;
  color:var(--text-3);
  font-size:0.85rem;
}

.section-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;
  margin-top:1.25rem;
}

.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1rem;
  margin-bottom:1.5rem;
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  transition:box-shadow .2s, transform .2s;
}

.stat-card:hover{
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

.stat-card h3{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.02em;
}

.stat-card p{
  margin-top:0.25rem;
  font-size:0.8rem;
  font-weight:500;
  color:var(--text-2);
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:1rem;
}

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.25rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
  transition:box-shadow .2s, transform .2s, border-color .2s;
}

.card:hover{
  box-shadow:0 4px 14px rgba(0,0,0,0.08);
  border-color:var(--border-strong);
}

.card h3{
  font-size:1.02rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:0.5rem;
}

.card p{
  font-size:0.875rem;
  color:var(--text-2);
  line-height:1.5;
}

.card p + p{
  margin-top:0.3rem;
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  margin-bottom:0.5rem;
}

.card-header h3{
  margin-bottom:0;
}

.table-wrapper{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

.table-wrapper > h3{
  padding:1rem 1.25rem 0;
  font-size:1rem;
  font-weight:600;
  color:var(--text);
}

.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.875rem;
}

.data-table th{
  background:var(--surface-2);
  color:var(--text-2);
  font-weight:600;
  text-align:left;
  padding:0.7rem 1rem;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.data-table td{
  padding:0.7rem 1rem;
  border-bottom:1px solid var(--border);
  color:var(--text-2);
  vertical-align:middle;
}

.data-table tr:last-child td{
  border-bottom:none;
}

.data-table tr:hover td{
  background:var(--accent-soft);
}

.data-table .empty{
  text-align:center;
  color:var(--text-3);
  padding:2rem;
  white-space:normal;
}

.badge{
  display:inline-flex;
  align-items:center;
  padding:0.18rem 0.6rem;
  border-radius:999px;
  font-size:0.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  background:var(--surface-3);
  color:var(--text-2);
  white-space:nowrap;
}

[class*="status-booking"],
[class*="status-pending"],
[class*="status-draft"],
[class*="status-new"]{
  background:var(--surface-3);
  color:var(--text-2);
}

[class*="status-in_transit"],
[class*="status-active"],
[class*="status-picking"],
[class*="status-stored"],
[class*="status-delivered"],
[class*="status-won"],
[class*="status-approved"],
[class*="status-completed"],
[class*="status-signed"]{
  background:rgba(52,168,83,0.15);
  color:#1a7f37;
}

[class*="status-customs"],
[class*="status-maintenance"]{
  background:rgba(219,171,9,0.18);
  color:#9a6700;
}

[class*="status-exception"],
[class*="status-lost"],
[class*="status-rejected"],
[class*="status-cancelled"],
[class*="status-terminated"]{
  background:rgba(248,81,73,0.15);
  color:#cf222e;
}

[data-theme="dark"] [class*="status-in_transit"],
[data-theme="dark"] [class*="status-active"],
[data-theme="dark"] [class*="status-picking"],
[data-theme="dark"] [class*="status-stored"],
[data-theme="dark"] [class*="status-delivered"],
[data-theme="dark"] [class*="status-won"],
[data-theme="dark"] [class*="status-approved"],
[data-theme="dark"] [class*="status-completed"],
[data-theme="dark"] [class*="status-signed"]{
  color:#4ade80;
}

[data-theme="dark"] [class*="status-customs"],
[data-theme="dark"] [class*="status-maintenance"]{
  color:#fbbf24;
}

[data-theme="dark"] [class*="status-exception"],
[data-theme="dark"] [class*="status-lost"],
[data-theme="dark"] [class*="status-rejected"],
[data-theme="dark"] [class*="status-cancelled"],
[data-theme="dark"] [class*="status-terminated"]{
  color:#f87171;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0.6rem 1.4rem;
  font-weight:600;
  font-size:0.875rem;
  border-radius:0.5rem;
  border:1px solid transparent;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s;
  cursor:pointer;
  text-decoration:none;
  line-height:1.2;
  color:var(--text-2);
}

.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}

.btn-primary:hover{
  background:var(--accent-hover);
  color:#fff;
}

.btn-outline{
  background:transparent;
  border-color:var(--border-strong);
  color:var(--text);
}

.btn-outline:hover{
  background:var(--surface-2);
  border-color:var(--accent);
  color:var(--accent);
}

[data-theme="dark"] .btn-primary{
  color:#1b1b1b;
}

[data-theme="dark"] .btn-primary:hover{
  color:#1b1b1b;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  color:var(--accent);
  font-size:0.875rem;
  font-weight:500;
  margin-bottom:0.75rem;
  text-decoration:none;
}

.back-link:hover{
  text-decoration:underline;
}

.detail-header{
  margin:0.5rem 0 1.5rem;
}

.detail-header h1{
  font-size:1.5rem;
  font-weight:700;
  color:var(--text);
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}

.detail-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1.4rem;
  box-shadow:0 1px 2px rgba(0,0,0,0.04);
}

.detail-card h3{
  font-size:1rem;
  font-weight:600;
  color:var(--text);
  margin-bottom:0.75rem;
  padding-bottom:0.5rem;
  border-bottom:1px solid var(--border);
}

.detail-card p{
  font-size:0.9rem;
  color:var(--text-2);
  margin-bottom:0.4rem;
}

.detail-card.full-width{
  grid-column:1 / -1;
}

.price{
  font-size:1.2rem;
  font-weight:700;
  color:var(--accent);
}

.empty{
  text-align:center;
  color:var(--text-3);
  padding:2rem;
  font-size:0.9rem;
}

@media(max-width:640px){
  .detail-grid{
    grid-template-columns:1fr;
  }
  .page-hero-content h1{
    font-size:1.35rem;
  }
}

@media(max-width:767px){
  .table-wrapper{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrapper > h3{
    padding-right:1.25rem;
  }
  .data-table{
    min-width:640px;
  }
  .card-grid{
    grid-template-columns:1fr;
  }
}