/* ==========================================================
   Executor Manager – Frontend Styles v2.0
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── CSS Custom Properties ─────────────────────────────── */
.em-wrap {
    --em-bg:          #0b1220;
    --em-card-bg:     #111928;
    --em-card-hover:  #172033;
    --em-border:      rgba(255,255,255,.07);
    --em-border-h:    rgba(59,130,246,.4);
    --em-text:        #e2e8f0;
    --em-muted:       #7a8faa;
    --em-accent:      #3b82f6;
    --em-success:     #22c55e;
    --em-danger:      #ef4444;
    --em-warning:     #eab308;
    --em-info:        #3b82f6;
    --em-purple:      #8b5cf6;
    --em-transition:  .22s cubic-bezier(.4,0,.2,1);
    --em-shadow:      0 4px 24px rgba(0,0,0,.45);
    --em-shadow-h:    0 12px 40px rgba(0,0,0,.6), 0 0 0 1px var(--em-border-h);
    --em-cols-d:      3;
    --em-cols-t:      2;
    --em-cols-m:      1;
    --em-radius:      14px;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--em-text);
    box-sizing: border-box;
}

.em-wrap * { box-sizing: border-box; }

/* Dark mode wrapper */
.em-wrap--dark {
    background: var(--em-bg);
    padding: 32px;
    border-radius: calc(var(--em-radius) + 4px);
}

/* ── Toolbar ───────────────────────────────────────────── */
.em-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

/* Search */
.em-search-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.em-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
    pointer-events: none;
}
.em-search {
    width: 100%;
    background: #171c28;
    border: 1px solid #2a3143;
    border-radius: 20px;
    padding: 10px 14px 10px 42px;
    color: #e2e8f0;
    font-size: 14px;
    font-family: inherit;
    transition: all var(--em-transition);
}
.em-search:focus {
    outline: none;
    background: #1e2433;
    border-color: rgba(147,197,253,.3);
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.em-search::placeholder { color: #64748b; }

/* Filters */
.em-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.em-filter-btn {
    padding: 8px 18px;
    border-radius: 20px;
    border: 1px solid #2a3143;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--em-transition);
}
.em-filter-btn:hover {
    background: rgba(255,255,255,.03);
}
.em-filter-btn.is-active[data-filter="all"] {
    border-color: rgba(255,255,255,.2);
    color: #e2e8f0;
}
.em-filter-btn--working {
    border-color: rgba(34,197,94,.4);
    color: #4ade80;
}
.em-filter-btn.is-active.em-filter-btn--working {
    border-color: #4ade80;
    box-shadow: 0 0 10px rgba(74,222,128,.15);
}
.em-filter-btn--outdated {
    border-color: rgba(234,179,8,.4);
    color: #facc15;
}
.em-filter-btn.is-active.em-filter-btn--outdated {
    border-color: #facc15;
    box-shadow: 0 0 10px rgba(250,204,21,.15);
}
.em-filter-btn--down {
    border-color: rgba(239,68,68,.4);
    color: #f87171;
}
.em-filter-btn.is-active.em-filter-btn--down {
    border-color: #f87171;
    box-shadow: 0 0 10px rgba(248,113,113,.15);
}

/* Sort */
.em-sort {
    background: transparent;
    border: 1px solid #2a3143;
    border-radius: 20px;
    padding: 8px 14px;
    color: #94a3b8;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--em-transition);
}
.em-sort:focus { outline: none; border-color: var(--em-accent); }
.em-sort option { background: #111928; }

/* ── Card Grid ─────────────────────────────────────────── */
.em-grid {
    display: grid;
    grid-template-columns: repeat(var(--em-cols-d), 1fr);
    gap: 22px;
}

@media (max-width: 1024px) {
    .em-grid { grid-template-columns: repeat(var(--em-cols-t), 1fr); }
}
@media (max-width: 640px) {
    .em-grid { grid-template-columns: repeat(var(--em-cols-m), 1fr); gap: 14px; }
    .em-wrap--dark { padding: 16px; }
    .em-toolbar { flex-direction: column; align-items: stretch; }
    .em-search-wrap { min-width: unset; }
}

/* ── Card ──────────────────────────────────────────────── */
.em-card {
    background: var(--em-card-bg);
    border: 1px solid var(--em-border);
    border-radius: var(--em-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition:
        transform var(--em-transition),
        box-shadow var(--em-transition),
        background var(--em-transition),
        border-color var(--em-transition);
    position: relative;
}

.em-card:hover {
    transform: translateY(-5px);
    background: var(--em-card-hover);
    border-color: var(--em-border-h);
    box-shadow: var(--em-shadow-h);
}

/* Card variants */
.em-card--compact .em-card__media { height: 120px; }
.em-card--large   .em-card__media { height: 220px; }

/* Glow line on hover */
.em-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--em-radius);
    background: linear-gradient(135deg, rgba(59,130,246,.07) 0%, transparent 60%);
    opacity: 0;
    transition: opacity var(--em-transition);
    pointer-events: none;
    z-index: 0;
}
.em-card:hover::before { opacity: 1; }

.em-card__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    color: inherit;
    position: relative;
    z-index: 1;
}

/* ── Card Media ────────────────────────────────────────── */
.em-card__media {
    position: relative;
    height: 170px;
    background: #0d1526;
    overflow: hidden;
    border-bottom: 1px solid var(--em-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.em-card:hover .em-card__img { transform: scale(1.06); }

.em-card__img--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0d1a33 0%, #1a2e55 100%);
    color: rgba(59,130,246,.3);
}

/* Overlay badges */
.em-badge--overlay-tl,
.em-badge--overlay-tr {
    position: absolute;
    top: 10px;
    z-index: 2;
}
.em-badge--overlay-tl { left: 10px; }
.em-badge--overlay-tr { right: 10px; }

/* ── Badges ────────────────────────────────────────────── */
.em-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    line-height: 1.6;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.em-badge--working     { background: transparent;  color: #22c55e; border: 1px solid #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.2), inset 0 0 10px rgba(34,197,94,0.1); }
.em-badge--outdated    { background: transparent;  color: #eab308; border: 1px solid #eab308; box-shadow: 0 0 10px rgba(234,179,8,0.2), inset 0 0 10px rgba(234,179,8,0.1); }
.em-badge--down        { background: transparent;  color: #ef4444; border: 1px solid #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.2), inset 0 0 10px rgba(239,68,68,0.1); }
.em-badge--discontinued{ background: transparent;  color: #9ca3af; border: 1px solid rgba(156,163,175,0.4); }
.em-badge--unknown     { background: transparent;  color: #94a3b8; border: 1px solid rgba(148,163,184,.4); }

/* ── Card Body ─────────────────────────────────────────── */
.em-card__body {
    padding: 16px 18px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
}

.em-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--em-text);
    line-height: 1.5;
    letter-spacing: 0;
}

.em-card__excerpt {
    margin: 0;
    font-size: 12.5px;
    color: var(--em-muted);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Meta row */
.em-card__meta {
    margin: 0 0 14px 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.em-card__badge-meta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 10.5px;
    font-weight: 500;
    text-transform: none;
    background: #171c28;
    color: #94a3b8;
    border: 1px solid rgba(255,255,255,.05);
}
.em-calendar-icon {
    width: 12px;
    height: 12px;
    color: #64748b;
}
.em-card__badge-meta .em-meta-lbl {
    color: #64748b;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.em-card__badge-meta .em-badge-highlight {
    color: #cbd5e1;
}

/* Device icons */
.em-card__devices--split {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
}
.em-device-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 45%;
}
.em-device-icons {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}
.em-device-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #bfdbfe;
    filter: drop-shadow(0 0 6px rgba(147,197,253,.3));
    transition: color var(--em-transition), filter var(--em-transition);
}
.em-device-icon svg {
    width: 100%;
    height: 100%;
}
.em-device-icon:hover {
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(147,197,253,.6));
}
.em-device-label {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 9px;
    color: #475569;
    letter-spacing: 0.8px;
}
.em-device-label::before,
.em-device-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.05);
}
.em-device-label span {
    padding: 0 8px;
}

/* ── Card Footer / Button ──────────────────────────────── */
.em-card__footer {
    padding: 0 18px 24px;
    position: relative;
    z-index: 1;
}

.em-card__btn-wrap {
    margin-top: 16px;
    margin-bottom: 20px;
}

.em-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 10px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    letter-spacing: .5px;
    cursor: pointer;
    transition: all var(--em-transition);
    border: none;
}

.em-btn--dark {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: #e2e8f0;
}
.em-btn--dark:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
    color: #fff;
    text-decoration: none;
}

/* ── Load More ─────────────────────────────────────────── */
.em-load-more-wrap {
    text-align: center;
    padding: 28px 0 8px;
}

.em-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 40px;
    background: transparent;
    color: var(--em-text);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: .3px;
    transition: all var(--em-transition);
}
.em-load-more-btn:hover:not(:disabled) {
    background: rgba(59,130,246,.1);
    border-color: rgba(59,130,246,.5);
    color: #60a5fa;
    box-shadow: 0 0 24px rgba(59,130,246,.18);
}
.em-load-more-btn:disabled {
    opacity: .45;
    cursor: not-allowed;
}
.em-load-more-btn.is-loading .em-load-more-btn__text { display: none; }
.em-load-more-btn.is-loading .em-spinner              { display: inline-block; }

/* ── Spinner ───────────────────────────────────────────── */
.em-spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255,255,255,.2);
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: em-spin .65s linear infinite;
}
@keyframes em-spin { to { transform: rotate(360deg); } }

/* ── Search result empty ───────────────────────────────── */
.em-no-posts {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--em-muted);
    font-size: 14px;
    padding: 48px 0;
    font-style: italic;
}

/* ── Card hide/show for client-side filter ─────────────── */
.em-card.is-hidden {
    display: none;
}

/* ── Fade-in animation for AJAX cards ─────────────────── */
@keyframes em-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.em-card.em-fadein {
    animation: em-fadein .35s ease forwards;
}