/* ========================================================
   WC Exchange Manager – My Account Styles
   ======================================================== */

:root {
    --wcem-primary:   #062F5D;
    --wcem-success:   #2e7d32;
    --wcem-warning:   #e65100;
    --wcem-danger:    #c62828;
    --wcem-neutral:   #546e7a;
    --wcem-bg:        #f8f9fa;
    --wcem-border:    #e0e0e0;
    --wcem-radius:    8px;
}

/* Wrapper */
.wcem-myaccount { max-width: 860px; }

.wcem-header { margin-bottom: 1.5rem; }
.wcem-header h2 { margin-bottom: 0.25rem; }
.wcem-header a  { font-size: .875rem; color: var(--wcem-primary); }

/* Empty state */
.wcem-empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--wcem-bg);
    border-radius: var(--wcem-radius);
    border: 1px dashed var(--wcem-border);
}
.wcem-empty-icon { font-size: 2.5rem; display: block; margin-bottom: .75rem; }

/* ---- Status badges ---- */
.wcem-status {
    display: inline-block;
    padding: .25em .75em;
    border-radius: 50px;
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wcem-status-pending          { background: #fff3e0; color: #e65100; }
.wcem-status-approved         { background: #e8f5e9; color: #2e7d32; }
.wcem-status-rejected         { background: #ffebee; color: #c62828; }
.wcem-status-completed        { background: #e3f2fd; color: #1565c0; }
.wcem-status-returned_to_stock{ background: #f3e5f5; color: #6a1b9a; }
.wcem-status-cancelled        { background: #eeeeee; color: #546e7a; }

/* ---- Form ---- */
.wcem-deadline-notice {
    background: #e8f4fd;
    border-left: 4px solid #1976d2;
    padding: .75rem 1rem;
    border-radius: 0 var(--wcem-radius) var(--wcem-radius) 0;
    margin-bottom: 1.5rem;
    font-size: .9rem;
}

.wcem-form { display: flex; flex-direction: column; gap: 1.25rem; }

.wcem-field label { display: block; font-weight: 600; margin-bottom: .4rem; }
.wcem-field select,
.wcem-field input[type="number"],
.wcem-field textarea {
    width: 100%;
    padding: .65rem .9rem;
    border: 1px solid var(--wcem-border);
    border-radius: var(--wcem-radius);
    font-size: 1rem;
    transition: border-color .2s;
}
.wcem-field select:focus,
.wcem-field input:focus,
.wcem-field textarea:focus {
    outline: none;
    border-color: var(--wcem-primary);
    box-shadow: 0 0 0 3px rgba(6,47,93,.12);
}
.wcem-field .description { font-size: .8125rem; color: var(--wcem-neutral); margin-top: .3rem; }
.wcem-field input[type="number"] { max-width: 120px; }

/* Radio reasons */
.wcem-reasons { display: flex; flex-direction: column; gap: .5rem; }
.wcem-reason-option {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border: 1px solid var(--wcem-border);
    border-radius: var(--wcem-radius);
    cursor: pointer;
    transition: border-color .2s, background .2s;
}
.wcem-reason-option:hover { background: var(--wcem-bg); }
.wcem-reason-option input[type="radio"]:checked + span { font-weight: 600; color: var(--wcem-primary); }
.wcem-reason-option:has(input:checked) { border-color: var(--wcem-primary); background: #eef4ff; }
.wcem-reason-option input { margin: 0; accent-color: var(--wcem-primary); }

.wcem-submit { flex-direction: row; gap: .75rem; align-items: center; padding-top: .5rem; }

/* ---- Detail card ---- */
.wcem-detail-card {
    background: #fff;
    border: 1px solid var(--wcem-border);
    border-radius: var(--wcem-radius);
    padding: 1.5rem;
}
.wcem-detail-status { text-align: right; margin-bottom: 1rem; }

.wcem-info-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.wcem-info-table th,
.wcem-info-table td { padding: .6rem 0; border-bottom: 1px solid var(--wcem-border); font-size: .9375rem; }
.wcem-info-table th { width: 40%; color: var(--wcem-neutral); font-weight: 600; }

.wcem-admin-note {
    background: #fff8e1;
    border-left: 3px solid #f9a825;
    padding: .5rem .75rem;
    border-radius: 0 4px 4px 0;
}

/* ---- Timeline ---- */
.wcem-timeline { margin-bottom: 1.5rem; }
.wcem-timeline h3 { font-size: 1rem; margin-bottom: .75rem; color: var(--wcem-neutral); text-transform: uppercase; letter-spacing: .05em; }
.wcem-timeline ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }

.wcem-step {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .65rem 1rem;
    border-left: 3px solid var(--wcem-border);
    margin-left: .75rem;
    position: relative;
}
.wcem-step::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wcem-border);
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
}

.wcem-step-done   { opacity: .55; }
.wcem-step-done::before   { background: var(--wcem-success); }
.wcem-step-active { font-weight: 700; }
.wcem-step-active::before { background: var(--wcem-primary); box-shadow: 0 0 0 3px rgba(6,47,93,.2); }
.wcem-step-cancelled::before { background: var(--wcem-danger); }

.wcem-step-icon  { font-size: 1.1rem; flex-shrink: 0; }
.wcem-step-label { }
.wcem-step-desc  { display: block; font-size: .8125rem; color: var(--wcem-neutral); font-weight: 400; margin-top: .15rem; }

/* Cancel button */
.wcem-cancel-form { margin-top: 1rem; }
.wcem-btn-cancel {
    color: var(--wcem-danger) !important;
    border-color: var(--wcem-danger) !important;
    background: transparent !important;
    font-size: .875rem;
}
.wcem-btn-cancel:hover { background: #ffebee !important; }

/* Responsive */
@media (max-width: 600px) {
    .wcem-submit { flex-direction: column; align-items: stretch; }
    .wcem-info-table th { width: 45%; }
}