/* ---------- ORIGINAL STYLES (kept unchanged) ---------- */
/* assets/css/style.css - updated so action buttons stay in one row on desktop,
   still stack on mobile; includes hover/focus effects and order-form styles */

/* Base */
body .lpt-root, body .lpt-order-root { font-family: Arial, Helvetica, sans-serif; color:#111; }
.lpt-root .lpt-header, .lpt-order-root .lpt-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; gap:12px; }
.lpt-root h2, .lpt-order-root h2 { margin:0; font-size:20px; }
.lpt-root .auth, .lpt-order-root .auth { font-size:13px; color:#374151; display:flex; align-items:center; gap:8px; }
.lpt-root .auth button, .lpt-order-root .auth button { margin-left:8px; padding:6px 10px; border-radius:6px; border:none; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease; }
.lpt-root .auth .logout, .lpt-order-root .auth .logout { background:#ef4444; color:#fff; }
.lpt-root .auth .loginbtn, .lpt-order-root .auth .loginbtn { background:#10b981; color:#fff; }

/* Filters and table */
.lpt-root .filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; align-items:flex-end; }
.lpt-root .filters label { font-size:13px; display:block; margin-bottom:4px; }
.lpt-root .filters .filter { background:#fff; padding:8px; border-radius:6px; border:1px solid #e5e7eb; min-width:140px; }

.lpt-root table { width:100%; border-collapse:collapse; background:#fff; }
.lpt-root th { text-align:left; padding:8px; background:#10b981; color:#fff; font-weight:600; }
.lpt-root td { padding:8px; border-bottom:1px solid #e6e6e6; vertical-align:middle; }
.lpt-root a.sample { text-decoration:underline; color:#0369a1; }

/* Summary area */
.lpt-root .summary { display:flex; gap:10px; margin-top:16px; align-items:flex-start; }
.lpt-root .summary .box { padding:12px; border-radius:8px; background:#fff; border:1px solid #e6e6e6; min-width:140px; flex: 0 0 auto; }

/* IMPORTANT: make actions a flex row on desktop so buttons stay in one line */
.lpt-root .actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap; /* keep them on one line on wide screens */
}

/* Buttons styling */
.lpt-root .actions button,
.lpt-root .actions .btn-edit,
.lpt-root .actions .btn-confirm,
.lpt-root .actions .btn-send {
  margin: 0; /* remove extra margins so layout is consistent */
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  white-space: nowrap;
}

/* Individual button colors */
.lpt-root .btn-edit { background:#22c55e; color:#fff; }
.lpt-root .btn-confirm { background:#facc15; color:#000; }
.lpt-root .btn-send { background:#06b6d4; color:#fff; }

.lpt-root .notes { margin-top:8px; font-size:13px; color:#6b7280; }

/* Legend */
.lpt-root .legend { background:#f8fafc; padding:12px; border-radius:8px; border:1px solid #eef2ff; }
.lpt-root .small { font-size:13px; color:#374151; }

.lpt-root input[type="number"].price-input { width:80px; padding:6px; border-radius:6px; border:1px solid #d1d5db; text-align:right; }
.lpt-root input[type="number"].filter-input { width:100%; padding:6px; border-radius:6px; border:1px solid #d1d5db; }
.lpt-root input[type="text"], .lpt-root input[type="email"], .lpt-root input[type="password"] { padding:6px; border-radius:6px; border:1px solid #d1d5db; }
.lpt-root select { padding:6px; border-radius:6px; border:1px solid #d1d5db; }
.lpt-root a.link { color:#0369a1; text-decoration:underline; }
.lpt-root .button-disabled { opacity:0.55; pointer-events:none; }

/* Hover/focus */
.lpt-root button:hover, .lpt-root button:focus, .lpt-order-root button:hover, .lpt-order-root button:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(13,110,253,0.08);
  outline: none;
  opacity: 0.98;
}
.lpt-root button:active, .lpt-order-root button:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Responsive behavior */
/* On smaller screens, we allow the buttons to wrap/stack for touch usability */
@media (max-width: 768px) {
  .lpt-root .lpt-header { flex-direction: column; align-items: flex-start; gap:8px; }
  .lpt-root .filters { gap:8px; align-items:stretch; }
  .lpt-root table, .lpt-root th, .lpt-root td { font-size:14px; }
  .lpt-root th, .lpt-root td { padding:8px 6px; }
  .lpt-root .summary { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
  .lpt-root .summary .box { width:100%; min-width:0; }
  /* allow buttons to wrap and expand on mobile for easy tapping */
  .lpt-root .actions { flex-wrap: wrap; }
  .lpt-root .actions button { flex: 1 1 30%; min-width: 110px; }
  .lpt-root input[type="number"].price-input { width:100%; max-width:140px; box-sizing:border-box; }
}

/* Order form specific styles */
.lpt-order-form { background:#fff; padding:16px; border-radius:8px; border:1px solid #e6e6e6; }
.lpt-order .lpt-row { margin-bottom:10px; display:flex; flex-direction:column; gap:6px; }
.lpt-order .lpt-row label { font-weight:600; }
.lpt-order .lpt-input { padding:8px; border:1px solid #d1d5db; border-radius:6px; width:100%; box-sizing:border-box; }
.lpt-pairs { margin:8px 0 12px 0; }
.lpt-pair { background:#fbfbfb; padding:10px; border-radius:6px; margin-bottom:8px; border:1px solid #efefef; display:flex; flex-direction:column; gap:6px; }
.lpt-pair label { font-weight:600; }
.btn-add { background:#06b6d4; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; margin-top:8px; display:inline-block; }
.btn-del { background:#ef4444; color:#fff; padding:6px 10px; border-radius:6px; border:none; cursor:pointer; align-self:flex-start; }
.lpt-actions { margin-top:16px; display:flex; gap:10px; flex-wrap:wrap; }

/* Match action button styles for order form as well */
.lpt-order .btn-edit { background:#22c55e; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.lpt-order .btn-confirm { background:#facc15; color:#000; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.lpt-order .btn-send { background:#06b6d4; color:#fff; padding:8px 12px; border-radius:6px; border:none; cursor:pointer; }
.lpt-message { margin-top:12px; font-weight:600; }

/* locked state */
.lpt-order.locked .lpt-input, .lpt-order.locked .pair-url, .lpt-order.locked .pair-kw { background:#f3f4f6; }

/* accessibility focus states */
button:focus, input:focus, select:focus, a:focus {
  outline: 3px solid rgba(59,130,246,0.15);
  outline-offset: 2px;
}

/* small screens for order form */
@media (max-width: 480px) {
  .lpt-order .lpt-row { gap:4px; }
  .lpt-actions button { flex:1 1 100%; }
}

/* ---------- PAYMENT DETAILS STYLES (updated to match sheet image) ---------- */

.lpt-payment-container {
  padding: 18px;
  max-width: 1160px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

.lpt-invoice {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  border: 1px solid #e6e6e6;
  overflow: hidden; /* ensure inner borders never render outside rounded corners */
}

/* Grid like a spreadsheet: 5 columns */
.lpt-invoice-row {
  display: grid;
  /* Flexible columns to prevent overflow on narrow containers */
  grid-template-columns: 170px 170px minmax(0, 1fr) 170px minmax(240px, 1fr);
  gap: 8px;
  align-items: stretch;
  padding: 6px 2px;
}

/* Thick green header borders like the mock */
.lpt-invoice-row.header {
  grid-template-columns: 170px 170px minmax(0, 1fr) 170px minmax(240px, 1fr);
  margin-bottom: 6px;
}
.lpt-invoice-row.header .col {
  background: #f8fff9;
  border: 6px solid #10b981;         /* bold green border */
  border-radius: 6px;
  color: #0b3d2e;
  font-weight: 700;
  padding: 12px 10px;
  text-align: left;
}

/* Data cells mimic sheet boxes */
.lpt-invoice-row .col {
  background:#fff;
  border:1px solid #dfe7e7;
  border-radius: 4px;
  min-height: 54px;
  padding: 10px 12px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.col.order-no { font-weight:800; color:#dc2626; }

/* Keep PayPal cell inside; allow wrapping of long emails */
.col.paypal {
  text-align:center;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Summary column lines */
.lpt-invoice-row .summary div { line-height: 1.6; }
.final-line { margin-top:8px; font-weight:700; white-space: nowrap; }  /* keep “Send $… to paypal id:” on one line */

/* Quantity column values */
.qty-val, .price-val, .final-val { font-weight:700; }
.order-no-value { color:#dc2626; font-weight:800; font-size:16px; }

/* Spacer */
.lpt-spacer { height: 18px; }

/* Deadline block like highlighted rows */
.deadline-block {
  display:flex;
  gap:12px;
  align-items:center;
  margin: 18px 0;
  flex-wrap:wrap;
}
.deadline-label {
  background:#fef3c7;
  padding:8px 12px;
  border-radius:4px;
  font-weight:700;
  border:1px solid #f3e8c6;
}
.deadline-range {
  padding:8px 12px;
  border:1px solid #e3e3e3;
  border-radius:4px;
  font-weight:700;
  background:#fff;
}
.deadline-dates {
  width:100%;
  margin-top:6px;
  font-weight:700;
  text-align:left;
}

/* View Reports button centered; text is RED per request */
.lpt-view-reports { display:flex; justify-content:center; margin: 14px 0 10px; }
.view-reports-btn {
  background:#10b981;
  color:#dc2626 !important;          /* force red text even if theme overrides anchor colors */
  padding:12px 34px;
  border-radius:6px;
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.view-reports-btn:hover,
.view-reports-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(16,185,129,.25);
}

/* Notes at the bottom */
.lpt-notes { margin-top:12px; text-align:center; font-size:14px; color:#1f2937; }
.lpt-notes p { margin:8px 0; }
.lpt-notes strong { font-weight:700; }

/* Responsive tweaks */
@media (max-width: 1024px) {
  .lpt-invoice-row,
  .lpt-invoice-row.header {
    grid-template-columns: 150px 150px minmax(0, 1fr) 150px minmax(200px, 1fr);
  }
}
@media (max-width: 900px) {
  .lpt-invoice-row,
  .lpt-invoice-row.header {
    grid-template-columns: 1fr 1fr; /* stack into two columns */
    gap:10px;
  }
  .col.paypal { text-align:left; }
}
@media (max-width: 560px) {
  .lpt-invoice-row,
  .lpt-invoice-row.header {
    grid-template-columns: 1fr; /* single column on small phones */
  }
  .lpt-invoice { padding: 12px; }
  .view-reports-btn { width:100%; text-align:center; }
}
@media (max-width: 360px) {
  .lpt-payment-container { padding:12px; }
  .view-reports-btn { padding:10px; font-size:15px; }
}
/* ---------- End Payment Details Styles ---------- */