/**
 * TPS License Manager - customer portfolio on the My Account dashboard
 * (one card per licence, rendered by TPS_Module_Portfolio_Dashboard).
 */

/* Container */

.tps-software-portfolio {
    margin: 0 0 40px 0;
    padding: 0;
}

.tps-portfolio-title {
    font-size: 1.5em;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 24px 0;
    padding-bottom: 16px;
    border-bottom: 2px solid #e0e0e0;
}

/* Empty state */

.tps-portfolio-empty {
    text-align: center;
    padding: 40px 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px dashed #e0e0e0;
}

.tps-portfolio-empty p {
    color: #6b7280;
    margin-bottom: 16px;
    font-size: 1.1em;
}

/* Product grid and card */

.tps-portfolio-grid {
    display: grid;
    gap: 24px;
}

.tps-product-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.tps-product-card:hover,
.tps-product-card.touch-active {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tps-product-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e5e7eb;
}

.tps-product-image {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tps-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tps-product-info {
    flex: 1;
    min-width: 0;
}

.tps-product-name {
    font-size: 1.25em;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.tps-order-ref {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.tps-order-link {
    font-weight: 600;
    color: #059669;
    text-decoration: none;
    transition: color 0.2s;
}

.tps-order-link:hover {
    color: #047857;
    text-decoration: underline;
}

.tps-order-date {
    font-size: 0.875em;
    color: #9ca3af;
}

.tps-product-body {
    padding: 20px;
}

/* Card sections */

.tps-card-section {
    margin-bottom: 20px;
}

.tps-section-title {
    font-size: 0.85em;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

/* License identity */

/* The key takes a row of its own; the other fields share the next row and fill it. */
.tps-license-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.tps-license-item {
    flex: 1 1 160px;
    background: #f9fafb;
    padding: 12px;
    border-radius: 8px;
}

.tps-license-full {
    flex-basis: 100%;
}

.tps-license-label {
    display: block;
    font-size: 0.75em;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.tps-license-value {
    font-size: 0.95em;
    font-weight: 600;
    color: #1f2937;
}

.tps-license-code {
    display: inline-block;
    background: #e5e7eb;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, Inconsolata, monospace;
    font-size: 0.9em;
    color: #374151;
    word-break: break-all;
}

/* Copy-to-clipboard button, rendered next to a license code. */
.tps-copy-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8em;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    vertical-align: middle;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.tps-copy-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.tps-copy-btn:focus-visible {
    outline: 2px solid #059669;
    outline-offset: 2px;
}

.tps-copy-btn.copied {
    background: #059669;
    border-color: #059669;
    color: #ffffff;
}

/* Label and value rows: updates, support, next payment */

.tps-detail-list {
    display: grid;
    gap: 8px;
    padding: 12px 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.tps-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.9em;
}

.tps-detail-label {
    color: #6b7280;
}

.tps-detail-value {
    color: #1f2937;
    font-weight: 600;
    text-align: right;
}

/* Card action */

.tps-card-action {
    margin-top: 4px;
}

.tps-subscription-view-btn,
.tps-add-subscription-btn {
    display: block;
    text-align: center;
    padding: 10px 16px;
    color: #ffffff !important;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9em;
    transition: background 0.2s;
    border: none !important;
}

.tps-subscription-view-btn,
.tps-subscription-view-btn:visited {
    background: #059669 !important;
    color: #ffffff !important;
}

.tps-subscription-view-btn:hover,
.tps-subscription-view-btn:focus {
    background: #047857 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.tps-add-subscription-btn,
.tps-add-subscription-btn:visited {
    background: #7c3aed !important;
    color: #ffffff !important;
}

.tps-add-subscription-btn:hover,
.tps-add-subscription-btn:focus {
    background: #6d28d9 !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Orders awaiting payment */

.tps-awaiting {
    margin-bottom: 24px;
}

.tps-awaiting-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.tps-awaiting-order {
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}

.tps-awaiting-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 10px;
}

.tps-awaiting-products {
    font-weight: 600;
    color: #1f2937;
}

.tps-awaiting-note {
    margin: 0;
    padding: 10px 14px;
    border-left: 3px solid #c3c4c7;
    background: #f6f7f7;
    font-size: .875em;
    color: #50575e;
}

/* Responsive */

@media (max-width: 640px) {
    .tps-product-header {
        flex-direction: column;
        text-align: center;
    }

    .tps-order-ref {
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .tps-license-item {
        flex-basis: 100%;
    }

    .tps-detail-row {
        flex-direction: column;
        gap: 2px;
    }

    .tps-detail-value {
        text-align: left;
    }
}

/* The site theme styles every heading and button on the page, and its rules outrank
   the ones above, so the card's own headings and Copy button are held here. */
.tps-portfolio-grid h3.tps-product-name {
    margin: 0 0 6px !important;
    font-family: inherit !important;
    font-size: 1.25em !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1f2937 !important;
}

.tps-portfolio-grid h4.tps-section-title {
    margin: 0 0 10px !important;
    font-family: inherit !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #6b7280 !important;
}

.tps-portfolio-grid button.tps-copy-btn {
    margin: 0 0 0 8px !important;
    padding: 4px 10px !important;
    font-family: inherit !important;
    font-size: 0.8em !important;
    line-height: 1.4 !important;
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 4px !important;
    color: #374151 !important;
}

.tps-portfolio-grid button.tps-copy-btn:hover {
    background: #f3f4f6 !important;
    border-color: #9ca3af !important;
}

.tps-portfolio-grid button.tps-copy-btn.copied {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* License details on the download pages and on orders. The site draws every other
   table row white and borderless, so these rules name the rows outright to keep
   each table even, with the labels in a fixed column. */
.tps-licence-details .tps-licence-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0 0 20px;
}

.tps-licence-details .tps-licence-table tbody > tr > th,
.tps-licence-details .tps-licence-table tbody > tr > td {
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.tps-licence-details .tps-licence-table tbody > tr > th {
    width: 35%;
    background: #f9fafb;
    font-weight: 600;
}

/* The license line under the product on a subscription's page. The account page
   sizes item details for its order tables, which are set larger than SUMO's, so
   here the line takes the size of the table it sits in. */
.sumo_subscription_details .wc-item-meta,
.sumo_subscription_details .wc-item-meta li,
.sumo_subscription_details .wc-item-meta p,
.sumo_subscription_details .wc-item-meta strong {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 1.5 !important;
}

.sumo_subscription_details .wc-item-meta {
    margin-top: 2px !important;
    list-style: none !important;
}

.sumo_subscription_details .wc-item-meta p {
    display: inline !important;
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .tps-product-card,
    .tps-copy-btn,
    .tps-order-link,
    .tps-subscription-view-btn,
    .tps-add-subscription-btn {
        transition: none;
    }
}

/* Member access unlocked by a customer's licenses */

.tps-member-access {
    margin-top: 2em;
}

.tps-member-access-note {
    margin: 0 0 1em;
    color: #666;
}

.tps-member-access-list {
    list-style: none;
    margin: 0 0 1.25em;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tps-member-access-list li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 14px;
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
}

.tps-member-access-name {
    font-weight: 600;
}

.tps-member-access-expiry {
    font-size: .85em;
    color: #666;
}