/* ============================================================
   Wenrexa — Orders & Payouts Unified Styles
   File: ~/css/wenrexa-orders-payouts.css
   Used by: Orders.cshtml, MyPayouts.cshtml, Payout/Index.cshtml
   ============================================================ */

/* ====== Layout ====== */
.lib-main-panel  { gap: 0; }
.lib-content     { min-height: 60vh; }
.font-12         { font-size: 12pt !important; }

/* ====== Amount colors (shared) ====== */
.amount-plus     { color: #4cc96b; font-weight: 700; }
.amount-minus    { color: #e8a32e; font-weight: 700; }
.amount-zero     { color: #9b9b9b; font-weight: 600; }
.amount-free     { color: #4cc96b; font-weight: 600; }

.wenrexa-payout-amount-plus  { color: #4cc96b; font-weight: 700; }
.wenrexa-payout-amount-zero  { color: #9b9b9b; font-weight: 600; }

/* ====== Badges (shared) ====== */
.wenrexa-badge--pending  { background: rgba(200,164,78,0.13); color: #c8a44e; }
.wenrexa-badge--done     { background: rgba(52,199,89,0.1);   color: #34c759; }
.wenrexa-badge--prog     { background: rgba(10,132,255,0.1);  color: #0a84ff; }
.wenrexa-badge--refund   { background: rgba(255,69,58,0.1);   color: #ff453a; }
.wenrexa-badge--included { background: rgba(52,199,89,0.1);   color: #34c759; }
.wenrexa-badge--ghost    { color: var(--wenrexa-text-secondary, #6b6b6b); }

/* ====== Overlay actions (shared) ====== */
.wenrexa-overlay-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}

/* Disabled overlay button */
.wenrexa-btn--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.wenrexa-btn--disabled:hover { background: rgba(255,255,255,0.08); }


/* ============================================================
   ORDER CARD
   ============================================================ */
.wenrexa-order-card {
    background: var(--wenrexa-card, #0a0a0a);
    border-radius: var(--wenrexa-radius, 1rem);
    overflow: hidden;
    transition: background 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: stretch;
    font-size: 12pt;
}
.wenrexa-order-card:hover {
    background: var(--wenrexa-card-hover, #111111);
    overflow: visible;
    z-index: 10;
}

/* Poster */
.wenrexa-order-poster {
    width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
}
.wenrexa-order-poster img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

/* Body */
.wenrexa-order-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem 0.75rem;
    overflow: hidden;
    min-width: 0;
}

.wenrexa-order-info   { flex: 1 1 180px; min-width: 0; }
.wenrexa-order-title  { font-size: 1em; font-weight: 500; }
.wenrexa-order-author { color: var(--wenrexa-text-secondary, #6b6b6b); }

/* Meta (price + qty) */
.wenrexa-order-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.wenrexa-order-price {
    font-size: 1em;
    font-weight: 600;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
}
.wenrexa-order-sep { color: var(--wenrexa-text-muted, #3a3a3a); }
.wenrexa-order-qty { color: var(--wenrexa-text-secondary, #6b6b6b); }

/* Date + ID */
.wenrexa-order-dateid {
    font-size: 10pt;
    color: var(--wenrexa-text-muted, #3a3a3a);
    white-space: nowrap;
}
.wenrexa-order-id {
    font-weight: 500;
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Type badges (purchase / sale) */
.wenrexa-order-type-badge {
    font-size: 0.7em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
}
.wenrexa-order-type-badge--purchase {
    background: rgba(232,163,46,0.12);
    color: #e8a32e;
}
.wenrexa-order-type-badge--sale {
    background: rgba(76,201,107,0.1);
    color: #4cc96b;
}

/* Admin avatar */
.wenrexa-order-avatar {
    width: 20px; height: 20px;
    border-radius: 50%;
    object-fit: cover; display: block;
    flex-shrink: 0;
}
.wenrexa-order-avatar-link {
    display: inline-flex;
    flex-shrink: 0;
}
.wenrexa-order-user-link {
    color: var(--wenrexa-text-secondary, #6b6b6b);
    text-decoration: none;
    font-size: 0.75em;
    max-width: 90px;
}
.wenrexa-order-user-link:hover {
    color: #fff;
    text-decoration: underline;
}
.wenrexa-order-arrow {
    color: var(--wenrexa-text-muted, #3a3a3a);
    font-size: 0.7em;
    flex-shrink: 0;
}
.wenrexa-order-author--admin { gap: 0.3rem; }

/* Inline users block */
.wenrexa-order-users-inline {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
}
.wenrexa-order-from-label {
    color: var(--wenrexa-text-muted, #3a3a3a);
    font-size: 0.75em;
    flex-shrink: 0;
}

/* Order overlay */
.wenrexa-overlay-details {
    position: absolute; top: 0; left: 72px; right: 0;
    min-height: 100%;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 0 var(--wenrexa-radius, 1rem) var(--wenrexa-radius, 1rem) 0;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.75rem; padding: 0.5rem 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.wenrexa-order-card:hover .wenrexa-overlay-details {
    opacity: 1; pointer-events: auto;
}

.wenrexa-detail-label {
    line-height: 1;
    margin-bottom: 0.2rem;
    font-size: 11pt;
    padding: 0.2rem 0.55rem;
}

/* Bundle group header */
.wenrexa-bundle-header {
    background: linear-gradient(150deg, #111, #1a1a1a);
    border-radius: var(--wenrexa-radius, 1rem);
    padding: 0.75rem 1rem;
}


/* ============================================================
   PAYOUT CARD
   ============================================================ */
.wenrexa-payout-card {
    background: var(--wenrexa-card, #0a0a0a);
    border-radius: var(--wenrexa-radius, 1rem);
    overflow: hidden;
    transition: background 0.25s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: stretch;
    font-size: 12pt;
}
.wenrexa-payout-card:hover {
    background: var(--wenrexa-card-hover, #111111);
    overflow: visible;
    z-index: 10;
}

/* Status icon */
.wenrexa-payout-icon {
    width: 72px;
    min-height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border-radius: var(--wenrexa-radius, 1rem) 0 0 var(--wenrexa-radius, 1rem);
}
.wenrexa-payout-icon--pending  { background: rgba(200,164,78,0.10); color: #c8a44e; }
.wenrexa-payout-icon--prog     { background: rgba(10,132,255,0.08); color: #0a84ff; }
.wenrexa-payout-icon--done     { background: rgba(52,199,89,0.08);  color: #34c759; }
.wenrexa-payout-icon--rejected { background: rgba(255,69,58,0.08);  color: #ff453a; }

/* Body */
.wenrexa-payout-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-grow: 1;
    padding: 0.5rem 0.75rem;
    gap: 0.25rem 0.75rem;
    overflow: hidden;
    min-width: 0;
}

.wenrexa-payout-info { flex: 1 1 180px; min-width: 0; }

.wenrexa-payout-title {
    font-size: 1em;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.wenrexa-payout-sub {
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-size: 0.75em;
}

/* Date + ID */
.wenrexa-payout-dateid {
    font-size: 10pt;
    color: var(--wenrexa-text-muted, #3a3a3a);
    white-space: nowrap;
}
.wenrexa-payout-idnum {
    font-weight: 500;
    color: var(--wenrexa-text-secondary, #6b6b6b);
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}

/* Meta (amount) */
.wenrexa-payout-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.wenrexa-payout-price {
    font-size: 1em;
    font-weight: 600;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
    white-space: nowrap;
}

/* Payout overlay */
.wenrexa-payout-overlay {
    position: absolute; top: 0; left: 72px; right: 0;
    min-height: 100%;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-radius: 0 var(--wenrexa-radius, 1rem) var(--wenrexa-radius, 1rem) 0;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.75rem; padding: 0.5rem 1rem;
    opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.wenrexa-payout-card:hover .wenrexa-payout-overlay {
    opacity: 1; pointer-events: auto;
}

.wenrexa-payout-detail-label {
    line-height: 1;
    margin-bottom: 0.2rem;
    font-size: 11pt;
    padding: 0.2rem 0.55rem;
}

/* Summary widget cards */
.wenrexa-payout-widget {
    background: var(--wenrexa-card, #0a0a0a);
    border-radius: var(--wenrexa-radius, 1rem);
    padding: 1rem 1.25rem;
    flex: 1 1 200px;
    min-width: 180px;
}
.wenrexa-payout-widget-value {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 576px) {
    /* Orders */
    .wenrexa-order-poster    { width: 56px; min-height: 56px; }
    .wenrexa-overlay-details { left: 56px; }
    .wenrexa-order-info      { flex-basis: 100%; }

    /* Payouts */
    .wenrexa-payout-icon     { width: 56px; min-height: 56px; font-size: 1.1rem; }
    .wenrexa-payout-overlay  { left: 56px; }
    .wenrexa-payout-info     { flex-basis: 100%; }
}