/**
 * Elaa Dashboard / My Tributes Styles
 *
 * Professional, responsive styling for the [elaa_dashboard] shortcode.
 *
 * @package HelloElementorChild
 */

/* Root tokens (fallback if form CSS not loaded on the page) */
:root {
    --elaa-primary: #026750;
    --elaa-primary-hover: #015240;
    --elaa-bg: #ffffff;
    --elaa-bg-alt: #f8f9fa;
    --elaa-border: #e0e4e8;
    --elaa-text: #2d3436;
    --elaa-text-muted: #636e72;
    --elaa-radius-sm: 4px;
    --elaa-radius: 8px;
    --elaa-radius-lg: 12px;
    --elaa-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   Dashboard Wrapper
   ========================================================================== */

/* .elaa-dashboard {
    max-width: 960px;
    margin: 50px auto;
    padding: 24px;
    background: var(--elaa-bg);
    border-radius: var(--elaa-radius-lg);
    box-shadow: var(--elaa-shadow-sm);
} */

.elaa-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--elaa-border);
    padding-bottom: 12px;
}

.elaa-dashboard-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--elaa-primary);
}

.elaa-dashboard-footer {
    margin-top: 24px;
    text-align: right;
}

/* ==========================================================================
   Notices & Empty State
   ========================================================================== */

.elaa-notice {
    margin: 16px 0;
    padding: 18px 20px;
    border-radius: var(--elaa-radius);
    font-size: 0.9375rem;
}

.elaa-empty-state {
    margin: 24px 0;
    text-align: center;
    padding: 32px 24px;
    background: var(--elaa-bg-alt);
    border-radius: var(--elaa-radius-lg);
}

.elaa-empty-state p {
    margin-bottom: 16px;
    color: var(--elaa-text-muted);
}

/* ==========================================================================
   Tributes List – desktop "table" layout
   ========================================================================== */

.elaa-tributes-list {
    margin-top: 12px;
    border: 1px solid var(--elaa-border);
    border-radius: var(--elaa-radius);
    overflow: hidden;
}

/* Header row using the existing card structure */
.elaa-tributes-list::before {
    content: attr(data-header);
    display: block;
}

/* Use a grid layout for each tribute card */
.elaa-tribute-card {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--elaa-bg);
    border-bottom: 1px solid var(--elaa-border);
}

.elaa-tribute-card:last-child {
    border-bottom: none;
}

.elaa-tribute-card:nth-child(odd) {
    background: #fbfcfd;
}

.elaa-tribute-info h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--elaa-text);
}

.elaa-tribute-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.elaa-tribute-status.published {
    background: rgba(46, 204, 113, 0.1);
    color: #27ae60;
}

.elaa-tribute-status.draft {
    background: rgba(241, 196, 15, 0.12);
    color: #c27c0e;
}

.elaa-tribute-meta {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    font-size: 0.85rem;
    color: var(--elaa-text-muted);
}

.elaa-tribute-meta span {
    white-space: nowrap;
}

.elaa-tribute-actions {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.elaa-tribute-actions .elaa-button {
    font-size: 0.875rem;
    padding: 8px 14px;
}

/* ==========================================================================
   Buttons (fallback if form CSS not present)
   ========================================================================== */

.elaa-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--elaa-radius-sm);
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.elaa-button-primary {
    background: linear-gradient(135deg, var(--elaa-primary), var(--elaa-primary-hover));
    color: #fff;
}

.elaa-button-primary:hover {
    transform: translateY(-1px);
}

.elaa-button-secondary {
    background: #ffffff;
    color: var(--elaa-text);
    border-color: var(--elaa-border);
}
button.elaa-button.elaa-audio-add-btn{
    border: 1px solid var(--elaa-primary) !important;
}
button.elaa-button.elaa-audio-add-btn:hover {
    background: var(--elaa-primary) !important;
    color: white !important;
}
button.elaa-button.elaa-audio-add-btn:focus {
    background: var(--elaa-primary) !important;
    color: white !important;
}
.elaa-button-secondary:hover {
    background: var(--elaa-primary) !important;
    color: white !important;
}
.elaa-form-header-actions a[href*="my-tribute"] {
    color: var(--elaa-primary) !important;
}

/* My Tribute page spacing (page ID: 3898). */
body.page-id-3898 .site-main {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

body.page-id-3898 .site-header {
    background-color: #00674F !important;
}
.elaa-button-danger {
    background: #fff5f5;
    color: #b42318;
    border-color: #fda29b;
}

.elaa-button-danger:hover {
    background: #ffe4e2;
    border-color: #f97066;
}
.elaa-dashboard-header .elaa-tier-badge {
    display: none;
}
/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
    .elaa-dashboard {
        padding: 20px 16px;
    }

    .elaa-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .elaa-tribute-card {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .elaa-tribute-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .elaa-tribute-meta {
        margin-top: 10px;
    }

    .elaa-tribute-actions .elaa-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .elaa-dashboard {
        padding: 16px 12px;
    }

    .elaa-dashboard-header h2 {
        font-size: 1.25rem;
    }
}