/* Ultra License Manager — customer-facing (Orders list, View Order, Thank You) */

/* ---- My Account > Licenses — contained, smooth horizontal scroll ---- */
.ulm-my-licenses-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  /* thin, unobtrusive scrollbar instead of the bulky OS default */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.ulm-my-licenses-scroll::-webkit-scrollbar { height: 6px; }
.ulm-my-licenses-scroll::-webkit-scrollbar-track { background: transparent; }
.ulm-my-licenses-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 999px;
}
.ulm-my-licenses-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* right-edge fade hints that there's more to scroll (fades out once fully scrolled via JS class) */
.ulm-my-licenses-scroll::after {
  content: "";
  position: sticky;
  top: 0; right: 0;
  display: block;
  float: right;
  width: 18px; height: 100%;
  margin-left: -18px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,.9));
}
.ulm-my-licenses-scroll.is-at-end::after { opacity: 0; }

.ulm-my-licenses {
  width: 100%;
  min-width: 640px; /* keeps columns readable instead of crushing text */
  border-collapse: collapse;
  margin: 0;
}
.ulm-my-licenses thead th {
  position: sticky; top: 0;
  background: #f9fafb; color: #374151;
  text-align: left; font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 12px 14px; border: 1px solid #e5e7eb;
  white-space: nowrap;
}
.ulm-my-licenses tbody td {
  padding: 12px 14px; border: 1px solid #e5e7eb;
  font-size: 14px; color: #1f2937; white-space: nowrap; vertical-align: top;
}
/* Extra breathing room on the outer edges so content never sits flush
   against the table border — noticeable once the row is scrolled all
   the way left or right on mobile. */
.ulm-my-licenses thead th:first-child,
.ulm-my-licenses tbody td:first-child { padding-left: 18px; }
.ulm-my-licenses thead th:last-child,
.ulm-my-licenses tbody td:last-child { padding-right: 20px; }
.ulm-my-licenses tbody tr:hover td { background: #f8fafc; }
.ulm-my-licenses .ulm-key {
  background: #f3f4f6; padding: 4px 8px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}

/* v1.9.4: grouped by Order — Order / Product / Key / Activation / Expires.
   Order cell rowspans across the products of that order; Key/Activation/Expires
   stack one line per key (quantity > 1), aligned line-for-line across columns. */
.ulm-my-licenses .ulm-col-order,
.ulm-my-licenses .ulm-col-product { vertical-align: top; }
.ulm-order-id   { display: block; font-weight: 700; color: #111827; }
.ulm-order-name { display: block; margin-top: 0.6px; font-size: 12px; color: #6b7280; white-space: nowrap; }

/* v1.9.5: visibly stronger line under the last row of each order, so where one
   order's block ends and the next begins is clear at a glance. */
.ulm-my-licenses tbody tr.ulm-order-last-row td { border-bottom: 2px solid #cbd5e1; }

.ulm-key-stack { display: flex; flex-direction: column; gap: 10px; }
.ulm-key-line  { display: flex; align-items: center; min-height: 30px; white-space: nowrap; }
.ulm-col-act .ulm-key-line,
.ulm-col-exp .ulm-key-line { font-size: 13px; color: #1f2937; }
/* .ulm-key-line is display:flex (row) by default, which was overriding the
   .ulm-exp-date/.ulm-exp-time spans' own display:block and forcing the date
   and time onto a single line. Stack them in the Expires column instead. */
.ulm-col-exp .ulm-key-line { flex-direction: column; align-items: flex-start; min-height: 0; }

/* Expires: date on one line, time on the next */
.ulm-exp-date { display: block; }
.ulm-exp-time { display: block; margin-top: 2px; font-size: 12px; color: #6b7280; }

.ulm-use-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 700; line-height: 1.5;
  background: #dcfce7; color: #166534;
}

@media (max-width: 640px) {
  .ulm-my-licenses-scroll { border-radius: 12px; }
  .ulm-my-licenses { min-width: 720px; }
}

.ulm-order-licenses { margin-top: 24px; }
.ulm-order-licenses h2 { font-size: 18px; margin: 0 0 10px; }

.ulm-license-table { width: 100%; border-collapse: collapse; }
.ulm-license-table th,
.ulm-license-table td {
  text-align: left; padding: 10px 8px; border-bottom: 1px solid #f1f5f9;
  vertical-align: top; font-size: 14px;
}
.ulm-license-table thead th { background: #f9fafb; font-weight: 600; border-bottom: 1px solid #e5e7eb; }

.ulm-key {
  background: #f3f4f6; padding: 4px 8px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; word-break: break-all; display: inline-block;
}
.ulm-copy {
  margin-left: 6px; padding: 4px 10px; border-radius: 4px;
  border: 1px solid #d1d5db; background: #fff; cursor: pointer;
  font-size: 12px; line-height: 1.3;
}
.ulm-copy:hover { background: #f3f4f6; }
.ulm-copy.is-copied { background: #dcfce7; border-color: #86efac; color: #166534; }

.ulm-badge {
  display: inline-block; padding: 2px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.ulm-badge-active    { background: #dbeafe; color: #1e40af; }
.ulm-badge-delivered { background: #dcfce7; color: #166534; }
.ulm-badge-expired   { background: #fee2e2; color: #991b1b; }
.ulm-badge-revoked   { background: #fef3c7; color: #92400e; }
.ulm-badge-inactive  { background: #e5e7eb; color: #374151; }

/* Orders list compact column */
.ulm-orders-col { display: flex; flex-direction: column; gap: 6px; }
.ulm-key-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ulm-key-row .ulm-key { font-size: 12px; padding: 3px 6px; }
.ulm-key-row .ulm-copy { padding: 2px 6px; font-size: 12px; margin: 0; }
.ulm-empty { color: #9ca3af; }

/* Admin edit-order wrapper */
.ulm-admin-order-licenses {
  margin-top: 12px; padding: 12px;
  background: #f8f9fa; border: 1px solid #dcdcde; border-radius: 4px;
}
.ulm-admin-order-licenses h3 { margin-top: 0; }

/* Responsive — stack table into cards on small screens */
@media (max-width: 640px) {
  .ulm-license-table thead { display: none; }
  .ulm-license-table,
  .ulm-license-table tbody,
  .ulm-license-table tr,
  .ulm-license-table td { display: block; width: 100%; }
  .ulm-license-table tr {
    border: 1px solid #e5e7eb; border-radius: 8px;
    padding: 8px; margin-bottom: 10px; background: #fff;
  }
  .ulm-license-table td {
    border: 0; padding: 6px 4px; display: flex;
    justify-content: space-between; align-items: center; gap: 8px;
  }
  .ulm-license-table td::before {
    content: attr(data-title); font-weight: 600; color: #6b7280;
    font-size: 12px; flex: 0 0 40%;
  }
  .ulm-license-table td .ulm-key { flex: 1; text-align: right; }

  /* Expires cell: date-span + time-span are separate flex items next to the
     label here too — wrap the row and push the time onto its own line. */
  .ulm-license-table td[data-title="Expires"] { flex-wrap: wrap; }
  .ulm-license-table td[data-title="Expires"] .ulm-exp-date,
  .ulm-license-table td[data-title="Expires"] .ulm-exp-time { text-align: right; }
  .ulm-license-table td[data-title="Expires"] .ulm-exp-time { flex-basis: 100%; margin-top: 2px; }

  /* Orders list column: keep FIFO stack compact */
  .ulm-orders-col { gap: 8px; }
  .ulm-key-row { justify-content: space-between; }
}

/* ---- v1.7.5: two-line product, always-visible key, clean copy icon ---- */

/* Product cell: title 1 line + variation below (responsive, all versions) */
.ulm-prod-title {
  display: block; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.ulm-prod-var {
  display: block; color: #6b7280; font-size: 12px; margin-top: 2px; line-height: 1.3;
  white-space: nowrap;
}

/* Key + copy: full key text always visible, no cropping/internal scrollbar.
   Any overflow is handled by the page's own horizontal scroll (e.g. the
   My Account table wrapper), not a scrollbar hidden inside the key box. */
.ulm-key-wrap { display: inline-flex; align-items: center; gap: 6px; }
.ulm-key-wrap .ulm-key {
  display: inline-block; white-space: nowrap;
}
.ulm-key-wrap .ulm-copy { flex: 0 0 auto; }
.ulm-key { user-select: all; }

/* Copy toast */
.ulm-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px);
  background: #111827; color: #fff; padding: 10px 18px; border-radius: 10px;
  font-family: inherit; font-size: 13px; font-weight: 600; z-index: 999999; opacity: 0;
  transition: opacity .2s ease, transform .2s ease; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  display: inline-flex; align-items: center; gap: 8px; pointer-events: none;
}
.ulm-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Clean icon-only copy button with icon → check swap */
.ulm-copy {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; margin-left: 6px;
  border: 1px solid #d1d5db; border-radius: 6px; background: #fff;
  color: #374151; cursor: pointer; line-height: 0; transition: all .15s ease;
  flex: 0 0 auto;
}
.ulm-copy:hover { background: #f3f4f6; color: #111827; }
.ulm-copy:active { transform: scale(.94); }
.ulm-copy .ulm-copy-ok { display: none; }
.ulm-copy.is-copied { background: #dcfce7; border-color: #86efac; color: #166534; }
.ulm-copy.is-copied .ulm-copy-ico { display: none; }
.ulm-copy.is-copied .ulm-copy-ok  { display: inline-block; }

/* Orders-list compact copy button */
.ulm-key-row .ulm-copy { width: 26px; height: 26px; margin: 0; }

/* Admin order meta box */
.ulm-admin-order-licenses { margin: 0; }
.ulm-admin-order-licenses .ulm-order-licenses { margin-top: 0; }
.ulm-admin-order-licenses h2 { display: none; }
.ulm-muted { color: #9ca3af; }

/* Mobile: keep title on its own line, variation under it (don't squeeze into row).
   Title/variation get the full row width (right side) and stay on a single
   line — scrollable instead of wrapping to a 2nd line. */
@media (max-width: 640px) {
  .ulm-license-table td[data-title="Product"] { display: block; }
  .ulm-license-table td[data-title="Product"]::before { display: block; flex: none; margin-bottom: 2px; }
  .ulm-prod-title,
  .ulm-prod-var {
    white-space: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .ulm-prod-title::-webkit-scrollbar,
  .ulm-prod-var::-webkit-scrollbar { display: none; }
  .ulm-license-table td .ulm-key-wrap { justify-content: flex-end; }
}

/* v1.8.2: mobile order-details (frontend + backend) — Key/Pin/Code shows BELOW the
   label at full width, as full text (wraps naturally if needed — no internal
   scrollbar hiding part of the key), with the copy icon always on the right. */
@media (max-width: 640px) {
  .ulm-license-table td.ulm-od-keycell { display: block; max-width: none; }
  .ulm-license-table td.ulm-od-keycell::before {
    display: block; flex: none; margin-bottom: 6px;
    content: attr(data-title); font-weight: 600; color: #6b7280; font-size: 12px;
  }
  .ulm-license-table td.ulm-od-keycell .ulm-key-wrap {
    display: flex; width: 100%; align-items: center; gap: 8px; justify-content: space-between;
  }
  .ulm-license-table td.ulm-od-keycell .ulm-key {
    flex: 1 1 auto; min-width: 0; max-width: none;
    white-space: normal; word-break: break-all; overflow: visible;
    text-align: left; line-height: 1.5; font-size: 13px;
  }
  .ulm-license-table td.ulm-od-keycell .ulm-copy { flex: 0 0 auto; align-self: center; }
}

/* ---- v1.9.14: My Account > Licenses — pagination (10 orders/page) + empty state ---- */
.ulm-pagination { display: flex !important; justify-content: center; margin: 18px 0 4px; }
.ulm-pagination ul {
  display: flex !important; gap: 6px; list-style: none !important; padding: 0 !important; margin: 0 !important;
  flex-wrap: wrap; justify-content: center;
}
.ulm-pagination ul li {
  display: flex !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
}
.ulm-pagination .ulm-dots { display: flex; align-items: center; padding: 0 4px; color: #9ca3af; }
.ulm-page-btn {
  display: inline-flex !important; min-width: 36px; height: 36px; padding: 0 10px;
  align-items: center; justify-content: center; gap: 6px;
  border: 1px solid #d1d5db; background: #fff; color: #374151 !important;
  border-radius: 8px; text-decoration: none !important; font-weight: 600; font-size: 13px;
  transition: all .15s ease;
}
.ulm-page-btn:hover { background: #f3f4f6; color: #111827 !important; border-color: #9ca3af; }
.ulm-page-btn.active { background: #2563eb; color: #fff !important; border-color: #2563eb; box-shadow: 0 2px 6px rgba(37,99,235,.35); }
.ulm-page-btn.disabled { opacity: .4; pointer-events: none; }
.ulm-page-nav { width: auto; padding: 0 14px; }
.ulm-page-nav svg { flex: 0 0 auto; display: block; }
@media (max-width: 480px) {
  .ulm-pagination ul { gap: 4px; }
  .ulm-page-btn { min-width: 32px; height: 32px; font-size: 12px; }
  .ulm-page-nav span { display: none; }
  .ulm-page-nav { padding: 0 10px; }
}

.ulm-empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 20px;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #fff;
}
.ulm-empty-state-icon {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: #fdf1e3 !important; color: #e8973a !important;
  margin-bottom: 16px;
}
.ulm-empty-state-icon .dashicons-tickets-alt {
  width: 30px; height: 30px; font-size: 30px; line-height: 1;
  color: #e8973a !important;
}
.ulm-empty-state-icon .dashicons-tickets-alt::before { color: #e8973a !important; }
.ulm-empty-state-text { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: #0b2559; }
.ulm-empty-state-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 22px; border-radius: 8px; background: #2563eb; color: #fff;
  font-weight: 600; font-size: 14px; text-decoration: none; transition: background .15s ease;
}
.ulm-empty-state-btn:hover { background: #1d4ed8; color: #fff; }