/* Shared list-card + app-store + ops-console styling for the Portal's
   browse surfaces (context definitions, workflows, action packs, action
   center). All colors via --theme-* tokens so tenant branding flows through.
   Goal: sexy, functional, inviting, professional. */

/* ── Toolbar (search + count) ─────────────────────────────────────────── */
.plist-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.plist-search {
    position: relative;
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.plist-search .bi {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-text-secondary);
    pointer-events: none;
}

.plist-search input {
    padding-left: 2.1rem;
}

.plist-count {
    font-size: var(--theme-font-size-sm);
    color: var(--theme-text-secondary);
    white-space: nowrap;
}

.plist-spacer { flex: 1; }

/* ── Card grid ────────────────────────────────────────────────────────── */
.pcard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}

.pcard {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius, 0.6rem);
    background: var(--theme-surface, #fff);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}

.pcard:hover {
    box-shadow: 0 6px 20px color-mix(in oklch, var(--theme-primary) 14%, transparent);
    border-color: color-mix(in oklch, var(--theme-primary) 45%, var(--theme-border));
    transform: translateY(-2px);
}

/* A thin accent rail at the top of each card; color set inline per card. */
.pcard-accent {
    height: 4px;
    background: var(--theme-primary);
}

.pcard-head {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 0.9rem 0.4rem;
}

.pcard-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.55rem;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    background: color-mix(in oklch, var(--theme-primary) 12%, transparent);
    color: var(--theme-primary);
}

.pcard-headtext { min-width: 0; flex: 1; }

.pcard-title {
    font-weight: 650;
    color: var(--theme-text-emphasis);
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.2;
    word-break: break-word;
}

.pcard-sub {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.72rem;
    color: var(--theme-text-secondary);
    word-break: break-all;
}

.pcard-body {
    padding: 0.1rem 0.9rem 0.6rem;
    flex: 1;
}

.pcard-desc {
    font-size: 0.83rem;
    color: var(--theme-text-secondary);
    margin: 0 0 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pcard-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    font-size: 0.74rem;
    color: var(--theme-text-secondary);
}

.pcard-meta .bi { margin-right: 0.2rem; }

.pcard-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.45rem;
    border-radius: 0.35rem;
    background: color-mix(in oklch, var(--theme-accent, #6c757d) 13%, transparent);
    color: var(--theme-text-emphasis);
    font-size: 0.72rem;
}

.pcard-foot {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--theme-border);
    background: color-mix(in oklch, var(--theme-accent, #6c757d) 4%, transparent);
}

.pcard-foot .pcard-spacer { flex: 1; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.pcard-empty {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed var(--theme-border);
    border-radius: var(--theme-radius, 0.6rem);
    background: color-mix(in oklch, var(--theme-primary) 3%, transparent);
}

.pcard-empty-icon {
    font-size: 2.4rem;
    color: color-mix(in oklch, var(--theme-primary) 55%, var(--theme-text-secondary));
    margin-bottom: 0.5rem;
}

.pcard-empty-title {
    font-weight: 650;
    color: var(--theme-text-emphasis);
    margin-bottom: 0.25rem;
}

.pcard-empty-body {
    font-size: 0.88rem;
    color: var(--theme-text-secondary);
    max-width: 32rem;
    margin: 0 auto 1rem;
}

/* ── App-store (action packs) ─────────────────────────────────────────── */
.appstore-section-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--theme-font-size-sm);
    font-weight: 650;
    color: var(--theme-text-emphasis);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 1.5rem 0 0.75rem;
}

.appstore-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.74rem;
    font-weight: 600;
}

.appstore-status.on { color: var(--theme-success, #198754); }
.appstore-status.off { color: var(--theme-text-secondary); }

.appstore-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

/* The on/off switch sits in the card foot; make it read as the primary act. */
.appstore-switch .form-check-input {
    width: 2.4rem;
    height: 1.3rem;
    cursor: pointer;
}

/* Disabled packs read muted until switched on. */
.pcard-muted { opacity: 0.72; }
.pcard-muted:hover { opacity: 1; }

/* ── Ops console (action center) ──────────────────────────────────────── */
.ops-hero {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius, 0.6rem);
    background: linear-gradient(180deg,
        color-mix(in oklch, var(--theme-primary) 7%, var(--theme-surface, #fff)),
        var(--theme-surface, #fff));
    padding: 1rem 1.1rem;
    margin-bottom: 1.5rem;
}

.ops-runlist {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius, 0.6rem);
    overflow: hidden;
}

.ops-runrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border-top: 1px solid var(--theme-border);
    cursor: pointer;
    transition: background .12s ease;
}

.ops-runrow:first-child { border-top: 0; }
.ops-runrow:hover { background: color-mix(in oklch, var(--theme-primary) 6%, transparent); }

.ops-run-main { flex: 1; min-width: 0; }
.ops-run-name { font-weight: 600; color: var(--theme-text-emphasis); }
.ops-run-sub { font-size: 0.76rem; color: var(--theme-text-secondary); }
.ops-run-time { font-size: 0.76rem; color: var(--theme-text-secondary); white-space: nowrap; }

/* status pill - colors come from severity helper classes already in use */
.ops-pill {
    font-size: 0.72rem;
    padding: 0.12rem 0.5rem;
    border-radius: 1rem;
    font-weight: 600;
}