/*
 * Elatum Shared Frontend CSS
 * Tokens, base card, shared components.
 * Scoped under .amel-wrap — always loaded when any Elatum shortcode is present.
 * Accent colour (#c4a75d) used ONLY on: key labels, badges, focus states, hover states.
 * All surfaces use dark glass tokens matching Vitreous dark theme.
 */

.amel-wrap {
    --amel-accent:          #c4a75d;
    --amel-accent-muted:    rgba(196, 167, 93, 0.55);
    --amel-accent-border:   rgba(196, 167, 93, 0.18);
    --amel-accent-glow:     rgba(196, 167, 93, 0.08);
    --amel-glass:           rgba(0, 0, 0, 0.06);
    --amel-glass-hover:     rgba(0, 0, 0, 0.10);
    --amel-border:          rgba(0, 0, 0, 0.10);
    --amel-shadow:          0 4px 24px rgba(0, 0, 0, 0.35);
    --amel-text:            #e8e8e8;
    --amel-text-muted:      rgba(232, 232, 232, 0.55);
    --amel-radius:          12px;
    --amel-radius-sm:       6px;
    --amel-font:            'Asap', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --amel-file-icon-size:  16px;
    --amel-btn-text-color:  #0f172a;
    width:                  100%;
    box-sizing:             border-box;
    font-family:            var(--amel-font);
    font-size:              12px;
}

/* ── Base card ───────────────────────────────────────────────────────────── */
.amel-card {
    display:       flex;
    align-items:   flex-start;
    gap:           16px;
    background:    var(--amel-glass);
    border:        1px solid var(--amel-border);
    border-radius: var(--amel-radius);
    padding:       16px 18px;
    box-shadow:    var(--amel-shadow);
    box-sizing:    border-box;
    width:         100%;
    transition:    background 0.2s, box-shadow 0.2s;
}
.amel-card:hover {
    background: var(--amel-glass-hover);
    box-shadow: var(--amel-shadow);
}

/* ── Card icon ───────────────────────────────────────────────────────────── */
.amel-card-icon {
    flex-shrink:     0;
    width:           48px;
    height:          48px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.3);
    border:          1px solid var(--amel-border);
    border-radius:   var(--amel-radius-sm);
}
.amel-card-icon img {
    width:      32px;
    height:     32px;
    display:    block;
}
.amel-card-icon iconify-icon {
    color:      var(--amel-accent);
    width:      32px;
    height:     32px;
    display:    block;
    font-size:  32px;
}
/* Inline SVG card icons — shown only in Gutenberg REST preview context. */
.amel-card-icon svg {
    color:   var(--amel-accent);
    width:   32px;
    height:  32px;
    display: block;
}
.amel-card-icon img.amel-custom-icon {
    filter:      none;
    width:       36px;
    height:      36px;
    object-fit:  contain;
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.amel-card-body {
    flex:        1;
    min-width:   0;
    display:     flex;
    flex-direction: column;
    gap:         8px;
}
.amel-card-head {
    display:    flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.amel-card-title {
    font-size:     17px;
    font-weight:   600;
    color:         var(--amel-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
    transition:    color 0.2s;
}
.amel-card:hover .amel-card-title { color: var(--amel-accent); }

/* ── Badges ──────────────────────────────────────────────────────────────── */
.amel-card-badges {
    display:    flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
    flex-shrink: 0;
}
.amel-badge {
    display:        inline-block;
    padding:        2px 7px;
    border-radius:  4px;
    font-size:      10px;
    font-weight:    600;
    white-space:    nowrap;
    letter-spacing: 0.3px;
}
.amel-badge--ver {
    background: var(--amel-accent-glow);
    color:      var(--amel-accent);
    border:     1px solid var(--amel-accent-border);
}
.amel-badge--cat {
    background: rgba(148, 163, 184, 0.08);
    color:      rgba(148, 163, 184, 0.8);
    border:     1px solid rgba(148, 163, 184, 0.15);
}

/* ── Description ─────────────────────────────────────────────────────────── */
.amel-card-desc {
    font-size:   12px;
    color:       var(--amel-text-muted);
    line-height: 1.6;
}

/* ── Release notes ───────────────────────────────────────────────────────── */
.amel-card-notes {
    background:    var(--amel-glass);
    border:        1px solid var(--amel-border);
    border-radius: var(--amel-radius-sm);
    padding:       10px 14px;
}
.amel-notes-label {
    display:        block;
    font-size:      10px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color:          var(--amel-accent-muted);
    margin-bottom:  6px;
}
.amel-notes-body {
    font-size:   12px;
    color:       var(--amel-text-muted);
    line-height: 1.65;
}

/* ── Meta row ────────────────────────────────────────────────────────────── */
.amel-card-meta {
    display:    flex;
    align-items: center;
    gap:         6px;
    flex-wrap:   wrap;
}
.amel-meta-pill {
    display:        inline-block;
    padding:        2px 8px;
    background:     var(--amel-glass);
    border:         1px solid var(--amel-border);
    border-radius:  4px;
    font-size:      10px;
    font-weight:    600;
    color:          var(--amel-text-muted);
    white-space:    nowrap;
    letter-spacing: 0.3px;
}

/* ── Ver icon in meta row ────────────────────────────────────────────────── */
.amel-ver-icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           var(--amel-file-icon-size);
    height:          var(--amel-file-icon-size);
}
.amel-ver-icon iconify-icon {
    color:     var(--amel-accent);
    width:     var(--amel-file-icon-size);
    height:    var(--amel-file-icon-size);
    display:   block;
    font-size: var(--amel-file-icon-size);
}

/* ── Chevron ─────────────────────────────────────────────────────────────── */
.amel-acc-chevron {
    display:      inline-block;
    width:        8px;
    height:       8px;
    flex-shrink:  0;
    border-right: 1.5px solid var(--amel-text-muted);
    border-bottom: 1.5px solid var(--amel-text-muted);
    transform:    rotate(45deg);
    transition:   transform 0.25s;
    margin-bottom: 2px;
}
.amel-vb-toggle[aria-expanded="true"] .amel-acc-chevron,
.amel-ver-acc-toggle[aria-expanded="true"] .amel-acc-chevron,
.amel-variant-notes-toggle[aria-expanded="true"] .amel-acc-chevron {
    transform:    rotate(-135deg);
    margin-bottom: -2px;
}

/* ── Markdown output ─────────────────────────────────────────────────────── */
.amel-card-desc .amel-md-p,
.amel-notes-body .amel-md-p { margin: 0 0 8px; line-height: 1.6; }
.amel-card-desc .amel-md-p:last-child,
.amel-notes-body .amel-md-p:last-child { margin-bottom: 0; }
.amel-card-desc .amel-md-list,
.amel-notes-body .amel-md-list { margin: 4px 0 8px 16px; padding: 0; list-style: disc; }
.amel-card-desc .amel-md-list li,
.amel-notes-body .amel-md-list li { line-height: 1.6; padding: 1px 0; }
.amel-card-desc .amel-md-code,
.amel-notes-body .amel-md-code {
    background:    var(--amel-glass);
    border:        1px solid var(--amel-border);
    border-radius: 3px;
    padding:       1px 5px;
    font-size:     11px;
    font-family:   'Courier New', monospace;
    color:         var(--amel-accent);
}
.amel-card-desc a,
.amel-notes-body a { color: var(--amel-accent); text-decoration: underline; text-underline-offset: 2px; }
.amel-card-desc a:hover,
.amel-notes-body a:hover { opacity: 0.8; }

/* ── Search ──────────────────────────────────────────────────────────────── */
.amel-search-wrap {
    position:      relative;
    margin-bottom: 12px;
}
.amel-wrap .amel-search-input {
    width:         100%;
    box-sizing:    border-box;
    background:    var(--amel-glass);
    border:        1px solid var(--amel-border);
    border-radius: var(--amel-radius-sm);
    color:         var(--amel-text);
    font-family:   var(--amel-font);
    font-size:     13px;
    padding:       10px 38px 10px 14px;
    outline:       none;
    transition:    border-color 0.2s;
}
.amel-wrap .amel-search-input::placeholder { color: var(--amel-text-muted); opacity: 0.6; }
.amel-wrap .amel-search-input:focus { border-color: var(--amel-accent); }
.amel-search-icon {
    position:       absolute;
    right:          12px;
    top:            50%;
    transform:      translateY(-50%);
    color:          var(--amel-text-muted);
    pointer-events: none;
    display:        flex;
    align-items:    center;
}
.amel-search-icon img {
    width:   16px;
    height:  16px;
    display: block;
    filter:  brightness(0) saturate(100%) invert(70%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(80%);
}
.amel-search-clear-wrap {
    display:        flex;
    justify-content: flex-end;
    margin-top:     4px;
}
.amel-search-clear {
    font-size:      10px;
    color:          var(--amel-text-muted);
    text-decoration: none;
    transition:     color 0.2s;
    background:     none;
    border:         none;
    padding:        0;
    cursor:         pointer;
    font-family:    var(--amel-font);
}
.amel-search-clear:hover { color: var(--amel-accent); }
.amel-results-count {
    font-size:     11px;
    color:         var(--amel-text-muted);
    margin-bottom: 10px;
    font-style:    italic;
}
/* Wrapper for results count + clear button — toggled by JS */
.amel-search-meta {
    margin-bottom: 4px;
}
/* Wrapper injected around each list card for client-side pagination */
.amel-list-item-wrap { display: block; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.amel-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin-top:      16px;
    flex-wrap:       wrap;
}
.amel-wrap .amel-page-btn {
    background:    var(--amel-glass);
    border:        1px solid var(--amel-border);
    border-radius: var(--amel-radius-sm);
    color:         var(--amel-text-muted);
    cursor:        pointer;
    font-size:     12px;
    min-width:     34px;
    height:        34px;
    padding:       0 8px;
    text-decoration: none;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    transition:    background 0.2s, color 0.2s, border-color 0.2s;
    white-space:   nowrap;
}
.amel-wrap .amel-page-btn:hover:not(.amel-page-btn--disabled) {
    border-color:    var(--amel-accent);
    color:           var(--amel-accent);
    text-decoration: none;
}
.amel-wrap .amel-page-btn--active {
    background:      var(--amel-accent);
    border-color:    var(--amel-accent);
    color:           #0f0f0f;
    font-weight:     600;
    text-decoration: none;
}
.amel-wrap .amel-page-btn--disabled {
    opacity:        0.3;
    cursor:         not-allowed;
    pointer-events: none;
}

/* ── Spinner overlay ─────────────────────────────────────────────────────── */
.amel-paginated-wrap { position: relative; }
.amel-spinner-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, 0.35);
    border-radius:   var(--amel-radius);
    z-index:         10;
}
.amel-spinner-overlay[hidden] { display: none; }
.amel-spinner-overlay img {
    width:  48px;
    height: 48px;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.amel-no-files {
    color:      var(--amel-text-muted);
    font-style: italic;
    font-size:  12px;
    padding:    24px 0;
    text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .amel-card       { flex-wrap: wrap; }
    .amel-card-icon  { display: none; }
    .amel-card-action { width: 100%; padding-top: 0; }
    .amel-dl-btn     { width: 100%; justify-content: center; }
}