/* FILE: static/orders_page.css
 *
 * FIX suprapuneri:
 * - styles.css are un rule legacy la >=900px: .orders-layout { flex-direction: row; }
 * - layout-ul nou (orders-top sus + tabel jos) cere .orders-layout = column.
 * - Pentru a rămâne modular (fără să edităm styles.css), suprascriem aici.
 *
 * Strategie culori:
 * - Refolosim variabilele existente din :root (styles.css) pentru neutre: bg/text/border/shadow.
 * - Aici definim DOAR variabile semantice (success/info/warn/danger) pentru badge/butoane.
 */

:root {
  /* Semantic colors */
  --c-success: #16a34a;
  --c-success-hover: #15803d;

  --c-danger: #dc2626;
  --c-danger-hover: #b91c1c;

  --c-info: #2563eb;
  --c-info-hover: #1d4ed8;

  --c-warn: #f59e0b;
  --c-warn-hover: #d97706;

  /* Semantic backgrounds (soft) */
  --c-success-bg: rgba(22, 163, 74, 0.12);
  --c-success-bd: rgba(22, 163, 74, 0.35);

  --c-danger-bg: rgba(220, 38, 38, 0.12);
  --c-danger-bd: rgba(220, 38, 38, 0.35);

  --c-info-bg: rgba(37, 99, 235, 0.10);
  --c-info-bd: rgba(37, 99, 235, 0.30);

  --c-warn-bg: rgba(245, 158, 11, 0.12);
  --c-warn-bd: rgba(245, 158, 11, 0.35);
}

/* ============================================================
   FIX IMPORTANT: fără suprapuneri
   ============================================================ */

/* Mobile: deja e column în styles.css; păstrăm */
.orders-layout {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Desktop: suprascriem legacy rule din styles.css care făcea row */
@media (min-width: 900px) {
  #page-orders .orders-layout {
    flex-direction: column;
    align-items: stretch;
  }

  /* Tabelul trebuie să fie sub zona de sus, full-width */
  #page-orders #card-orders {
    width: 100%;
  }
}

/* =========================
   Layout Orders (Filtru + KPI sus, Tabel jos)
   ========================= */

.orders-top {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Desktop: Filtru stânga, KPI dreapta */
@media (min-width: 900px) {
  .orders-top {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--gap);
    align-items: start;
  }
}

/* Card KPI */
#card-orders-kpis {
  min-width: 0;
  overflow: hidden; /* anti overflow pe texte lungi */
}

#card-orders-kpis h2 {
  margin-bottom: 8px;
}

/* KPI grid */
.orders-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

@media (min-width: 1100px) {
  .orders-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.orders-kpi-tile {
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 12px;
  box-shadow: var(--shadow-soft);
  min-width: 0;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.orders-kpi-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.orders-kpi-label {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.orders-kpi-value {
  margin-top: 6px;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.orders-kpi-sub {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================
   Table enterprise (stabil, fără “produs uriaș”)
   ========================= */

#orders-table {
  table-layout: fixed;
  width: 100%;
}

/* Col widths (wrapper-ul are overflow, deci e safe pe mobile) */
#orders-table th:nth-child(1),
#orders-table td:nth-child(1) { width: 64px; }

#orders-table th:nth-child(2),
#orders-table td:nth-child(2) { width: 120px; }

#orders-table th:nth-child(3),
#orders-table td:nth-child(3) { width: 170px; }

#orders-table th:nth-child(4),
#orders-table td:nth-child(4) { width: 360px; } /* Produs */

#orders-table th:nth-child(5),
#orders-table td:nth-child(5) { width: 120px; }

#orders-table th:nth-child(6),
#orders-table td:nth-child(6) { width: 150px; }

#orders-table th:nth-child(7),
#orders-table td:nth-child(7) { width: 140px; }

#orders-table th:nth-child(8),
#orders-table td:nth-child(8) { width: 130px; }

#orders-table th:nth-child(9),
#orders-table td:nth-child(9) { width: 120px; }

#orders-table th:nth-child(10),
#orders-table td:nth-child(10) { width: 160px; }

#orders-table th:nth-child(11),
#orders-table td:nth-child(11) { width: 240px; } /* Acțiuni */

#orders-table tbody tr {
  transition: background 0.12s ease;
}

#orders-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.04);
}

/* Produs clamp */
.orders-product-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* desktop */
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
  word-break: break-word;
}

@media (max-width: 767px) {
  .orders-product-clamp {
    -webkit-line-clamp: 3;
  }
}

/* Scrollbar premium */
.table-wrapper::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.14);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.6);
}

.table-wrapper::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.04);
  border-radius: 999px;
}

/* =========================
   Badge-uri enterprise
   ========================= */

.badge {
  white-space: nowrap; /* “Prima oară” pe un rând */
  font-weight: 800;
  letter-spacing: -0.01em;
}

.badge.ok {
  background: var(--c-success-bg);
  border-color: var(--c-success-bd);
  color: #065f46;
}

.badge.err {
  background: var(--c-danger-bg);
  border-color: var(--c-danger-bd);
  color: #991b1b;
}

.badge.info {
  background: var(--c-info-bg);
  border-color: var(--c-info-bd);
  color: #1e3a8a;
}

.badge.warn {
  background: var(--c-warn-bg);
  border-color: var(--c-warn-bd);
  color: #92400e;
}

.badge.neutral {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text);
}

/* =========================
   Actions enterprise (SMS verde + Sună albastru)
   ========================= */

.orders-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Buton + icon */
.btn.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 999px;
  font-weight: 900;
  letter-spacing: -0.01em;

  min-height: 34px;
  padding: 7px 12px;
}

.btn.action-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  opacity: 0.95;

  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

/* în loading (ui_polish) nu vrem icon + spinner simultan */
.btn.action-btn.is-loading::before {
  display: none;
}

/* SMS icon (send) */
.btn.action-sms::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M2%2021l21-9L2%203v7l15%202-15%202v7z%27/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M2%2021l21-9L2%203v7l15%202-15%202v7z%27/%3E%3C/svg%3E");
}

/* Call icon */
.btn.action-call::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201C10.07%2021%203%2013.93%203%205c0-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.24.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%27/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2c.27-.27.67-.36%201.02-.24%201.12.37%202.33.57%203.57.57.55%200%201%20.45%201%201V20c0%20.55-.45%201-1%201C10.07%2021%203%2013.93%203%205c0-.55.45-1%201-1h3.5c.55%200%201%20.45%201%201%200%201.24.2%202.45.57%203.57.11.35.03.74-.25%201.02l-2.2%202.2z%27/%3E%3C/svg%3E");
}

/* SMS = verde */
.btn.action-sms {
  background: var(--c-success);
  border-color: var(--c-success);
  color: #ffffff;
}

.btn.action-sms:hover {
  background: var(--c-success-hover);
  border-color: var(--c-success-hover);
}

/* Call = albastru */
.btn.action-call {
  background: var(--c-info);
  border-color: var(--c-info);
  color: #ffffff;
}

.btn.action-call:hover {
  background: var(--c-info-hover);
  border-color: var(--c-info-hover);
}

.btn.action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 420px) {
  .btn.action-btn {
    padding: 7px 10px;
    gap: 6px;
  }
}